/* ============================================================
   ThinkLab — Checklist article additions (loads after article.css)
   ============================================================ */

/* Progress bar in TOC */
.toc-progress-wrap { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.toc-progress-text { font-size: 12px; color: rgba(0,0,0,0.45); white-space: nowrap; }
.toc-progress-track { width: 120px; height: 4px; border-radius: 4px; background: rgba(0,0,0,0.1); overflow: hidden; }
.toc-progress-fill { height: 100%; background: #000; width: 0%; transition: width 0.2s ease; }
.toc-reset { font-size: 12px; color: rgba(0,0,0,0.35); background: none; border: none; cursor: pointer; text-decoration: underline; font-family: inherit; }
.toc-reset:hover { color: #000; }

/* Hero banner image */
.hero-banner { width: 100%; max-width: 1076px; border-radius: 24px; overflow: hidden; margin: 8px 0 40px; background: #F7F7F7; display: flex; align-items: center; justify-content: center; }
.hero-banner img { width: 100%; height: 280px; object-fit: contain; display: block; }
.hero-banner-diagram { padding: 48px 60px; }
.hero-banner-diagram .stack-wrap { margin: 0; max-width: 920px; }
.hero-banner-diagram .stack-bar { flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.hero-banner-diagram .stack-bar .stack-name { font-size: 16px; }
.hero-banner-diagram .stack-bar .stack-role { font-size: 12.5px; }

/* Checklist counter card */
.progress-card { display: flex; align-items: center; justify-content: space-between; background: #F0F0F4; border-radius: 20px; padding: 24px 32px; max-width: 1076px; margin-bottom: 40px; }
.progress-card-label { font-size: 15px; color: rgba(0,0,0,0.6); }
.progress-card-count { font-size: 28px; font-weight: 500; color: #000; }
.progress-card-count span { font-size: 16px; font-weight: 400; color: rgba(0,0,0,0.4); }
.progress-card-bar { flex: 1; margin: 0 32px; height: 6px; border-radius: 6px; background: rgba(0,0,0,0.08); overflow: hidden; }
.progress-card-bar-fill { height: 100%; background: #000; width: 0%; transition: width 0.25s ease; }
.progress-reset-btn { font-size: 13px; color: rgba(0,0,0,0.45); background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 20px; padding: 8px 18px; cursor: pointer; font-family: inherit; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.progress-reset-btn:hover { color: #000; border-color: rgba(0,0,0,0.3); }

/* Priority key */
.priority-key { display: flex; gap: 28px; max-width: 1076px; margin-bottom: 8px; flex-wrap: wrap; }
.priority-key-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(0,0,0,0.55); }

/* Checklist group (accordion) */
.checklist-group { max-width: 1076px; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; margin-bottom: 20px; overflow: hidden; }
.group-header { list-style: none; cursor: pointer; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; background: #fff; transition: background 0.15s; }
.group-header::-webkit-details-marker { display: none; }
.group-header:hover { background: #FAFAFA; }
.group-header-left { display: flex; align-items: center; gap: 18px; }
.group-num { flex: 0 0 36px; height: 36px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; }
.group-title { font-size: 20px; font-weight: 500; color: #000; }
.group-header-right { display: flex; align-items: center; gap: 16px; }
.group-count { font-size: 13px; color: rgba(0,0,0,0.4); white-space: nowrap; }
.group-chevron { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; flex-shrink: 0; }
.checklist-group[open] .group-chevron { transform: rotate(180deg); }
.group-body { padding: 0 32px 36px; border-top: 1px solid rgba(0,0,0,0.08); }
.group-banner { width: 100%; border-radius: 16px; overflow: hidden; margin: 24px 0; background: #fff; border: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; }
.group-banner img { width: 100%; height: 220px; object-fit: contain; display: block; }
.group-intro { font-size: 15px; line-height: 25px; color: rgba(0,0,0,0.6); max-width: 760px; margin-bottom: 8px; }

/* Sub-section */
.subsection { margin-top: 32px; }
.subsection-title { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: #000; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.1); }

/* Checklist rows */
.check-row { display: flex; align-items: center; gap: 16px; padding: 13px 4px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.check-row:last-child { border-bottom: none; }
.check-box { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(0,0,0,0.25); background: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; }
.check-box svg { width: 13px; height: 13px; opacity: 0; transition: opacity 0.1s; }
.check-row.checked .check-box { background: #000; border-color: #000; }
.check-row.checked .check-box svg { opacity: 1; }
.check-desc { flex: 1; font-size: 14.5px; line-height: 22px; color: rgba(0,0,0,0.72); }
.check-row.checked .check-desc { color: rgba(0,0,0,0.32); text-decoration: line-through; }
.pill { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.pill.high { background: rgba(235,66,61,0.12); color: rgb(235,66,61); }
.pill.med { background: #F0F0F4; color: rgba(0,0,0,0.55); }
.pill.low { background: transparent; border: 1px solid rgba(0,0,0,0.15); color: rgba(0,0,0,0.4); }

/* Roadmap */
.roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; max-width: 1076px; margin-bottom: 8px; }
.roadmap-card { background: #F0F0F4; border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.roadmap-when { font-size: 12px; color: rgba(0,0,0,0.4); letter-spacing: 0.04em; text-transform: uppercase; }
.roadmap-title { font-size: 17px; font-weight: 500; color: #000; line-height: 1.3; }
.roadmap-desc { font-size: 13.5px; line-height: 21px; color: rgba(0,0,0,0.55); }
.roadmap-desc a.inline-link { font-size: 13.5px; }