/* Dynamic gallery contract (generated by app.js, no inline sample cards):
   article.template-card > button.template-open > img.template-image +
   div.card-body (.card-meta, h3.card-title); sibling button.favorite-button.
   Favorite buttons need an item-specific accessible name + aria-pressed.
   Image source must be the renderer thumbnail; preserve its native ratio.
   article.project-card > button.project-open (img.project-image, .card-body),
   plus .project-actions containing named buttons. .project-status for save state.
   .empty-state spans grid; use real text + an actionable button on no results.
   Loading: aria-busy on grid, .loading-state text. Errors: .error-state.
   Filters: synchronize aria-pressed (active class accepted as fallback).
   Category/style selects contain only all; app appends FlierCatalog options. */
.catalog-filters { margin-bottom: 26px; }
.search-box { display: flex; align-items: center; gap: 12px; min-height: 56px; max-width: 720px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--muted); }
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.search-box input { min-height: 54px; border: 0; padding: 12px 0; background: transparent; }
.purpose-filters { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 20px 18px; }
.purpose-chip { min-width: var(--touch); min-height: var(--touch); padding: 10px 18px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; line-height: 1.35; }
.purpose-chip:is(.active, [aria-pressed="true"]) { border-color: var(--brand-soft); background: var(--brand-soft); color: var(--brand); }
.family-filter {display:flex;align-items:flex-start;gap:16px;min-width:0;padding-block:0 14px;}
.family-filter-label {flex:none;padding-top:18px;font-size:.875em;font-weight:700;color:var(--ink);}
.family-filters {display:flex;flex-wrap:wrap;gap:4px 8px;min-width:0;padding:4px;}
.family-select {display:none;}
.family-chip {flex:none;min-height:var(--touch);padding:8px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font-size:.875em;white-space:nowrap;}
.family-chip[aria-pressed="true"] {border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:700;}
.family-chip:hover {border-color:var(--brand);}
.card-family-badge {display:inline-block;max-width:100%;margin-top:6px;color:var(--muted);font-size:.875em;font-weight:400;overflow-wrap:anywhere;}
.card-family-badge[data-family="purple-pop"] {color:var(--brand);font-weight:600;}
.filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.select-filters { display: flex; flex-wrap: wrap; min-width: 0; gap: 10px; }
.select-filters select { width: auto; max-width: 200px; border-color: var(--line); background-color: var(--paper); }
.favorites-filter { flex-shrink: 0; padding-inline: 12px; }
.favorites-filter[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.favorites-filter[aria-pressed="true"] svg { fill: currentColor; }
.template-grid, .project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 28px 22px; }
.template-card, .project-card { position: relative; min-width: 0; border: 0; border-radius: 0; background: transparent; }
.template-open, .project-open { display: block; width: 100%; padding: 0; border-radius: 0; background: transparent; text-align: left; text-decoration: none; color: var(--ink); }
.template-open:focus-visible, .project-open:focus-visible { outline-offset: 5px; }
.template-image, .project-image { display: block; height: auto; width: 100%; aspect-ratio: 420 / 594; object-fit: contain; background: #F1F0F4; border-radius: 2px; }
/* Optional frame handles renderer thumbnails with mixed A4/square variants. */
.template-image-wrap, .project-image-wrap { display: grid; place-items: center; aspect-ratio: 420 / 594; padding: 12px; background: #F1F0F4; border-radius: 2px; }
:is(.template-image-wrap, .project-image-wrap) img { max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.card-body { min-width: 0; padding: 14px 0 0; }
.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 5px; color: var(--muted); font-size: 1em; line-height: 1.5; }
.card-title { margin: 0; font-size: 1.0625em; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; word-break: keep-all; }
.card-description { margin-top: 8px; color: var(--muted); }
.favorite-button { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: var(--touch); height: var(--touch); padding: 10px; border: 1px solid var(--line); border-radius: 50%; background: rgb(255 255 255 / 96%); color: var(--brand);  font-size: 1.25em; }
.favorite-button[aria-pressed="true"], .favorite-button.active { color: var(--accent); background: var(--accent-soft); border-color: #DCCCE8; }
.favorite-button[aria-pressed="true"] svg { fill: currentColor; }
.card-badge { display: inline-block; padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--canvas); }
.empty-state, .loading-state, .error-state { grid-column: 1 / -1; padding: 56px 24px; text-align: center; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.empty-state-icon { margin: 0 auto 20px; color: var(--brand); }
.empty-state p { margin-top: 12px; color: var(--muted); }
.empty-state .button, .error-state .button { margin-top: 20px; }
.error-state { color: var(--danger); border-color: #e1b4a9; }
.project-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--line); }
.project-actions button { flex: 1 1 auto; min-height: var(--touch); padding: 10px; border-radius: 6px; color: var(--muted); background: transparent; }
.project-status { display: block; margin-top: 8px; color: var(--muted); }
.project-status.is-error { color: var(--danger); }
.projects-view .page-shell { padding-bottom: 64px; }
.recent-section { padding-top: 40px; }
.recent-grid { display: grid; grid-template-columns: minmax(0, 420px); gap: 16px; }
.recent-grid .project-card { display: grid; grid-template-columns: minmax(0, 1fr); }
.recent-grid .project-open { display: flex; align-items: center; }
.recent-grid .project-image { width: 88px; height: 112px; flex: 0 0 88px; border-radius: 11px 0 0 11px; }
.template-dialog { width: min(960px, calc(100% - 48px)); padding: 0; }
.template-dialog-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.template-preview { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 32px; background: var(--surface); }
.template-preview img { max-height: 72dvh; object-fit: contain; box-shadow: 0 6px 24px rgb(40 25 50 / 12%); }
.template-details { min-width: 0; padding: 64px 32px 32px; }
.template-details h2 { margin-bottom: 14px; font-size: 1.75em; }
.template-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 22px 28px; }
.template-meta > * { max-width: 100%; overflow-wrap: anywhere; }
.template-meta span { padding: 5px 10px; border-radius: 6px; background: var(--canvas); color: var(--muted); }
.template-meta dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; width: 100%; margin: 0; }
.template-meta dd { margin: 0; }
.template-dialog-actions { display: grid; gap: 10px; margin-top: 28px; }
@media (hover: hover) {
  .purpose-chip:not(.active, [aria-pressed="true"]):hover { background: var(--paper); border-color: var(--brand); color: var(--brand); }
  .template-card:hover .card-title, .project-card:hover .card-title { color: var(--brand); }
  .favorite-button:hover { border-color: var(--accent); }
  .project-actions button:hover { background: var(--brand-soft); color: var(--brand); }
}
@media (min-width: 1440px) { .template-grid { gap: 32px 24px; } }
@media (max-width: 1023px) { .template-grid, .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (max-width: 767px) {
  .family-filter {align-items:center;gap:12px;padding-bottom:6px;}
  .family-filter-label {padding-top:0;}
  .family-filters {display:none;}
  .family-select {display:block;flex:1;min-width:0;width:0;min-height:var(--touch);border-color:var(--brand);background-color:var(--paper);color:var(--brand);}
  .catalog-filters { margin-bottom: 20px; }
  .search-box { min-height: 52px; padding-inline: 12px; gap: 8px; }
  .search-box input { min-height: 50px; }
  .purpose-filters { gap: 8px 6px; padding-block: 16px; }
  .purpose-chip { padding-inline: 15px; }
  .filter-toolbar { gap: 8px; padding-block: 10px; }
  .select-filters { gap: 6px; flex: 1 1 auto; }
  .select-filters select { flex: 1 1 100px; width: 100px; max-width: 160px; padding-left: 9px; padding-right: 22px; }
  .favorites-filter { padding-inline: 8px; gap: 6px; }
  .favorites-filter svg { display: none; }
  .template-grid, .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .card-body { padding: 10px 0 0; }
  .card-title { font-size: 1em; }
  .favorite-button { top: 7px; right: 7px; }
  .template-dialog { width: 100%; }
  .template-dialog-layout { display: flex; flex-direction: column; }
  .template-preview { padding: 28px 36px; }
  .template-preview img { max-height: 42dvh; }
  .template-details { padding: 24px 20px max(24px, env(safe-area-inset-bottom)); }
  .template-details h2 { font-size: 1.5em; }
  .template-meta { margin-block: 16px 20px; }
  .template-dialog-actions { margin-top: 20px; }
}
@media (max-width: 359px) {
  .purpose-filters {padding-block:8px 6px;}
  .purpose-chip { padding-inline: 12px; }
  .filter-toolbar { flex-wrap: wrap; }
  .select-filters { flex-basis: 100%; }
  .select-filters select { max-width: none; }
  .favorites-filter { margin-left: auto; }
  .template-grid, .project-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Large text intentionally favors readable single-column art and wrapping tools. */
:is(.senior-mode, [data-large-text="true"]) .template-grid,
:is(.senior-mode, [data-large-text="true"]) .project-grid { grid-template-columns: minmax(0, 1fr); max-width: 580px; }
:is(.senior-mode, [data-large-text="true"]) .filter-toolbar { flex-wrap: wrap; }
:is(.senior-mode, [data-large-text="true"]) .select-filters { flex-wrap: wrap; }
:is(.senior-mode, [data-large-text="true"]) .favorites-filter { margin-left: auto; }

.card-actions {display:flex;flex-wrap:wrap;gap:4px;}
.project-open {overflow:hidden;}
.recent-grid .project-open {display:block;}

.load-more {display:flex;margin:32px auto 0;min-width:220px;justify-content:center;}
.active-filters {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;color:var(--muted);}
.card-photo-note {color:var(--muted);font-size:.85em;margin-top:8px;}
#emotional-filter[aria-pressed=true] {background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);}
#photo-filter {max-width:170px;}
@media(max-width:767px){.filter-toolbar {flex-wrap:wrap;} .select-filters {flex-basis:100%;} #photo-filter {max-width:none;} #emotional-filter {margin-right:auto;} .card-photo-note {font-size:.8em;} }