/* ============================================================ catalogue search */
/* A command palette, not a dropdown. The query can be a model code, a Georgian
   category, a Russian trade name or a description of the job — so the surface has
   to be big enough to show what KIND of thing each answer is, which a dropdown
   under a header field never is. */

.dg-srch{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;
  padding:10vh var(--sp-4) var(--sp-4);pointer-events:none}
.dg-srch[hidden]{display:none}

.dg-srch__scrim{position:absolute;inset:0;pointer-events:auto;
  background:rgba(20,20,22,.42);opacity:0;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:opacity var(--dur-backdrop) linear}
.dg-srch.is-open .dg-srch__scrim{opacity:1}

.dg-srch__panel{position:relative;pointer-events:auto;
  display:flex;flex-direction:column;width:100%;max-width:680px;max-height:80vh;
  background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);
  box-shadow:0 24px 64px -16px rgba(20,20,22,.34),0 2px 8px rgba(20,20,22,.08);
  overflow:hidden;
  opacity:0;transform:translateY(-14px) scale(.97);
  transition:opacity var(--dur-base) linear,
             transform var(--dur-panel) cubic-bezier(.2,.9,.28,1.06)}
.dg-srch.is-open .dg-srch__panel{opacity:1;transform:none}
/* Out is quicker than in and does not overshoot — an exit that bounces reads as
   the thing refusing to leave. */
.dg-srch.is-closing .dg-srch__panel{transition-duration:var(--dur-base);
  transition-timing-function:var(--ease-exit)}

/* --------------------------------------------------------------------- the bar */
.dg-srch__bar{display:flex;align-items:center;gap:var(--sp-3);flex:none;
  padding:0 var(--sp-4);height:66px;border-bottom:1px solid var(--grey-200)}
.dg-srch__ico{display:inline-flex;color:var(--grey-400);flex:none;
  transition:color var(--dur-base) var(--ease-standard)}
.dg-srch__bar:focus-within .dg-srch__ico{color:var(--ink)}
.dg-srch__input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0;
  font-family:inherit;font-size:var(--fs-h3);line-height:1;color:var(--ink);
  caret-color:var(--amber-600)}
.dg-srch__input:focus{outline:none}
.dg-srch__input::placeholder{color:var(--grey-400)}
.dg-srch__input::-webkit-search-cancel-button{display:none}

.dg-srch__clear{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:none;padding:0;cursor:pointer;
  border:0;border-radius:50%;background:var(--grey-100);color:var(--text-2);
  animation:dg-srch-pop var(--dur-base) var(--ease-enter) both;
  transition:background-color var(--dur-instant) linear,color var(--dur-instant) linear}
.dg-srch__clear:hover{background:var(--grey-200);color:var(--ink)}
.dg-srch__clear[hidden]{display:none}
@keyframes dg-srch-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}

.dg-srch__esc{display:inline-flex;align-items:center;justify-content:center;flex:none;
  padding:0;border:0;background:none;cursor:pointer;color:var(--text-2)}
.dg-srch__escx{display:none}
.dg-srch kbd{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-sm);
  background:var(--grey-100);border:1px solid var(--grey-200);border-bottom-width:2px;
  font-family:var(--font-mono);font-size:10px;line-height:1;color:var(--text-3);
  transition:background-color var(--dur-instant) linear,color var(--dur-instant) linear}
.dg-srch__esc:hover kbd{background:var(--grey-200);color:var(--ink)}

/* ------------------------------------------------------------------- the scopes */
.dg-srch__scopes{display:flex;align-items:center;gap:var(--sp-1);flex:none;
  padding:10px var(--sp-4);border-bottom:1px solid var(--grey-200);
  overflow-x:auto;scrollbar-width:none}
.dg-srch__scopes::-webkit-scrollbar{display:none}
.dg-srch__scope{display:inline-flex;align-items:center;gap:6px;flex:none;
  height:30px;padding:0 12px;cursor:pointer;
  border:1px solid transparent;border-radius:100px;background:none;
  font-family:inherit;font-size:var(--fs-meta);font-weight:600;color:var(--text-3);
  transition:background-color var(--dur-instant) linear,color var(--dur-instant) linear,
             border-color var(--dur-instant) linear,opacity var(--dur-base) var(--ease-standard)}
