/* THERMITE — the descent.
 *
 * Stations down a single pour line. Each one reveals as it enters the channel
 * and dims as it leaves, so the page reads as one continuous fall rather than
 * a stack of cards.
 */

/* Cards ride ON the thread. --card-x and --card-w are written by the spine
   engine so every station is centred on wherever the curve is at its own depth;
   the solid line runs behind the panel (z 5) and a ghost of it runs in front
   (z 11), which is what makes the thread read as passing THROUGH the card
   rather than simply disappearing under it. */

#descent {
  position: relative; z-index: 10;
}

.station {
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--rig-h) + 60px) 0 80px;
}

.station__inner {
  width: var(--card-w, min(600px, calc(100vw - 48px)));
  margin-left: var(--card-x, 24px);
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--rule);
  position: relative;
  container-type: inline-size;
  border-radius: var(--r-lg);
  /* Not fully opaque: the ghosted thread has to be visible through it. */
  background: linear-gradient(180deg, rgba(18, 21, 26, .90), rgba(13, 15, 19, .86));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .03);
  backdrop-filter: blur(7px);
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .7s var(--ease), transform .7s var(--ease),
              filter .7s var(--ease), margin-left .55s var(--ease),
              width .55s var(--ease), border-color .5s var(--ease);
  filter: blur(6px);
}

/* The panel leans a degree or so into whichever way the thread is bending, so
   it reads as hung on the line rather than parked next to it. --drift is the
   signed distance from the card's centre to the thread, normalised. */
.station[data-visible='true'] .station__inner {
  transform: rotate(calc(var(--drift, 0) * 0.5deg));
}

/* The edge the channel enters gets the heat, so it reads as a tap off the
   line rather than a card that happens to overlap it. */
/* Where the thread enters and leaves the panel, top and bottom, the edge is
   hot — the card is a bead on the line, not a box beside it. */
.station__inner::before,
.station__inner::after {
  content: ''; position: absolute; left: 50%; width: 74px; height: 2px;
  margin-left: -37px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, var(--oxide), transparent);
  transition: background .6s var(--ease), width .6s var(--ease);
}
.station__inner::before { top: -1px; }
.station__inner::after { bottom: -1px; }
.station[data-visible='true'] .station__inner::before,
.station[data-visible='true'] .station__inner::after {
  width: 120px; margin-left: -60px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
}
.station[data-locked='true'] .station__inner::before,
.station[data-locked='true'] .station__inner::after {
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.station[data-visible='true'] .station__inner { opacity: 1; transform: none; filter: none; }
.station[data-visible='past'] .station__inner { opacity: .28; transform: translateY(-18px); filter: blur(2px); }

.station[data-locked='true'] .station__inner { opacity: .3; filter: blur(1.5px) grayscale(.5); }
.station[data-locked='true'] .station__inner * { pointer-events: none; }

.station__lock {
  display: none;
  font-family: var(--mono); font-size: 12px; color: var(--scale);
  border: 1px dashed var(--rule); padding: 12px 16px; border-radius: var(--r-md);
  margin-top: 22px; max-width: 60ch;
}
.station[data-locked='true'] .station__lock { display: block; }

.station__num {
  margin: 0 0 12px var(--card-x, 24px);
  font-family: var(--mono); font-size: 10.5px; color: var(--rule);
  letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s,
              margin-left .5s var(--ease);
}
.station[data-visible='true'] .station__num { opacity: 1; transform: none; }
.station[data-visible='past'] .station__num { opacity: .25; }

/* --- hero -------------------------------------------------------------- */

#s-intro { min-height: 100dvh; padding-bottom: 170px; }
/* The hero is not a bead on the thread — it is the strike. So it is centred in
   the viewport on its own terms, open rather than panelled, and the spine
   engine leaves its placement alone. */
#s-intro .station__inner {
  width: min(880px, calc(100vw - 48px));
  margin-inline: auto;
  padding: 0; border: 0; background: none;
  box-shadow: none; backdrop-filter: none;
  transform: none;
  text-align: center;
}
#s-intro .station__num { display: none; }
#s-intro .eyebrow { justify-content: center; }
#s-intro .eyebrow::after { display: none; }
#s-intro .hero__lede { margin-inline: auto; }
#s-intro .hero__facts { justify-content: center; }
#s-intro .hero__cta { justify-content: center; }
#s-intro .station__inner::before,
#s-intro .station__inner::after { display: none; }
#s-intro .station__num { display: none; }

