/* The flow catalog.
 *
 * Ported from the catalog in `workspace_professional`, keeping the widget, chip and card rules and
 * dropping the collection cards, the per-page tag row and the info boxes, none of which have a
 * counterpart here. The `.info-box` block was also the one place with hardcoded `oklch()` literals,
 * which would not have followed the palette toggle.
 *
 * Every colour is a Material custom property, so light and dark come free: Zensical ships Material's
 * stylesheets and defines all of these. There is deliberately not one literal colour below.
 */

.catalog-search {
  position: relative;
  margin: 1.4rem 0 2rem;
}

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

.catalog-search__controls {
  margin-bottom: 1rem;
}

.catalog-search__search {
  position: relative;
  max-width: 26rem;
}

.catalog-search__input {
  width: 100%;
  font: inherit;
  font-size: .78rem;
  line-height: 1.6;
  padding: .4rem .7rem;
  border-radius: .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.catalog-search__input:focus {
  outline: none;
  border-color: var(--md-accent-fg-color);
}

/* ---------------------------------------------------------------- filters */

.catalog-search__filters {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.2rem;
}

.catalog-search__tag-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem;
}

.catalog-search__tag-label {
  min-width: 9rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.catalog-search__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.catalog-search__chip {
  font: inherit;
  font-size: .72rem;
  line-height: 1.4;
  padding: .2rem .6rem;
  border-radius: 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

.catalog-search__chip:hover { border-color: var(--md-accent-fg-color); }

.catalog-search__chip.is-active {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color, var(--md-default-bg-color));
}

/* Tier 2 reads as a quieter statement than tier 1, it is a property of the scenarios inside the
 * flow rather than of the file, and the weight should say so before the label does. */
.catalog-search__chip--tier2 { border-style: dashed; }

/* ---------------------------------------------------------------- tier 3: the picker */

.catalog-search__tag-group--popup { align-items: center; }

.catalog-search__popup {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.catalog-search__popup-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: inherit;
  font-size: .72rem;
  line-height: 1.4;
  padding: .2rem .7rem;
  border-radius: 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

.catalog-search__popup-btn::after {
  content: "";
  width: .35rem;
  height: .35rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.08rem) rotate(45deg);
}

.catalog-search__popup-btn:hover { border-color: var(--md-accent-fg-color); }

.catalog-search__popup-btn.is-active {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color, var(--md-default-bg-color));
}

.catalog-search__selected {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.catalog-search__selected-chip {
  font: inherit;
  font-size: .7rem;
  line-height: 1.4;
  padding: .15rem .5rem;
  border-radius: 1rem;
  border: 1px solid var(--md-accent-fg-color);
  background-color: transparent;
  color: var(--md-accent-fg-color);
  cursor: pointer;
}

.catalog-search__popup-panel {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  z-index: 3;
  width: 20rem;
  max-width: 80vw;
  padding: .5rem;
  border-radius: .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color);
  box-shadow: var(--md-shadow-z2);
}

.catalog-search__popup-panel[hidden] { display: none; }

.catalog-search__popup-search {
  width: 100%;
  font: inherit;
  font-size: .72rem;
  padding: .3rem .5rem;
  margin-bottom: .4rem;
  border-radius: .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.catalog-search__popup-search:focus {
  outline: none;
  border-color: var(--md-accent-fg-color);
}

.catalog-search__popup-list {
  max-height: 16rem;
  overflow-y: auto;
}

.catalog-search__popup-option {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .3rem;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--md-default-fg-color);
  cursor: pointer;
}

.catalog-search__popup-option:hover { background-color: var(--md-code-bg-color); }

/* Catches the click that closes the panel, without swallowing the page behind it. */
.catalog-search__popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2;
}

/* ---------------------------------------------------------------- toolbar */

.catalog-search__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .4rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.catalog-search__count {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.catalog-search__pagesize {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  color: var(--md-default-fg-color--light);
}

.catalog-search__pagesize-select {
  font: inherit;
  font-size: .68rem;
  padding: .1rem .3rem;
  border-radius: .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

/* ---------------------------------------------------------------- cards */

/* ⚠️ Do not name a class `grid` here. Zensical defines `.md-typeset .grid` for its grid-cards
 * component, and it carries `margin: 1em 0` and a column template that arrive uninvited. */
.catalog-search__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .8rem;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .7rem .8rem;
  border-radius: .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}

.catalog-card:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: var(--md-shadow-z1);
}

.md-typeset .catalog-card,
.md-typeset .catalog-card:hover { color: inherit; }

.catalog-card__title {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--md-default-fg-color);
}

.catalog-card__subtitle {
  font-size: .7rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
}

