/* Fine details for the three website studies. */
.detail-icon,svg[data-detail-icon]{flex:none;vertical-align:middle;overflow:visible}
.detail-icon{width:25px;height:25px;color:var(--gold)}
.detail-trim,.chart-filigree,.detail-finial{pointer-events:none;user-select:none}
.detail-trim{position:absolute;inset:0;color:var(--gold);overflow:hidden;border-radius:inherit;z-index:-1}
.detail-corner{position:absolute;width:40px;height:40px;opacity:.55}
.detail-corner.tl{top:3px;left:3px}.detail-corner.br{bottom:3px;right:3px;transform:rotate(180deg)}
.detail-corner.tr{top:3px;right:3px;transform:rotate(90deg)}.detail-corner.bl{bottom:3px;left:3px;transform:rotate(270deg)}
.detail-finial{position:absolute;width:90px;height:24px;color:var(--gold);opacity:.65}
html[data-design] .header nav>a[aria-current]:after{display:none}
html[data-design] .section-heading>.detail-finial{right:0;bottom:-12px;width:70px;height:22px;background:var(--bg)}
html[data-design] .section-heading:has(>.text-link)>.detail-finial{right:110px}
html[data-design] .section-heading:after{display:none}
html[data-design] .calendar-section .section-heading>.detail-finial{display:none}
html[data-design] .keyword:before{display:none}
html[data-design] .keyword>.detail-icon{width:25px;height:25px;margin:0;color:var(--gold);opacity:.9}
html[data-design] .keyword-trim .detail-corner{display:none}
html[data-design="a"] .keyword small{border:1px solid var(--line);padding:2px 7px;background:var(--bg)}
html[data-design="b"] .keyword small{border:0;padding:0}
html[data-design="c"] .keyword small{border:0;padding:0}
html[data-design] #roll{display:inline-flex;align-items:center;gap:9px}
html[data-design] #roll .detail-icon{width:18px;height:18px;margin:0}
html[data-design] #roll span{padding:0;display:flex}
html[data-design] .calendar-day.is-selected:after{display:none}
html[data-design="b"] .calendar-trim{color:var(--cyan)}
html[data-design="b"] .calendar-trim .detail-corner{width:32px;height:32px}
html[data-design="c"] .detail-trim>.detail-finial{left:50%;top:10px;transform:translateX(-50%);width:100px;height:28px;opacity:.6}
html[data-design="c"] .calendar-trim>.detail-finial{top:19px;width:125px;height:34px}
html[data-design="c"] .keyword-trim>.detail-finial{top:9px;width:72px;height:22px}
html[data-design="c"] .entrance-trim>.detail-finial{top:10px;width:70px;height:21px}
html[data-design="a"] .book-trim{display:none}
html[data-design="b"] .book-trim .detail-corner{width:27px;height:27px;opacity:.3}
.chart-filigree{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);z-index:2}
html[data-design] .word-chart-wrap:before,html[data-design] .word-chart-wrap:after{display:none}
html[data-design] .word-tooltip{z-index:10}
html[data-design] .chronicle-point{background:none;border:0;box-shadow:none;transform:none;border-radius:0;color:var(--gold)}
html[data-design] .point-glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;pointer-events:none;overflow:visible}
html[data-design="b"] .point-glyph{width:23px;height:23px;color:var(--cyan)}
html[data-design] .chronicle-era-heading>span>.detail-finial{left:50%;bottom:-16px;transform:translateX(-50%);width:76px;background:var(--bg)}
html[data-design="b"] .chronicle-era-heading>span>.detail-finial{background:none}
html[data-design] .chronicle-world-start>.detail-finial{left:50%;bottom:-20px;transform:translateX(-50%);width:90px}
html[data-design] .chronicle-world-start:has(.chronicle-mainland-heading)>.detail-finial{display:none}
html[data-design] .chronicle-card>header>h3:after{content:'';position:absolute;left:0;bottom:-6px;width:24px;height:1px;background:currentColor;opacity:.3}
html[data-design] .chronicle-card>header>h3{position:relative}
html[data-design] .chronicle-alternate-left .chronicle-card>header>h3:after,html[data-design] .chronicle-left>header>h3:after{right:0;left:auto}
html[data-design] .chronicle-milestone .chronicle-card>header>h3:after{display:none}
/* A and C calendar labels share the original horizontal axis-tick layout. */
html:is([data-design="a"],[data-design="c"]) .timeline-page .chronicle-card>header>h3:after{content:none}
html:is([data-design="a"],[data-design="c"]) .timeline-page .chronicle-point:before,
html:is([data-design="a"],[data-design="c"]) .timeline-page .chronicle-point:after{width:17px;height:1px;top:calc(50% - .5px);transform:none}
html[data-design] .chronicle-story-button,html[data-design] .chronicle-note-button{box-shadow:none}
html[data-design] .chronicle-note-button svg{width:14px;height:14px}
html[data-design] .reader-head>.detail-finial{bottom:-13px;left:50%;transform:translateX(-50%);width:90px}
html[data-design] .entry-heading,html[data-design] .book-head{position:relative}
html[data-design] .entry-heading>.detail-finial{bottom:-13px;left:0;width:82px;background:var(--bg)}
html[data-design] .book-head>.detail-finial{bottom:-13px;left:50%;transform:translateX(-50%);width:82px}
html[data-design] .entry-heading>.detail-finial-right{left:auto;right:0;transform:scaleX(-1)}
/* Major content divisions: A uses two 1px strokes, C uses one 1px stroke.
   List rows, card internals, toolbars and footer/navigation keep their single rules. */