/* Stacked, not inline. Inline it needed roughly 24 glyphs of width, overflowed
   the hero, and orphaned the arrow off the right-hand edge. Stacked, each line
   is eleven glyphs and cannot overflow — and the arrow now points the way the
   page goes, down into the thread. Sized in cqw against the hero itself, so it
   is never larger than the box holding it. */
.reaction {
  font-family: var(--display);
  font-weight: 900; font-stretch: 125%;
  font-size: clamp(30px, 8.6cqw, 96px);
  line-height: .98; letter-spacing: -.035em;
  display: grid; justify-items: center; gap: .02em;
  margin: 0 0 6px;
}
.reaction i { font-style: normal; }
.reaction sub { font-size: .5em; vertical-align: baseline; }

.reaction .rx-in { color: #6d4130; }
.reaction .rx-arrow {
  color: var(--ember); position: relative;
  font-size: .46em; line-height: 1.05;
}
.reaction .rx-out {
  color: var(--whitehot);
  text-shadow: 0 0 32px rgba(255,163,23,.55), 0 0 90px rgba(255,95,31,.28);
}

.reaction--lit .rx-in { animation: oxidise 1.6s var(--ease) .3s both; }
.reaction--lit .rx-arrow { animation: ignite 1.1s var(--ease) .8s both; }
.reaction--lit .rx-out { animation: pourout 1.4s var(--ease) 1.2s both; }

@keyframes oxidise { from { color: #3a3f47; } to { color: #6d4130; } }
@keyframes ignite {
  0% { color: #3a3f47; transform: translateY(-.2em) scale(.9); }
  40% { color: var(--whitehot); transform: translateY(0) scale(1.08); }
  100% { color: var(--ember); transform: none; }
}
@keyframes pourout {
  0% { color: #3a3f47; text-shadow: none; opacity: .3; }
  100% { color: var(--whitehot); opacity: 1;
    text-shadow: 0 0 32px rgba(255,163,23,.55), 0 0 90px rgba(255,95,31,.28); }
}

.hero__caption {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--scale); margin: 2px 0 30px;
}

/* Drawn as SVG with an explicit textLength, so the wordmark scales to its
   container instead of being sized in viewport units and guessed at. It fits
   exactly, at every width, whether or not the display face has loaded — which
   is what the old clamp() could not promise, and why it used to lose its last
   letters. */
.hero__name {
  display: block;
  width: 100%;
  height: auto;
  margin: 26px 0 18px;
  overflow: visible;
}
.hero__name text {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
}

.hero__lede { font-size: clamp(15px, 1.6vw, 19px); max-width: 56ch; color: var(--steel); }
.hero__lede b { color: var(--bright); font-weight: 600; }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px;
  font-family: var(--mono); font-size: 11.5px; color: var(--scale);
}
.hero__facts span { display: flex; align-items: center; gap: 8px; }
.hero__facts span::before { content: ''; width: 5px; height: 5px; background: var(--oxide); transform: rotate(45deg); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; align-items: center; }


/* --- choice grids ------------------------------------------------------ */

.grid {
  display: grid; gap: 12px; margin-top: 26px;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
}

.choice {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 15px 16px; color: var(--steel);
  position: relative; overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s;
}
.choice::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--r-pill);
  background: var(--ember); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.choice:hover { border-color: #4a525e; transform: translateY(-2px); }
.choice:hover::before { transform: scaleY(1); }
.choice[aria-pressed='true'] {
  border-color: var(--pour); background: #1c1d1c;
  box-shadow: inset 0 0 40px rgba(255,163,23,.07);
}
.choice[aria-pressed='true']::before { transform: scaleY(1); background: var(--pour); box-shadow: 0 0 14px var(--pour); }
.choice[disabled] { opacity: .34; cursor: not-allowed; }

.choice__name {
  font-family: var(--mono); font-size: 13.5px; color: var(--bright);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.choice__note { font-size: 12.5px; color: var(--scale); margin-top: 6px; line-height: 1.45; }
.choice__flag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--scale); border: 1px solid var(--rule); padding: 2px 8px; border-radius: var(--r-pill);
}
.choice__flag[data-kind='native'] { color: var(--quench); border-color: rgba(47,217,189,.35); }
.choice__flag[data-kind='cross'] { color: var(--pour); border-color: rgba(255,163,23,.3); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.filter {
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid var(--rule); color: var(--scale); border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; transition: all .2s;
}
.filter[aria-pressed='true'] { color: var(--slag); background: var(--steel); border-color: var(--steel); }

/* --- target detail ----------------------------------------------------- */

.readout {
  margin-top: 24px; border: 1px solid var(--rule); border-left: 2px solid var(--pour);
  background: linear-gradient(90deg, rgba(255,163,23,.05), transparent 60%);
  padding: 16px 20px; border-radius: var(--r-md);
}
.readout__t { font-family: var(--mono); font-size: 13px; color: var(--bright); }
.readout__d { font-size: 13.5px; color: var(--scale); margin-top: 7px; max-width: 66ch; }
.readout__warn { color: var(--pour); }

/* --- upload ------------------------------------------------------------ */

.drop {
  margin-top: 26px; border: 1px dashed var(--rule); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(22,26,32,.7), rgba(16,19,23,.4));
  padding: 46px 30px; text-align: center;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
  cursor: pointer; position: relative; overflow: hidden;
}
.drop:hover, .drop[data-over='true'] {
  border-color: var(--pour); background: rgba(255,163,23,.05); transform: scale(1.005);
}
.drop[data-over='true']::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,163,23,.12), transparent 65%);
}
.drop__big {
  font-family: var(--display); font-weight: 800; font-stretch: 118%;
  font-size: 22px; color: var(--bright); margin-bottom: 8px;
}
.drop__hint { font-family: var(--mono); font-size: 11.5px; color: var(--scale); letter-spacing: .06em; }

