/* Area: packs (S05 pack grid, S26 storyboard pack grid, S06 smart packs, Library, S17 import,
   S22 plan, S27 search, S30 pack form). Owned by the packs screen agent. Loaded on every page by
   base.html, so every rule is scoped: `.pg-packs` for the area's pages, and a component class for
   what renders on any page (`.pk-modal` / `.pk-import` in #modal, `.pk-search` in #search-results).
   See docs/UI-CONVENTIONS.md. */

/* ---------- Grid pages: the work column (SHELL-SPEC §6): header, stats, tabs + sort, chips, results ---------- */
/* Positioned, so absolutely placed bits (.sr-only labels) scroll with the column instead of the page. */
.pg-packs .pk-body{position:relative}
.pg-packs .pk-bar h1,.pg-packs .pk-bar .sub{flex:0 1 auto}
/* One row: the name and the count line give way (ellipsis) before the buttons wrap. */
.pg-packs .pk-gridbar{flex-wrap:nowrap}
.pg-packs .pk-gridbar .sub{flex-shrink:50}
.pg-packs .pk-bar .menu-wrap,.pg-packs .pk-bar form,.pg-packs .pk-bar .icon-btn{flex:none}
.pg-packs .pk-bar form{margin:0}
.pg-packs .pk-bar .btn .i{width:12px;height:12px}
.pg-packs .pk-new .menu{min-width:270px}
.pg-packs .pk-more > summary{width:32px;height:32px}
.pg-packs .pk-stats{font:500 11.5px/1.55 var(--mono);color:var(--muted);margin:0 0 12px}
.pg-packs .pk-viewbar{gap:8px;margin-bottom:10px}
.pg-packs .pk-viewbar .seg > a{height:26px}
/* Card text: the shared `.card .meta` also matches the `.meta` utility (mono, muted), which would
   set card names in mono. Names are Inter 600 in the mockups. */
.pg-packs .card .meta{font:13px/1.45 var(--ui);color:var(--text);padding:8px 10px 9px}
.pg-packs .card .name{font-size:12.5px}
.pg-packs .pk-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;margin:0 0 14px}
.pg-packs .pk-sep{width:1px;height:18px;background:var(--line-2);margin:0 2px;flex:none}
.pg-packs .pk-sort > summary .i{width:12px;height:12px;opacity:.7}
.pg-packs .pk-sort .menu{min-width:190px}
.pg-packs .pk-results{transition:opacity var(--t-med) ease;min-width:0}
.pg-packs .pk-results.htmx-request{opacity:.45;pointer-events:none}
/* Three cards a row in the work column at 1280 and up (mockup 2; the column is 435–500 px), two below,
   as many as fit when the work column is the whole width. Square thumbs, the type tag bottom left. */
.pg-packs .grid.pk-grid,.pg-packs .pk-more-cards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pg-packs .cslot{display:flex;min-width:0}
.pg-packs .cslot > .card{flex:1;min-width:0}
.pg-packs .pk-more-cards{grid-column:1/-1;display:grid}
.pg-packs .pk-more-cards .skeleton.card{height:auto;aspect-ratio:3/4}
.pg-packs .card .thumb{height:auto;aspect-ratio:1/1}
.pg-packs .card .thumb > .badge:not(.r){top:auto;bottom:7px;left:7px;font:600 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);padding:2px 5px;border-radius:var(--radius-xs)}
.pg-packs .card .thumb > .badge.r{top:7px;right:7px;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis}
.pg-packs .card.planned .thumb > span:first-child{max-width:100%;overflow-wrap:anywhere}
.pg-packs .card .pk-home{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-packs .card .pk-home::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--line-2);flex:none}
.pg-packs .card .badge.r.lic{left:auto;right:8px}
.pg-packs .card .thumb.frame img{object-fit:cover}
.pg-packs .pk-sb .card.seq .thumb{aspect-ratio:16/9}
.pg-packs .grid.pk-sb,.pg-packs .pk-sb .pk-more-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pg-packs .pk-ins-loading{padding:32px}
.pg-packs-library .card .thumb img{object-fit:cover}

