/* Asset picker (board 8). Embedded at /picker, so the app header is hidden and
   the picker owns the page. Selectable cards reuse the library card tick and
   selected outline (library.css). A fixed attach bar holds the count and the
   Attach button. Photos keep square corners. */

html.picker-route ts-header { display: none; }
html.picker-route #main { padding: 0; }

.pk { max-width: 1200px; margin: 0 auto; padding: 36px 40px 128px; display: flex; flex-direction: column; gap: 22px; }

/* ---- Header ----------------------------------------------------------- */
.pk-head__text { display: flex; flex-direction: column; gap: 8px; }
.pk-eyebrow { color: var(--red-text); }
.pk-title { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; font-size: 32px; line-height: 1.1; color: var(--text); }

/* ---- Toolbar ---------------------------------------------------------- */
.pk-toolbar { display: flex; align-items: center; gap: 12px; }
.pk-searchform { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: var(--tone-1); border-radius: var(--radius); transition: background var(--t-hover) var(--ease-out); }
.pk-searchform:focus-within { background: var(--field-active); box-shadow: inset 0 0 0 2px var(--text); }
.pk-search__icon { display: flex; color: var(--text-quiet); }
.pk-search__icon svg { stroke: currentColor; }
.pk-search { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.pk-search::placeholder { color: var(--text-quiet); }
.pk-uploadbtn { height: 48px; padding: 0 18px; border-radius: var(--radius); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.pk-uploadbtn svg { stroke: currentColor; }

/* ---- Filters ---------------------------------------------------------- */
.pk-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pk-filter-spacer { flex: 1 1 auto; }
.pk-sel { display: inline-flex; align-items: center; gap: 8px; }
.pk-sel__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-quiet); }
.pk-select { height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius); background: var(--tone-1); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; transition: background var(--t-hover) var(--ease-out); }
.pk-select:hover { background: var(--tone-2); }
.pk-select:focus { background: var(--field-active); box-shadow: inset 0 0 0 2px var(--text); outline: 0; }

.pk-count { font-size: 13px; color: var(--text-quiet); }

/* ---- Grid ------------------------------------------------------------- */
.pk-grid-host { min-height: 200px; }
.pk-card { cursor: pointer; }
.pk-card .card__frame { cursor: pointer; }
.pk-card__title { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; }
.pk-card.is-disabled { opacity: .4; pointer-events: none; }
.pk-card:focus-visible { outline: none; }
.pk-card:focus-visible .card__frame { outline: 2px solid var(--text); outline-offset: 2px; }

.pk-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.pk-skel span { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius); background: var(--tone-1); animation: pk-pulse 1.3s var(--ease-out) infinite; }
@keyframes pk-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .pk-skel span { animation: none; } }

/* ---- Attach bar ------------------------------------------------------- */
.pk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 40px;
  border-top: 1px solid var(--rule);
}
.pk-bar__count { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pk-bar__note { flex: 1; min-width: 0; font-size: 13px; color: var(--glass-text-2); }
.pk-cancel { height: 44px; padding: 0 18px; border-radius: var(--radius); font-size: 14px; font-weight: 600; }
.pk-attach { height: 44px; padding: 0 22px; border-radius: var(--radius); font-size: 15px; font-weight: 600; }
.pk-attach:disabled { opacity: .5; cursor: default; }

@media (max-width: 760px) {
  .pk { padding: 24px 20px 150px; }
  .pk-toolbar { flex-wrap: wrap; }
  .pk-bar { flex-wrap: wrap; padding: 14px 20px; }
  .pk-bar__note { order: 3; flex-basis: 100%; }
}