.modeswap { display: flex; gap: 0; margin-top: 22px; border: 1px solid var(--rule); width: fit-content; border-radius: var(--r-pill); overflow: hidden; }
.modeswap button {
  appearance: none; cursor: pointer; background: transparent; border: 0;
  color: var(--scale); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; padding: 10px 20px;
  transition: all .2s;
}
.modeswap button[aria-pressed='true'] { background: var(--raised); color: var(--pour); }

.filecard {
  margin-top: 22px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--panel); padding: 18px 20px;
  animation: slot-in .45s var(--ease);
}
@keyframes slot-in { from { opacity: 0; transform: translateY(14px) scaleY(.96); } }
.filecard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.filecard__name { font-family: var(--mono); font-size: 14px; color: var(--bright); }
.filecard__stats { font-family: var(--mono); font-size: 11.5px; color: var(--scale); }
.filecard__tree {
  margin-top: 14px; max-height: 190px; overflow: auto;
  font-family: var(--mono); font-size: 11.5px; color: var(--scale);
  border-top: 1px solid var(--ash); padding-top: 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px;
}
.filecard__tree i { font-style: normal; color: var(--rule); }

.problem {
  margin-top: 18px; border-left: 2px solid var(--fault);
  background: rgba(255,63,82,.06); padding: 13px 16px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 13.5px; color: #ffb3bb;
}
.problem b { color: var(--fault); font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 5px; }

/* --- connect ----------------------------------------------------------- */

.perms { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; max-width: 620px; }
.perms li {
  display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: baseline;
  font-size: 13px; color: var(--scale);
  border-bottom: 1px solid var(--ash); padding-bottom: 8px;
}
.perms code {
  font-family: var(--mono); font-size: 12px; color: var(--bright);
  background: var(--iron); padding: 2px 8px; border-radius: var(--r-xs); border: 1px solid var(--ash);
}

.keyrow { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; align-items: stretch; }
.keyrow .field { flex: 1 1 340px; }