/* ---------- S22 pack plan (WF/04b): list | wide work ---------- */
.pg-packs .pk-planbar{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.pg-packs .pk-legend{margin-left:auto;color:var(--muted);font-size:12px}
.pg-packs .pl{border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--panel);overflow:hidden}
.pg-packs .pl > .r{display:grid;grid-template-columns:52px minmax(0,1fr) 150px minmax(0,210px) 112px 132px;grid-template-areas:"th nm states vc st act";gap:14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);min-width:0}
.pg-packs .pl > :last-child{border-bottom:0}
.pg-packs .pl > .r .th{grid-area:th;width:52px;height:52px;border-radius:var(--radius-ctl);overflow:hidden;background:var(--thumb-warm);display:grid;place-items:center;color:var(--muted)}
.pg-packs .pl > .r .th img{width:100%;height:100%;object-fit:cover}
.pg-packs .pl > .r .th.pd{background:var(--planned-stripes);border:1px dashed var(--line-2)}
.pg-packs .pl > .r .nm{grid-area:nm;min-width:0}
.pg-packs .pl > .r .nm .t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pg-packs .pl > .r .nm a:hover b{text-decoration:underline;text-underline-offset:2px}
.pg-packs .pl > .r .nm b{font-weight:600}
.pg-packs .pl > .r .nm .tag{font-size:10.5px;padding:0 7px}
.pg-packs .pl > .r .s{font:500 11px var(--mono);color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-packs .pl > .r .states{grid-area:states}
.pg-packs .pl > .r .vc{grid-area:vc;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pg-packs .pl > .r .vc .kept{font:500 10.5px var(--mono);color:var(--faint)}
.pg-packs .pl > .r .st{grid-area:st}
.pg-packs .pl > .r .act{grid-area:act;display:flex;justify-content:flex-end}
.pg-packs .pl > .r.hl{background:rgba(199,255,77,.05);box-shadow:inset 3px 0 0 var(--lime)}
.pg-packs .states{display:flex;gap:3px;min-width:0}
.pg-packs .states i{flex:1;height:6px;border-radius:3px;background:var(--raised-2)}
.pg-packs .states i.d{background:var(--pass)}
.pg-packs .states i.c{background:var(--lime)}
.pg-packs .pl .exp{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:12px;align-items:start;padding:14px;border-bottom:1px solid var(--line);background:rgba(199,255,77,.03);min-width:0}
.pg-packs .pk-vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;min-width:0}
.pg-packs .pk-var{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0}
.pg-packs .pk-var > .vd,.pg-packs .pk-var > .pk-cstate{grid-column:1/-1;justify-self:start}
.pg-packs .pk-var.ready{border-color:var(--lime-line)}
.pg-packs .pk-var .lt{width:28px;height:28px;border-radius:var(--radius-seg);background:var(--raised-2);display:grid;place-items:center;font:600 12px var(--mono);color:var(--text)}
.pg-packs .pk-var .tx{min-width:0}
.pg-packs .pk-var .tx b{display:block;font-weight:600}
.pg-packs .pk-var .tx small{display:block;font:500 10.5px var(--mono);color:var(--muted)}
.pg-packs .pk-cstate{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--ui);padding:3px 9px;border-radius:var(--radius-seg);background:var(--raised);color:var(--muted)}
.pg-packs .pk-cstate.running,.pg-packs .pk-cstate.queued{color:var(--violet-text);background:var(--violet-soft)}
.pg-packs .pk-cstate.running::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);animation:xw-pulse 1.6s ease-in-out infinite}
.pg-packs .pk-cstate.failed{color:var(--fail);background:var(--fail-soft)}
.pg-packs .pl .exp .job .acts .btn{flex:1}

