/*
 * The questionnaire template catalog's shared parts (#2328): what the macros in
 * components/template_catalog.html emit (category tabs, results, the preview
 * and the question outline), drawn the same on askalot.io/templates/ and on
 * Roundtable's /templates. Every tenant service serves it at
 * /static/shared/css/template-catalog.css, and scripts/dev/template_catalog.py
 * copies it into the public catalog's hashed assets.
 *
 * The apex page names its Folio tokens --hf-*, the tenant stylesheet --color-*
 * and --font-*, with the same values: each reference reads the apex name and
 * falls back to the tenant one, so one sheet serves both pages. Page-level
 * rules (the hero heading, the search box, the sign-up invitation) stay in the
 * public catalog's own catalog.css.
 *
 * Nothing here leans on the page's base styles: the tenant stylesheet's
 * Tailwind preflight strips list markers and heading weights that the apex
 * page keeps, so every list style and heading weight the parts need is
 * written out.
 */

/* Category tabs */
.hf-cat-tabs { border-bottom: 1px solid var(--hf-rule, var(--color-rule)); margin-bottom: 20px; }
/* Inline tabs under text-wrap: balance, so when the tabs need two lines (or
   more) the browser fills each line about equally instead of leaving one or
   two tabs alone on the last. A flex row cannot be balanced. */
.hf-cat-tabs ul { list-style: none; margin: 0; padding: 0; text-wrap: balance; }
.hf-cat-tabs li { display: inline-block; margin: 0 2px 2px 0; }
.hf-cat-tabs a {
    display: inline-block; padding: 9px 12px; margin-bottom: -1px; font-size: 15px; font-weight: 500;
    color: var(--hf-ink-2, var(--color-ink-2)); text-decoration: none; border-bottom: 2px solid transparent;
}
.hf-cat-tabs a:hover { color: var(--hf-ink, var(--color-ink)); border-bottom-color: var(--hf-rule-dot, var(--color-rule-dot)); }
.hf-cat-tabs a[aria-current="page"] { color: var(--hf-rubric, var(--color-rubric)); border-bottom-color: var(--hf-rubric, var(--color-rubric)); }

.hf-cat-count { min-height: 1.4em; font-size: 15px; color: var(--hf-ink-3, var(--color-ink-3)); margin: 0 0 12px; }

/* Results */
.hf-cat-group { margin: 0 0 34px; }
.hf-cat-group__title { font-family: var(--hf-serif, var(--font-display)); font-size: 28px; font-weight: 600; margin: 0 0 14px; }
.hf-cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hf-cat-card { background: var(--hf-folio, var(--color-folio)); border: 1px solid var(--hf-rule, var(--color-rule)); padding: 16px 18px; }
.hf-cat-card:hover { border-color: var(--hf-rule-dot, var(--color-rule-dot)); box-shadow: 0 2px 10px rgba(31, 26, 20, 0.08); }
.hf-cat-card__name { font-weight: 600; font-size: 16px; color: var(--hf-lapis, var(--color-lapis)); text-decoration: none; }
.hf-cat-card__name:hover { text-decoration: underline; }
.hf-cat-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--hf-ink-2, var(--color-ink-2)); }
.hf-cat-empty { padding: 40px 0; text-align: center; color: var(--hf-ink-2, var(--color-ink-2)); }
.hf-cat-empty__title { font-family: var(--hf-serif, var(--font-display)); font-size: 26px; color: var(--hf-ink, var(--color-ink)); margin: 0 0 6px; }

.hf-tpl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 10px; }
.hf-tpl__use { grid-column: 2; grid-row: 1; }
.hf-tpl__diagram { grid-column: 1; grid-row: 1; background: var(--hf-folio, var(--color-folio)); border: 1px solid var(--hf-rule, var(--color-rule)); }
.hf-tpl__diagram-head { padding: 14px 18px; border-bottom: 1px solid var(--hf-rule, var(--color-rule)); }
.hf-tpl__diagram-head h2 { font-family: var(--hf-serif, var(--font-display)); font-size: 24px; font-weight: 600; line-height: 1.08; margin: 0; }
.hf-tpl__diagram-head p { margin: 4px 0 0; font-size: 14px; color: var(--hf-ink-3, var(--color-ink-3)); }
.hf-tpl__diagram-head a { color: var(--hf-lapis, var(--color-lapis)); }
.hf-tpl__frame { display: block; width: 100%; height: 70vh; min-height: 420px; border: 0; background: var(--hf-folio, var(--color-folio)); }

/* Outline */
.hf-outline { margin-top: 40px; max-width: 860px; }
.hf-outline > h2 { font-family: var(--hf-serif, var(--font-display)); font-size: 34px; font-weight: 600; line-height: 1.08; margin: 0 0 18px; }
.hf-outline__block { border-top: 1px solid var(--hf-rule, var(--color-rule)); padding: 18px 0 6px; }
.hf-outline__block > h3 { font-family: var(--hf-serif, var(--font-display)); font-size: 24px; font-weight: 600; line-height: 1.08; margin: 0 0 8px; }
.hf-outline__items { list-style: decimal; margin: 0; padding-left: 22px; }
.hf-outline__items > li { margin: 0 0 14px; }
.hf-outline__comment p { font-style: italic; color: var(--hf-ink-3, var(--color-ink-3)); margin: 0; }
.hf-outline__title { margin: 0; font-weight: 600; color: var(--hf-ink, var(--color-ink)); }
.hf-outline__condition { margin: 4px 0 0; font-size: 14px; color: var(--hf-ink-2, var(--color-ink-2)); }
.hf-outline__condition span { color: var(--hf-rubric, var(--color-rubric)); font-weight: 600; }
.hf-outline__condition code { font-family: var(--hf-mono, var(--font-code)); font-size: 13px; font-variant-ligatures: none; }
.hf-outline__answer { margin: 4px 0 0; font-size: 14px; color: var(--hf-ink-3, var(--color-ink-3)); }
.hf-outline__rows, .hf-outline__labels { margin: 4px 0 0; padding-left: 18px; font-size: 14px; color: var(--hf-ink-2, var(--color-ink-2)); }
.hf-outline__rows { list-style: disc; }
.hf-outline__labels { list-style: circle; }

@media (max-width: 1100px) {
    .hf-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .hf-cat-grid { grid-template-columns: minmax(0, 1fr); }
    /* On a phone the use panel comes first, before the diagram and the outline. */
    .hf-tpl { grid-template-columns: minmax(0, 1fr); }
    .hf-tpl__use, .hf-tpl__diagram { grid-column: 1; grid-row: auto; }
    .hf-tpl__frame { height: 60vh; min-height: 360px; }
}