html[data-design="a"]{--detail-divider-width:3px;--detail-divider-style:double;--detail-tail-x:4;--detail-tail-y:16}
html[data-design="c"]{--detail-divider-width:1px;--detail-divider-style:solid;--detail-tail-x:3;--detail-tail-y:23}
html:is([data-design="a"],[data-design="c"])[data-palette] [data-divider="major"]{position:relative;--detail-finial-size:90;--detail-finial-offset:0px;--detail-finial-inset:calc(var(--detail-finial-size) * var(--detail-tail-x) * 1px / 120);--detail-finial-end:calc(var(--detail-finial-size) * 1px - var(--detail-finial-inset));--detail-divider-gap:calc(var(--detail-finial-size) * 1px / 2 - var(--detail-finial-inset));border-bottom:var(--detail-divider-width) var(--detail-divider-style) var(--line)}
html:is([data-design="a"],[data-design="c"])[data-palette] :is(.book-head,.entry-heading)[data-divider="major"]{--detail-finial-size:82}
html:is([data-design="a"],[data-design="c"])[data-palette] .chronicle-era-heading>span[data-divider="major"]{--detail-finial-size:76}
html:is([data-design="a"],[data-design="c"])[data-palette] .section-heading[data-divider="major"]{--detail-finial-size:70;--detail-divider-mask:linear-gradient(to right,#000 calc(100% - var(--detail-finial-offset) - var(--detail-finial-end)),transparent 0 calc(100% - var(--detail-finial-offset) - var(--detail-finial-inset)),#000 0)}
html:is([data-design="a"],[data-design="c"])[data-palette] .section-heading[data-divider="major"]:has(>.text-link){--detail-finial-offset:110px}
html:is([data-design="a"],[data-design="c"])[data-palette] .entry-heading[data-divider="major"]{--detail-divider-mask:linear-gradient(to right,#000 var(--detail-finial-inset),transparent 0 var(--detail-finial-end),#000 0 calc(100% - var(--detail-finial-end)),transparent 0 calc(100% - var(--detail-finial-inset)),#000 0)}
/* The line is cut at the SVG endpoints; no opaque patch is used to hide it. */
html:is([data-design="a"],[data-design="c"])[data-palette] [data-divider="major"]:has(>svg[data-divider-finial]){border-bottom-color:transparent}
html:is([data-design="a"],[data-design="c"])[data-palette] [data-divider="major"]:has(>svg[data-divider-finial])::after{content:'';display:block;position:absolute;left:0;right:0;bottom:calc(-1 * var(--detail-divider-width));border-bottom:var(--detail-divider-width) var(--detail-divider-style) var(--line);mask-image:var(--detail-divider-mask,linear-gradient(to right,#000 calc(50% - var(--detail-divider-gap)),transparent 0 calc(50% + var(--detail-divider-gap)),#000 0));pointer-events:none}
html:is([data-design="a"],[data-design="c"])[data-palette] [data-divider="major"]>svg[data-divider-finial]{width:calc(var(--detail-finial-size) * 1px);height:calc(var(--detail-finial-size) * 32px / 120);bottom:calc(-1 * (var(--detail-finial-size) * (32 - var(--detail-tail-y)) * 1px / 120 + var(--detail-divider-width) / 2));background:none;opacity:1}
html:is([data-design="a"],[data-design="c"])[data-palette] .section-heading[data-divider="major"]>svg[data-divider-finial]{right:var(--detail-finial-offset)}
[data-divider-finial]>.detail-finial-tail{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
[data-divider-finial]>.detail-finial-tail.upper{transform:translateY(calc(-120px / var(--detail-finial-size)))}
[data-divider-finial]>.detail-finial-tail.lower{transform:translateY(calc(120px / var(--detail-finial-size)))}
[data-divider-finial]>.detail-finial-mark{opacity:.65}
@media(max-width:760px){
 html:is([data-design="a"],[data-design="c"])[data-palette] .section-heading[data-divider="major"]{--detail-finial-size:60}
 html:is([data-design="a"],[data-design="c"])[data-palette] .section-heading[data-divider="major"]:has(>.text-link){--detail-divider-mask:none}
}
html[data-design] #reader-theme,html[data-design] #close-entry{display:inline-flex;align-items:center;gap:7px}
html[data-design] #reader-theme .detail-icon,html[data-design] #close-entry .detail-icon{width:18px;height:18px}
html[data-design] .term-popover-close .detail-icon{width:19px;height:19px}
html[data-design] .popover-trim{display:none}
html[data-design] select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23898576' stroke-width='1.2'%3E%3Cpath d='m3 4 5 5 5-5'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;background-size:14px 12px;padding-right:31px}
html[data-design] .calendar-controls .ui-icon{width:18px;height:18px}
/* A distinct closing plate for each timeline study. No text is added. */
html[data-design] .timeline-page .chronicle-ending{isolation:isolate;width:calc(100% - 48px);max-width:600px;margin:58px auto 0;padding:66px 36px 32px;font:16px/2.15 var(--serif);color:var(--text);border-radius:0;box-shadow:none;background:var(--panel)}
.ending-emblem{position:absolute;left:50%;top:15px;transform:translateX(-50%);width:72px;height:42px;color:var(--gold);pointer-events:none;overflow:visible}
html[data-design] .chronicle-ending:before{content:'';position:absolute;inset:8px;border:1px solid var(--line);border-radius:inherit;pointer-events:none;z-index:-1;opacity:.6}
html[data-design] .chronicle-ending p{position:relative;margin:0;text-indent:0}
html[data-design="a"] .timeline-page .chronicle-ending{border:1px solid var(--gold);background:linear-gradient(90deg,#e7ddc8 0 6px,var(--panel) 6px);box-shadow:4px 5px 0 #e2d7c566}
html[data-design="a"] .chronicle-ending:before{border-block:3px double var(--line)}
html[data-design="b"] .timeline-page .chronicle-ending{border:1px solid var(--line);border-top-color:var(--cyan);background:linear-gradient(135deg,#203246,#162535);padding-top:71px}
html[data-design="b"] .ending-emblem{color:var(--cyan);width:86px;height:46px}
html[data-design="b"] .chronicle-ending:before{inset:10px;border:0;border-top:1px solid #88b7c42c;border-bottom:1px solid #88b7c42c}
html[data-design="c"] .timeline-page .chronicle-ending{border:1px solid var(--line);border-radius:74px 74px 4px 4px;padding-top:72px;box-shadow:0 7px 22px #5676530b}
html[data-design="c"] .chronicle-ending:before{inset:9px;border-radius:66px 66px 2px 2px}
html[data-design="c"] .ending-emblem{width:126px;height:48px;top:13px}
@media(max-width:760px){html[data-design] .timeline-page .chronicle-ending{max-width:calc(100vw - 48px);padding:64px 24px 26px;font-size:15px;line-height:2.1}html[data-design="c"] .timeline-page .chronicle-ending{padding-top:72px}html[data-design] .timeline-page .chronicle-ending .term-link{white-space:normal}}
@media(max-width:760px){html[data-design] .keyword>.detail-icon{width:23px;height:23px}html[data-design] .section-heading>.detail-finial{width:60px}html[data-design] .section-heading:has(>.text-link)>.detail-finial{display:none}}