.identity {
  display: flex; align-items: center; gap: 16px; margin-top: 26px;
  border: 1px solid var(--rule); border-left: 2px solid var(--quench);
  padding: 16px 20px; border-radius: var(--r-md); background: var(--panel);
  animation: slot-in .5s var(--ease);
}
.identity img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.identity__n { font-family: var(--mono); font-size: 15px; color: var(--bright); }
.identity__s { font-size: 12.5px; color: var(--scale); }

/* --- confirm ----------------------------------------------------------- */

.sheet {
  margin-top: 26px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--panel); overflow: hidden;
}
.sheet dl { margin: 0; display: grid; grid-template-columns: 190px 1fr; }
.sheet dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--scale); padding: 13px 20px; border-bottom: 1px solid var(--ash);
  background: rgba(0,0,0,.18);
}
.sheet dd {
  margin: 0; padding: 13px 20px; border-bottom: 1px solid var(--ash);
  font-family: var(--mono); font-size: 13px; color: var(--bright);
  overflow-wrap: anywhere;
}
.sheet dl > :nth-last-child(-n+2) { border-bottom: 0; }

.ignite {
  margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ignite .btn { font-size: 14px; padding: 17px 40px; letter-spacing: .18em; }
.ignite__note { font-size: 12.5px; color: var(--scale); max-width: 42ch; }

@media (max-width: 900px) {
  .station__inner { width: var(--card-w, calc(100vw - 32px)); }
  #s-intro .station__inner { width: var(--card-w, calc(100vw - 32px)); }
}

@media (max-width: 720px) {
  .station { padding: calc(var(--rig-h) + 40px) 0 60px; min-height: auto; }
  .sheet dl { grid-template-columns: 1fr; }
  .sheet dt { border-bottom: 0; padding-bottom: 0; background: none; }
  .perms li { grid-template-columns: 1fr; gap: 4px; }
}


/* --- choosing a repository as the source -------------------------------- */

.repopick { margin-top: 20px; }

.repopick__tabs {
  display: flex; border: 1px solid var(--rule); border-radius: var(--r-pill);
  width: fit-content; overflow: hidden;
}
.repopick__tabs button {
  appearance: none; cursor: pointer; background: transparent; border: 0;
  color: var(--scale); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; padding: 10px 20px;
  transition: all .2s;
}
.repopick__tabs button[aria-pressed='true'] { background: var(--raised); color: var(--pour); }

.repopick__row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 12px;
}

.repolist {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--panel); max-height: 340px; overflow: auto;
}
.repolist:empty { display: none; }

/* Name first, then the language, then when it was touched — and the description
   wraps onto its own line. A flex row sizes the pill to its word; the previous
   grid stretched it across a 1fr column, which is why RUST was the width of a
   sentence. */
.repo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  appearance: none; background: none; border: 0;
  border-bottom: 1px solid var(--ash); padding: 13px 16px;
  transition: background .18s;
}
.repo:last-child { border-bottom: 0; }
.repo:hover { background: var(--raised); }
.repo[aria-pressed='true'] { background: rgba(255,163,23,.07); box-shadow: inset 2px 0 0 var(--pour); }
.repo:disabled { opacity: .5; cursor: not-allowed; }

.repo__name { font-family: var(--mono); font-size: 13px; color: var(--bright); }
.repo__lang {
  flex: none; width: fit-content;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--scale); border: 1px solid var(--rule);
  padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; line-height: 1.5;
}
.repo__lang[data-rust='true'] { color: var(--pour); border-color: rgba(255,163,23,.4); }
.repo__lang[data-private='true'] { color: var(--fault); border-color: rgba(255,63,82,.35); }
.repo__when { font-family: var(--mono); font-size: 10.5px; color: var(--rule); margin-left: auto; }
.repo__desc {
  flex-basis: 100%; font-size: 12.5px; color: var(--scale); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- the folder navigator ----------------------------------------------- */

.nav {
  margin-top: 18px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--panel); overflow: hidden;
  animation: slot-in .4s var(--ease);
}