.dg-srch__scope:hover{background:var(--grey-100);color:var(--ink)}
.dg-srch__scope.is-on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.dg-srch__scope b{font-family:var(--font-mono);font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums;opacity:.65}
.dg-srch__scope b:empty{display:none}
/* Empty, not gone: a tab that disappears mid-type moves every other tab under
   the pointer. */
.dg-srch__scope.is-void{opacity:.38;pointer-events:none}
.dg-srch__scope.is-void.is-on{opacity:1;pointer-events:auto}

/* -------------------------------------------------------------------- the body */
.dg-srch__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-2) 0 var(--sp-3);scrollbar-width:thin}
.dg-srch__group + .dg-srch__group{margin-top:2px;
  padding-top:var(--sp-2);border-top:1px solid var(--grey-100)}
.dg-srch__gh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4) 6px;
  font-size:var(--fs-micro);font-weight:700;
  color:var(--text-3)}
.dg-srch__more{font-family:var(--font-mono);letter-spacing:0;color:var(--grey-400)}
/* Georgian has no uppercase, so text-transform does nothing here and the .12em
   tracking just pulls 10px letters apart — "პ ო პ უ ლ ა რ ..." at a size nobody
   reads on a phone. The hook is the one tokens.css already uses for the script. */
html[lang^="ka"] .dg-srch__gh{font-size:12px;letter-spacing:.02em;text-transform:none}

/* The last row of the list, not a label: the dropdown shows at most five
   categories and eight machines out of a hundred and eighteen, and the "+101"
   beside the group heading was a span. On a phone, where there is no keyboard to
   press Enter with, this was the only thing standing between the reader and the
   other hundred results. */
.dg-srch__all{display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:52px;margin-top:var(--sp-2);padding:0 var(--sp-4);
  border-top:1px solid var(--grey-200);
  font-size:var(--fs-sm);font-weight:700;color:var(--amber-800);text-decoration:none;
  transition:background-color var(--dur-instant) linear}
.dg-srch__all:hover,.dg-srch__all.is-active{background:var(--tint-saved)}
.dg-srch__all b{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------- a row */
.dg-srch__row{position:relative;display:flex;align-items:center;gap:var(--sp-3);
  padding:9px var(--sp-4);text-decoration:none;color:var(--text);
  transition:background-color var(--dur-instant) linear}
/* The rail is the keyboard cursor. It grows out of nothing rather than appearing,
   so holding ↓ reads as one object moving down the list. */
.dg-srch__row::before{content:"";position:absolute;inset-inline-start:0;top:6px;bottom:6px;
  width:3px;border-radius:0 3px 3px 0;background:var(--accent);
  transform:scaleY(0);transform-origin:center;
  transition:transform var(--dur-base) var(--ease-enter)}
.dg-srch__row.is-active{background:var(--tint-saved)}
.dg-srch__row.is-active::before{transform:scaleY(1)}
.dg-srch__row:focus-visible{outline:none;background:var(--tint-saved)}
.dg-srch__row:focus-visible::before{transform:scaleY(1)}

.dg-srch__thumb{display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--white);border:1px solid var(--grey-200)}
.dg-srch__thumb img{width:100%;height:100%;object-fit:contain;padding:3px;display:block}
.dg-srch__thumb.is-logo img{width:auto;height:16px;padding:0}
.dg-srch__thumb.is-ico{background:var(--grey-100);border-color:transparent;position:relative}
/* A folder corner, drawn rather than shipped: it marks the row as a place, not a
   product, and costs no request. */
.dg-srch__thumb.is-ico::after{content:"";width:18px;height:14px;border-radius:2px;
  border:2px solid var(--grey-400);border-top-width:5px;
  border-top-left-radius:1px;border-top-right-radius:6px}
.dg-srch__noimg{width:100%;height:100%;background:var(--grey-100);display:block}

