/* Site: the search sheet (dialog#search) and the results page (docs/PHASE-3.md 6.1, 4.5).
   Owned by the search build. Gallery Wall school: tokens from site.css (--field and the motion
   tokens from ui.css when present). No new colors, fonts or radii. */

.ss-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- the sheet: full width from the top on computers, full screen on phones ---------- */
#search{position:fixed;inset:0 0 auto;margin:0;width:100%;max-width:none;height:auto;max-height:min(86dvh,760px);padding:0;border:0;background:var(--ground);color:var(--ink);overflow:auto;overscroll-behavior:contain}
#search[open]{display:block}
@media (forced-colors:active){#search{border-bottom:1px solid CanvasText}}
.ss-in{padding:clamp(18px,2.6cqi,36px) var(--gut) clamp(28px,3.4cqi,48px);display:grid;gap:clamp(20px,2.6cqi,34px)}

/* The field: Cormorant 300, no box, one rule under it that turns ink on focus. */
.ss-bar,.sr-form{display:flex;align-items:center;gap:14px;min-width:0}
.ss-mag{flex:none;color:var(--muted)}
.ss-q,.sr-q{flex:1;min-width:0;font-family:var(--display);font-weight:300;font-size:clamp(30px,3.6cqi,48px);line-height:1.2;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--field,var(--muted));border-radius:0;padding:6px 0 10px;-webkit-appearance:none;appearance:none}
.ss-q::placeholder,.sr-q::placeholder{color:var(--muted);opacity:1}
.ss-q::-webkit-search-cancel-button,.sr-q::-webkit-search-cancel-button{display:none}
.site .ss-q:focus,.site .sr-q:focus{outline:none;border-bottom-color:var(--ink)}
.ss-x{flex:none;min-width:44px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--ink)}
.ss-x:hover{text-decoration:underline;text-underline-offset:.3em}

.ss-status{min-height:1.5em;font-size:14px;color:var(--muted)}
.ss-status:empty{display:none}

/* The empty sheet: recent searches, her suggestions, categories. */
.ss-idle{display:grid;gap:26px}
.ss-idle[hidden]{display:none}
.ss-sec{display:grid;gap:12px;justify-items:start}
.ss-sec[hidden]{display:none}
.ss-sec-h{display:flex;align-items:baseline;gap:18px}
.ss-clear{min-height:44px;background:none;border:0;padding:0 4px;margin:-12px -4px}
.ss-clear:hover{color:var(--ink)}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px}
.ss-chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:2px;font-size:15px;line-height:1.3}
.ss-chips a:hover{border-color:var(--muted)}

/* Suggestions: the shop as small cards on the left, everything else as rows on the right. */
.ss-list{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4cqi,72px);row-gap:22px;align-items:start}
.ss-list:empty{display:none}
.ss-list[aria-busy="true"]{opacity:.6}
.ss-g{display:grid;gap:10px;min-width:0;grid-column:2}
.ss-g-product{grid-column:1;grid-row:1 / span 4}
.ss-list:not(:has(.ss-g-product)) .ss-g{grid-column:1 / -1;max-width:720px}
.ss-os{display:grid;min-width:0}
.ss-o{display:grid;min-width:0;color:inherit}
.ss-o mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ss-o[aria-selected="true"]{outline:1px solid var(--ink);outline-offset:3px}
.ss-ph{display:block;overflow:hidden;background:var(--soft);aspect-ratio:4/5}
.ss-ph img{display:block;width:100%;height:100%;object-fit:cover}

