/* The purple listing pages: Printables (pages/purple/printables.php) and Worksheet Makers
   (pages/purple/generators.php); docs/purple-rollout.md, steps 2 and 3. Script: js/purple-listing.js.
   Design: mockups/redesign/site-a-hub/live/printables.html (Blake's mockup, 2026-09-28):
   a white filter card on the left (Which grade? / Which topic?, pill rows with live counts)
   and one white panel on the right holding printable cards. One page scroll.
   Colours come from the --pv-* variables in css/purple-skin.css. */
body.pv-body { margin: 0; }
.pl-top { background: #fff; border-bottom: 1px solid var(--pv-line); }
.pl-top .pv-wrap { display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.pl-top .lbl { font: 700 21px 'Fredoka', sans-serif; color: var(--pv-plum); }
.pl-find { flex: 1 1 380px; max-width: 620px; display: flex; align-items: center; background: var(--pv-bg); border-radius: 999px; padding: 4px; }
.pl-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 9px 16px; font: 500 14px 'DM Sans', sans-serif; color: var(--pv-ink); }
.pl-find input::placeholder { color: #8f86ad; }
.pl-find input { text-overflow: ellipsis; }
.pl-find button { border: 0; border-radius: 999px; background: var(--pv-orange); color: var(--pv-plum); font: 700 13.5px 'DM Sans', sans-serif; padding: 10px 20px; cursor: pointer; }
.pl-find button:hover { background: var(--pv-orange-d); }

.pl { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: stretch; padding-top: 20px; padding-bottom: 20px; }
.pl-card, .pl-panel { background: #fff; border-radius: 24px; box-shadow: 0 6px 20px rgba(52,30,96,.05); }
/* two cards stacked in the left column: Which grade? and Which topic? (2026-09-30) */
.pl-rail { display: flex; flex-direction: column; gap: 18px; align-self: start; }
.pl-card { padding: 20px 12px; }
.pl-rail h3 { font: 600 19px 'Fredoka', sans-serif !important; color: var(--pv-plum); margin: 0 4px 10px; }
.pl-rail h3 + .opts { margin-bottom: 0; }
.opts { display: grid; gap: 7px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: var(--pv-cream); border: 2px solid transparent; border-radius: 999px; padding: 4px 10px; font: 700 13.5px 'DM Sans', sans-serif; color: var(--pv-plum); cursor: pointer; text-align: left; transition: border-color .12s, background .12s; }
.opt:hover { border-color: var(--pv-lav); }
.opt.on { border-color: var(--pv-violet); }
.opt small { font-weight: 600; font-size: 12px; color: var(--pv-muted); }
/* no box around the search field when it is clicked into (Blake, 2026-10-06) */
.pl-find input:focus, .pl-find input:focus-visible { outline: 0; }
.opt:focus-visible, .pc:focus-visible { outline: 3px solid rgba(99,75,245,.35); outline-offset: 2px; }
.opts.grades .opt { font: 600 16px 'Fredoka', sans-serif; color: var(--pv-violet); }
.opts.grades .opt small { font-family: 'DM Sans', sans-serif; }
/* grades one to a row in the left column (Michael, 2026-10-22; two to a row earlier that day); phones keep three (below) */
.opts.grades { grid-template-columns: minmax(0, 1fr); }

.pl-panel { padding: 22px 22px 28px; min-width: 0; }
.pl-head { text-align: center; margin-bottom: 20px; }
.pl-head h1 { font: 600 30px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0; line-height: 1.15; }
.pl-head h1 span { color: var(--pv-violet); }
.pl-head .sub { font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--pv-violet-d); margin-top: 4px; }
.pl-head .sub a { color: var(--pv-violet); cursor: pointer; text-transform: none; letter-spacing: 0; margin-left: 8px; font-weight: 700; }

.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pc { display: flex; flex-direction: column; background: var(--pv-cream); border: 0; border-radius: 22px; overflow: hidden; transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit; }
.pc:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(52,30,96,.12); }
.pc .thumb { background: #efe9f9; height: 150px; overflow: hidden; padding: 12px 14px 0; }
.pc .thumb img { width: 100%; display: block; border-radius: 8px 8px 0 0; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
/* Stack (2026-09-30 option): a printable with more than one worksheet shows its first three
   pages as a fanned pile, "A · Stack" from hub-cards.html without the round badges. Hover
   fans it wider. Page 1 is the pack's thumb.webp; pages 2-3 come from live/stack/ (made by
   scripts/purple-stack-thumbs.mjs). Same height as a normal thumb, so rows stay even. */
.pc .stack { position: relative; height: 162px; background: linear-gradient(160deg, #efe9f9, #e4dcff); overflow: hidden; }
.pc .stack .sheet { position: absolute; left: 50%; top: 22px; width: 44%; aspect-ratio: 8.5 / 11; background: #fff; border-radius: 6px; box-shadow: 0 6px 16px rgba(52,30,96,.22); overflow: hidden; transition: transform .25s ease; }
.pc .stack .sheet img { width: 100%; display: block; }
.pc .stack .s1 { transform: translateX(-92%) rotate(-9deg); }
.pc .stack .s2 { transform: translateX(-50%) rotate(0); z-index: 2; top: 14px; }
.pc .stack .s3 { transform: translateX(-8%) rotate(9deg); }
.pc:hover .stack .s1 { transform: translateX(-104%) rotate(-12deg); }
.pc:hover .stack .s3 { transform: translateX(4%) rotate(12deg); }
@media (prefers-reduced-motion: reduce) { .pc .stack .sheet { transition: none; } }
.pc .thumb { height: 162px; box-sizing: border-box; }
.pc .info { padding: 14px 14px 16px; }
.pc b { display: block; font: 600 17px 'Fredoka', sans-serif; color: var(--pv-plum); line-height: 1.2; }
.pc .m { font-size: 12.5px; color: var(--pv-muted); margin-top: 3px; }
.chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.chip { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; background: #ece8ff; color: #4a37c9; }
.chip.pages { background: #d8f5ec; color: #1f6a55; }
.chip.maker { background: #ffe9c6; color: #8a4b00; }
.chip.season { background: #ffe0ff; color: #8a1f8a; }
.more { text-align: center; margin-top: 24px; }
.more button { border: 2px solid var(--pv-line); background: #fff; color: var(--pv-plum); border-radius: 999px; padding: 10px 22px; font: 700 14px 'DM Sans', sans-serif; cursor: pointer; }
.more button:hover { border-color: var(--pv-lav); }
.empty { text-align: center; color: var(--pv-muted); padding: 40px 10px; }
.empty a, .suggest a { color: var(--pv-violet); font-weight: 700; }
.empty .try { cursor: pointer; }

.suggest { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border-radius: 24px; padding: 18px 24px; margin-bottom: 8px; box-shadow: 0 6px 20px rgba(52,30,96,.05); }
.suggest b { font: 600 18px 'Fredoka', sans-serif; color: var(--pv-plum); }
.suggest p { margin: 2px 0 0; color: var(--pv-muted); font-size: 14px; }
/* What the page is and how to use it, as a quiet card under everything (as the hubs' "About these
   worksheets"; Blake, 2026-10-06): the words a visitor and a search engine look for */
.about { margin: 14px 0 8px; padding: 18px 24px; border-radius: 20px; background: rgba(255,255,255,.55); border: 1px solid var(--pv-line); }
.about h2 { font: 600 16px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0 0 6px; }
.about p { font-size: 13.5px; color: var(--pv-muted); line-height: 1.6; margin: 0; max-width: 900px; }
.suggest .go { background: var(--pv-orange); color: var(--pv-plum) !important; border-radius: 999px; padding: 10px 20px; text-decoration: none; }

@media (max-width: 1100px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pl { grid-template-columns: 1fr; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts.grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-rail { gap: 14px; }
  .pl-panel { padding: 18px 14px 22px; }
  .pl-head h1 { font-size: 24px !important; }
}
@media (max-width: 520px) { .pl-grid { grid-template-columns: 1fr; } }
.pl-head.v-b, .pl-head.v-c, .pl-head.v-d { text-align: left; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 4px 18px; }
.pl-head.v-b h1 { font: 600 24px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0; }
.pl-head .n { font-size: 13.5px; font-weight: 600; color: var(--pv-muted); }
.pl-head .n b { color: var(--pv-plum); }
.pl-head .clr { margin-left: auto; color: var(--pv-violet); font: 700 13.5px 'DM Sans', sans-serif; cursor: pointer; text-decoration: none; }
.pl-head .clr:hover { text-decoration: underline; }
.pl-head.v-c { align-items: center; }
.pl-head.v-c .big { font: 600 24px 'Fredoka', sans-serif; color: var(--pv-plum); }
.pl-head.v-c .big small { font: 600 15px 'DM Sans', sans-serif; color: var(--pv-muted); margin-left: 4px; }
.pl-head .fchip { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px 'DM Sans', sans-serif; border-radius: 999px; padding: 5px 11px; background: var(--pv-bg); color: var(--pv-muted); }
.pl-head .fchip.on { background: #ece8ff; color: var(--pv-violet-d); cursor: pointer; }
.pl-head .fchip.on:hover { background: #ddd6ff; }
.pl-head .fchip i { font-style: normal; font-size: 14px; line-height: 1; opacity: .7; }
.pl-head.v-d p { margin: 0; font: 500 18px/1.4 'DM Sans', sans-serif; color: #4b3f6b; }
.pl-head.v-d p b { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--pv-plum); }
.pl-head.v-e { align-items: center; }
.pl-head.v-d p em { font-style: normal; font-weight: 700; color: var(--pv-violet-d); }

/* The page's main heading is the label beside the search box */
body.pv-body .pl-top h1.lbl { font: 700 21px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0; letter-spacing: normal !important; }
/* Counts are drawn from data-n so a pill's own text stays just its name (the visit tracker
   records that text as the filter value) */
.opt small::after { content: attr(data-n); }
/* The cards are all in the page; the script hides the ones the filters leave out */
.pc[hidden], .empty[hidden] { display: none; }
/* Worksheet Makers cards: the card icon on the icon background, framed like a sheet, and two
   lines of description */
.pc .thumb .icon { height: 100%; background: #f7f8fc; border-radius: 8px 8px 0 0; box-shadow: 0 3px 10px rgba(0,0,0,.1); display: grid; place-items: center; }
.pc .thumb .icon img { width: 72%; height: 88%; object-fit: contain; display: block; border-radius: 0; box-shadow: none; }
/* up to four lines of the description show and only longer ones are cut (two lines until 2026-10-08) */
.pc .desc { font-size: 13px; color: #4b3f6b; line-height: 1.45; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* "Everything here is free": a soft line along the top of the panel, under the count line
   (includes/purple/free-banner.php; Blake, 2026-10-06). .rise = its arrival, once per visit. */
.pl-free { display: flex; align-items: center; gap: 10px; background: #e9faf4; border-radius: 16px; padding: 11px 16px; margin: -6px 0 16px; font-size: 14px; font-weight: 600; color: #1f5a49; }
.pl-free b { font-weight: 800; }
.pl-free i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #1f9d76; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; }
.pl-free .w { display: inline-block; }
.pl-free.rise { animation: plFreeUp .5s cubic-bezier(.2,.8,.2,1) both; }
.pl-free.rise .w { animation: plFreeWord .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.25s + var(--i) * .055s); }
.pl-free.rise i { animation: plFreePop .6s cubic-bezier(.3,1.6,.5,1) .15s both; }
@keyframes plFreeUp { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes plFreeWord { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes plFreePop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pl-free.rise, .pl-free.rise .w, .pl-free.rise i { animation: none; } }

/* A search for a standard code (1.OA.C.6): the standards found, each a link to its own page,
   which lists the makers, tools and quizzes for it too (js/purple-listing.js) */
.pl-std { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 4px 16px; font: 600 14px 'DM Sans', sans-serif; color: var(--pv-muted); }
.pl-std[hidden] { display: none; }
.pl-std span { font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--pv-violet-d); }
.pl-std a { display: inline-flex; align-items: center; gap: 6px; background: #ece8ff; color: var(--pv-violet-d); border-radius: 999px; padding: 6px 13px; text-decoration: none; }
.pl-std a b { color: var(--pv-plum); font-weight: 700; }
.pl-std a::after { content: '\203A'; font-size: 17px; line-height: 1; }
.pl-std a:hover { background: #ddd6ff; }

/* Newest | A to Z (Printables; 2026-10-08). The bar holds the count line and the toggle, so the
   script can redraw the count line without touching the toggle. A round knob slides under the
   order in use; picking one plays its icon once: the clock's minute hand sweeps round, A B C hop. */
.pl-bar { display: flex; align-items: center; gap: 12px; margin: 2px 4px 18px; }
.pl-bar > .pl-head { flex: 1 1 auto; min-width: 0; margin: 0; }
/* 86 by 36: the height of the kind's picture beside the count. A press anywhere on it flips it (js/purple-listing.js). */
.pl-sort { position: relative; flex: none; display: inline-flex; padding: 3px; background: var(--pv-bg); border-radius: 999px; cursor: pointer; }
.pl-sort .knob { position: absolute; top: 3px; left: 3px; width: 40px; height: 30px; border-radius: 999px; background: var(--pv-violet); transition: transform .42s cubic-bezier(.34,1.56,.64,1); }
.pl-sort[data-sort="az"] .knob { transform: translateX(40px); }
.pl-sort button { position: relative; z-index: 1; width: 40px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--pv-muted); cursor: pointer; transition: color .25s; }
.pl-sort button:hover { color: var(--pv-plum); }
.pl-sort button[aria-pressed="true"] { color: #fff; }
.pl-sort button:focus-visible { outline: 3px solid rgba(99,75,245,.35); outline-offset: 2px; }
.pl-sort svg { height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pl-sort .clock { width: 18px; }
/* the letters are words, in the headings' font; each is its own piece so they can hop one after another */
.pl-sort .abc { display: inline-flex; font: 500 14.5px/1 'Fredoka', sans-serif; letter-spacing: .3px; }   /* 500: the weight of the clock's line */
.pl-sort .abc i { font-style: normal; display: inline-block; }
.pl-sort .clock .mh { transform-box: view-box; transform-origin: 12px 12px; }
.pl-sort .play .mh { animation: plSweep .8s cubic-bezier(.45,0,.2,1); }
.pl-sort .play .abc i { animation: plHop .42s cubic-bezier(.3,0,.3,1); }
.pl-sort .play .abc i:nth-child(2) { animation-delay: .08s; }
.pl-sort .play .abc i:nth-child(3) { animation-delay: .16s; }
@keyframes plSweep { to { transform: rotate(360deg); } }
@keyframes plHop { 0%, 100% { transform: none; } 45% { transform: translateY(-4px); } }
/* the cards come back in the new order with a short rise */
.pl-grid.resort { animation: plResort .32s ease-out; }
@keyframes plResort { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pl-sort .knob, .pl-sort button { transition: none; }
  .pl-sort .play .mh, .pl-sort .play .abc i, .pl-grid.resort { animation: none; }
}

/* Phones (2026-10-08): the two filter cards become one white section with two buttons side by side,
   "Grade: All" and "Topic: All" (a long topic takes a line of its own), no headings. Tapping one
   slides its options open under both buttons and turns its chevron over. js/purple-listing.js adds
   the buttons (.pick) and wraps each card's pills in .drop; the cards themselves step aside
   (display: contents), so their buttons and drops line up in the one section. */
.pl-rail .pick { display: none; }
@media (max-width: 760px) {
  .pl-rail { flex-direction: row; flex-wrap: wrap; gap: 0 8px; background: #fff; border-radius: 24px; padding: 8px 12px; box-shadow: 0 6px 20px rgba(52,30,96,.05); }
  .pl-rail .pl-card { display: contents; }
  .pl-rail h3 { display: none; }
  .pl-rail .pick { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; min-height: 44px; margin: 4px 0; box-sizing: border-box; background: var(--pv-cream); border: 2px solid var(--pv-violet); border-radius: 999px; padding: 6px 12px 6px 16px; font: 700 14px 'DM Sans', sans-serif; color: var(--pv-violet); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
  .pl-rail .pick .lab { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-rail .pick .lab b { font-weight: 600; color: var(--pv-plum); }
  .pl-rail .pick:focus-visible { outline: 3px solid rgba(99,75,245,.35); outline-offset: 2px; }
  .pl-rail .pick .chev { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
  .pl-card.open .pick .chev { transform: rotate(180deg); }
  /* each card's options, full width under the buttons (order puts both drops after both buttons).
     They slide open as a one-row grid going from 0fr to 1fr; their padding comes with them, so
     nothing shows while closed, and the side padding keeps focus rings from being cut off. */
  .pl-rail .drop { order: 1; flex: 0 0 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.2,.8,.2,1); }
  .pl-rail .drop > .opts { min-height: 0; overflow: hidden; padding: 0 5px; margin: 0 -5px; opacity: 0; visibility: hidden; transition: padding .34s cubic-bezier(.2,.8,.2,1), opacity .18s, visibility 0s .34s; }
  .pl-card.open .drop { grid-template-rows: 1fr; }
  .pl-card.open .drop > .opts { padding: 8px 5px 8px; opacity: 1; visibility: visible; transition: padding .34s cubic-bezier(.2,.8,.2,1), opacity .25s .06s, visibility 0s; }
}

/* Phones: the search field is folded away under the title; the magnifying glass at the other end
   of the title's line (#seek) opens it, turning into a cross that folds it away again. */
.pl-seek { display: none; }
@media (max-width: 760px) {
  .pl-top .pv-wrap { row-gap: 0; }
  .pl-top .lbl { flex: 1; }
  .pl-seek { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--pv-bg); color: var(--pv-violet); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pl-seek:focus-visible { outline: 3px solid rgba(99,75,245,.35); outline-offset: 2px; }
  .pl-seek svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; overflow: visible; }
  .pl-seek .glass, .pl-seek .x { transform-box: view-box; transform-origin: 12px 12px; transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
  .pl-seek .x { opacity: 0; transform: rotate(-90deg) scale(.4); }
  .pl-top.searching .pl-seek .glass { opacity: 0; transform: rotate(90deg) scale(.4); }
  .pl-top.searching .pl-seek .x { opacity: 1; transform: none; }
  .pl-find { flex: 1 1 100%; max-width: none; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height .32s cubic-bezier(.2,.8,.2,1), padding .32s, margin .32s, opacity .18s, visibility 0s .32s; }
  .pl-top.searching .pl-find { max-height: 64px; padding-top: 4px; padding-bottom: 4px; margin-top: 10px; opacity: 1; visibility: visible; transition: max-height .32s cubic-bezier(.2,.8,.2,1), padding .32s, margin .32s, opacity .25s .05s, visibility 0s; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .pl-rail .pick .chev, .pl-rail .drop, .pl-rail .drop > .opts, .pl-card.open .drop > .opts,
  .pl-seek .glass, .pl-seek .x, .pl-find, .pl-top.searching .pl-find { transition: none; }
}

/* The chips sit in a wrapper so a phone can give them a line of their own; on a wide screen the wrapper is not there. */
.pl-head .fchips { display: contents; }
/* A phone, the two listings: the count (on Printables, with the sort toggle at its right, so that never moves), then the
   chips with "Clear filters" at their right, level with the top chip however many rows the chips take. On Printables
   the heading shares a bar with the toggle, so its box steps aside to let its pieces take those places. */
@media (max-width: 760px) {
  .pl-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 8px; }
  .pl-bar > .pl-head { display: contents !important; }
  .pl-bar > .pl-head > p { grid-column: 2; font-size: 15.5px; }
  .pl-bar > .pl-head > p:first-child { grid-column: 1 / 3; }   /* before the kind's picture arrives */
  .pl-bar > .pl-sort { grid-column: 3; grid-row: 1; justify-self: end; }
  .pl-bar > .pl-head > .fchips { grid-column: 1 / 3; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .pl-bar > .pl-head > .clr, .pl-panel > .pl-head > .clr { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; display: flex; align-items: center; min-height: 27px; margin: 0; }   /* 27: a chip's height */
  /* Worksheet Makers: no toggle, and its heading has no bar */
  .pl-panel > .pl-head { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 8px; }
  .pl-panel > .pl-head > p { grid-column: 2 / -1; font-size: 15.5px; }
  .pl-panel > .pl-head > p:first-child { grid-column: 1 / -1; }
  .pl-panel > .pl-head > .fchips { grid-column: 1 / 3; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
}