/* Mod pack tags: the chips on a pack, and the filter over the shared packs on /packs.
   The four are Avatars, Maps, Code Mods and Content Packs, each with its own color. */

.ptag--avatars { --tag: #5BB0FF; }
.ptag--maps { --tag: #37D28A; }
.ptag--code { --tag: #F5B24A; }
.ptag--content { --tag: #B38CFF; }

.ptag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ptag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px 0 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: var(--text-2);
  font: 700 12px var(--body);
  white-space: nowrap;
}
.ptag svg { flex: none; width: 13px; height: 13px; color: var(--tag, var(--blue)); }

.pk__tags { margin-top: 6px; }
.packpage__tags { margin: 14px 0 0; }
.packpage__tags .ptag { min-height: 28px; padding: 0 11px 0 9px; font-size: 13px; }
.packpage__tags .ptag svg { width: 15px; height: 15px; }

/* The filter: All and the four tags, in the same chunky style as the buttons above it.
   The pressed chip's blue is one block behind the row (.ptag-bar__pill) that slides to
   whichever is pressed, rather than each chip swapping its own background. Each chip's dark
   face is its ::before, drawn under the block, and its words and icon sit over it. */
.ptag-bar { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.ptag-bar:empty { display: none; }
.ptag-bar__pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 36px;
  border-radius: 9px;
  background: var(--blue);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .34);
  pointer-events: none;
  opacity: 0;
  transition: transform 300ms var(--spring, cubic-bezier(.22, 1, .36, 1)), width 300ms var(--spring, cubic-bezier(.22, 1, .36, 1)), opacity 160ms var(--ease-out);
}
.ptag-bar.has-pill .ptag-bar__pill { opacity: 1; }
/* Put in place without sliding, for the first paint and a resize. */
.ptag-bar.no-slide .ptag-bar__pill { transition: none; }
.ptag-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-3);
  font: 700 13px var(--body);
  cursor: pointer;
}
.ptag-pick::before, .ptag-pick::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
}
.ptag-pick::before { background: var(--plate); box-shadow: inset 0 0 0 2px var(--rim); }
.ptag-pick::after { box-shadow: inset 0 0 0 2px var(--rim-hover); opacity: 0; transition: opacity 160ms var(--ease-out); }
.ptag-pick svg { width: 16px; height: 16px; color: var(--muted); }
.ptag-pick[data-tag="avatars"] { --tag: #5BB0FF; }
.ptag-pick[data-tag="maps"] { --tag: #37D28A; }
.ptag-pick[data-tag="code"] { --tag: #F5B24A; }
.ptag-pick[data-tag="content"] { --tag: #B38CFF; }
.ptag-pick:hover { color: #fff; }
.ptag-pick:hover::after { opacity: 1; }
.ptag-pick:hover svg { color: var(--tag, #fff); }
.ptag-pick[aria-pressed="true"], .ptag-pick[aria-pressed="true"] svg { color: var(--on-blue, #fff); }
.ptag-pick[aria-pressed="true"]::after { opacity: 0; }
/* Without the sliding block (no script yet), the pressed chip carries the blue itself. */
.ptag-bar:not(.has-pill) .ptag-pick[aria-pressed="true"]::before { background: var(--blue); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .34); }
.ptag-pick:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* Cards the filter brings in are moved by script, so they skip the page's own entrance. */
.pk.pk--quiet { animation: none; }

@media (max-width: 560px) {
  .ptag-bar { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .ptag-bar::-webkit-scrollbar { display: none; }
  .ptag-pick { flex: none; }
}

/* The grid is where leaving cards are held while they fade, lifted out of its flow. */
#gridOssa { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .ptag-bar__pill, .ptag-pick::after { transition: none; }
}

/* A pack's own page: who it's for, and what's in it */

.pv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  padding: 0 10px 0 8px;
  min-height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 2px var(--rim);
  color: var(--text-2);
  font: 800 12px var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 6px;
}
.pv-badge svg { width: 14px; height: 14px; }

.pv-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }
.pv-vis__label { color: var(--muted); font-size: 13px; font-weight: 600; }
.pv-vis__say { display: flex; align-items: center; gap: 8px; flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13.5px; }
.pv-vis__say svg { flex: none; width: 16px; height: 16px; }
.pv-vis__say.is-private { color: var(--text-2); }
.pv-vis__say.is-private svg { color: var(--blue-bright); }
.pv-vis__say.is-down { margin-top: 16px; color: var(--bad); }

/* A row of buttons with one pressed. The blue is one block behind them that slides across. */
.pv-seg {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--plate);
  box-shadow: inset 0 0 0 2px var(--rim);
}
.pv-seg[aria-busy="true"] { cursor: progress; }
.pv-seg__pill {
  position: absolute;
  top: 3px;
  left: 0;
  bottom: 3px;
  z-index: -1;
  width: 0;
  border-radius: 8px;
  background: var(--blue);
  transition: transform 280ms var(--spring, cubic-bezier(.22, 1, .36, 1)), width 280ms var(--spring, cubic-bezier(.22, 1, .36, 1));
}
.pv-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  font: 700 13px var(--body);
  cursor: pointer;
}
.pv-seg button svg { width: 15px; height: 15px; color: var(--muted); }
.pv-seg button:hover { color: #fff; }
.pv-seg button[aria-pressed="true"], .pv-seg button[aria-pressed="true"] svg { color: #fff; }
.pv-seg button:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 1px; }

.pv-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 46px 0 18px; }
.pv-bar .packpage__h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.pv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-tools__label { color: var(--muted); font-size: 13px; font-weight: 600; }
.pv-count { padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: var(--text-3); font: 700 12.5px var(--body); }

.pv-body.is-in { animation: pv-in 180ms var(--ease-out) both; }
@keyframes pv-in { from { opacity: 0; transform: translateY(4px); } }

.pv-group + .pv-group { margin-top: 26px; }
.pv-group__head { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: #fff; font: 700 16px var(--display); }
.pv-group__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px var(--rim); }
.pv-group__icon svg { width: 15px; height: 15px; color: var(--tag, var(--blue)); }
.pv-group__logo { width: 22px; height: 22px; border-radius: 6px; }

.pv-list, .pv-grid { margin: 0; padding: 0; list-style: none; }
.pv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; align-items: stretch; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-items: stretch; }
.pv-list > li, .pv-grid > li { display: flex; min-width: 0; }

.pv-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pv-meta { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.pv-letter { display: grid; place-items: center; color: var(--dim); font: 700 18px var(--display); }

/* A row: the icon and the words centered, every row the same height whether the name takes
   one line or two. */
.pv-row {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.pv-row:hover { border-color: var(--line-blue); transform: translateY(-1px); }
.pv-row:focus-visible, .pv-card:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.pv-row__pic { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 9px; background: var(--bg-3); }
.pv-row__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-row__text { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.pv-row__tags { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 5px; }
.pv-row__tags .ptag { min-height: 22px; font-size: 11.5px; }

.pv-src { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pv-src img { width: 16px; height: 16px; border-radius: 4px; }

/* A card: the picture on top, then the name held to two lines so every card in a row matches. */
.pv-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.pv-card:hover { border-color: var(--line-blue); transform: translateY(-2px); }
.pv-card__pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); }
.pv-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-card__pic .pv-letter { height: 100%; font-size: 34px; }
.pv-card__src {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--sink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 4px 10px rgba(0, 0, 0, .4);
}
.pv-card__src img { width: 18px; height: 18px; border-radius: 4px; }
.pv-card__body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-height: 74px; padding: 10px 12px 12px; }
.pv-card__chip { margin-top: auto; padding-top: 6px; }
.pv-card__chip .ptag { min-height: 22px; font-size: 11.5px; }

.pv-empty { margin: 0; padding: 26px; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--muted); text-align: center; }

@media (max-width: 560px) {
  .pv-list { grid-template-columns: minmax(0, 1fr); }
  .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pv-tools { width: 100%; }
  .pv-row__tags .ptag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-seg__pill { transition: none; }
  .pv-body.is-in { animation: none; }
}