/* ---------- Search page (S27) ---------- */
.pg-packs .pk-search-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.pg-packs .pk-search-form .inp{flex:1 1 240px;max-width:440px}
.pg-packs .pk-search-form .help{font-size:12px;color:var(--muted)}
.pg-packs .pk-search-form code{font-size:11.5px;color:var(--text-2)}
.pg-packs-search .sec-h{margin:22px 0 10px}
.pg-packs-search .sec-h .n{font:500 11px var(--mono);color:var(--muted);letter-spacing:0}
.pg-packs .pk-hits{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.pg-packs .pk-hits .hit{border:1px solid var(--line);background:var(--panel)}

/* Hit rows: the topbar dropdown (any page) and the search page lists. */
.pk-search .hit,.pg-packs .pk-hits .hit{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:var(--radius-ctl);color:var(--text);text-decoration:none;min-width:0}
.pk-search .hit:hover,.pk-search .hit:focus-visible,.pg-packs .pk-hits .hit:hover{background:var(--raised-2);outline:none}
.pk-search .hit .th,.pg-packs .pk-hits .hit .th{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--thumb-warm);display:grid;place-items:center;overflow:hidden;color:var(--muted)}
.pk-search .hit .th img,.pg-packs .pk-hits .hit .th img{width:100%;height:100%;object-fit:contain}
.pk-search .hit .th .i,.pg-packs .pk-hits .hit .th .i{width:14px;height:14px}
.pk-search .hit .tx,.pg-packs .pk-hits .hit .tx{min-width:0}
.pk-search .hit .tx b,.pg-packs .pk-hits .hit .tx b{display:block;font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-search .hit .tx small,.pg-packs .pk-hits .hit .tx small{display:block;font:500 10.5px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-search .grp + .grp{border-top:1px solid var(--line);margin-top:4px;padding-top:2px}
.pk-search .mh{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 8px 4px}
.pk-search .all{display:flex;align-items:center;gap:8px;margin-top:4px;padding:9px 8px 5px;border-top:1px solid var(--line);color:var(--text-2);font-size:12px;text-decoration:none}
.pk-search .all:hover{color:var(--text)}
.pk-search .all .k{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font:500 10.5px var(--mono);color:var(--muted)}
.pk-search .pk-sr-note{display:flex;align-items:center;gap:8px;padding:10px 8px;color:var(--muted);font-size:12.5px}

/* ---------- Modals (#modal: rendered on any page, so scoped by form class) ---------- */
.pk-modal .opt-l{font:500 10.5px var(--ui);letter-spacing:0;text-transform:none;color:var(--faint);margin-left:4px}
.pk-planned:has(#pi-type option[value="model"]:not(:checked)) .pk-class{display:none}
.pk-packform .pk-kind{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.pk-packform .pk-kind legend{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;padding:0}
.pk-packform .pk-kind .opt span{min-width:0}
.pk-packform .pk-kind .opt:has(input:checked){border-color:var(--lime-line);background:var(--lime-soft)}
.pk-packform .pk-archive{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--raised)}
.pk-packform .pk-archive b{display:block;font-weight:600}
.pk-packform .pk-archive small{display:block;color:var(--muted);font-size:11.5px}

/* ---------- S17 import ---------- */
.pk-import .dc{gap:12px}
.pk-import .pk-into{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pk-import .pk-newpack{display:none}
.pk-import:has(#import-pack option[value="__new__"]:checked) .pk-newpack{display:flex}
.pk-import .pk-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:20px 16px}
.pk-import .pk-drop b{font-weight:600;color:var(--text)}
.pk-import .pk-drop .muted{font-size:12px}
.pk-import .pk-drop-ic{width:38px;height:38px;border-radius:var(--radius-box);background:var(--lime-soft);color:var(--lime);display:grid;place-items:center;margin-bottom:2px}
.pk-import .pk-browse{margin-top:6px}
.pk-import .pk-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pk-import .pk-drop:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-soft)}
.pk-import .pk-drop:hover .pk-browse{background:var(--raised-2)}
.pk-import .pk-apply{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--raised)}
.pk-import .pk-apply .caps{margin-right:4px}
.pk-import .pk-apply .inp{height:30px;width:auto;flex:1 1 130px;font-size:12.5px}
.pk-import .pk-apply select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.pk-import .pk-apply .pk-apply-lic{display:none}
.pk-import .pk-apply:has(#apply-rights option[value="licensed"]:checked) .pk-apply-lic{display:block}
.pk-import:not(:has(.irow input[name="staged"])) .pk-apply{display:none}
.pk-import .pk-rows{display:flex;flex-direction:column;gap:8px;min-width:0}
.pk-import .pk-rows:empty{display:none}
.pk-import .irow{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0}
.pk-import .irow.bad,.pk-import .irow.failed{border-color:var(--fail-line)}
.pk-import .irow .pv{width:56px;height:56px;border-radius:var(--radius-ctl);background:var(--thumb-cool);display:grid;place-items:center;overflow:hidden;color:var(--muted)}
.pk-import .irow .pv.warm{background:var(--thumb-warm)}
.pk-import .irow .pv img{width:100%;height:100%;object-fit:contain}
.pk-import .irow .pv model-viewer{width:56px;height:56px}
.pk-import .irow.bad .pv{color:var(--fail);background:var(--fail-soft)}
.pk-import .irow .main{min-width:0}
.pk-import .irow .top{display:flex;align-items:center;gap:8px;min-width:0}
.pk-import .irow .fn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pk-import .irow .badge.inline{flex:none}
.pk-import .irow .rm{margin-left:auto;width:28px;height:28px;flex:none}
.pk-import .irow .pk-wont{display:none;color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft);font-size:10.5px;padding:1px 8px}
.pk-import .irow:has(.f-rights option[value="reference_only"]:checked) .pk-wont-ref,
.pk-import .irow:has(.f-rights option[value="unknown"]:checked) .pk-wont-unknown{display:inline-flex}
/* Name | class (or type) on the first line; rights, license and AI fold into one "Rights & AI" disclosure. */
.pk-import .irow .fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:8px}
.pk-import .irow .f-name{grid-column:span 4}
.pk-import .irow .f-class,.pk-import .irow .f-rights,.pk-import .irow .f-ai,.pk-import .irow .f-license{grid-column:span 2}
.pk-import .irow .pk-prov{grid-column:1 / -1;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--raised);padding:0 10px}
.pk-import .irow .pk-prov.err{border-color:var(--warn-line)}
.pk-import .irow .pk-prov > summary{display:flex;align-items:center;gap:8px;min-height:30px;cursor:pointer;list-style:none;font-size:12px;color:var(--muted)}
.pk-import .irow .pk-prov > summary::-webkit-details-marker{display:none}
.pk-import .irow .pk-prov > summary::before{content:"";width:0;height:0;border:4px solid transparent;border-left:5px solid var(--muted);margin-left:2px;transition:transform .12s}
.pk-import .irow .pk-prov[open] > summary::before{transform:rotate(90deg)}
.pk-import .irow .pk-prov > summary .pk-prov-sum{color:var(--fg);font-weight:600}
.pk-import .irow .pk-prov-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:2px 0 10px}
.pk-import .irow .fld{gap:4px}
.pk-import .irow .fld label{font-size:10px}
.pk-import .irow .fld input,.pk-import .irow .fld select{height:32px;font-size:12.5px}
.pk-import .irow .fld select:invalid{color:var(--muted)}
.pk-import .irow .f-license{display:none}
.pk-import .irow:has(.f-rights option[value="licensed"]:checked) .f-license{display:flex}
.pk-import .irow .line{display:flex;align-items:center;gap:6px;margin-top:7px;font:500 11px var(--mono);color:var(--muted);min-width:0}
.pk-import .irow .line span{min-width:0;overflow-wrap:anywhere}
.pk-import .irow .line.ok .i{color:var(--pass)}
.pk-import .irow .line.warn{color:var(--warn)}
.pk-import .irow .line.err{color:var(--fail);font:500 12px var(--ui)}
.pk-import .irow .meter{margin-top:9px}
.pk-import .irow.pending .line{font-family:var(--ui)}
.pk-import .irow .acts{display:flex;gap:6px;margin-top:8px}
.pk-import > .df{position:sticky;bottom:0;z-index:2;background:var(--surface)}
.pk-import .pk-hint{display:flex;align-items:center;min-width:0}
.pk-import .pk-hint > span{display:none;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pk-import:not(:has(.irow input[name="staged"])) .pk-hint .h-empty{display:inline-flex}
/* A Licensed row whose license name is empty is the one thing that holds Import back (packs-import.js marks
   that input `required`; the island also sets `disabled` on the button). */
.pk-import:has(.irow input[name="staged"]):has(.irow .f-license input:required:placeholder-shown) .pk-hint .h-need{display:inline-flex;color:var(--warn)}
.pk-import:has(.irow input[name="staged"]):not(:has(.irow .f-license input:required:placeholder-shown)) .pk-hint .h-ok{display:inline-flex;color:var(--pass)}
.pk-import:has(.irow .f-license input:required:placeholder-shown) .pk-go,
.pk-import:not(:has(.irow input[name="staged"])) .pk-go,
.pk-import:has(.irow.pending) .pk-go{opacity:var(--disabled-opacity);pointer-events:none;cursor:not-allowed}

/* ---------- Responsive (SHELL-SPEC §5) ---------- */
@media (max-width:1023px){
  .pg-packs .pl > .r{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"th nm act" "th states st" ". vc vc";row-gap:8px;column-gap:12px}
  .pg-packs .pl > .r .th{width:44px;height:44px;align-self:start}
  .pg-packs .pk-legend{margin-left:0;width:100%}
}
@media (max-width:979px){
  .pg-packs .grid.pk-sb,.pg-packs .pk-sb .pk-more-cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (max-width:767px){
  .pg-packs .pk-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 12px;padding:0 20px 2px;scrollbar-width:none}
  .pg-packs .pk-chips::-webkit-scrollbar{display:none}
  .pg-packs .pk-bar .sub,.pg-packs .pk-bar .pk-export{display:none}
  .pg-packs .grid.pk-sb,.pg-packs .pk-sb .pk-more-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .pk-import .pk-into{grid-template-columns:minmax(0,1fr)}
  .pk-import .irow{grid-template-columns:44px minmax(0,1fr);gap:10px}
  .pk-import .irow .pv,.pk-import .irow .pv model-viewer{width:44px;height:44px}
  .pk-import .irow .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pk-import .irow .f-name{grid-column:1/-1}
  .pk-import .irow .f-class,.pk-import .irow .f-rights,.pk-import .irow .f-ai,.pk-import .irow .f-license{grid-column:span 1}
  .pk-import .irow .pk-prov-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pg-packs .pl .exp{grid-template-columns:minmax(0,1fr)}
  .pg-packs .pk-vars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-import .pk-apply .inp{flex:1 1 100%}
}
@media (pointer:coarse){
  .pk-import .irow .fld input,.pk-import .irow .fld select{height:40px}
}

/* ---------- Grid search + filters (pk-find in the tabs row; #pack-filters: pills, "3 of 12 · Clear", Sort) ---------- */
.pg-packs .pk-find{position:relative;flex:1 1 180px;min-width:150px;display:flex;align-items:center}
.pg-packs .pk-find > .i{position:absolute;left:10px;width:13px;height:13px;color:var(--muted);pointer-events:none}
.pg-packs .pk-find .inp{height:28px;padding:0 28px 0 30px;font-size:12.5px;border-radius:var(--radius-pill)}
.pg-packs .pk-find .inp:focus{border-color:var(--lime-line);outline:0;box-shadow:0 0 0 3px var(--lime-soft)}
.pg-packs .pk-find .inp::-webkit-search-cancel-button{cursor:pointer}
.pg-packs .pk-kbd{position:absolute;right:9px;font:500 10.5px var(--mono);color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:0 5px;line-height:16px;pointer-events:none}
.pg-packs .pk-find .inp:focus ~ .pk-kbd,.pg-packs .pk-find .inp:not(:placeholder-shown) ~ .pk-kbd{display:none}
.pg-packs .pk-filters{min-width:0}
.pg-packs .pk-chips{margin-bottom:10px}
.pg-packs .pk-chips .chip{height:26px;padding:0 10px;font-size:12.5px}
.pg-packs .pk-chips .chip.on{border-color:var(--lime-line);background:var(--lime-soft);color:var(--text)}
.pg-packs .pk-chips .chip.on .n{color:var(--lime)}
.pg-packs .pk-resbar{display:flex;flex-wrap:wrap;row-gap:6px;align-items:center;gap:10px;min-width:0;margin:0 0 12px;font:500 11.5px var(--mono);color:var(--muted)}
.pg-packs .pk-resbar .spacer{flex:1}
.pg-packs .pk-resbar .r{margin:0}
.pg-packs .pk-clear,.pg-packs .pk-all{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;color:var(--text-2);text-decoration:none;font:500 11.5px var(--ui)}
.pg-packs .pk-clear:hover,.pg-packs .pk-all:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.pg-packs .pk-clear .i{width:11px;height:11px}
.pg-packs .pk-search-body .pk-chips{margin-bottom:16px}
/* The selection bar (selection.js, ui/packs/_selection_bar.html) above the filters, and the multi-selection on cards:
   the lime ring on every selected card, a check on each card once two or more are selected (select mode). */
.pg-packs .pk-selbar{margin:0 0 10px}
.pg-packs .pk-selbar-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--lime-line);border-radius:var(--radius-ctl);background:var(--lime-soft)}
.pg-packs .pk-selcount{font:600 12.5px var(--ui);color:var(--text);margin-right:4px;white-space:nowrap}
.pg-packs .pk-selbar-in .spacer{flex:1}
.pg-packs .pk-selmenu .menu{min-width:200px}
.pg-packs .card[aria-selected="true"]{border-color:var(--lime);box-shadow:var(--glow-sel)}
.pg-packs .pk-grid.sel .card[data-ctx="asset"]::before{content:"";position:absolute;top:104px;right:8px;width:20px;height:20px;border-radius:var(--radius-seg);border:1px solid var(--overlay-line);background:var(--overlay);z-index:2;display:grid;place-items:center;font:700 12px/1 var(--ui);color:var(--lime-ink)}
.pg-packs .pk-grid.sel .card[aria-selected="true"]::before{content:"✓";background:var(--lime);border-color:var(--lime)}