.nav__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--ash);
  background: rgba(0,0,0,.16);
}
.nav__repo { font-family: var(--mono); font-size: 13px; color: var(--bright); }
.nav__sp { flex: 1; }
.nav__meta { font-family: var(--mono); font-size: 10.5px; color: var(--rule); }
.nav__ref {
  background: var(--iron); border: 1px solid var(--rule); color: var(--pour);
  font-family: var(--mono); font-size: 11.5px; padding: 5px 10px;
  border-radius: var(--r-pill); max-width: 220px;
}
.nav__ref:focus { outline: none; border-color: var(--pour); }

.nav__crumbs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--ash);
  font-family: var(--mono); font-size: 12px;
}
.nav__up {
  appearance: none; cursor: pointer; background: var(--iron);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  color: var(--steel); width: 24px; height: 24px; line-height: 1;
  margin-right: 6px; transition: all .18s; flex: none;
}
.nav__up:hover:not([disabled]) { border-color: var(--pour); color: var(--pour); }
.nav__up[disabled] { opacity: .3; cursor: default; }
.nav__crumb {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--pour); font: inherit; padding: 2px 6px; border-radius: var(--r-xs);
}
.nav__crumb:hover:not([disabled]) { background: rgba(255,163,23,.12); }
.nav__crumb[disabled] { color: var(--bright); cursor: default; }
.nav__sep { color: var(--rule); }

.nav__list { max-height: 260px; overflow: auto; }
.nav__row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  appearance: none; background: none; border: 0;
  text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--ash);
  font-family: var(--mono); font-size: 12.5px; color: var(--steel);
  transition: background .16s;
}
.nav__row:last-child { border-bottom: 0; }
.nav__row[data-kind='dir'] { cursor: pointer; }
.nav__row[data-kind='dir']:hover { background: var(--raised); color: var(--bright); }
.nav__row[data-kind='dir']::before {
  content: ''; width: 7px; height: 7px; background: var(--rule);
  transform: rotate(45deg); flex: none; transition: all .2s;
}
.nav__row[data-crate='true']::before { background: var(--pour); box-shadow: 0 0 9px var(--pour); }
.nav__row[data-crate='true'] .nav__label { color: var(--bright); }
.nav__row[data-kind='dir'] .nav__label::after { content: '/'; color: var(--rule); }

.nav__row[data-kind='file'] { cursor: default; color: var(--scale); opacity: .72; }
.nav__row[data-kind='file']::before {
  content: ''; width: 7px; height: 7px; border: 1px solid var(--rule);
  border-radius: 1px; flex: none;
}
.nav__row[data-key='true'] { opacity: 1; color: var(--steel); }
.nav__row[data-key='true']::before { border-color: var(--quench); }
.nav__row small {
  margin-left: auto; color: var(--pour); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
}

.nav__detail {
  padding: 12px 16px; border-bottom: 1px solid var(--ash);
  background: rgba(255,163,23,.04);
  font-family: var(--mono); font-size: 11.5px; color: var(--steel);
}
.nav__warn { color: var(--ember); font-family: var(--body); font-size: 13px; line-height: 1.5; }

.nav__foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; background: rgba(0,0,0,.2);
}
.nav__verdict { font-size: 13px; color: var(--steel); flex: 1 1 260px; line-height: 1.5; }
.nav__verdict b { color: var(--bright); font-family: var(--mono); }
.nav__verdict[data-ok='false'] { color: var(--ember); }

/* --- crate chips --------------------------------------------------------- */

.crates { border-bottom: 1px solid var(--ash); }
.crates__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px 8px;
}
.crates__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--scale); flex: 1 1 20ch;
}
.crates__filter {
  background: var(--iron); border: 1px solid var(--rule); color: var(--bright);
  font-family: var(--mono); font-size: 11.5px; padding: 5px 12px;
  border-radius: var(--r-pill); width: 150px;
}
.crates__filter:focus { outline: none; border-color: var(--pour); }
.crates__wrap {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 16px 14px; max-height: 132px; overflow: auto;
}
.crate {
  appearance: none; cursor: pointer; background: var(--iron);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  color: var(--steel); font-family: var(--mono); font-size: 11.5px;
  padding: 5px 13px; transition: all .18s; white-space: nowrap;
}
.crate:hover { border-color: var(--pour); color: var(--bright); }
.crate[aria-pressed='true'] { background: var(--pour); border-color: var(--pour); color: var(--slag); }