/* site/search/search.css: the /search page (app.js). Layout lives in the JS (whole
   squares); this file only styles what goes inside unit faces and the text on the grid.
   Lexend everywhere; the mono stack only for numbers and tags (counts, part numbers). */

.ms.sm { font-size: calc(var(--S) * .5); }
.ms.lg { font-size: calc(var(--S) * 1.1); }

/* faces laid out as a row (the same helpers as /sort) */
.fr > .body > .face { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--S) * .25);
  padding: 0 calc(var(--S) * .35); }
.fr.mid > .body > .face { justify-content: center; }
.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.num { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* the field: a search icon, then the input */
.s-field > .body > .face { display: flex; align-items: center; }
.s-field .s-field-ic { margin-left: calc(var(--S) * .35); font-size: calc(var(--S) * .7); color: var(--muted); }
.ubtn.ufield.s-field input { flex: 1; min-width: 0; padding-left: calc(var(--S) * .25); font-size: calc(var(--S) * .55); }
.ubtn.ufield.s-field.big input { font-size: calc(var(--S) * .75); font-weight: 600; }
.s-field.big .s-field-ic { font-size: calc(var(--S) * 1); margin-left: calc(var(--S) * .5); }
.s-adv.pressed > .body > .face { background: var(--yellow); color: var(--on-yellow); }

/* the status line: what the search understood */
.s-status { margin: 0; font-size: calc(var(--S) * .45); line-height: 1.55; }
.s-status .num { font-weight: 700; }
.s-status b { font-weight: 700; }
.s-dim { color: var(--muted); font-weight: 400; }
.s-dot { color: var(--muted); }
.s-warn { font-weight: 600; }

/* small labels on the grid (Try, Order, Comes in...) */
.s-lbl { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); line-height: var(--S); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-x { margin: 0; text-align: center; line-height: var(--S); font-weight: 600; }

/* chips: flush, one square tall; picked = yellow face */
.s-chip > .body > .face { gap: calc(var(--S) * .18); padding: 0 calc(var(--S) * .25); }
.s-chip.pressed > .body > .face { background: var(--yellow); color: var(--on-yellow); }
.s-ct-name { overflow: hidden; text-overflow: ellipsis; }
.s-ct { font-family: var(--font-mono); font-size: .85em; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-ct:empty { display: none; }
.s-chip.pressed .s-ct { color: var(--on-yellow); }
.s-sw { display: inline-block; flex: none; width: calc(var(--S) * .38); height: calc(var(--S) * .38); border: 1.5px solid var(--ink); background: var(--sand); }
.s-sw[data-fam="trans"] { background-image: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, .8) 50%, transparent 55%); }
.ubtn.ufield.s-num input { padding: 0; text-align: center; font: 600 calc(var(--S) * .42) var(--font-mono); }
/* the size operator (= > < <>): a data sign, so the mono face */
.s-op .s-op-sign { font-family: var(--font-mono); font-weight: 700; font-size: calc(var(--S) * .46); letter-spacing: -.04em; }
.ufield.s-num input::placeholder { font-family: var(--font-body); font-weight: 400; font-size: calc(var(--S) * .36); }

/* group headers and "show more" */
.s-ghead > .body > .face { font-weight: 700; }
.s-ghead .num { font-size: .9em; color: var(--muted); font-weight: 600; }
.s-more > .body > .face { font-weight: 600; }
.s-empty { margin: 0; font-size: calc(var(--S) * .5); line-height: 1.5; }

/* ── a result tile: the render on the tile's own ground, a caption strip under a rule
   (the label maker's piece picker, the sorter's T15) ── */
.stile > .body > .face { display: flex; flex-direction: column; align-items: stretch; padding: 0; white-space: normal; overflow: hidden; }
.ubtn .face img.st-img { position: static; flex: 1; min-height: 0; width: 100%; object-fit: contain; pointer-events: none;
  padding: calc(var(--S) / 5); box-sizing: border-box; }
/* M8 "No render yet": the icon and the words, and the request hook (not live yet) */
.st-none { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--ink) 9%, transparent) 7px 8px); }
.st-none .ms { color: var(--ink); }
.st-none .lbl { font-size: 9.5px; }
.st-req { margin-top: 2px; padding: 1px 5px; border: 1.5px dashed var(--muted); background: var(--panel);
  font: 600 9.5px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: not-allowed; }
.st-cap { flex: none; border-top: var(--k) solid var(--ink); background: var(--panel); min-width: 0;
  height: calc(2 * var(--S) + var(--L) / 2 - var(--k) / 2);
  display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 calc(var(--S) / 5); }
[data-adv] .st-cap, .st-cap:has(.st-sw) { height: calc(3 * var(--S) + var(--L) / 2 - var(--k) / 2); }
.st-nm { font-size: calc(var(--S) * .36); line-height: 1.2; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; text-align: left; }
.st-meta { display: flex; align-items: center; gap: 5px; min-width: 0; }
.st-num { font: 600 10.5px/1.3 var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tag { font: 600 9px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--muted); padding: 0 3px; }
.st-sw { display: flex; align-items: center; gap: 2px; margin-top: 2px; min-height: 12px; }
.st-sw i { display: block; width: 11px; height: 11px; border: 1.5px solid var(--ink); flex: none; }
.st-sw i.t { background-image: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) !important; }
.st-sw b { font: 600 9.5px/1 var(--font-mono); color: var(--muted); margin-left: 2px; }

/* the no-JS fallback form (#copy, read before the module adopts it) */
#copy form { display: flex; gap: 8px; align-items: center; }