/* ---------- Drag-to-move (drag-move.js): dragged cards fade until the grid re-fetches; the drag image ---------- */
.pg-packs .card.moving{opacity:.35;transform:scale(.96);pointer-events:none;transition:opacity var(--t-med) ease,transform var(--t-med) var(--ease)}
.pg-packs #center.xw-file-over{box-shadow:inset 0 0 0 2px var(--lime);background:var(--lime-soft)}
.xw-drag-ghost{position:fixed;top:-200px;left:-200px;width:56px;height:56px;pointer-events:none}
.xw-drag-ghost i{position:absolute;inset:0;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.xw-drag-ghost i:nth-child(2){transform:translate(5px,-5px);opacity:.85}
.xw-drag-ghost i:nth-child(3){transform:translate(10px,-10px);opacity:.7}
.xw-drag-ghost b{position:absolute;right:-8px;bottom:-8px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font:700 11px/20px var(--mono);text-align:center}

/* ---------- Inline audio (audio-inline.js): a play button over audio cards and beside search hits ---------- */
.pg-packs .cslot{position:relative}
.pk-play{position:absolute;z-index:2;top:8px;left:8px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);background:rgba(10,12,14,.72);color:var(--text);cursor:pointer;overflow:hidden;backdrop-filter:blur(4px);transition:transform var(--t-fast) var(--ease),background var(--t-fast) ease,border-color var(--t-fast) ease}
.pk-play:hover,.pk-play:focus-visible{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);transform:scale(1.06);outline:0}
.pk-play > .i{width:13px;height:13px;margin-left:2px}
.pk-play .pk-pause{display:none;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.pk-play.playing{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.pk-play.playing > .i{display:none}
.pk-play.playing .pk-pause{display:block}
.pk-play .pk-prog{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--pk-prog,0) * 100%);background:var(--lime-ink);opacity:.55}
.pk-play.failed{border-color:var(--fail,#e5484d)}
.pk-search .hitrow,.pg-packs .pk-hits .hitrow{position:relative;display:flex;align-items:center;gap:4px}
.pk-search .hitrow > .hit{flex:1;min-width:0}
.pk-play.sm{position:static;flex:none;width:26px;height:26px}
.pk-play.sm > .i{width:11px;height:11px}
.pg-packs .card .sub .dur{color:var(--text-2)}