#checklistView { max-width: 1320px; margin-inline: auto; }
.checklist-heading { max-width: 760px; margin: 12px 0 24px; }
.checklist-heading h2 { font-size: clamp(28px,4vw,42px); margin: 8px 0; text-wrap: balance; }
.checklist-heading p,.checklist-note { color: var(--muted,#777); line-height: 1.6; }
.checklist-categories { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.checklist-categories button { min-height:44px; padding:10px 18px; border:1px solid #8884; border-radius:24px; background:transparent; color:inherit; cursor:pointer; }
.checklist-categories button[aria-pressed="true"] { background:#c9f36a; color:#14200a; border-color:transparent; }
.checklist-search { display:grid; gap:8px; max-width:520px; }
#checklistView input[type="search"],#checklistView select { width:100%; min-height:44px; border:1px solid #8885; border-radius:12px; padding:10px 14px; background:var(--panel,#fff); color:var(--ink,#172018); }
.checklist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:20px; margin:20px 0 32px; }
.checklist-set { border:1px solid #8883; border-radius:20px; overflow:hidden; box-shadow:0 4px 16px #00000008; }
.checklist-cover { height:190px; display:grid; place-items:center; background:#8881; padding:16px; text-align:center; color:var(--muted,#777); }
.checklist-cover img { width:100%; height:100%; object-fit:contain; border-radius:4px; }
.checklist-set-body { padding:18px; display:flex; flex-direction:column; gap:10px; }
.checklist-set h3 { font-size:17px; margin:0; line-height:1.45; }
.checklist-set p { margin:0; font-variant-numeric:tabular-nums; }
.checklist-set small,.checklist-card small { color:var(--muted,#777); }
.checklist-set .button { margin-top:4px; min-height:44px; }
.checklist-sources { padding:18px; border:1px solid #8883; border-radius:16px; }
.checklist-sources summary { cursor:pointer; min-height:40px; }
.checklist-detail-heading { margin:22px 0; }
.checklist-detail-heading h3 { font-size:24px; text-wrap:balance; }
.checklist-detail-heading a { display:inline-block; margin-right:16px; padding-block:10px; }
.checklist-controls { display:flex; gap:16px; margin:20px 0; }
.checklist-controls label { display:grid; gap:8px; flex:1; }
#checklistProgressBar { width:100%; height:10px; accent-color:#658f27; }
.checklist-card { display:flex; align-items:center; gap:16px; padding:14px 8px; border-bottom:1px solid #8883; min-height:64px; cursor:pointer; }
.checklist-card input { width:22px; height:22px; flex-shrink:0; accent-color:#658f27; }
.checklist-card small { display:block; margin-top:4px; }
.checklist-number { min-width:100px; font-variant-numeric:tabular-nums; }
.checklist-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0; font-variant-numeric:tabular-nums; }
.checklist-pagination button { min-height:44px; padding:8px 14px; }
#checklistView :focus-visible { outline:3px solid #658f27; outline-offset:3px; }
@media(max-width:600px) { .checklist-grid {grid-template-columns:1fr 1fr;gap:10px} .checklist-cover {height:145px} .checklist-set-body {padding:12px} .checklist-set h3 {font-size:15px} .checklist-controls {flex-direction:column} .checklist-number {min-width:75px;font-size:13px} .checklist-card {gap:10px} .checklist-pagination {flex-wrap:wrap;font-size:13px} }

#checklistView input[type="search"]::placeholder { color:var(--muted); opacity:1; }
.nav-item[data-view="checklist"]::after { content:"☑"; font-size:20px; line-height:16px; }

.checklist-card-thumbnail { position:relative; display:grid; place-items:center; flex:0 0 56px; width:56px; height:78px; border-radius:5px; background:var(--panel,#fff); overflow:hidden; }
.checklist-image-placeholder { padding:4px; font-size:9px; line-height:1.25; text-align:center; color:var(--muted,#777); }
.checklist-card-thumbnail img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--panel,#fff); border-radius:5px; outline:1px solid rgba(255,255,255,.1); outline-offset:-1px; }
.checklist-card-thumbnail img[hidden] { display:none; }
.checklist-card-info { min-width:0; overflow-wrap:anywhere; }
.checklist-card-info .checklist-number { display:block; margin-top:4px; min-width:0; color:var(--muted,#777); font-size:13px; }
@media(max-width:600px) { .checklist-card {padding-inline:0} .checklist-card-thumbnail {flex-basis:48px;width:48px;height:67px} }