/* Search on the device — increment K (NEXT-PLAN §5 "K").
 *
 * No frame was drawn for Search; the owner's word of 2026-09-25 ("build the
 * entire application to the end") is to build it in the wireframe's visual
 * language, and he judges it from the screenshots. So: the day page's header
 * row (a serif title, a muted figure on the right), the compose box's green
 * edge for the box, the day chip strip's pills for the chips (a 44px target
 * with a smaller pill inside), the day's own card list for the results, and
 * the Planned strip's amber for an open pending item that has no card of its
 * own (a closed one is plain and muted, as the Pending frame's P4a draws it).
 *
 * Tokens only (tokens.css carries light AND dark). A matched word is lime —
 * the brand's tint colour — under charcoal text, both constants, so it reads
 * the same in either mode (charcoal on lime is 6.6:1).
 */

.search:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ------------------------------------------------------------------ header */

.search__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
}

.view__title.search__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.search__count {
  margin: 0;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------- box */

.search__form {
  margin: 0;
}

.search__box {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  /* 1rem, not less: a phone zooms the page into a smaller input on focus. */
  font-size: 1rem;
}

.search__box::placeholder {
  color: var(--ink-faint);
}

.search__box:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------- chips */

.search__row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-1);
  row-gap: 0;
}

/* The tap area is 44px each way: tall by the button's own min-height, wide
 * by its pill's words — which leaves "Set" a 36px box. A positioned ::after
 * draws the rest of its target, centred on it and out into the gaps beside it
 * (cards.css draws veil.js's button's 44px the same way). A min-width would
 * widen the box instead, and at 360px that wraps "Vehicle" onto a row of its
 * own (review of 2026-09-25). A chip already 44px wide draws nothing extra.
 * S: the target is drawn to 45px, a pixel over what it owes. With the pill's
 * words at 14px a chip's width is no longer a whole pixel, and a target of
 * exactly 44 came out a sixty-fourth short (43.98) — the layout's own grain. */
.search__chip {
  position: relative;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.search__chip::after {
  content: "";
  position: absolute;
  inset: 0 min(0px, calc((100% - var(--touch) - 1px) / 2));
}

.search__pill,
.search__face {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.search__face::after {
  content: " ▾";
}

/* S: on a phone the pills' words are 14px where they were 13, and the five
 * field chips — Customer · Set · PO number · Challan · Vehicle — must still
 * share one row at 360px (review of 2026-09-25). At 13px they filled the
 * 328px row to the pixel; at 14px they need 17px more, so each pill gives up
 * 2.5px of padding a side. "Set" would then be a 32px box, and its 44px
 * target would reach INTO the chips beside it (4px away), which answer first
 * — so the chip itself is never under 36px, its pill centred in it: 18px to
 * its edge and 4px of gap keep a tap 21px off its centre its own. It comes, in
 * Edge at 360, to 323.5 of the row's 328px. The desk's pills keep theirs. */
@media (max-width: 1099.98px) {
  .search__chip {
    min-width: 2.25rem;
  }

  .search__pill,
  .search__face {
    padding-inline: 0.34375rem;
  }
}

.search__chip[aria-pressed="true"] .search__pill,
.search__pick[data-set="true"] .search__face {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}

.search__chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 999px;
}

/* A filter: the pill reads the choice; the native select lies over it,
 * transparent, so a tap opens the phone's own picker and the pill is sized
 * to its words rather than to the longest option. */
.search__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: var(--touch);
  min-height: var(--touch);
  cursor: pointer;
}

.search__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  font-size: 1rem;
  cursor: pointer;
}

.search__pick:focus-within .search__face {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- status */

.search__status {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-size: var(--text-base);
}

/* ---------------------------------------------------------------- results */

.search__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.search__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search__date {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
}

.search mark.hit {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--ps-lime);
  color: var(--ps-charcoal);
}

.search .ref.ref--hit {
  background: var(--ps-lime);
  color: var(--ps-charcoal);
}

/* A pending item with no card of its own, while it is open: the Planned
 * strip's amber, the colour of work still to do. */
.search .entry[data-kind="item"][data-open="true"] {
  background: var(--tint-warn);
  border-color: transparent;
}

.search .entry[data-kind="item"][data-open="true"] .entry__title {
  color: var(--warn-ink);
  font-weight: 500;
}

/* veil.js's button on the amber card reads in the card's own orange ink:
 * cards.css's --accent green is 3.76:1 on the dark amber (review of
 * 2026-09-25); --warn-ink is 4.9:1 light and 7.0:1 dark. */
.search .entry[data-kind="item"][data-open="true"] .veil__show {
  color: var(--warn-ink);
}

/* Done or dropped, it is finished work (review of 2026-09-25): the plain
 * card, a muted 400-weight title led by ✓ or –, as the Pending frame draws
 * its closed rows (PROPOSED.html P4a) and cards.css a closed chip. A veil on
 * it keeps cards.css's green, which reads on the plain card. */
.search .entry[data-kind="item"][data-open="false"] .entry__title {
  color: var(--ink-muted);
  font-weight: 400;
}

.search__closed {
  display: inline-block;
  min-width: 1em;
  margin-inline-end: var(--space-1);
  color: var(--ink-muted);
  font-weight: 600;
  text-align: center;
}

.search .entry[data-kind="item"] .entry__detail,
.search .entry[data-kind="po"] .entry__detail {
  color: var(--ink-muted);
}

.search__more {
  align-self: center;
  min-height: var(--touch);
}