/* Command Palette overlay — shares the site's own tokens (base.css), no new
   colors introduced. Prototype scoped to index.html and catalogue.html. */
.cmdk-trigger{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:auto;
  background:transparent;border:1px solid var(--rule);
  color:var(--grey);font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;padding:7px 10px;
  /* 2026-09-15: measured 33px tall (7px padding + the line-box), under
     WCAG 2.5.8's 44px floor on every page that carries it. min-height with
     align-items:center (already set) grows the box without touching the
     text/icon size or the border's visual weight -- content stays centred
     in the taller box rather than the button's own type growing. */
  min-height:44px;
  cursor:pointer;transition:border-color var(--ink-dur) var(--ink-ease),color var(--ink-dur) var(--ink-ease);
}
.cmdk-trigger:hover,.cmdk-trigger:focus-visible{border-color:var(--red);color:var(--red)}
.cmdk-trigger kbd{
  font-family:var(--mono);font-size:10px;
  /* 2026-09-15: was --faint. Measured 2.06:1 against the runhead's
     translucent glass at its lighter extreme (a bright image scrolled
     behind it) -- under 4.5:1. --grey is what .cmdk-trigger's own
     sibling "Search" text already uses at this same spot, uncomplained
     of, so it's the proven-safe choice here too, not a guess. */
  color:var(--grey);
  border:1px solid var(--rule);padding:1px 5px;border-radius:3px;
}

.cmdk-overlay[hidden]{display:none}
.cmdk-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(17,16,16,.55);
  backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 20px 0;
}
.cmdk-panel{
  width:100%;max-width:640px;
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:flex;flex-direction:column;
  max-height:70vh;
}
.cmdk-input-row{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--rule);
  color:var(--grey);
}
.cmdk-icon{flex-shrink:0}
.cmdk-input{
  flex:1;border:none;background:transparent;outline:none;
  font-family:var(--serif);font-size:17px;color:var(--ink);
}
.cmdk-input::placeholder{color:var(--faint)}
.cmdk-esc{
  font-family:var(--mono);font-size:10px;color:var(--faint);
  border:1px solid var(--rule);padding:2px 6px;border-radius:3px;flex-shrink:0;
}
.cmdk-results{
  list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;
}
.cmdk-row{
  display:flex;align-items:center;gap:12px;
  padding:8px;cursor:pointer;
}
.cmdk-row.is-active{background:rgba(200,16,46,.08)}
.cmdk-thumb{
  width:44px;height:44px;object-fit:cover;background:var(--rule);flex-shrink:0;
}
.cmdk-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.cmdk-title{
  font-size:14px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cmdk-row.is-active .cmdk-title{color:var(--red)}
.cmdk-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);
}
.cmdk-footer{
  display:flex;gap:16px;align-items:center;
  padding:10px 18px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;color:var(--faint);
}
.cmdk-footer kbd{
  border:1px solid var(--rule);padding:1px 4px;border-radius:3px;margin-right:2px;
}
.cmdk-count{margin-left:auto}

@media(max-width:640px){
  .cmdk-trigger span{display:none}
  .cmdk-overlay{padding:8vh 12px 0}
}