.chapters-page{max-width:900px}.chapters-page h2{font-weight:500;font-size:27px}.chapters-page h3{font-size:20px;font-weight:500;margin:0 0 10px}.chapters-edition{margin:24px 0}.chapter-volume{margin:34px 0}.chapter-volume>h2{border-bottom:1px solid var(--line);padding-bottom:9px}.chapter-book{margin:22px 0}.chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chapter-card{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:16px}.chapter-card h4{font-size:17px;margin:0 0 9px;font-weight:500}.chapter-dates{display:flex;flex-wrap:wrap;gap:7px}.chapter-dates a{display:inline-block;padding:5px 9px;border:1px solid var(--line);border-inline-start-width:3px;border-radius:5px;color:var(--ink);text-decoration:none;font:13px/1.4 system-ui,sans-serif}.chapter-dates a:hover,.chapter-dates a:focus-visible{background:var(--paper);text-decoration:underline}.chapter-dates small{display:block;color:var(--muted);font-size:11px}.chapters-method{font:13px/1.5 system-ui,sans-serif;color:var(--muted);margin:22px 0}@media(max-width:650px){.chapter-grid{grid-template-columns:1fr}}
.chapter-dates a.chapter-read{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.chapter-dates a.chapter-read small{color:var(--on-accent)}.chapter-dates a.chapter-read:hover,.chapter-dates a.chapter-read:focus-visible{background:var(--accent-hover);color:var(--on-accent)}

.chapter-key{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;margin:10px 0 24px;color:var(--muted);font:600 12px system-ui,sans-serif}.chapter-key>span{display:flex;align-items:center;gap:8px}.chapter-key-sample{display:inline-block;padding:5px 9px;border:1px solid var(--line);border-radius:5px;color:var(--ink);font:13px/1.4 system-ui,sans-serif}.chapter-key-sample.chapter-read{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.chapter-title{display:block;margin-top:2px;line-height:1.35}

.index-switch{display:flex;justify-content:center;gap:10px;margin:24px 0 10px}.index-switch button{min-width:130px}.index-switch button.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.index-switch button:focus-visible,.character-track summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}#chapterIndex[hidden],#characterIndex[hidden]{display:none}.character-track{border:1px solid var(--line);border-radius:8px;background:var(--panel);margin:12px 0;overflow:hidden}.character-track summary{cursor:pointer;padding:16px;display:flex;align-items:center;gap:12px;list-style:none}.character-track summary::-webkit-details-marker{display:none}.character-track summary::before{content:'›';font:25px/1 system-ui,sans-serif;transition:transform .15s}.character-track[open] summary::before{transform:rotate(90deg)}.character-track summary:hover{background:var(--paper)}.character-track h2{margin:0;font-size:21px;font-weight:500}.character-count{margin-left:auto;white-space:nowrap;color:var(--muted);font:12px system-ui,sans-serif}.character-track .chapter-dates{border-top:1px solid var(--line);padding:16px}.character-track .chapter-dates a{min-width:112px}.entry:target{outline:none;scroll-margin:40px}@media(max-width:450px){.character-track summary{padding:14px;gap:8px}.character-track h2{font-size:19px}.character-count{font-size:11px}.index-switch button{min-width:0;flex:1}}@media(prefers-reduced-motion:reduce){.character-track summary::before{transition:none}}

.chapter-number{display:block;color:var(--muted);font:600 12px/1.4 system-ui,sans-serif;letter-spacing:.04em}.chapter-card .chapter-title{margin-top:5px;font-size:19px;font-weight:500;line-height:1.35;color:var(--ink)}

#dayIndex[hidden]{display:none}.day-list{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}.day-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:12px 16px}.day-row h3{font-size:17px;margin:5px 0;line-height:1.4}.day-row .chapter-dates a{min-width:130px}@media(max-width:650px){.day-row{grid-template-columns:1fr;gap:6px}.day-row h3{margin:0}.day-row .chapter-dates a{min-width:0}}

 .chapter-dates{gap:7px}.index-reading{display:flex;align-items:stretch;border:1px solid var(--line);border-inline-start-width:3px;border-radius:5px;overflow:hidden;max-width:100%}.chapter-dates .index-reading a{border:0;border-radius:0;min-width:0;flex:1}.index-reading.is-read{background:var(--accent);border-color:var(--accent)}.index-complete{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0;cursor:pointer}.index-complete input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}.index-complete input:focus{outline:none}.character-track{padding-top:0}.character-track h2{font-family:Georgia,serif}.chapters-edition{margin-bottom:30px}
