/* The Gallop portal's template library (R8), after design/brand/proposed/template-library/ (D-R8, approved
   by Devan). Only the brand kit's tokens, read from application.css's :root; the shared parts (cards,
   buttons, chips, fields, alerts, the mint page header and the empty state) are application.css's own. */
.lib-facts { margin: calc(var(--g-space-12) * -1) 0 var(--g-space-16); font-size: var(--g-font-size-small); }
.lib-note { font-weight: 400; }
.lib-card { padding: var(--g-space-16); min-width: 0; }
.lib-card + .lib-card, .lib-overview + .lib-card { margin-top: var(--g-space-16); }
.lib-card h2 { margin-bottom: var(--g-space-12); }

/* Frame 1: filters, result line, categories and goal rows. */
.lib-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--g-space-16); }
.lib-filters > .field { flex: 1 1 calc(var(--g-size-phone) / 2); min-width: 0; margin-bottom: 0; }
.lib-filters__actions { display: flex; align-items: center; gap: var(--g-space-12); }
.lib-result { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-12); margin: var(--g-space-12) 0; }
.lib-result p { margin: 0; }
.lib-category { border-top: var(--g-space-4) solid var(--g-color-ivory); }
.lib-category > summary { min-height: var(--g-size-touch); display: flex; align-items: center; gap: var(--g-space-8); padding: var(--g-space-8); font-size: var(--g-font-size-heading-small); font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.lib-category__count { font-size: var(--g-font-size-small); font-weight: 400; }
.lib-rows { display: grid; gap: var(--g-space-8); padding-bottom: var(--g-space-12); }
.lib-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-12); min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-12); border-radius: var(--g-radius-input); background: var(--g-color-ivory); }
.lib-row__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--g-space-12); min-width: 0; overflow-wrap: anywhere; }
.lib-row__tail { display: flex; align-items: center; gap: var(--g-space-8); flex-shrink: 0; }
/* Coming soon: the light-orange soft-warning surface with navy text (D-R8). */
.chip.lib-soon { color: var(--g-color-navy); }

/* Frames 2 to 5: the heading with its actions, the overview pair, the ladder and the item rows. */
.lib-back { margin: 0 0 var(--g-space-12); }
.lib-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-16); margin-bottom: var(--g-space-16); }
.lib-heading > * { min-width: 0; }
.lib-heading__title { font-size: var(--g-font-size-display); line-height: var(--g-line-height-heading); margin: var(--g-space-4) 0; overflow-wrap: anywhere; }
.lib-heading .helper { margin: 0; }
.lib-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-12); margin: var(--g-space-16) 0 0; }
.lib-heading .lib-actions { margin: 0; }
.lib-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-16); }
.lib-overview .lib-card + .lib-card { margin-top: 0; }
.lib-chips { display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin-bottom: var(--g-space-8); }
.lib-ladder-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-12); }
.lib-ladder-head > * { min-width: 0; }
.lib-ladder-head__pose { width: var(--g-space-48); height: calc(var(--g-space-48) * 1.5); object-fit: contain; }
.lib-ladder { list-style: none; margin: var(--g-space-12) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) / 2)), 1fr)); gap: var(--g-space-12); }
.lib-ladder li { display: grid; gap: var(--g-space-4); padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-mint); color: var(--g-color-navy); }
.lib-ladder strong { font-size: var(--g-font-size-heading); line-height: var(--g-line-height-heading); }
.lib-ladder p { margin: 0; font-size: var(--g-font-size-small); }
.lib-stack { display: grid; gap: var(--g-space-12); }
.lib-stack > .lib-card + .lib-card { margin-top: 0; }
.lib-item { border-top: var(--g-space-4) solid var(--g-color-ivory); }
.lib-item > summary { min-height: var(--g-size-touch); display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-8); cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.lib-item .details__body { padding-bottom: var(--g-space-12); }
.lib-item .helper { margin-bottom: var(--g-space-8); }
details.card.lib-item { border-top: 0; }

/* Forms: two columns that fold to one, choices as 44 px rows, an error under its field. */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: 0 var(--g-space-16); }
.lib-wide { grid-column: 1 / -1; }
.lib-form fieldset legend { font-size: var(--g-font-size-small); font-weight: 700; margin-bottom: var(--g-space-8); }
.lib-form .field input, .lib-form .field select, .lib-form .field textarea { width: 100%; }
.lib-form .alert { font-weight: 400; }
.lib-form .alert p { margin: var(--g-space-8) 0 0; }
.lib-form .alert .btn { margin-top: var(--g-space-12); }
.lib-choice { display: flex; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); padding: 0 var(--g-space-8); font-weight: 600; overflow-wrap: anywhere; }
.lib-error { margin: 0; color: var(--g-color-error); font-size: var(--g-font-size-small); font-weight: 600; }
.lib-photo { padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); border: var(--g-space-4) dashed var(--g-color-line); font-size: var(--g-font-size-small); }
.lib-question { padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); }
.lib-question ol { margin: 0 0 var(--g-space-8); padding-left: var(--g-space-24); }

@media (max-width: 390px) {
  .lib-filters__actions, .lib-row__tail, .lib-actions { width: 100%; }
  .lib-row__tail .btn, .lib-actions .btn { flex: 1 1 auto; }
  .lib-ladder-head__pose { display: none; }
}