.catalog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .15rem;
}

.catalog-card__tag {
  font-size: .62rem;
  line-height: 1.5;
  padding: .05rem .35rem;
  border-radius: .8rem;
  white-space: nowrap;
}

/* The three tiers, in the order they should catch the eye: the file's effect first, the depth of
 * its scenarios second, and a page or module only when it is the thing being filtered on. */
.catalog-card__tag--tier1 {
  border: 1px solid var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color--light);
}

.catalog-card__tag--tier2 {
  background-color: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
}

.catalog-card__tag--tier3 {
  color: var(--md-accent-fg-color);
}

.catalog-card__tag--tier3::before { content: "#"; }

/* ---------------------------------------------------------------- pagination */

.catalog-search__empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .76rem;
  color: var(--md-default-fg-color--light);
}

.catalog-search__pagenav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: 1rem;
}

.catalog-search__pagebtn {
  font: inherit;
  font-size: .72rem;
  padding: .2rem .6rem;
  border-radius: .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
}

.catalog-search__pagebtn:disabled {
  opacity: .4;
  cursor: default;
}

.catalog-search__pagestatus {
  font-size: .7rem;
  color: var(--md-default-fg-color--light);
}

/* ---------------------------------------------------------------- the command for the selection */

.catalog-search__run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .6rem 0 .9rem;
  padding: .55rem .7rem;
  border-radius: .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-code-bg-color);
}

.catalog-search__run-label {
  font-size: .7rem;
  color: var(--md-default-fg-color--light);
}

/* The size, the background and the padding are the theme's: this is a `code` element and
 * `.md-typeset code` sets all three at (0,2,0), so declaring them here did nothing. They are
 * gone rather than left looking meaningful. */
.catalog-search__run-command {
  flex: 1 1 20rem;
  /* The command is long and must not push the page sideways; it scrolls inside its own box. */
  overflow-x: auto;
  white-space: pre;
}

.catalog-search__run-copy {
  font-size: .72rem;
  padding: .2rem .6rem;
  border-radius: .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
}

.catalog-search__run-copy:hover { border-color: var(--md-accent-fg-color); }

.catalog-search__run-note {
  flex-basis: 100%;
  font-size: .68rem;
  color: var(--md-default-fg-color--light);
}

.catalog-search__empty-note {
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
}

/* ---------------------------------------------------------------- the tags on a flow page
 *
 * Deliberately the same shapes as a catalog card's tags: a reader meets these chips first in the
 * catalog, and a second visual language for the same three tiers would say they are different
 * things. */

.flow-tags { margin: -.4rem 0 1.2rem; }

.flow-tags__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
}

.flow-tags__chip {
  font-size: .62rem;
  line-height: 1.5;
  padding: .05rem .35rem;
  border-radius: .8rem;
  white-space: nowrap;
}

.flow-tags__chip--tier1 {
  border: 1px solid var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color--light);
}

.flow-tags__chip--tier2 {
  background-color: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
}

.flow-tags__toggle {
  font-size: .62rem;
  line-height: 1.5;
  padding: .05rem .45rem;
  border-radius: .8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: none;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.flow-tags__toggle:hover { border-color: var(--md-accent-fg-color); }

/* A caret drawn in CSS rather than an icon font, because the site loads no icon font and one
 * character of punctuation does not justify starting. */
.flow-tags__caret {
  width: 0;
  height: 0;
  border-left: .22rem solid transparent;
  border-right: .22rem solid transparent;
  border-top: .26rem solid currentColor;
  transition: transform .12s ease;
}

.flow-tags__toggle.is-open .flow-tags__caret { transform: rotate(180deg); }

.flow-tags__panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .3rem .8rem;
  align-items: baseline;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.flow-tags__group-label {
  font-size: .62rem;
  color: var(--md-default-fg-color--light);
}

.flow-tags__group-values {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
}

/* Scoped through `.md-typeset` deliberately: these are links, and `.md-typeset a` is (0,1,1),
 * so an unscoped `.flow-tags__value` at (0,1,0) LOSES and the accent colour never arrives. It
 * rendered as an ordinary link for as long as the rule was written the other way. */
.md-typeset .flow-tags__value {
  font-size: .62rem;
  color: var(--md-accent-fg-color);
}

.flow-tags__value::before { content: "#"; }

/* ---------------------------------------------------------------- narrow screens */

@media screen and (max-width: 44em) {
  .catalog-search__tag-group { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .catalog-search__tag-label { min-width: 0; }
  .catalog-search__run { flex-direction: column; align-items: stretch; }
  .flow-tags__panel { grid-template-columns: 1fr; gap: .1rem; }
}