.index-progress-notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:20px;max-width:calc(100% - 32px);padding:12px 18px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 15px #0002;font:13px/1.4 system-ui,sans-serif}.index-progress-notice[hidden]{display:none}.index-progress-notice button{padding:8px;border:0;background:transparent;color:var(--ink);font:600 13px system-ui,sans-serif;text-decoration:underline;cursor:pointer}

.day-list{border:0;background:transparent;border-radius:0;overflow:visible;display:grid;gap:12px}.day-row{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:16px}.day-row+.day-row{border-top:1px solid var(--line)}

.index-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;margin:24px 0}.index-tools [hidden]{display:none}#indexDayActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.index-time-option{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0;font:12px system-ui,sans-serif}.index-time-option input{accent-color:var(--accent);width:16px;height:16px}.index-count{display:block;margin-top:6px;color:var(--muted);font:12px/1.4 system-ui,sans-serif}.day-row{scroll-margin-top:24px}.day-row:focus{outline:none}.character-count{white-space:normal;text-align:right}.chapter-card .index-count{margin-top:8px}

#indexDayActions[hidden]{display:none}

.index-switch{flex-wrap:wrap}#elsewhereIndex[hidden],.chapters-edition[hidden],.edition-help[hidden]{display:none}#elsewhereIndex .chapter-dates a{min-width:112px;max-width:100%;box-sizing:border-box}

.index-switch{display:grid;grid-template-columns:repeat(4,130px);justify-content:center;gap:10px}.index-switch button{width:130px;min-width:130px;white-space:nowrap}@media(max-width:600px){.index-switch{grid-template-columns:repeat(2,130px)}}

/* Match main reading cards, with a proportionate accent in By Day only. */
#dayIndex .index-reading{--card-color:var(--shared-route)}
#dayIndex .card-route-friends,#dayIndex .card-route-strider{--card-color:var(--map-stop-border)}
#dayIndex .card-route-ring{--card-color:var(--party-frodo-sam-light)}
#dayIndex .card-route-west{--card-color:var(--party-hunters-light)}
#dayIndex .card-route-merry{--card-color:var(--party-merry-light)}
html[data-theme="dark"] #dayIndex .card-route-ring{--card-color:var(--party-frodo-sam-dark)}
html[data-theme="dark"] #dayIndex .card-route-west{--card-color:var(--party-hunters-dark)}
html[data-theme="dark"] #dayIndex .card-route-merry{--card-color:var(--party-merry-dark)}
html[data-card-colors="true"]:not([data-reading-mode="tolkien"]) #dayIndex .index-reading{border-inline-start:3px solid var(--card-color)}

.chapter-dates a:not(.chapter-read),.index-reading:not(.is-read),.index-switch button:not(.active),#indexDayActions button{background:var(--button-base,var(--paper))}
.chapter-dates a:not(.chapter-read):hover,.chapter-dates a:not(.chapter-read):focus,.index-switch button:not(.active):hover,.index-switch button:not(.active):focus,#indexDayActions button:hover,#indexDayActions button:focus{background:var(--button-dim);color:var(--ink)}
.index-world-days{display:grid;gap:18px}
.index-world-day h4{margin:0 0 8px;color:var(--muted);font:600 13px/1.4 system-ui,sans-serif}

/* Unread index readings and neutral controls use the light button surface. */
.chapters-page .chapter-dates a:not(.chapter-read),.chapters-page .chapter-dates .index-reading:not(.is-read),.chapters-page .chapter-dates .index-reading:not(.is-read)>a,.chapters-page .index-switch button:not(.active),.chapters-page .secondary-action{background:var(--panel);color:var(--muted)}
.chapters-page .chapter-dates a:not(.chapter-read):hover,.chapters-page .chapter-dates a:not(.chapter-read):focus,.chapters-page .index-switch button:not(.active):hover,.chapters-page .index-switch button:not(.active):focus,.chapters-page .secondary-action:hover,.chapters-page .secondary-action:focus{background:var(--button-dim);color:var(--ink)}
.chapters-page .chapter-dates .index-reading:not(.is-read)>a:hover,.chapters-page .chapter-dates .index-reading:not(.is-read)>a:focus{background:var(--button-dim);color:var(--ink)}

/* Completed reading controls follow the same dark-mode accent pair. */
html[data-theme="dark"] .chapter-dates a.chapter-read,
html[data-theme="dark"] .chapter-key-sample.chapter-read,
html[data-theme="dark"] .index-reading.is-read{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
html[data-theme="dark"] .chapter-dates a.chapter-read small{color:var(--on-accent)}
html[data-theme="dark"] .chapter-dates a.chapter-read:hover,
html[data-theme="dark"] .chapter-dates a.chapter-read:focus-visible{background:var(--accent-hover);color:var(--on-accent)}
html[data-theme="dark"] .index-complete input,html[data-theme="dark"] .index-time-option input{accent-color:var(--accent)}