.dg-srch__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dg-srch__t{font-size:var(--fs-sm);line-height:1.35;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-srch__t mark{background:none;color:var(--amber-800);font-weight:800;
  box-shadow:inset 0 -.42em 0 var(--tint-saved);border-radius:2px}
.dg-srch__m{display:flex;align-items:center;gap:6px;min-width:0;
  font-size:var(--fs-micro);line-height:1.3;color:var(--text-3)}
.dg-srch__m i{font-style:normal;color:var(--grey-300)}
.dg-srch__cat{flex:0 1 auto;min-width:0;font-weight:700;color:var(--amber-800);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-srch__spec{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.dg-srch__price{flex:none;font-size:var(--fs-micro);color:var(--text-3);
  font-variant-numeric:tabular-nums}
.dg-srch__n{flex:none;min-width:26px;height:20px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 7px;border-radius:10px;
  background:var(--grey-100);color:var(--text-2);
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums}

/* The arrow only exists once the row is the one you are on. */
.dg-srch__go{flex:none;width:16px;height:16px;position:relative;
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard)}
.dg-srch__go::before,.dg-srch__go::after{content:"";position:absolute;background:var(--amber-800)}
.dg-srch__go::before{top:7px;left:1px;width:12px;height:2px;border-radius:2px}
.dg-srch__go::after{top:3px;right:1px;width:8px;height:8px;border-radius:2px;
  border:2px solid var(--amber-800);border-left:0;border-bottom:0;
  transform:rotate(45deg);background:none}
.dg-srch__row.is-active .dg-srch__go{opacity:1;transform:none}

/* -------------------------------------------------------------------- the chips */
.dg-srch__chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px var(--sp-4) var(--sp-3)}
.dg-srch__chip{display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;border-radius:100px;text-decoration:none;
  /* A category name here can be sixty characters of Georgian. Without this the
     text wrapped INSIDE the pill, which grew past its own 32px height and
     painted over the chip on the next line. */
  max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;
  background:var(--grey-100);border:1px solid transparent;
  font-size:var(--fs-meta);font-weight:600;color:var(--text-2);
  transition:background-color var(--dur-instant) linear,color var(--dur-instant) linear,
             border-color var(--dur-instant) linear,
             transform var(--dur-base) var(--ease-standard)}
.dg-srch__chip:hover{background:var(--white);border-color:var(--grey-300);
  color:var(--ink);transform:translateY(-1px)}
.dg-srch__chip button{border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dg-srch__chip b{font-family:var(--font-mono);font-size:10px;font-weight:700;
  color:var(--grey-400);font-variant-numeric:tabular-nums}
.dg-srch__chipx{width:16px;height:16px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:50%;font-size:14px;line-height:1;
  color:var(--grey-400)}
.dg-srch__chipx:hover{background:var(--grey-300);color:var(--ink)}

/* ----------------------------------------------------------- empty and loading */
.dg-srch__empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp-2);padding:var(--sp-6) var(--sp-5) var(--sp-7)}
/* The same illustrations the page-level blank states use, so running out of
   results in the palette and running out on a category page are recognisably
   the same event. The CSS-drawn magnifier this replaces is gone: two different
   drawings of one idea is one drawing too many. */
.dg-srch__art{display:block;width:clamp(96px,28vw,128px);height:auto;
  margin-bottom:var(--sp-1);
  animation:dg-blank-in var(--dur-panel) var(--ease-enter) both}
.dg-srch__empty h3{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-card);line-height:var(--lh-card);color:var(--ink);text-wrap:balance}
.dg-srch__empty p{margin:0;max-width:38ch;font-size:var(--fs-meta);
  line-height:var(--lh-meta);color:var(--text-3);text-wrap:pretty}
.dg-srch__empty .dg-btn{margin-top:var(--sp-3);min-height:var(--touch)}
@media (prefers-reduced-motion:reduce){.dg-srch__art{animation:none}}

.dg-srch__skel{display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-4);
  animation:dg-srch-shim 1.1s var(--ease-standard) infinite}
.dg-srch__skel-t{width:44px;height:44px;flex:none;border-radius:var(--radius-sm);
  background:var(--grey-100)}
.dg-srch__skel-l{flex:1;display:flex;flex-direction:column;gap:6px}
.dg-srch__skel-l i{display:block;height:9px;width:62%;border-radius:5px;background:var(--grey-100)}
.dg-srch__skel-l b{display:block;height:7px;width:34%;border-radius:5px;background:var(--grey-100)}
@keyframes dg-srch-shim{0%,100%{opacity:.55}50%{opacity:1}}

/* -------------------------------------------------------------------- the foot */
.dg-srch__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex:none;padding:9px var(--sp-4);border-top:1px solid var(--grey-200);
  background:var(--grey-100)}
