/* Catalog: filters, toolbar, grid/list results. Builds on crv-ui.css tokens. */
.vd-catalog{padding-top:2.5rem}
.vd-catalog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.vd-catalog-head h1{margin:0;font:700 40px/48px var(--vd-display);letter-spacing:-.025em}
.vd-catalog-head p:not(.vd-eyebrow){margin:.5rem 0 0;color:var(--vd-muted);font-size:15px}
.vd-catalog-search{position:relative;display:flex;gap:.5rem;width:min(100%,30rem)}
.vd-catalog-search .vd-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--vd-outline);pointer-events:none}
.vd-catalog-search input{flex:1;min-width:0;height:44px;padding:0 1rem 0 2.6rem;border:1px solid var(--vd-line);border-radius:var(--vd-radius);background:#fff;color:var(--vd-ink);font:400 14px/20px var(--vd-font);box-sizing:border-box}
.vd-catalog-search input:focus{outline:0;border-color:var(--vd-primary-container);box-shadow:0 0 0 3px var(--vd-primary-ring)}
.vd-catalog-search .vd-btn{min-height:44px}
.vd-catalog-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:2.5rem;align-items:start}
.vd-filter-open{display:none}
.vd-filters{position:sticky;top:calc(var(--vd-header) + 1.5rem);max-height:calc(100vh - var(--vd-header) - 3rem);overflow:auto;padding:1.25rem;border:1px solid var(--vd-line-soft);border-radius:var(--vd-radius-lg);background:#fff;scrollbar-width:thin}
.vd-filters-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.vd-filters-head h2{margin:0;font:600 18px/24px var(--vd-display)}
.vd-filter-close{display:none!important}
.vd-filter-group{padding:1rem 0;border-top:1px solid var(--vd-line)}
.vd-filters-head+.vd-filter-group{border-top:0}
.vd-filter-group h3{margin:0 0 .65rem;color:var(--vd-ink);font:600 12px/16px var(--vd-font);letter-spacing:.04em;text-transform:uppercase}
.vd-check-list{display:grid;gap:.1rem;margin:0;padding:0;list-style:none}
.vd-check-list.is-scroll{max-height:15rem;overflow:auto;scrollbar-width:thin}
.vd-check-list a{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.4rem .4rem;border-radius:var(--vd-radius);color:var(--vd-ink-2);font-size:14px;text-decoration:none}
.vd-check-list a:hover{background:var(--vd-bg);color:var(--vd-ink)}
.vd-check-list small{color:var(--vd-muted);font-size:12px;font-variant-numeric:tabular-nums}
.vd-check{width:18px;height:18px;border:1.5px solid #cbd5e1;border-radius:var(--vd-radius-sm);box-sizing:border-box;background:#fff;transition:background-color .15s,border-color .15s}
.is-radio .vd-check{border-radius:50%}
[aria-checked=true]>.vd-check{border-color:var(--vd-primary-container);background:var(--vd-primary-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.2' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/12px no-repeat}
.is-radio [aria-checked=true]>.vd-check{background:#fff;box-shadow:inset 0 0 0 4px var(--vd-primary-container)}
[aria-checked=true]{color:var(--vd-ink)!important;font-weight:600}
.vd-chip-set{display:flex;flex-wrap:wrap;gap:.4rem}
.vd-filter-note{margin:1rem 0 0;color:var(--vd-muted);font-size:13px}
.vd-muted{color:var(--vd-muted)}
.vd-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 .3rem;border-radius:999px;background:var(--vd-primary-container);color:#fff;font-size:11px}
.vd-presets{display:grid;gap:.35rem;margin-bottom:.75rem}
.vd-preset{display:flex;align-items:center;gap:.25rem;border-radius:var(--vd-radius)}
.vd-preset>a{flex:1;min-width:0;overflow:hidden;padding:.4rem .5rem;border-radius:var(--vd-radius);color:var(--vd-ink-2);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.vd-preset>a:hover{background:var(--vd-bg);color:var(--vd-ink)}
.vd-preset button{display:inline-grid;place-items:center;width:30px;height:30px;border:0;border-radius:var(--vd-radius);background:none;color:var(--vd-muted);cursor:pointer}
.vd-preset button:hover{background:var(--vd-bg);color:var(--vd-ink)}
.vd-preset button .vd-icon{font-size:18px}
.vd-preset.is-pinned button[data-pin]{color:var(--vd-primary-container)}

.vd-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--vd-line)}
.vd-active-filters{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.vd-active-filters .vd-icon{font-size:16px}
.vd-toolbar-controls{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.vd-select{position:relative}
.vd-select>summary{display:inline-flex;align-items:center;gap:.35rem;height:36px;padding:0 .5rem 0 .85rem;border:1px solid var(--vd-line);border-radius:var(--vd-radius);background:#fff;font-size:13px;font-weight:500;list-style:none;cursor:pointer;white-space:nowrap}
.vd-select>summary::-webkit-details-marker{display:none}
.vd-select>summary .vd-icon{font-size:18px;color:var(--vd-muted)}
.vd-select-menu{position:absolute;right:0;top:calc(100% + .35rem);z-index:20;display:grid;min-width:12rem;padding:.35rem;border:1px solid var(--vd-line);border-radius:var(--vd-radius-md);background:#fff;box-shadow:var(--vd-shadow-lg)}
.vd-select-menu a{padding:.5rem .65rem;border-radius:var(--vd-radius);color:var(--vd-ink-2);font-size:13px;text-decoration:none}
.vd-select-menu a:hover{background:var(--vd-bg)}
.vd-select-menu a[aria-checked=true]{background:var(--vd-primary-wash);color:var(--vd-primary-container)!important}
.vd-segmented{display:inline-flex;padding:2px;border:1px solid var(--vd-line);border-radius:var(--vd-radius);background:#fff}
.vd-segmented a{display:inline-grid;place-items:center;width:32px;height:30px;border-radius:6px;color:var(--vd-muted);text-decoration:none}
.vd-segmented a[aria-pressed=true]{background:var(--vd-surface-low);color:var(--vd-primary-container)}
.vd-comic-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.55rem}
.vd-comic-summary{display:-webkit-box;margin:.5rem 0 0;overflow:hidden;color:var(--vd-ink-2);-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* List view */
.vd-list{display:grid;gap:1rem}
.vd-list .vd-comic{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.25rem;padding:1rem;border:1px solid var(--vd-line-soft);border-radius:var(--vd-radius-lg);background:#fff}
.vd-list .vd-comic-cover{border-radius:var(--vd-radius)}
.vd-list .vd-comic:hover .vd-comic-cover{transform:none;box-shadow:none}
.vd-list .vd-comic-badges{display:none}
.vd-list .vd-comic-meta{margin-top:0}

@media(max-width:1023px){
  .vd-catalog-head{flex-direction:column;align-items:stretch}
  .vd-catalog-search{width:100%}
  .vd-catalog-layout{grid-template-columns:1fr;gap:1rem}
  .vd-filter-open{display:inline-flex;justify-self:start}
  .vd-filters{position:fixed;inset:0 auto 0 0;z-index:80;width:min(88vw,22rem);max-height:none;border-radius:0 var(--vd-radius-lg) var(--vd-radius-lg) 0;transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--vd-shadow-lg)}
  .vd-filters.is-open{transform:none}
  .vd-filter-close{display:inline-grid!important}
  .vd-filters-backdrop{position:fixed;inset:0;z-index:79;background:rgba(15,23,42,.4)}
}
@media(max-width:767px){
  .vd-catalog{padding-top:1.5rem}
  .vd-catalog-head h1{font-size:28px;line-height:36px}
  .vd-toolbar{gap:.75rem}
  .vd-toolbar-controls{width:100%;justify-content:space-between;margin-left:0}
  .vd-list .vd-comic{grid-template-columns:72px minmax(0,1fr);gap:.85rem;padding:.75rem}
}

.vd-catalog-results{min-width:0}

/* Saved filter actions in the sidebar */
.vd-preset-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.vd-preset-more{margin:.25rem .5rem 0;padding:0;border:0;background:none;font:600 13px/18px var(--vd-font);cursor:pointer}
.vd-preset button[aria-pressed=true]{color:var(--vd-primary-container)}

/* Compare toggle on catalog cards + floating tray */
.vd-compare-toggle{display:inline-flex;align-items:center;gap:.3rem;height:28px;padding:0 .6rem;border:1px solid var(--vd-line);border-radius:999px;background:#fff;color:var(--vd-ink-2);font:600 12px/16px var(--vd-font);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.vd-compare-toggle .vd-icon{font-size:16px}
.vd-compare-toggle:hover{border-color:#cbd5e1;color:var(--vd-ink)}
.vd-compare-toggle[aria-pressed=true]{background:var(--vd-primary-wash);border-color:var(--vd-primary-container);color:var(--vd-primary-container)}
.vd-compare-tray{position:fixed;z-index:60;left:50%;bottom:1rem;transform:translateX(-50%);display:flex;align-items:center;gap:.75rem;width:min(calc(100% - 2rem),46rem);padding:.6rem .75rem;border:1px solid var(--vd-line);border-radius:var(--vd-radius-lg);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--vd-shadow-lg);box-sizing:border-box}
.vd-compare-tray-items{display:flex;gap:.4rem;min-width:0;overflow-x:auto;scrollbar-width:none}
.vd-compare-chip{display:inline-flex;align-items:center;gap:.4rem;max-width:12rem;padding:.2rem .25rem .2rem .2rem;border-radius:var(--vd-radius);background:var(--vd-surface-low);font:600 12px/16px var(--vd-font)}
.vd-compare-chip img{width:28px;height:42px;border-radius:4px;object-fit:cover;flex:none}
.vd-compare-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-compare-chip button{display:inline-grid;place-items:center;width:24px;height:24px;border:0;border-radius:50%;background:none;color:var(--vd-muted);cursor:pointer;flex:none}
.vd-compare-chip button .vd-icon{font-size:16px}
.vd-compare-tray-text{flex:1;min-width:6rem;color:var(--vd-muted);font-size:12px;line-height:16px}

/* Modal dialog (desktop: centred panel, mobile: bottom sheet) */
html.vd-modal-locked{overflow:hidden}
.vd-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.5rem}
.vd-modal[hidden]{display:none!important}
.vd-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.vd-modal-panel{position:relative;display:flex;flex-direction:column;width:min(100%,64rem);max-height:min(92vh,56rem);border-radius:var(--vd-radius-xl);background:#fff;box-shadow:var(--vd-shadow-lg);overflow:hidden;outline:0}
.vd-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.5rem 1.75rem 1rem;border-bottom:1px solid var(--vd-line)}
.vd-modal-head h2{margin:0;font:700 24px/30px var(--vd-display)}
.vd-modal-head p.vd-muted{margin:.25rem 0 0;font-size:13px}
.vd-modal-head-actions{display:flex;align-items:center;gap:.25rem}
.vd-modal-grip{display:none}
.vd-modal-tabs{display:flex;gap:.25rem;padding:.6rem 1.75rem 0;border-bottom:1px solid var(--vd-line)}
.vd-modal-tabs button{display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 .85rem;border:0;border-bottom:2px solid transparent;background:none;color:var(--vd-muted);font:600 14px/20px var(--vd-font);cursor:pointer}
.vd-modal-tabs button .vd-icon{font-size:18px}
.vd-modal-tabs button[aria-selected=true]{border-color:var(--vd-primary-container);color:var(--vd-primary-container)}
.vd-modal-body{flex:1;min-height:0;overflow:hidden;display:flex}
.vd-modal-criteria{display:grid;grid-template-columns:13rem minmax(0,1fr);flex:1;min-height:0}
.vd-modal-criteria[hidden],.vd-modal-saved[hidden]{display:none!important}
.vd-modal-steps{display:grid;align-content:start;gap:.15rem;padding:1.25rem .75rem;border-right:1px solid var(--vd-line);background:var(--vd-bg);overflow:auto}
.vd-modal-steps a{display:flex;align-items:center;gap:.6rem;padding:.55rem .65rem;border-radius:var(--vd-radius);color:var(--vd-ink-2);font:500 13px/18px var(--vd-font);text-decoration:none}
.vd-modal-steps a:hover{background:#fff;color:var(--vd-ink)}
.vd-modal-steps span,.vd-fd-section h3 span{color:var(--vd-primary-container);font:700 11px/14px var(--vd-font);letter-spacing:.06em}
.vd-modal-sections{overflow:auto;padding:.5rem 1.75rem 1.5rem;scroll-behavior:smooth;overscroll-behavior:contain}
.vd-fd-section{padding:1.25rem 0;border-bottom:1px solid var(--vd-line);scroll-margin-top:.5rem}
.vd-fd-section:last-child{border-bottom:0}
.vd-fd-section h3{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font:600 17px/24px var(--vd-display);outline:0}
.vd-fd-section fieldset{margin:0 0 1rem;padding:0;border:0;min-width:0}
.vd-fd-section fieldset:last-child{margin-bottom:0}
.vd-fd-section legend{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.55rem;padding:0;color:var(--vd-ink);font:600 12px/16px var(--vd-font);letter-spacing:.04em;text-transform:uppercase}
.vd-fd-section legend small{color:var(--vd-muted);font-weight:500;letter-spacing:0;text-transform:none}
.vd-fd-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.35rem}
.vd-fd-options.is-scroll{max-height:16rem;overflow:auto;padding-right:.25rem;scrollbar-width:thin}
.vd-fd-check{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:.55rem .65rem;border:1px solid var(--vd-line);border-radius:var(--vd-radius);color:var(--vd-ink-2);font-size:14px;cursor:pointer;transition:border-color .15s,background-color .15s}
.vd-fd-check:hover{border-color:#cbd5e1}
.vd-fd-check input{width:18px;height:18px;margin:0;accent-color:var(--vd-primary-container)}
.vd-fd-check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-fd-check small{color:var(--vd-muted);font-size:12px;font-variant-numeric:tabular-nums}
.vd-fd-check:has(input:checked){border-color:var(--vd-primary-container);background:var(--vd-primary-wash);color:var(--vd-ink);font-weight:600}
.vd-fd-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.vd-fd-chip{position:relative;display:inline-flex;cursor:pointer}
.vd-fd-chip input{position:absolute;opacity:0;width:1px;height:1px}
.vd-fd-chip>span{display:inline-flex;align-items:center;gap:.35rem;min-height:34px;padding:0 .85rem;border:1px solid var(--vd-line);border-radius:999px;background:#fff;color:var(--vd-ink-2);font:500 13px/18px var(--vd-font);transition:background-color .15s,border-color .15s,color .15s}
.vd-fd-chip>span .vd-icon{font-size:16px}
.vd-fd-chip>span small{color:inherit;opacity:.7;font-size:11px}
.vd-fd-chip:hover>span{border-color:#cbd5e1;color:var(--vd-ink)}
.vd-fd-chip input:checked+span{background:var(--vd-primary-container);border-color:var(--vd-primary-container);color:#fff}
.vd-fd-chip input:focus-visible+span{outline:2px solid var(--vd-primary-container);outline-offset:2px}
.vd-fd-search{position:relative;display:block;margin-bottom:.75rem}
.vd-fd-search>.vd-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--vd-outline);font-size:18px}
.vd-fd-search input,.vd-fd-years input,.vd-saved-new input,.vd-saved-rename{width:100%;height:40px;padding:0 .85rem;border:1px solid var(--vd-line);border-radius:var(--vd-radius);background:#fff;color:var(--vd-ink);font:400 14px/20px var(--vd-font);box-sizing:border-box}
.vd-fd-search input{padding-left:2.4rem}
.vd-fd-search input:focus,.vd-fd-years input:focus,.vd-saved-new input:focus,.vd-saved-rename:focus{outline:0;border-color:var(--vd-primary-container);box-shadow:0 0 0 3px var(--vd-primary-ring)}
.vd-fd-years{display:flex;align-items:flex-end;gap:.6rem;margin-bottom:.6rem}
.vd-fd-years label{display:grid;gap:.25rem;flex:1;max-width:10rem;color:var(--vd-muted);font-size:12px}
.vd-fd-years>span{padding-bottom:.6rem;color:var(--vd-muted)}
.vd-modal-saved{flex:1;overflow:auto;padding:1.25rem 1.75rem 1.5rem}
.vd-saved-new{display:grid;gap:.6rem;margin-bottom:1.25rem;padding:1rem;border:1px dashed #c7cdf6;border-radius:var(--vd-radius-md);background:var(--vd-surface-low)}
.vd-saved-new label{display:grid;gap:.1rem}
.vd-saved-new label .vd-muted{font-size:12px}
.vd-saved-new-row{display:flex;gap:.5rem}
.vd-form-error{margin:0;color:var(--vd-danger);font-size:13px}
.vd-saved-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:.85rem}
.vd-saved-list>.vd-muted,.vd-saved-list>.vd-empty{grid-column:1/-1}
.vd-saved-card{display:flex;flex-direction:column;gap:.75rem;padding:1rem;border:1px solid var(--vd-line);border-radius:var(--vd-radius-md);background:#fff}
.vd-saved-card.is-pinned{border-color:#c7cdf6}
.vd-saved-card.is-current{box-shadow:inset 0 0 0 1px var(--vd-primary-container)}
.vd-saved-card header{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.vd-saved-card h4{flex:1 1 10rem;min-width:0;margin:0;overflow-wrap:anywhere;font:600 15px/22px var(--vd-display)}
.vd-saved-card .vd-chip .vd-icon{font-size:14px}
.vd-saved-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.vd-saved-chips .vd-chip{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px}
.vd-saved-actions{display:flex;align-items:center;gap:.25rem;margin-top:auto}
.vd-saved-actions .vd-btn{margin-right:auto}
.vd-saved-actions [aria-pressed=true]{color:var(--vd-primary-container)}
.vd-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.75rem;border-top:1px solid var(--vd-line);background:var(--vd-bg)}
.vd-modal-foot-actions{display:flex;gap:.5rem}
.vd-modal.is-saved-tab .vd-modal-foot .vd-muted{visibility:hidden}
@media(max-width:767px){
  .vd-modal{place-items:end stretch;padding:0}
  .vd-modal-panel{width:100%;max-height:94vh;border-radius:var(--vd-radius-xl) var(--vd-radius-xl) 0 0}
  .vd-modal-head{position:relative;padding:1.4rem 1rem .75rem}
  .vd-modal-head h2{font-size:20px;line-height:26px}
  .vd-modal-grip{display:block;position:absolute;top:.5rem;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#cbd5e1}
  .vd-modal-tabs{padding:.4rem 1rem 0}
  .vd-modal-tabs button{flex:1;justify-content:center}
  .vd-modal-criteria{grid-template-columns:1fr}
  .vd-modal-steps{display:none}
  .vd-modal-sections,.vd-modal-saved{padding:.25rem 1rem 1rem}
  .vd-fd-options{grid-template-columns:1fr}
  .vd-saved-list{grid-template-columns:1fr}
  .vd-saved-new-row{flex-direction:column}
  .vd-modal-foot{padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom))}
  .vd-modal-foot .vd-muted{display:none}
  .vd-modal-foot-actions{flex:1}
  .vd-modal-foot-actions .vd-btn-primary{flex:1}
  .vd-compare-tray{bottom:calc(64px + .75rem)}
  .vd-compare-chip span{display:none}
  .vd-toolbar-controls{flex-wrap:wrap}
  .vd-advanced-open{flex:1 1 100%}
}
/* Closed mobile drawer stays out of the tab order. */
@media(max-width:1023px){.vd-filters{visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}.vd-filters.is-open{visibility:visible;transition:transform .2s ease}}
/* Filter dialog step numbers follow the sections that are actually shown. */
.vd-modal-steps{counter-reset:fdstep}.vd-modal-steps a>span:empty::before{counter-increment:fdstep;content:counter(fdstep,decimal-leading-zero)}.vd-modal-sections{counter-reset:fdsection}.vd-fd-section h3>span:empty::before{counter-increment:fdsection;content:counter(fdsection,decimal-leading-zero)}