/* Library lists and edit forms (owner: WP5). Tokens only. */

/* The list: one card per type with a line on what the type is for --------------------------- */
.ts-lib-head { padding: 18px var(--ts-space-6) var(--ts-space-4); border-bottom: 1px solid var(--ts-border-subtle); }
.ts-lib-head__title { display: flex; align-items: baseline; gap: var(--ts-space-2); margin: 0; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; letter-spacing: var(--ts-ls-card); }
.ts-lib-head__title .ts-count { color: var(--ts-text-muted); font-weight: 500; }
.ts-lib-head__text { margin: 2px 0 0; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }

.ts-lib-list { list-style: none; margin: 0; padding: 0; }
.ts-lib-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--ts-space-4);
  padding: var(--ts-space-4) var(--ts-space-6);
  border-top: 1px solid var(--ts-border-subtle);
  transition: background-color var(--ts-dur-1) var(--ts-ease);
}
.ts-lib-item:first-child { border-top: 0; }
.ts-lib-item:hover { background: var(--ts-hover-row); }
.ts-lib-item:last-child { border-bottom-left-radius: calc(var(--ts-radius-lg) - 1px); border-bottom-right-radius: calc(var(--ts-radius-lg) - 1px); }
.ts-lib-item__name { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.1px; }
.ts-lib-item__name a { color: var(--ts-text); font-weight: 600; text-decoration: none; }
.ts-lib-item__name a:hover { color: var(--ts-text); text-decoration: underline; text-underline-offset: 3px; }
.ts-lib-item__desc { margin: 2px 0 0; max-width: 72ch; color: var(--ts-text-secondary); }
.ts-lib-item__meta { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--ts-space-4); margin: var(--ts-space-2) 0 0; padding: 0; color: var(--ts-text-muted); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-lib-item__meta .ts-mono { color: var(--ts-text-secondary); font-size: 12px; }

/* "Show code": the JSON behind a quiet toggle beside the More menu (Bootstrap collapse) */
.ts-lib-label { color: var(--ts-text-muted); }
.ts-lib-item__actions { display: flex; align-items: center; gap: var(--ts-space-1); margin-top: -4px; }
.ts-lib-code__toggle > .bi { color: var(--ts-slate-500); }
.ts-lib-code__toggle:hover > .bi { color: currentColor; }
.ts-lib-code__hide { display: none; }
.ts-lib-code__toggle[aria-expanded="true"] { background: var(--ts-hover-strong); }
.ts-lib-code__toggle[aria-expanded="true"] .ts-lib-code__show { display: none; }
.ts-lib-code__toggle[aria-expanded="true"] .ts-lib-code__hide { display: inline; }
.ts-lib-code__body { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ts-lib-code__block pre { max-height: 320px; overflow: auto; }
.ts-lib-samples { padding: 10px 14px; border-radius: var(--ts-radius-md); background: var(--ts-surface-sunken); border: 1px solid var(--ts-border-subtle); }
.ts-lib-samples__title { margin: 0 0 4px; color: var(--ts-text-secondary); font-size: 12px; font-weight: 600; }
.ts-lib-samples ul { margin: 0; padding-left: 18px; }
.ts-lib-samples li { overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  /* The toggle keeps its words for screen readers; on phones only the code icon shows */
  .ts-lib-code__toggle > span:not(.visually-hidden) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ts-lib-code__toggle { width: 32px; min-height: 32px; padding: 0; }
  .ts-lib-head { padding: 14px var(--ts-space-4) 12px; }
  .ts-lib-item { padding: 14px var(--ts-space-4); gap: var(--ts-space-3); }
}

/* The edit form ------------------------------------------------------------------------------ */
.ts-lib-form .card-body { padding: var(--ts-space-6); }
.ts-lib-form .ts-code-field { margin-bottom: var(--ts-space-6) !important; }

/* The key sits under .ts-advanced and the footer is .ts-form-actions--card (both components.css). */
@media (max-width: 767.98px) {
  .ts-lib-form .card-body { padding: var(--ts-space-4); }
}

/* Library > New segment: the builders' merchant templates. */
.ts-lib-templates__summary { display: flex; align-items: center; gap: var(--ts-space-2); cursor: pointer; list-style: none; }
.ts-lib-templates__summary::-webkit-details-marker { display: none; }
.ts-lib-templates[open] .ts-lib-templates__summary .bi-chevron-right { transform: rotate(90deg); }
.ts-lib-templates__group { margin: var(--ts-space-4) 0 var(--ts-space-2); font-size: var(--ts-fs-small); font-weight: 600; color: var(--ts-text-secondary); }
.ts-lib-templates__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ts-space-3); margin: 0; }
.ts-lib-templates__item a[aria-current] { font-weight: 600; }