/* library: report library (/reports) and report detail (/reports/:id) */

/* sample-output drawings (mockups 10 and 11): text sizes, weights and colours by class */
.lib-art { display: block; width: 100%; height: auto; }
.lib-art text { font-family: var(--font-sans); fill: var(--foreground); }
.lib-art text:is(.t5, .t6) { font-size: var(--art-caption); } .lib-art text:is(.t7, .t75, .t8) { font-size: var(--art-label); }
.lib-art text:is(.t85, .t9, .t10) { font-size: var(--art-body); } .lib-art text.t11 { font-size: var(--art-title); } .lib-art text.t15 { font-size: var(--art-figure); }
.lib-art text.b { font-weight: 700; } .lib-art text.sb { font-weight: 600; }
.lib-art text.m { fill: var(--muted-foreground); } .lib-art text.w { fill: var(--primary-foreground); }
.lib-art text.up { fill: var(--trend-up); } .lib-art text.dn { fill: var(--trend-down); }
.lib-art text.e { text-anchor: end; } .lib-art text.c { text-anchor: middle; }

/* library */
/* Search and results line, the filter panel beside them and the cards, the panel moving above the cards when the main
   column is narrow (tab order is search, filters, cards at every width). */
.lib-grid { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; grid-template-rows: auto 1fr; grid-template-areas: "top panel" "cards panel";
  column-gap: 1.5rem; align-items: start; }
.lib-top { grid-area: top; }
.lib-main { grid-area: cards; min-width: 0; }
.lib-results { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 1.75rem; margin: 0.5rem 0 0.25rem; color: var(--muted-foreground); font-size: var(--text-label); }
.lib-chips { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; }
.lib-section > h2 { margin: 1.25rem 0 0.625rem; }
.lib-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.lib-card { gap: 0.75rem; }
.lib-card > header { padding-inline: 0.875rem; }
.lib-card > section, .lib-card > footer { padding-inline: 0.875rem; }
.lib-card > section { flex: 1; display: flex; flex-direction: column; gap: 0.625rem; }
.lib-card > footer { display: grid; gap: 0.5rem; }
.lib-card > footer .alert { font-size: var(--text-label); }
.lib-card h3 a { color: inherit; text-decoration: none; }
.lib-card h3 a:hover { text-decoration: underline; }
.lib-card > section > p { color: var(--muted-foreground); }
.lib-thumb { position: relative; }
.lib-thumb > svg, .lib-thumb > .skeleton { aspect-ratio: 240 / 128; }
.lib-thumb > .skeleton { border-radius: 0; }
.lib-card[data-blocked] .lib-thumb > svg { opacity: 0.4; filter: grayscale(1); }
.lib-thumb > .lib-need { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--background); }
/* A strip under the drawing, so it covers none of it. */
.lib-thumb-label { display: block; padding: 0.125rem 0.625rem; border-top: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground);
  font-size: var(--text-micro); line-height: 1.5; text-align: end; }
.lib-card .lib-partial { margin: 0; }
.lib-questions { margin-top: auto; display: grid; gap: 0.25rem; padding-inline-start: 1rem; list-style: disc; color: var(--muted-foreground); font-size: var(--text-label); }
.lib-main mark { background: var(--warning-surface); color: inherit; border-radius: 2px; }
.lib-empty { margin-top: 0.875rem; }

.lib-filters { grid-area: panel; position: sticky; top: calc(var(--sticky-top) + 0.75rem); }
.lib-filters > section { display: grid; gap: 0.5rem; }
.lib-group { border-top: 1px solid var(--border); padding-top: 0.5rem; }
.lib-group-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; font-weight: 600; text-align: start; padding-block: 0.25rem; cursor: pointer; }
.lib-group-toggle .lucide { color: var(--muted-foreground); }
.lib-group-body { display: grid; gap: 0.5rem; padding-block: 0.25rem; }
.lib-count { color: var(--muted-foreground); font-size: var(--text-label); }
.lib-count:empty { display: none; }
.lib-filters[data-loading] .lib-group-body > .field, .lib-filters:not([data-loading]) .lib-group-skeleton { display: none; }
.lib-filters[data-failed] .lib-group { display: none; }
.lib-main > .app-load-failed { margin-top: 0.875rem; }

/* report detail */
/* As wide as the buttons above it, which it does not widen (contain), so the title keeps the header's width. */
.lib-reason { flex-basis: 100%; contain: inline-size; text-align: end; font-size: var(--text-label); color: var(--muted-foreground); }
.lib-detail { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
@container main (width < 56rem) { .lib-detail { grid-template-columns: minmax(0, 1fr); } }
.lib-detail-failed { margin-top: 0.875rem; max-width: 40rem; }
.lib-detail-side, .lib-detail-main { display: grid; gap: 1rem; min-width: 0; }
.lib-question-list { display: grid; gap: 0.375rem; }
.lib-question-list li { padding: 0.375rem 0.625rem; border-radius: var(--radius-md); background: var(--accent); font-weight: 500; }
.lib-shows > section, .lib-notes > section { display: grid; gap: 0.5rem; }
.lib-notes-part { font-size: var(--text-sm); font-weight: 600; }
.lib-notes-part:not(:first-child) { margin-top: 0.25rem; }
.lib-steps { display: grid; gap: 0.75rem; }
.lib-step { display: grid; grid-template-columns: 1.375rem 1fr; gap: 0.5rem; }
.lib-step-n { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 9999px; border: 1px solid var(--border); font-size: var(--text-label); font-weight: 500; }
.lib-step h3 { margin-bottom: 0.125rem; }
.lib-step p em { font-style: normal; font-weight: 600; }
.lib-step[data-skipped] { color: var(--muted-foreground); }
.lib-sample .lib-art, .lib-full .lib-art { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
/* Full size is the dialog's width; a tall sample scrolls in the dialog. */
.lib-full .lib-art { width: 100%; }
.lib-caption { margin-top: 0.5rem; color: var(--muted-foreground); font-size: var(--text-label); }
.lib-history-link { margin-top: 0.5rem; font-size: var(--text-label); }
.lib-measures :is(td, th):first-child { width: 14rem; }
.lib-shown-in { width: 10rem; }
.lib-shown-in .badge { margin: 0 0.125rem 0.125rem 0; }
.lib-rules { margin-top: 1.25rem; display: grid; gap: 0.375rem; }

/* Narrow main column (QUA-03). Last, so it overrides the rules above. */
@container main (width < 56rem) {
  .lib-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "top" "panel" "cards"; }
  .lib-filters { position: static; margin-top: 0.75rem; }
  .lib-filters > section { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 1.5rem; }
  .lib-filters > section > :first-child { grid-column: 1 / -1; }
  .lib-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container main (width < 36rem) {
  .lib-filters > section, .lib-cards { grid-template-columns: minmax(0, 1fr); }
}