.dg-srch__keys{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.dg-srch__keys em{font-style:normal;font-size:10px;color:var(--text-3);
  margin-inline-end:var(--sp-3)}
.dg-srch__res{display:flex;align-items:center;gap:5px;flex:none;
  font-size:10px;color:var(--text-3)}
.dg-srch__res b{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.dg-srch__res b[hidden]{display:none}
.dg-srch__res b[hidden] + em{display:none}

/* The ⌘K hint on the header field itself — the only place anyone will discover it.
   Absolutely placed, like the magnifier on the other side: .dg-search is a flex
   row whose input is width:100%, so as a flex sibling this was pushed past the
   field's right edge and floated outside the box. */
.dg-search__k{position:absolute;inset-inline-end:14px;top:50%;
  transform:translateY(-50%);z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  height:22px;padding:0 7px;border-radius:var(--radius-sm);
  background:var(--white);border:1px solid var(--grey-200);
  font-family:var(--font-mono);font-size:10px;line-height:1;color:var(--grey-400);
  pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard)}
/* Room for it, so a long query does not run underneath the chip. */
.dg-header .dg-search input[type="search"]{padding-inline-end:64px}
.dg-search:focus-within .dg-search__k{opacity:0}

/* Body does not scroll behind an open palette. */
:root.has-srch body{overflow:hidden}

/* The second arm is a phone in landscape: 844 wide clears 640, so a turned
   phone got the floating desktop panel — 10vh of padding, a 66px bar and a 45px
   strip of keyboard shortcuts around a 148px result area, which is exactly one
   visible row before the on-screen keyboard covers the rest. any-pointer:coarse
   keeps a short desktop window on the desktop layout. */
@media (max-width:640px), (max-height:520px) and (any-pointer:coarse){
  /* On a phone it is the page, not a panel floating on one. */
  .dg-srch{padding:0}
  .dg-srch__panel{max-width:none;max-height:none;height:100%;border:0;border-radius:0;
    transform:translateY(12px)}
  .dg-srch__bar{height:60px;padding:0 var(--sp-3)}
  .dg-srch__input{font-size:16px}   /* 16px or iOS zooms the whole page on focus */
  /* The way out. A full-screen panel covers its own scrim, so this button is the
     only closer a phone has — it was hidden because it held nothing but an
     "esc" keycap. */
  .dg-srch__esc{display:inline-flex;width:44px;height:44px;margin-inline-end:-8px}
  .dg-srch__esc kbd{display:none}
  .dg-srch__escx{display:inline-flex}
  .dg-srch__keys{display:none}
  .dg-srch__foot{justify-content:flex-end}
  .dg-search__k{display:none}

  /* Every control in here was under 44px, and they are the controls you use
     WHILE typing with one thumb. */
  .dg-srch__scopes{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
  .dg-srch__scope{min-height:40px;height:auto;padding:0 14px}
  .dg-srch__clear{width:40px;height:40px}
  .dg-srch__chips{gap:var(--sp-2);padding-inline:var(--sp-3)}
  .dg-srch__chip{height:auto;min-height:44px;padding:0 6px 0 14px}
  .dg-srch__chip.is-link{padding:0 14px}
  .dg-srch__chip button{min-height:44px;display:inline-flex;align-items:center}
  /* Bigger, and pushed off the term it deletes: at 16px, sitting flush against
     the word, the mis-tap it costs you is the search you were about to repeat. */
  .dg-srch__chipx{width:34px;height:34px;margin-inline-start:2px;font-size:17px}

  /* Every machine carries the same "price on request" label, so on a phone it
     was ~100px of identical text taking the room the model code needed — titles
     were cut to 168px at 390 and 87px at 320. The arrow is a pointer affordance
     and there is no pointer here. */
  .dg-srch__price,.dg-srch__go{display:none}
  .dg-srch__t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical}
  .dg-srch__row{padding-block:11px}
}

@media (prefers-reduced-motion:reduce){
  .dg-srch__scrim,.dg-srch__panel,.dg-srch__row::before,.dg-srch__go,
  .dg-srch__chip,.dg-srch__clear{transition-duration:1ms;animation:none}
  .dg-srch__panel{transform:none}
  .dg-srch__skel{animation:none}
}