/* Story-order Timeline (story.js). Works in both looks: light (parchment) uses the base variables, dark (cinematic) overrides below. */
.sy-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .4rem; margin: .5rem 0 .8rem; }
.sy-parts a, .sy-parts button { width: 100%; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;  display: flex; gap: .5rem; align-items: center; text-decoration: none; color: var(--ink); font: 500 .9rem var(--sans); padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 253, 248, .6); min-height: 44px; box-sizing: border-box; }
.sy-parts a b, .sy-parts button b { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff8ee; font-size: .85rem; }
.sy-part > h3 .sy-num { display: block; font: 600 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); }
.sy-part > h3 small { display: block; margin-top: .1rem; }
.sy-prefs { margin: -.2rem 0 .6rem; font-size: .85rem; }
.sy-undated { font-style: italic; }
html:not(.light) .sy-parts a, html:not(.light) .sy-parts button { background: var(--surface); color: var(--cream); border-color: var(--line); }
html:not(.light) .sy-parts a b, html:not(.light) .sy-parts button b { background: linear-gradient(180deg, #e6c47f, #c89d52); color: #1a130b; }
html:not(.light) .sy-part > h3 .sy-num { color: var(--gold); }
.sy-bg { margin: 0 0 .7rem; font-size: .88rem; color: var(--ink-soft); }
.sy-bg a { color: var(--accent); }
html:not(.light) .sy-bg a { color: var(--gold2); }
.sy-part { scroll-margin-top: 12px; } /* t626: the app header scrolls away with the page (it does not pin), so only a small gap */
.sy-part > h3:focus { outline: none; }
.sy-parts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* series-bookmark: one bookmark on the Timeline (story.js) */
#study-view .st-ev { position: relative; }
#study-view .st-ev > h4 { padding-right: 2.6rem; }
/* bookmark-overlap (1 Nov 2026): the 44px bookmark button sits over the card's top-right corner, so the date line, its note and the
   title keep a clear right-hand gutter (button width + its .5rem inset, less the card's .7rem padding, + a little air) and never run under it. */
#study-view .st-ev:has(> .sy-bm) > .st-date, #study-view .st-ev:has(> .sy-bm) > .st-dnote, #study-view .st-ev:has(> .sy-bm) > h4 { padding-right: 2.9rem; }
.sy-bm { position: absolute; top: .55rem; right: .5rem; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 8px; color: var(--muted, #6b6b6b); cursor: pointer; padding: 0; }
.sy-bm:hover, .sy-bm:focus-visible { color: var(--accent, #8a5a00); background: rgba(0,0,0,.05); }
.sy-bm[aria-pressed="true"] { color: var(--accent, #8a5a00); }
.sy-bm svg { width: 1.35em; height: 1.35em; }
.sy-bmbar { margin: .4rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.sy-bmbar[hidden] { display: none; }
.sy-bmjump { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }
.sy-bmname { color: var(--muted, #6b6b6b); }
#study-view .st-ev.sy-marked { box-shadow: inset 4px 0 0 var(--accent, #8a5a00); }
@keyframes sy-flash { 0%, 60% { background: rgba(255, 200, 60, .38); } 100% { background: transparent; } }
#study-view .st-ev.sy-flash { animation: sy-flash 2.4s ease-out; }
@media (prefers-reduced-motion: reduce) { #study-view .st-ev.sy-flash { animation: none; outline: 3px solid var(--accent, #8a5a00); } }

/* approx-dates (1 Nov 2026): approximate dates on cards that had none, how they were worked out, and the info expander */
.st-dhow { font: 600 .65rem var(--sans); color: var(--muted, #6b6b6b); border: 1px solid var(--line, #ddd); border-radius: 4px; padding: 0 .3rem; white-space: nowrap; font-style: normal; }
.st-dnote { margin: .1rem 0 .2rem; font: 400 .78rem/1.35 var(--sans); color: var(--ink-soft, #555); font-style: normal; }
.sy-how { margin: .3rem 0 .8rem; font-size: .9rem; border: 1px solid var(--line); border-radius: 10px; padding: 0 .7rem; background: rgba(255, 253, 248, .6); }
.sy-how > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 .9rem var(--sans); color: var(--accent); }
.sy-how > p { margin: 0 0 .6rem; }
html:not(.light) .st-dhow { color: var(--cream); border-color: var(--line); letter-spacing: .06em; }
html:not(.light) .st-dnote { color: var(--cream); opacity: .8; }
html:not(.light) .sy-how { background: var(--surface); color: var(--cream); border-color: var(--line); }
html:not(.light) .sy-how > summary { color: var(--gold2); }