/* Browse by pattern (world/browse-patterns.mjs): the patterns in the book's order, one continuous grid;
   one opens in place to the places where the pattern appears, as portrait tiles. */
.pattern-browser { font-size: 1rem; }
.pattern-browser .pb-filter {
  all: unset; box-sizing: border-box; display: block; width: 100%; margin: 0.35rem 0 0.2rem; padding: 0.22rem 0 0.2rem;
  font: inherit; font-size: 0.78rem; font-style: italic; color: var(--ink); border-bottom: 1px solid var(--rule);
}
.pattern-browser .pb-filter::placeholder { color: var(--ink-faint); }
.pattern-browser .pb-filter:focus { border-bottom-color: var(--ink-soft); }
.pattern-browser .pb-filter::-webkit-search-cancel-button { opacity: 0.4; }
.pattern-browser .pb-empty { margin: 0.6rem 0; font-size: 0.74rem; font-style: italic; color: var(--ink-faint); }
.pattern-browser .pb-item[hidden], .pattern-browser .pb-empty[hidden] { display: none; }


.pattern-browser .pb-list { list-style: none; margin: 0; padding: 0; }
.pattern-browser :is(.pb-row, #pb-row) {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 0.45rem; padding: 0.05rem 0; min-height: 2.45rem;
  font-size: 0.8rem; line-height: 1.3; color: var(--ink-soft); transition: color 0.2s ease;
}
.pattern-browser .pb-row:hover, .pattern-browser .pb-item.open .pb-row { color: var(--ink); }
.pattern-browser .pb-row:focus-visible { outline: 1px solid var(--rule); outline-offset: 1px; }
/* (the rows and tiles are buttons in an li: `:is(…, #…)` lifts them over world.css's `.world-page #index li button`)

/* the pattern's picture (its place's current still), held inside its own cell: a soft oval mask lets its
   edge go into the paper, but it never leaves its box */
.pattern-browser .pb-splotch { flex: none; display: block; position: relative; overflow: hidden; }
.pattern-browser .pb-splotch img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 100%); mask: radial-gradient(closest-side, #000 62%, transparent 100%);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.pattern-browser .pb-row:hover .pb-splotch img, .pattern-browser .pb-item.open .pb-splotch img { transform: scale(1.06); filter: saturate(1.1); }
.pattern-browser .pb-n { min-width: 1.45rem; font-size: 0.68rem; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
.pattern-browser .pb-name { flex: 1; min-width: 0; }
.pattern-browser .pb-count { font-size: 0.64rem; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
.pattern-browser .pb-item.open .pb-n { color: #7a4a12; }

.pattern-browser .pb-body { display: none; }
.pattern-browser .pb-item.open .pb-body { display: block; padding: 0.3rem 0 0.7rem; }
.pattern-browser .pb-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem 0.4rem; }
.pattern-browser :is(.pb-tile, #pb-tile) { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; width: 100%; }
.pattern-browser .pb-pic { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-deep); border: 0.5px solid var(--rule); }
.pattern-browser .pb-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: filter 0.25s ease; }
.pattern-browser .pb-tile:hover .pb-pic img { filter: none; }
.pattern-browser .pb-tile:hover .pb-pic { border-color: var(--ink-soft); }
.pattern-browser .pb-tile:focus-visible { outline: 1px solid var(--rule); outline-offset: 2px; }
.pattern-browser .pb-label { font-size: 0.66rem; line-height: 1.22; font-style: italic; color: var(--ink-soft); }
.pattern-browser .pb-tile:hover .pb-label { color: var(--ink); }

/* two to a row: the picture, and under it one run of text, the number, the name and the count, wrapping
   (never cut) to two lines at most; an open one takes the whole row for its places, its own head a cell wide */
.pattern-browser .pb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.6rem; align-items: start; margin-top: 0.6rem; }
.pattern-browser .pb-item { min-width: 0; }
.pattern-browser .pb-item.open { grid-column: 1 / -1; }
.pattern-browser .pb-list .pb-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.22rem; min-height: 0; padding: 0; }
.pattern-browser .pb-item.open .pb-row { width: calc(50% - 0.3rem); }
/* the picture stays in its own box, above the caption: nothing of it reaches the title or the next cell */
.pattern-browser .pb-list .pb-splotch { width: 100%; height: auto; aspect-ratio: 3 / 2; margin: 0; overflow: hidden; contain: paint; }
.pattern-browser .pb-list .pb-cap { display: block; min-width: 0; font-size: 0.72rem; line-height: 1.22; white-space: normal; overflow-wrap: break-word; hyphens: manual; text-wrap: pretty; }
.pattern-browser .pb-list .pb-n { min-width: 0; margin-right: 0.12rem; font-size: 0.62rem; }
.pattern-browser .pb-list .pb-name { white-space: normal; }
.pattern-browser .pb-list .pb-count { margin-left: 0.1rem; font-size: 0.6rem; white-space: nowrap; }
.pattern-browser .pb-list .pb-cap.pb-long { font-size: 0.64rem; }
.pattern-browser .pb-list .pb-cap.pb-longer { font-size: 0.58rem; }
.pattern-browser .pb-label { white-space: normal; overflow: visible; overflow-wrap: break-word; }