.active-reading-mode{font-size:.85rem!important;letter-spacing:.06em;color:var(--muted,#70685c);margin-top:14px!important;font-weight:600}
.reading-mode-control small{display:block;font-size:.75rem;line-height:1.45;margin-top:9px;color:var(--muted,#70685c);text-wrap:balance}
.reading-mode-control button[aria-pressed=true]{background:var(--green,#294d3d);color:white}
.mode-choice-dialog{max-width:660px;width:calc(100% - 36px)}
.mode-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.mode-choice{display:flex;flex-direction:column;gap:15px;text-align:center;padding:25px 19px!important;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font:inherit;cursor:pointer;line-height:1.45}
.mode-choice:hover,.mode-choice:focus-visible{background:var(--surface-secondary);color:var(--ink);border-color:var(--accent)}
.mode-choice strong{font:600 1.25rem Georgia,serif}.mode-choice span{font-size:.94rem}.mode-choice small{font-size:.78rem;color:var(--muted,#70685c);margin-top:auto}
.mode-test-note{text-align:center;font-size:.8rem;color:var(--muted,#70685c);margin:28px 0 10px}.mode-test-note button{color:inherit;background:none;border:0;padding:4px;font:inherit;text-decoration:underline;cursor:pointer}
.tolkien-part,.tolkien-break{text-align:center;color:var(--muted,#70685c);font-size:.85rem}.tolkien-break{margin:22px 0 0;font:var(--font-help);text-wrap:balance}.tolkien-hiatus{text-align:center}.mode-eyebrow{text-transform:uppercase;font-size:.75rem;letter-spacing:.13em;color:var(--muted,#70685c)}
html[data-reading-mode=tolkien] .journey-timeline,html[data-reading-mode=tolkien] .moon-phase,html[data-reading-mode=tolkien] .journey-milestone{display:none!important}
[hidden]{display:none!important}
@media(max-width:540px){.mode-choice-grid{grid-template-columns:1fr}.mode-choice{padding:18px!important;gap:10px}.mode-choice-dialog .catchup-dialog-inner{padding:24px 18px}}

/* Reading Order shares the site's theme-toggle palette and active state. */
html .reading-mode-control .theme-options button[aria-pressed="true"]{background:#14453d!important;border-color:#14453d!important;color:#fff!important}
html[data-theme="dark"] .reading-mode-control .theme-options button[aria-pressed="true"]{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important}
.mode-choice-dialog,.mode-choice-dialog h2,.mode-choice-dialog p,.mode-choice-dialog button{text-align:center}
.mode-choice-dialog p{text-wrap:balance}
.mode-choice-grid{align-items:stretch}
html[data-reading-mode="tolkien"] .tolkien-reading-card{border-left:1px solid var(--line)!important;border-color:var(--line)!important}
html[data-reading-mode="tolkien"] .cal-length{display:none!important}
html[data-reading-mode="tolkien"] .calendar-key>span:has(.cal-length){display:none!important}

.reading-order-banner{position:relative;z-index:100;display:flex;justify-content:center;align-items:center;min-height:32px;padding:8px 14px;background:#14453d;color:#fff;font:600 12px system-ui,sans-serif;text-align:center}
html[data-reading-mode="tolkien"] .reading-order-banner{background:#9a6748}
html:has(.reading-order-banner:not(.is-hiding)) .accessibility-controls{top:46px}
html:has(.reading-order-banner:not(.is-hiding)):has(#testDateBanner) .accessibility-controls{top:80px}
.mode-choice-dialog .mode-choice[aria-pressed="true"]{border:2px solid var(--accent);background:var(--surface-secondary);color:var(--ink)}
.mode-choice-dialog .mode-choice strong::after{visibility:hidden;content:'';display:inline-block;width:28px;height:28px;margin-left:7px;vertical-align:-6px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8 6.5 11 12.5 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-theme="dark"] .mode-choice-dialog .mode-choice[aria-pressed="true"]{background:var(--surface-secondary);border-color:var(--accent);color:var(--ink)}
.order-welcome-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 0}
.order-welcome-actions button:disabled{opacity:.45;cursor:default}
.order-welcome-start{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important}
.mode-choice-dialog .welcome-season-note{text-align:center;color:var(--muted);font:var(--font-help);text-wrap:balance;margin:16px 0 0}
.mode-choice-dialog .mode-choice-cancel{margin-top:16px}

.reading-order-banner{max-height:40px;overflow:hidden;transition:transform .4s ease,max-height .4s ease,min-height .4s ease,padding .4s ease,opacity .25s ease}
.reading-order-banner.is-hiding{transform:translateY(-100%);max-height:0;min-height:0;padding-top:0;padding-bottom:0;opacity:0}
.order-switch-link{margin-top:-24px}
.accessibility-controls{transition:top .4s ease,opacity .18s ease,visibility .18s ease,transform .18s ease}
@media(prefers-reduced-motion:reduce){.reading-order-banner,.accessibility-controls{transition:none}}
html[data-reduce-motion="true"] .reading-order-banner,html[data-reduce-motion="true"] .accessibility-controls{transition:none}

.progress-transfer-link.order-switch-links{column-gap:24px;row-gap:0;margin-bottom:28px}
.order-switch-links .progress-link-group{position:relative;display:inline-flex;white-space:nowrap}
.order-switch-links .progress-link-group::before{content:'•';position:absolute;left:-15px;top:5px;font:600 13px/normal system-ui,sans-serif;color:var(--muted)}
.order-switch-links .progress-link-group.progress-row-start::before{content:none}

html[data-reading-mode="tolkien"] .stats-word-calendar,html[data-reading-mode="tolkien"] .book-partial-legend{display:none!important}

/* Neutral choices become green and white when selected. */
.mode-choice-dialog .mode-choice small{font:400 12px/1.45 system-ui,sans-serif}
.mode-choice-dialog .mode-choice[aria-pressed="true"],html[data-theme="dark"] .mode-choice-dialog .mode-choice[aria-pressed="true"]{background:#14453d;border-color:#14453d;color:#fff}
.mode-choice-dialog .mode-choice[aria-pressed="true"] small{color:inherit}
.mode-choice-dialog .mode-choice strong{display:inline-flex;justify-content:center;align-items:center;gap:7px}
.mode-choice-dialog .mode-choice[aria-pressed="true"] strong::after{margin-left:0;vertical-align:baseline;flex-shrink:0}
@media(min-width:541px){dialog.mode-choice-dialog{width:min(760px,calc(100% - 36px));max-width:760px}.mode-choice-dialog .mode-choice strong{white-space:nowrap}}

.mode-choice-dialog .page-help{font:var(--font-help);color:var(--muted);text-align:center;text-wrap:balance}

/* Reserve the selected marker and border dimensions to prevent layout shifts. */
.mode-choice-dialog .mode-choice{border-width:2px}
.mode-choice-dialog .mode-choice strong::after{margin-left:0;vertical-align:baseline;flex-shrink:0}
.mode-choice-dialog .mode-choice[aria-pressed="true"] strong::after{visibility:visible}
.order-welcome-start:not(:disabled):hover,.order-welcome-start:not(:disabled):focus{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;color:var(--on-accent)!important}

.mode-choice-dialog .mode-choice[aria-pressed="true"],.mode-choice-dialog .mode-choice[aria-pressed="true"]:focus,.mode-choice-dialog .mode-choice[aria-pressed="true"]:focus-visible{outline:none;box-shadow:none}

html .accessibility-panel .theme-options button:not(.active):is(:hover,:focus){background:var(--button-dim);color:var(--ink)}

/* Center unselected headings; reserve height, rather than width, for the check. */
.mode-choice-dialog .mode-choice strong{min-height:28px;gap:0}
.mode-choice-dialog .mode-choice strong::after{width:0;height:28px}
.mode-choice-dialog .mode-choice[aria-pressed="true"] strong{gap:7px}
.mode-choice-dialog .mode-choice[aria-pressed="true"] strong::after{width:28px}

.reading-order-banner{gap:14px;flex-wrap:wrap;max-height:80px}
html .reading-order-banner a{color:inherit;text-decoration:underline}
html .reading-order-banner a:hover,html .reading-order-banner a:focus{color:inherit}

.mode-choice-dialog .welcome-season-note.page-help{font-weight:600}

/* Select the index label before body rendering, without a delayed text swap. */
.index-label-book{display:none}
html[data-reading-mode="tolkien"] .index-label-chronological{display:none}
html[data-reading-mode="tolkien"] .index-label-book{display:inline}