.ss-g-product .ss-os{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ss-o-product{gap:6px;align-content:start}
.ss-o-product .ss-t{font-family:var(--display);font-size:20px;font-weight:400;line-height:1.15}
.ss-o-product .ss-r{font-size:14px;order:3}
.ss-o-product .ss-l{order:4;font-size:10.5px;letter-spacing:.2em}
.ss-o-product:hover .ss-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.ss-o.is-out .ss-r{color:var(--muted)}

.ss-g:not(.ss-g-product) .ss-os{gap:0}
.ss-o-project,.ss-o-note,.ss-o-page,.ss-o-term{grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center;padding:7px 0;min-height:48px}
.ss-o-page,.ss-o-term{grid-template-columns:minmax(0,1fr)}
.ss-o-project .ss-ph,.ss-o-note .ss-ph{width:48px;grid-row:1 / span 2}
.ss-o .ss-t{font-size:15.5px;line-height:1.35}
.ss-o-project .ss-l,.ss-o-note .ss-l,.ss-o-page .ss-l,.ss-o-term .ss-l{font-size:10.5px;letter-spacing:.2em}
.ss-o:not(.ss-o-product):hover .ss-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ss-o-all{grid-column:1 / -1;justify-self:start;padding:12px 0;min-height:44px;align-items:center;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid currentColor}
.ss-o-all .ss-t{font-size:inherit}
.ss-o-all:hover{color:var(--accent)}

@container site (max-width:760px){
  #search{height:100dvh;max-height:none}
  .ss-in{min-height:100%;align-content:start;padding-top:0;gap:18px}
  .ss-bar{position:sticky;top:0;z-index:1;background:var(--ground);padding-top:12px}
  .ss-q,.sr-q{font-size:24px}
  .ss-q::placeholder,.sr-q::placeholder{font-size:19px}
  /* room for the words and Close: the magnifier is decoration */
  .ss-mag{display:none}
  /* the same row height in the sheet and on the page, so the morph lines the words up */
  .sr-form{padding-top:12px}
  .ss-list{grid-template-columns:minmax(0,1fr)}
  .ss-g,.ss-g-product,.ss-list:not(:has(.ss-g-product)) .ss-g{grid-column:1;grid-row:auto}
  /* phones: the shop's cards become a row to swipe */
  .ss-g-product .ss-os{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .ss-o-product{scroll-snap-align:start}
}

/* Opening, closing and the scrim are ui.css's (.b-sheet). The morph closes the sheet at once, and
   the sheet's field row slides into the results field row without stretching the words. */
#search.is-instant,#search.is-instant::backdrop{transition:none}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(search-field){animation-duration:320ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  ::view-transition-old(search-field),::view-transition-new(search-field){inline-size:auto;block-size:100%;object-fit:none;object-position:left top;overflow:clip}
}

/* ---------- the results page ---------- */
.sr{padding-block:clamp(24px,3.4cqi,48px) clamp(72px,9cqi,140px)}
.sr-form{max-width:min(100%,920px)}
.sr-status{margin-top:14px;font-size:15px;line-height:1.6;color:var(--muted)}
.sr-status.is-empty{margin-top:clamp(22px,3cqi,34px);font-family:var(--display);font-weight:300;font-size:clamp(22px,2.4cqi,28px);line-height:1.3;max-width:28em}
.sr-chips{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:clamp(18px,2.6cqi,30px)}
.sr-chips a{display:inline-flex;align-items:baseline;gap:6px;min-height:44px;align-items:center;color:var(--muted);border-bottom:1px solid transparent}
.sr-chips a:hover{color:var(--ink)}
.sr-chips a[aria-current]{color:var(--ink);border-bottom-color:currentColor}
.sr-n{font-variant-numeric:lining-nums tabular-nums}
.sr-banner{margin-top:22px}
.sr-suggest{margin-top:26px}
.sr-groups{display:grid;gap:clamp(48px,6cqi,88px);margin-top:clamp(36px,5cqi,64px)}
.sr-groups:empty{display:none}
.sr-g h2{font-size:clamp(30px,3.4cqi,44px);margin-bottom:clamp(18px,2.4cqi,30px)}
.sr-all{margin-top:clamp(24px,3cqi,36px)}
.sr-price{white-space:nowrap}
.sr-was{color:var(--muted);text-decoration-thickness:1px}
.sr-rows{max-width:880px}
.sr-row{display:grid;padding-block:18px;border-top:1px solid var(--line)}
.sr-row.has-ph{grid-template-columns:clamp(64px,8cqi,96px) minmax(0,1fr);column-gap:clamp(16px,2.4cqi,28px);align-items:start}
.sr-row .ph{aspect-ratio:4/5}
.sr-row-t{display:grid;gap:6px;min-width:0}
.sr-row-n{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2cqi,28px);line-height:1.15}
.sr-row-s{font-size:15px;line-height:1.6;color:var(--muted);max-width:42em}
.sr-row mark,.sr-card mark{background:none;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.sr-row:hover .sr-row-n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.sr-paging{display:flex;gap:26px;align-items:baseline;margin-top:clamp(40px,5cqi,64px)}
.sr-paging a{min-height:44px;display:inline-flex;align-items:center}
@container site (max-width:760px){
  .sr-chips{gap:0 22px}
}