/* Components shared by restored features on every page. */
/* Text links and content actions share the footer's accent feedback.
   Header navigation and floating reading controls keep their existing styles. */
:is(main,dialog) :is(p,li,dd) a:not(.track,.link-row,.pill,.service-icon,.service-pill),
:is(main,dialog) :is(.source-attribution,.about-source,.document) a:not(.pill,.jump-links a){text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer}
:is(main,dialog) :is(p,li,dd) a:not(.track,.link-row,.pill,.service-icon,.service-pill):is(:hover,:focus-visible),
:is(main,dialog) :is(.source-attribution,.about-source,.document) a:not(.pill,.jump-links a):is(:hover,:focus-visible){color:var(--accent)}
main :is(.quick-links a,.link-row,.resources>a,.cover-card):is(:hover,:focus-visible){color:var(--accent)}
main .cover-card:is(:hover,:focus-visible) h3{text-decoration:underline;text-underline-offset:4px}
:is(main,dialog) :is(.pill,.action-link,.service-icon,.service-pill,.switch-control,.language-button,.icon):not(.reader-actions *):not(.archive-open):not(:disabled):is(:hover,:focus-visible){background:var(--selected);color:var(--ink)}
main .filters button:not([aria-pressed=true]):is(:hover,:focus-visible){background:var(--wash)}
:is(main,dialog) :is(.overview-more,summary):is(:hover,:focus-visible){color:var(--accent);text-decoration:underline;text-underline-offset:4px}
main .overview-more{text-decoration:underline;text-underline-offset:4px}

:root{--component-gap:16px;--component-radius:22px;--component-hit:44px}
.link-row>svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;flex:0 0 18px;margin:0}
.search-options{margin:12px 0;gap:12px}.search-options>label{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px}.search-options .pill{min-height:44px;font-size:13px;padding:10px 14px}
#search-results a{min-height:72px;padding:14px 0;gap:4px;line-height:1.5}#search-results strong{font-size:16px;font-weight:600}#search-results small{font-size:13px;line-height:1.6}#search-results .search-snippet{margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
fieldset label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:8px}
.service-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0;padding:14px 0;border:0;border-block:1px solid var(--line);background:transparent;border-radius:0;font-size:14px;line-height:1.4}
.service-row>h2{flex:0 0 auto;font-size:14px;line-height:1.4;margin:0;white-space:nowrap;letter-spacing:0}
.service-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;flex-wrap:nowrap}
.service-actions>a.service-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:var(--wash);font-size:0;line-height:1}
.service-icon>img,.service-icon>svg{display:block;width:24px;height:24px}
.service-icon>svg{stroke:currentColor;fill:none}
.dark .service-icon>img{filter:invert(1)}
.service-actions>a.service-pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border-radius:24px;background:var(--wash);font-size:13px;white-space:nowrap}
.service-row a:hover{background:var(--selected)}
.service-pill>img{display:none}
@media(max-width:359px){.service-actions>a.video-service{width:44px;padding:10px;flex:0 0 44px}.video-service>span{display:none}.service-pill>img{display:block;width:24px;height:24px}.dark .service-pill>img{filter:invert(1)}}
.editorial-disclosure{margin:24px 0;border:0;border-block:1px solid var(--line);border-radius:0;padding:0;background:transparent}
.editorial-disclosure>summary{padding:16px 0;min-height:56px;display:flex;align-items:center;gap:16px;font-size:16px;line-height:1.5;letter-spacing:0}
.editorial-disclosure[open]{padding-bottom:20px}
.editorial-disclosure>summary::after{margin-left:auto}
.editorial-disclosure>summary:hover{color:var(--accent)}
.editorial-disclosure .document{padding:0;border:0;background:none;border-radius:0;margin:20px 0;font-size:inherit}
.editorial-disclosure .document:first-of-type{margin-top:12px}
.editorial-disclosure p{margin:0 0 16px}
.editorial-disclosure h2,.editorial-disclosure h3{font-size:16px;line-height:1.5;margin:0 0 12px;letter-spacing:0}
.editorial-disclosure .music-rights{font-size:var(--meta-text-size);color:var(--muted);margin-top:16px;line-height:1.65}
.editorial-disclosure .music-rights strong{display:block;font-weight:400}
.editorial-disclosure .credit-summary:last-child{margin:0}
.nested-disclosure{margin:16px 0;border:0;border-radius:0;background:transparent;padding:0;font-size:14px;line-height:1.7}
.nested-disclosure>summary{padding:10px 0;min-height:44px;cursor:pointer;color:var(--muted)}
.nested-disclosure[open]>summary{margin-bottom:8px}
.editorial-note{margin:24px 0;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;font-size:calc(16px * var(--scale));line-height:var(--leading)}
.editorial-note>h2{margin:16px 0 12px;font-size:16px}
.editorial-note p{margin:16px 0;color:var(--muted)}
.tracks,.live-chapters,#songs-list{list-style:none;margin:0;padding:0}
.tracks li,.live-chapters li{margin:0;padding:0}
.track{grid-template-columns:28px minmax(0,1fr) 24px;padding:16px 4px;gap:12px;min-height:72px;line-height:1.5}
.track-title{min-width:0}
.track-title strong{font-size:16px;font-weight:600;line-height:1.5}
.track-title>span{font-size:14px;font-weight:400;line-height:1.5;margin-top:2px}
.track-number{font-size:14px}
.track-action{width:24px;height:24px;line-height:1;align-self:center}

.source-attribution,.about-source{font-size:var(--meta-text-size);line-height:1.6;color:var(--muted);margin-top:16px}
.source-attribution a,.about-source a,.credits-disclosure a,.usage-terms a,.editorial-note a{text-decoration:underline;text-underline-offset:3px}
footer{width:calc(100% - 64px);max-width:1056px;margin:32px auto 0;padding:28px 0 36px;border-top:1px solid var(--line);text-align:center}
footer .socials{gap:12px;margin:0 0 12px}
footer .utility-actions{margin:0 0 20px;gap:8px}
footer .utility-actions .pill{font-size:13px;min-height:44px;padding:10px 14px;line-height:1.4;background:transparent}
footer .footer-brand{display:block;font-size:14px;font-weight:600;line-height:1.6;margin:0 0 4px}
footer .footer-note{display:block;font-size:13px;line-height:1.6;margin:0;color:var(--muted)}
.player-help{padding:12px 0;border:0;border-radius:0;background:transparent;font-size:14px;line-height:1.7;font-weight:400;color:var(--muted)}
.player-actions button{font-size:14px;font-weight:400;border-radius:24px;background:var(--wash)}
@media(min-width:1100px){body{padding-bottom:0}footer{padding-bottom:36px}}
@media(max-width:699px){.service-row{gap:8px;margin:20px 0;padding:12px 0}.service-row>h2{font-size:13px}.service-actions{gap:6px}.service-actions>a.service-pill{font-size:12px;padding:10px}.editorial-disclosure{margin:20px 0}.editorial-disclosure>summary{font-size:15px}.track{grid-template-columns:24px minmax(0,1fr) 20px;gap:8px;padding:14px 0}.track-title strong{font-size:16px}.track-title>span{font-size:13px}.track-action{width:20px}.track-number{font-size:13px}footer{width:calc(100% - 40px);margin-top:24px;padding:24px 0 calc(124px + env(safe-area-inset-bottom))}footer .utility-actions .pill{font-size:12px;padding:10px 12px}.source-attribution,.about-source{font-size:var(--meta-text-size)}}
.album-heading>.service-row{grid-column:2;justify-content:flex-start;gap:20px;max-width:fit-content;margin:16px 0 0;padding:0;border:0;text-align:left}
@media(max-width:699px){.album-heading>.service-row{justify-content:center;margin:16px auto 0;gap:12px}}
.content-rights{padding:16px 0 0;margin:20px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;font-size:var(--meta-text-size);line-height:1.7;color:var(--muted);text-align:left;background:transparent}.content-rights strong{font-weight:400}.live-credit-list{margin:16px 0;font-size:16px;line-height:1.7}.live-credit-list>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;margin-bottom:12px}.live-credit-list dt{font-weight:500;color:var(--muted)}.live-credit-list dd{margin:0}.migrated-page>.editorial-disclosure{padding:0;border-block:1px solid var(--line);border-radius:0}.migrated-page>.editorial-disclosure[open]{padding-bottom:20px}.editorial-disclosure .terms-list{margin:20px 0;padding-left:24px}.terms-list li{padding-left:4px;margin:0 0 20px}.terms-list li>strong{display:block;font-size:16px;font-weight:600;margin-bottom:8px}.terms-scope{color:var(--muted);font-size:14px}.editorial-disclosure .jump-links{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.editorial-disclosure .jump-links a{display:inline-flex;min-height:44px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:10px 14px;font-size:14px;background:transparent;text-decoration:none}
@media(max-width:699px){.live-credit-list{font-size:14px}.live-credit-list>div{grid-template-columns:80px minmax(0,1fr);gap:12px}.terms-list li{margin-bottom:16px}.terms-list li>strong{font-size:15px}.terms-scope{font-size:13px}}

/* One cover size and button-based language controls across all readers. */
:root{--cover-size:320px;--cover-gap:72px}
.reading-layout{grid-template-columns:var(--cover-size) minmax(0,1fr);gap:var(--cover-gap)}
.art .song-cover,.migrated-page>.album-heading>img,.migrated-page>.reading-heading>img{display:block;width:var(--cover-size);height:var(--cover-size);max-height:none;object-fit:contain;border-radius:22px;margin:0 auto 20px}
@media(min-width:700px){.migrated-page>.album-heading,.migrated-page>.reading-heading:not(.player-heading){grid-template-columns:var(--cover-size) minmax(0,1fr);column-gap:var(--cover-gap)}.migrated-page>.album-heading>img,.migrated-page>.reading-heading>img{margin:0;grid-row:1/6}}
#settings fieldset:has(.language-button){display:grid;grid-template-columns:repeat(var(--language-columns,4),minmax(0,1fr));gap:8px;align-items:center}
#settings fieldset:has(.language-button[hidden]){--language-columns:3}
#settings fieldset:has(.language-button[hidden]~.language-button[hidden]){--language-columns:2}
#settings fieldset:has(.language-button)>legend,#settings #language-status{grid-column:1/-1}
.language-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:22px;padding:10px 16px;font-size:14px;background:transparent}
.language-button[aria-pressed=true]{background:var(--selected);border-color:var(--accent);color:var(--ink);font-weight:600}
#language-status{width:100%;margin:0;font-size:13px;color:var(--muted)}
.lyric-ja{font-size:calc(18px * var(--scale))}.lyric-th,.live-th{font-size:calc(15px * var(--scale))}.romaji-line{font-size:calc(13px * var(--scale))}
.archive-open{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%}
@media(max-width:699px){:root{--cover-size:200px}.reading-layout{display:block}.archive-open{position:fixed;right:20px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:11;background:var(--glass);box-shadow:0 8px 24px #14324618;backdrop-filter:blur(24px)}}
/* Typography measured against the deployed site, shared across every page type. */
body{font-size:14px;line-height:1.8;--type-body:14px}
.top .brand{font-size:13px;line-height:1.45}.top .dock a,.top .dock button{font-size:13px}
h1,.library-head h1,.profile h1,.links-page h1{font-size:28px;line-height:1.4;letter-spacing:0}
.art h1,.migrated-page h1,.migrated-page>.album-heading>h1,.migrated-page>.reading-heading>h1,.player-heading h1{font-size:30px;line-height:1.4;letter-spacing:0}
h2,.site-page h2,.migrated-page h2,.links-page h2,.novel-category h2,.document h2{font-size:18px;line-height:1.55;letter-spacing:0}
h3,.site-page .fan-project h3,.cover-card h3{font-size:16px;line-height:1.6;letter-spacing:0}
.profile .description,.profile .tagline,.library-head .muted,.art .muted{font-size:14px;line-height:1.8}
.site-page .fan-project p{font-size:13px;line-height:1.8}.site-page .fan-project>a{font-size:13px}
.about-page p,.about-page li,.quick-links a,.quick-link-title{font-size:14px}.quick-link-description{font-size:13px}
.name-secondary,.album-heading>p,.reading-heading>p,.feature p:not(.eyebrow){font-size:13px;line-height:1.75}
.feature h2{font-size:30px;line-height:1.4}.feature .primary,.filters button,.resources strong{font-size:13px}
.document{font-size:calc(14px * var(--scale))}.editorial-disclosure,.song-viewpoint,.live-credits,.song-credits,.usage-terms,.editorial-note{font-size:calc(14px * var(--scale))}
.editorial-disclosure>summary,.editorial-disclosure h2,.editorial-disclosure h3,.terms-list li>strong{font-size:14px}.live-credit-list{font-size:14px}
.track-title strong,.link-row strong,#search-results strong{font-size:14px}.track-title>span,.track-number,.link-row small,.contact-note{font-size:13px}
footer .footer-brand{font-size:13px}footer .footer-note{font-size:12px}
.service-row>h2,.song-listening h2,.live-support h2{font-size:13px}
@media(max-width:699px){h1,.library-head h1,.profile h1,.links-page h1{font-size:20px;line-height:1.3}.art h1,.migrated-page h1,.migrated-page>.album-heading>h1,.migrated-page>.reading-heading>h1,.player-heading h1,.feature h2{font-size:22px;line-height:1.4}h2,.site-page h2,.migrated-page h2,.links-page h2,.novel-category h2,.document h2{font-size:16px;line-height:1.4}h3,.site-page .fan-project h3,.cover-card h3{font-size:14px;line-height:1.4}.profile .description,.profile .tagline{line-height:1.65}.site-page .fan-project p{line-height:1.65}.editorial-disclosure>summary,.editorial-disclosure h2,.editorial-disclosure h3,.terms-list li>strong{font-size:14px}.service-row>h2{font-size:13px}}
/* Mobile navigation has five direct destinations; search belongs to the header. */
.top .mobile-find{display:none}
@media(max-width:699px){.top .dock .nav-extra{display:grid}.top .dock .find{display:none}.top .mobile-find{display:grid;margin-left:auto;width:40px;height:40px;flex:0 0 40px;background:transparent}.top .theme{margin-left:0;width:40px;height:40px;flex:0 0 40px}.top{gap:4px}.top .brand{margin-right:auto;font-size:13px}.dock span{font-size:10px;white-space:nowrap}.dock svg{width:22px;height:22px}}
/* Quiet left-aligned footer: identity, contact icons and text actions. */
footer{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:0}
footer .footer-brand{order:0;margin-bottom:6px}
footer .footer-note{order:1;max-width:620px;text-wrap:pretty}
footer .socials{order:2;justify-content:flex-start;gap:8px;margin:12px 0 0}
footer .socials a{width:40px;height:40px;border-radius:12px;color:var(--muted);background:transparent}
footer .socials a:hover{background:var(--wash);color:var(--ink)}
footer .socials img,footer .socials svg{width:21px;height:21px}
footer .utility-actions{order:3;justify-content:flex-start;gap:20px;margin:4px 0 0}
footer .utility-actions .pill{min-height:32px;display:inline-flex;align-items:center;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:12px;font-weight:400;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}
footer .utility-actions .pill:hover{color:var(--accent)}
footer #utility-status{order:4;margin:8px 0 0;font-size:12px}
@media(max-width:699px){footer .socials{gap:6px}footer .utility-actions{gap:18px}footer .utility-actions .pill{padding:0;font-size:12px}footer .footer-note{max-width:100%;line-height:1.7}}
/* Consistent sheet header and navigation rows. */
dialog .sheet-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}dialog .sheet-head h2{font-size:18px;line-height:1.4;margin:0;flex:1}dialog .sheet-head .icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:0;margin:0;border-radius:50%;line-height:1;background:var(--wash)}dialog .sheet-head .icon svg{display:block;width:20px;height:20px;stroke-width:2;stroke-linecap:round;fill:none}
#song-dialog{width:min(440px,calc(100% - 32px));padding:24px}
#song-dialog nav,#song-dialog .reading-navigation{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:0;margin:0}
#song-dialog nav .chapter-switch-row{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:4px 16px;width:100%;min-height:64px;padding:14px 0;border:0;border-top:1px solid var(--line);background:transparent;border-radius:0;text-align:left;font-size:14px;line-height:1.5}
.chapter-switch-row .switch-label{grid-column:1;font-size:12px;color:var(--muted)}#song-dialog .chapter-switch-row strong{grid-column:1;font-size:16px;font-weight:600;overflow-wrap:anywhere}#song-dialog .chapter-switch-row svg{grid-column:2;grid-row:1/3;align-self:center;width:20px;height:20px;stroke-linecap:round}#song-dialog nav a:hover{color:var(--accent)}
footer .socials{order:0;margin:0 0 12px;gap:8px}footer .footer-brand{order:1}footer .footer-note{order:2}
@media(max-width:699px){#song-dialog{width:100%;max-width:100%;padding:24px 24px calc(24px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}dialog .sheet-head{margin-bottom:16px}dialog .sheet-head h2{font-size:17px}}
.track:not(:has(.track-number)){grid-template-columns:minmax(0,1fr) 24px}
@media(max-width:699px){.track:not(:has(.track-number)){grid-template-columns:minmax(0,1fr) 20px}}

/* Tonal controls and quiet list rows, with a single shared mobile gutter. */
.pill,.terms-action a,.watch-live-links a,.live-player-link,.site-page .fan-project>a{background:var(--wash);border-color:transparent;box-shadow:none;border-radius:14px}
.link-row{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;min-height:72px;padding:14px 0}
.links-page .link-row{padding:14px 0}
.link-row>span{min-width:0}.link-row small{overflow-wrap:anywhere}
.links-page .profile .avatar{display:block;margin:0 auto 16px;width:72px;height:72px;object-fit:cover;border:0;box-shadow:none}
.site-page .quick-links a{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 0}
.about-page .quick-links a{background:var(--wash);border:0;border-radius:14px;padding:10px 16px}
footer .socials a{display:flex;justify-content:flex-start;align-items:center;width:36px;height:44px;padding:0;border-radius:0}
footer .socials{gap:8px}
@media(max-width:699px){main{padding-left:16px;padding-right:16px}footer{width:calc(100% - 32px)}.links-page>.profile,.links-page>section{max-width:none;width:100%}.lyrics-section{padding-inline:0}.site-page>section{padding-inline:0}.feature{width:100%}.site-page .quick-links{gap:0}.reader-actions .pill,.reader-back{background:var(--wash)}}
.reader-bar .reader-back,.reader-actions .pill,.archive-open{border-radius:50%}

/* Navigation, editorial feature and action affordances share one hierarchy. */
.action-link{display:inline-flex;align-items:center;justify-content:space-between;gap:16px}.action-link svg{width:18px;height:18px;flex:0 0 18px;stroke-linecap:round;stroke-linejoin:round}
.quick-links a{position:relative;padding-right:30px!important}.quick-links a::after{content:'›';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:23px;color:var(--muted)}
.about-page .quick-links a::after{right:10px}.about-page .quick-links a{padding-right:32px!important}
button[aria-expanded=true]:not(#settings-open,#song-open){background:var(--selected)!important;box-shadow:inset 0 0 0 1px var(--accent)}
.feature-thai{display:block}.feature .primary svg{stroke-linecap:round;stroke-linejoin:round}
#search-results .search-snippet{-webkit-line-clamp:2;font-size:12px;line-height:1.65}
#search-results mark{background:var(--selected);color:var(--ink);border-radius:3px;padding:0 1px;font-weight:600}
@media(min-width:1100px){.links-page{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:64px;align-items:start;padding-top:36px}.links-page>.profile{grid-column:1;grid-row:1 / span 6;position:sticky;top:110px;text-align:left;margin:0;max-width:none;width:100%}.links-page .profile .avatar{margin:0 0 20px}.links-page>.profile h1{font-size:22px}.links-page>section{grid-column:2;max-width:none;width:100%;margin:0 0 28px}.links-page>section h2{margin-top:0}}
@media(max-width:699px){.top .dock{height:68px;padding:5px 4px;gap:0;max-width:520px}.top .dock a{height:58px;min-height:58px;gap:2px;padding:4px 0;line-height:1.15}.top .dock svg{width:23px;height:23px}.top .dock span{font-size:11px;letter-spacing:-.15px;margin:0;font-weight:500}.top .dock [aria-current]{color:var(--ink);background:var(--selected)}
body:has(#settings-open){--reader-bottom:calc(162px + env(safe-area-inset-bottom))}
body:has(#settings-open) footer{padding-bottom:calc(190px + env(safe-area-inset-bottom))}
body:has(#settings-open) :is(.reading-content,.document,.track-list){scroll-margin-bottom:var(--reader-bottom)}
.reader-actions{left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom))}
.migrated-page .reader-actions{position:fixed!important}.migrated-page .reader-actions #settings-open{position:relative!important}
.reader-actions .pill,.archive-open{background:var(--wash);border:1px solid var(--line);box-shadow:0 4px 16px #173f5318;backdrop-filter:none}.archive-open{bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* Shared motion stays short and leaves reading columns and fixed controls in place. */
@media(prefers-reduced-motion:no-preference){
 :root{--motion-fast:160ms;--motion-enter:260ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
 .feature,.reading-layout,.collection{animation:none}
 main{animation:page-appear var(--motion-enter) var(--motion-ease)}
 main.home-page{animation:none}
 dialog[open]{animation:sheet-appear var(--motion-enter) var(--motion-ease)}
 dialog[open]::backdrop{animation:backdrop-appear var(--motion-fast) ease-out}
 .cover-card:not([hidden]){animation:page-appear var(--motion-enter) var(--motion-ease)}
 details[open]>.document{animation:page-appear var(--motion-enter) var(--motion-ease)}
 button,a,summary,.choice-options span,.language-button{transition:background-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out,transform var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) ease-out}
 .cover-card img{transition:transform var(--motion-enter) var(--motion-ease),box-shadow var(--motion-enter) var(--motion-ease)}
 .cover-card:active{transform:none}
 .cover-card:active img{transform:scale(.985)}
 @media(hover:hover) and (pointer:fine){
  .cover-card:hover img{transform:translateY(-3px);box-shadow:0 12px 28px #173f5324}
  .track-action{transition:transform var(--motion-fast) var(--motion-ease)}

 }
 @media(max-width:1099px){
  .top .dock a{transition:background-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out}
  .top .dock a svg{transition:transform var(--motion-fast) var(--motion-ease)}
  .top .dock a:active{transform:none}
  .top .dock a:active svg{transform:scale(.88)}
 }
 @keyframes page-appear{from{opacity:.65}to{opacity:1}}
 @keyframes sheet-appear{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:none}}
 @keyframes backdrop-appear{from{opacity:0}to{opacity:1}}
}
/* Home content links stay still; motion belongs to the floating navigation. */
main.home-page a,main.home-page button,main.home-page a::after{animation:none;transition:none}
main.home-page a:active,main.home-page button:active{transform:none}
@media(max-width:699px){.feature{grid-template-columns:104px minmax(0,1fr);gap:4px 18px;padding:20px;align-items:center}.feature>div{display:contents}.feature>img{grid-column:1;grid-row:1/4;width:104px;align-self:center}.feature .eyebrow,.feature h2,.feature p:not(.eyebrow){grid-column:2;margin:0}.feature h2{font-size:24px}.feature p:not(.eyebrow){font-size:13px;line-height:1.65}.feature .primary{grid-column:1/-1;margin-top:16px;width:100%;justify-content:space-between;padding:10px 14px;min-height:44px}.feature .eyebrow{font-size:11px}.reader-actions .pill{width:44px;height:44px}}
@media(max-width:359px){.top .dock span{font-size:10px}.feature{padding:16px;gap:4px 14px;grid-template-columns:88px minmax(0,1fr)}.feature>img{width:88px}}
@media(min-width:1100px){.links-page{grid-template-columns:280px minmax(0,1fr);column-gap:48px}.links-page>.profile h1{font-size:20px;white-space:nowrap}}
.choice-options span{background:var(--wash);border-color:transparent}

/* Preview review: figures share reader artwork geometry; controls follow layout. */
.migrated-page>.reading-heading>.song-artwork{width:var(--cover-size);height:var(--cover-size);margin:0 auto 20px}
.migrated-page>.reading-heading .song-artwork>.album-cover{width:100%;height:100%;max-height:none;object-fit:contain;margin:0;border-radius:22px}
@media(min-width:700px){.migrated-page>.reading-heading>.song-artwork{margin:0;align-self:start}.about-page>section>p,.about-page>section>ul,.about-page>section>ol{max-width:none}}
@media(max-width:699px){.migrated-page>.reading-heading>.song-artwork{margin:0 auto 20px}}

/* Keep the shared artwork frame without squeezing tablet reading columns. */
@media(min-width:700px) and (max-width:899px){:root{--cover-size:256px;--cover-gap:32px}}

/* Album/list spacing follows the supplied Music app reference. */
:root{--floating-border:1px solid var(--line);--floating-shadow:inset 0 1px 0 #ffffff99,0 8px 28px #173f5324}
.dock{border:var(--floating-border);box-shadow:var(--floating-shadow)}
.service-row,.song-listening,.live-support{border:0;padding:0;margin:24px 0}
.art>.song-listening{justify-content:flex-start;gap:20px;max-width:fit-content;margin:20px 0 0}
@media(max-width:699px){.art>.song-listening{justify-content:center;gap:12px;margin:20px auto 0}}
.editorial-disclosure,.migrated-page>.editorial-disclosure{border:0;margin:32px 0;padding:0}
.editorial-disclosure>summary{padding:8px 0;min-height:44px}
.editorial-disclosure[open],.migrated-page>.editorial-disclosure[open]{padding-bottom:0}
.editorial-note,.content-rights,.migrated-page .live-credits{border:0;padding-top:0;margin-top:32px}
.song-rights,.content-rights{background:transparent;border:0;padding:0;margin:32px 0 0;font-size:var(--meta-text-size);line-height:1.8;color:var(--muted);font-weight:400;text-align:left}
.song-rights strong,.content-rights strong{display:block;font-weight:400}
.song-rights p,.content-rights p{margin:0}
.song-rights br{display:none}
.song-rights .music-rights,.content-rights .music-rights{font-size:inherit;line-height:inherit;margin:0}
.terms-action{margin:28px 0 0}
.migrated-page>.album-overview{margin:24px 0 32px;max-width:none}
.overview-label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}
.overview-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.overview-more{display:block;color:var(--accent);font-size:13px;font-weight:500;margin:0 0 0 auto;min-height:44px;padding:8px 0;background:transparent}
.album-track-viewpoint{margin:32px 0}
.album-track-viewpoint h3{margin:0 0 12px;font-size:14px;font-weight:600}
.album-track-viewpoint:target h3{color:var(--accent)}
.track{position:relative;border:0;padding:16px 0}
.track::after{content:'';position:absolute;inset:auto 0 0 40px;height:1px;background:var(--line)}
.tracks,.live-chapters,#songs-list{border-top:1px solid var(--line)}
.track-title>span{margin-top:4px}
.link-row{position:relative;border:0}
.link-row::after{content:'';position:absolute;inset:auto 0 0 42px;height:1px;background:var(--line)}
.site-page .quick-links a{border:0}
.site-page .quick-links a+a{border-top:1px solid var(--line)}
.site-page .fan-project,.about-page>section{border:0;padding:0;margin:32px 0}
.site-page .recommended-sites>h2{margin-bottom:24px}
footer{border:0;width:100%;max-width:none;margin-top:48px;padding:28px max(32px,calc((100% - 1056px)/2)) 36px;background:var(--wash)}
@media(min-width:1100px){.top .dock{border:0;box-shadow:none}}
@media(max-width:1099px){footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))}body:has(#settings-open) footer{padding-bottom:calc(176px + env(safe-area-inset-bottom))}}
@media(max-width:699px){
 :root{--cover-size:min(288px,66vw)}
 .art .song-cover,.migrated-page>.album-heading>img,.migrated-page>.reading-heading>img,.migrated-page>.reading-heading>.song-artwork{margin-bottom:24px}
 .art h1,.migrated-page>.album-heading>h1,.migrated-page>.reading-heading>h1{margin:8px 0}
 .art .muted,.album-heading>.name-secondary,.reading-heading>.name-secondary{max-width:34ch;margin-inline:auto}
 .reading-content{margin-top:32px}
 .service-row,.song-listening,.live-support{margin:24px 0;padding:0}
 .migrated-page>.album-heading,.migrated-page>.reading-heading{margin-bottom:32px}
 .album-heading>.service-row{margin-top:20px}
 .editorial-disclosure,.migrated-page>.editorial-disclosure{margin:28px 0}
 .migrated-page>.album-overview{margin:24px 0 28px}
 .track{padding:14px 0}
 .track::after{left:32px}
 footer{width:100%;margin-top:40px;padding-inline:16px}
 .reader-actions .pill,.archive-open{width:52px;height:52px;min-height:52px;background:transparent}
 .reader-actions svg,.archive-open svg{width:23px;height:23px;stroke-width:1.8}
 .reader-actions,.archive-open{bottom:calc(96px + env(safe-area-inset-bottom))}
 .archive-open{right:16px}
}

/* A full-height editorial sheet keeps the close control in reach while reading. */
body:has(dialog[open]){overflow:hidden}
#viewpoint-dialog{width:min(800px,calc(100% - 48px));height:calc(100dvh - 48px);max-height:none;padding:0;overflow:hidden;border:var(--floating-border);border-radius:24px}
#viewpoint-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.editorial-sheet-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:16px;padding:20px 24px;background:var(--bg)}
.editorial-sheet-head form{margin:0}
.editorial-sheet-head h2{grid-column:2;font-size:18px;margin:0;text-align:center;line-height:1.4}
.editorial-sheet-head .icon{width:44px;height:44px;background:var(--glass);border:var(--floating-border);box-shadow:var(--floating-shadow)}
#viewpoint-dialog .album-overview-body{overflow-y:auto;overscroll-behavior:contain;border:0;background:transparent;border-radius:0;padding:8px 28px calc(32px + env(safe-area-inset-bottom));margin:0;font-size:calc(14px * var(--scale));line-height:var(--leading);scroll-padding-top:12px}
#viewpoint-dialog .reading-paragraph{margin-bottom:18px}
.terms-page{max-width:1120px}
.terms-page h1{margin-bottom:24px}
.terms-page .terms-section{margin:40px 0;max-width:none;background:transparent;border:0;border-radius:0;padding:0}
.terms-page .terms-section h2{margin-bottom:20px}
.terms-page .usage-terms{font-size:14px;line-height:1.85}
.terms-page .terms-list{padding-left:24px}
@media(max-width:699px){#viewpoint-dialog{width:100%;height:calc(100dvh - 20px);margin:20px 0 0;border-radius:26px 26px 0 0}.editorial-sheet-head{padding:16px 16px 12px}#viewpoint-dialog .album-overview-body{padding-inline:20px}}

/* Live viewing uses the same compact action row as album listening. */
/* The cover spans a trailing empty row, keeping text/action rows compact. */
@media(min-width:700px){.migrated-page>.live-heading>.song-artwork{grid-row:1/6}.migrated-page>.live-heading>.service-row{margin-top:16px}}
.reading-heading>.service-row,.art>.service-row{grid-column:2;justify-content:flex-start;gap:20px;max-width:fit-content;margin:20px 0 0;padding:0;border:0;text-align:left}
.player-heading>.service-row{margin-inline:auto}
@media(max-width:699px){.reading-heading>.service-row,.art>.service-row{justify-content:center;gap:12px;margin:20px auto 0}}

.filters+.collection{margin-top:12px}

/* Keep Japanese and romaji together; use the existing reading-choice button shape. */
.lyrics-section .lyric-line>.reading-paragraph{margin:0}
.lyrics-section .romaji-line{margin:2px 0 4px}
.language-button,#thai-only{display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;height:44px;min-height:44px;white-space:nowrap;border:1px solid transparent;border-radius:12px;padding:8px 2px;font-size:12px;font-weight:400;background:var(--wash)}
.language-button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:400}

/* Previous, contents and next remain in one row, including at the list ends. */
#song-dialog .reading-navigation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px;margin:20px 0 0;padding:0}
#song-dialog .switch-control{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:68px;min-height:44px;max-width:none;padding:8px 2px;border:0;border-radius:12px;background:var(--wash);font-size:12px;line-height:1.4}
#song-dialog .switch-control .switch-label{white-space:nowrap;font-size:12px;line-height:1.4}
#song-dialog .switch-control svg{width:24px;height:24px}
#song-dialog .switch-control:disabled{opacity:.35;cursor:default}

/* Notes and credits share the footer's body size; headings remain distinct. */
:root{--meta-text-size:12px}
footer .footer-note{font-size:var(--meta-text-size)}
main.about-page .about-source{font-size:var(--meta-text-size)}
.work-credits{margin:32px 0 0;padding:0;border:0;background:transparent;color:var(--muted);font-size:var(--meta-text-size);line-height:1.8;font-weight:400}
.work-credits .credits-heading{margin:0 0 16px;font-size:14px;line-height:1.5;font-weight:600;letter-spacing:0;color:var(--ink)}
.work-credits :is(.document,.live-credits,.song-source-credits,.song-translators,.romaji-credits,.credit-team){margin:16px 0 0;padding:0;border:0;border-radius:0;background:transparent;font-size:inherit;line-height:inherit;color:inherit}
.work-credits :is(h3,h4){margin:0 0 6px;font-size:inherit;line-height:inherit;font-weight:600;letter-spacing:0}
.work-credits p{margin:0 0 4px;font-size:inherit;line-height:inherit}
.work-credits :is(ul,ol){margin:6px 0 12px;padding-left:20px;font-size:inherit;line-height:inherit}
.work-credits li{margin:0;font-size:inherit;line-height:inherit}
.work-credits .live-credit-list{margin:0;font-size:inherit}
.work-credits .live-credit-list :is(dt,dd){font-size:inherit;line-height:inherit}
.work-credits .jump-links{margin:0;font-size:inherit}
.work-credits :is(.live-credit-reference,.jump-links a){display:inline;padding:0;border:0;border-radius:0;background:transparent;font-size:inherit;line-height:inherit}
.work-credits section:empty{display:none}
.work-credits+.song-rights,.work-credits+.content-rights{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

/* Instrumental tracks have no lyric column or reading settings. */
.song-instrumental .reading-layout{display:block}
.song-instrumental .art{position:static;text-align:center;max-width:680px;margin-inline:auto}
.song-instrumental .art>.service-row{justify-content:center;margin-inline:auto}
.song-instrumental .reader-actions{justify-content:flex-end}
@media(max-width:1099px){.song-instrumental footer{padding-bottom:calc(176px + env(safe-area-inset-bottom))}}

.reading-layout:has(.lyrics-section,.live-reading)+.work-credits{padding-top:24px;border-top:1px solid var(--line)}

/* Review refinements are scoped to these page types, preserving the archive. */
.site-page.home-page .home-quick-links a{border:0}
.home-page .home-quick-links a::after{right:8px}
@media(min-width:700px){.home-page .home-quick-links{column-gap:40px}}
.migrated-page>.player-heading{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px}
.migrated-page>.player-heading>h1,.migrated-page>.player-heading>p{margin:0;align-self:flex-start}
.migrated-page>.player-heading>.service-row{justify-content:flex-start;margin:8px 0 0}
main.migrated-page.live-collection>.reading-heading{display:block;text-align:left}
main.migrated-page.live-collection>.reading-heading>h1{margin:0}
.live-collection .work-category>h1{margin:24px 0 32px}
.live-collection .track::after{left:0}
@media(max-width:699px){
 .song.migrated-reader .art>.service-row{margin-top:16px}
 .song.migrated-reader .reading-content{margin-top:24px}
}

/* Use the same visible corner radius for every archive artwork. */
.cover-card img{border-radius:22px}
/* Portrait live artwork keeps its own outline instead of rounding empty space. */
main .art .song-cover.live-cover,
main.migrated-page>.reading-heading>img.live-cover,
main.migrated-page>.reading-heading .song-artwork>img.live-cover{height:auto;max-height:none;aspect-ratio:auto;object-fit:cover;border-radius:22px}
main.migrated-page>.reading-heading>.song-artwork:has(>.live-cover){height:auto}

/* Informational pages share one mobile alignment and spacing rhythm. */
@media(max-width:699px){
 main:is(.home-page,.links-page,.about-page,.archive-page,.terms-page){--info-leading:1.65;--info-gap:24px;display:flow-root;padding:var(--info-gap) 16px 0;line-height:var(--info-leading)}
 main:is(.home-page,.links-page,.about-page)>.profile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;margin:0 0 var(--info-gap)}
 main:is(.home-page,.links-page,.about-page)>.profile>h1{margin:0;line-height:1.3}
 main:is(.home-page,.links-page,.about-page)>.profile>p{margin:0;font-size:14px;line-height:var(--info-leading);text-align:left}
 main:is(.home-page,.links-page)>.profile>picture{display:block;width:72px;height:72px;margin:0 0 4px}
 main:is(.home-page,.links-page) .profile .avatar{display:block;margin:0;width:72px;height:72px}
 main.links-page>.profile>.avatar{margin-bottom:4px}
 main:is(.home-page,.links-page,.about-page)>section{margin:var(--info-gap) 0;padding:0}
 main:is(.home-page,.links-page,.about-page)>:last-child{margin-bottom:0}
 main.home-page .home-quick-links{align-self:stretch;margin:8px 0 0;gap:0}
 main.home-page .home-quick-links a{padding-block:12px;line-height:var(--info-leading)}
 main.home-page .quick-link-description{margin-top:4px;line-height:var(--info-leading)}
 main.home-page .recommended-sites>h2{margin-bottom:16px}
 main.home-page .fan-project{margin:var(--info-gap) 0;padding:0}
 main.home-page .fan-project:last-child{margin-bottom:0}
 main.home-page .fan-project h3{margin:0 0 8px}
 main.home-page .fan-project p{font-size:14px;line-height:var(--info-leading);margin:0 0 12px}
 main.links-page>section h2,main.about-page>section h2{margin:0 0 12px}
 main.links-page .link-row{line-height:var(--info-leading)}
 main.links-page .contact-note p,main.about-page>section>p{font-size:14px;line-height:var(--info-leading);margin:0 0 12px}
 main.links-page .contact-note p:last-child,main.about-page>section>p:last-child{margin-bottom:0}
 main.archive-page .library-head>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
 main.archive-page .library-head h1{margin:0}
 main.archive-page .library-head .muted{font-size:14px;line-height:var(--info-leading);margin:0}
 main.archive-page .filters{padding:16px 0;line-height:var(--info-leading)}
 main.archive-page .collection{margin:8px 0 0}
 main.archive-page .resources{margin:var(--info-gap) 0 0}
 main.archive-page :is(.collection,.resources)>h2{margin:0 0 12px}
 main.archive-page .cover-card h3{margin:12px 0 4px}
 main.archive-page .cover-card p{font-size:13px;line-height:var(--info-leading)}
 main.archive-page .resources small{line-height:var(--info-leading)}
 main.terms-page h1{margin:0 0 16px}
 main.terms-page .terms-section{margin:0;font-size:14px;line-height:var(--info-leading)}
 main.terms-page .terms-section>p{margin:0 0 12px}
 main.terms-page .terms-section>p:last-child{margin-bottom:0}
 main:is(.home-page,.links-page,.about-page,.archive-page,.terms-page)+footer{margin-top:24px;padding-top:24px;line-height:1.65}
 main:is(.home-page,.links-page,.about-page,.archive-page,.terms-page)+footer .footer-note{line-height:1.65}
}

/* Glass stays inside each capsule: no full-width fog below the navigation. */
:root{--shell-fallback:#f0f7fb;--shell-glass:rgba(244,251,255,.76);--shell-edge:rgba(255,255,255,.76);--shell-reflection:rgba(255,255,255,.5);--shell-choice:rgba(170,216,229,.65);--dock-height:68px;--dock-item-height:56px}
html.dark,body.dark{--shell-fallback:#172d3e;--shell-glass:rgba(23,45,62,.8);--shell-edge:rgba(202,228,241,.25);--shell-reflection:rgba(230,246,255,.13);--shell-choice:rgba(67,118,137,.66)}
.top{border-color:var(--shell-edge);box-shadow:inset 0 1px 0 var(--shell-reflection),0 8px 24px #071b2b14}
.top::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 60%),var(--shell-fallback);backdrop-filter:none;-webkit-backdrop-filter:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .top::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 60%),var(--shell-glass);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
}
@media(max-width:699px){
 body[data-dock-state=compact]{--dock-height:56px;--dock-item-height:44px}
 .top .dock{height:var(--dock-height);padding:5px 4px;gap:0;border-radius:40px;border:1px solid var(--shell-edge);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate;box-shadow:inset 0 1px 0 var(--shell-reflection),0 6px 20px #071b2b26}
 .top .dock::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(135deg,var(--shell-reflection),transparent 60%),var(--shell-fallback)}
 .top .dock a,.top .dock a.nav-extra{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:var(--dock-item-height);min-height:44px;gap:2px;padding:4px 0;border-radius:32px}
 .top .dock svg{width:23px;height:23px;flex-shrink:0}
 .top .dock span{flex:0 0 auto;max-height:14px;line-height:14px;opacity:1;overflow:hidden;white-space:nowrap}
 body[data-dock-state=compact] .top .dock span{max-height:0;opacity:0}
 body[data-dock-state=compact] .top .dock a{gap:0}
 .top .dock[data-motion-ready] a[aria-current]{background:transparent;animation:none}
 .top .dock[data-motion-ready]::after{content:'';position:absolute;left:0;top:5px;z-index:0;height:var(--dock-item-height);width:var(--dock-selection-width,0px);transform:translateX(var(--dock-selection-x,0px));border-radius:32px;background:var(--shell-choice);box-shadow:inset 0 1px 0 var(--shell-reflection),inset 0 -1px 0 #ffffff14;pointer-events:none}
 .top .dock[data-has-selection=false]::after{opacity:0}
 .top .dock a:active{transform:none}
 @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top .dock::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 60%),var(--shell-glass);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
 }
}
@media(max-width:699px){.reader-actions,.archive-open{bottom:calc(28px + var(--dock-height) + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:no-preference){
 .top>.icon:active{transform:scale(.92)}
 .top::before{transition:background-color 160ms ease-out}
 .top>.icon{transition:transform 160ms var(--motion-ease),background-color 160ms ease-out}
 @media(max-width:699px){
  .top .dock,.top .dock a,.top .dock span,.top .dock::after{transition:height 280ms var(--motion-ease),max-height 280ms var(--motion-ease),gap 280ms var(--motion-ease),opacity 180ms ease-out,transform 280ms var(--motion-ease),width 280ms var(--motion-ease)}
 }
 @media(max-width:699px){.reader-actions,.archive-open{transition:bottom 280ms var(--motion-ease)}}
}
@media(prefers-reduced-motion:reduce){.top>.icon:active,.top .dock a:active svg{transform:none}}

/* Metadata follows the lyric column without inheriting reading-size settings. */
.reading-content .document.song-notes{margin:32px 0 0;padding:24px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;font-size:var(--meta-text-size);line-height:1.8;color:var(--muted)}
.reading-content .document.song-notes>h2{margin:0 0 16px;font-size:14px;font-weight:600;line-height:1.5;letter-spacing:0;color:var(--ink)}
.reading-content .document.song-notes p{margin:0 0 4px;font-size:inherit;line-height:inherit}
footer .utility-actions{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:0}
footer .footer-contact-actions{display:inline-flex;flex:0 0 auto;align-items:center;gap:20px}
@media(max-width:699px){footer .footer-contact-actions{gap:18px}}

/* Footer destinations use the established informational-page shell. */
main.info-page{font-size:14px;line-height:1.85}
main.info-page .info-intro{margin:0 0 24px}
main.info-page .info-updated{margin:0 0 24px;font-size:12px;color:var(--muted)}
main.info-page .info-section{margin:24px 0 0;padding:24px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
main.info-page .info-section h2{margin:0 0 12px;font-size:18px;font-weight:600;line-height:1.5}
main.info-page .info-section p{margin:0 0 12px;overflow-wrap:anywhere}
main.info-page .info-section p:last-child{margin-bottom:0}
main.contact-page .info-section .contact-email{margin-bottom:0}
main.info-page .info-section a:not(.pill){text-decoration:underline;text-underline-offset:4px}
main.info-page .info-section a:is(:hover,:focus-visible){color:var(--accent)}
.contact-actions,.contact-channels{display:flex;flex-wrap:wrap;gap:8px 16px}
.contact-actions .pill{background:var(--wash);border:0}
.contact-channels a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:699px){main.info-page{line-height:1.65}footer .utility-actions{column-gap:18px}}

/* One shared control surface: blur decorates the background, never the text. */
:is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only,#settings .choice-options span){position:relative;isolation:isolate;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--shell-edge),inset 0 1px 0 var(--shell-reflection),0 2px 8px #071b2b14}
:is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only,#settings .choice-options span)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,var(--shell-reflection),transparent 65%),var(--shell-fallback)}
#settings :is(.language-button,#thai-only),#settings .choice-options input:checked+span{background:transparent;color:var(--ink);border-color:transparent}
#settings :is(.language-button,#thai-only)[aria-pressed=true],#settings .choice-options input:checked+span{box-shadow:inset 0 0 0 1px var(--choice-edge),inset 0 1px 0 var(--shell-reflection),0 2px 8px #071b2b14}
#settings :is(.language-button,#thai-only):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
:root{--choice-edge:#2c6d86}
html.dark,body.dark{--choice-edge:#bddce8}
:is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only):not(:disabled):focus-visible::before,#settings .choice-options input:focus-visible+span::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 65%),var(--shell-choice)}
@media(hover:hover) and (pointer:fine){
 :is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only):not(:disabled):hover::before,#settings .choice-options label:hover span::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 65%),var(--shell-choice)}
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only)::before,#settings .choice-options span::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 65%),var(--shell-glass);backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15)}
 /* Focus and hover keep a translucent surface. */
 :is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only):not(:disabled):focus-visible::before,#settings .choice-options input:focus-visible+span::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 65%),var(--shell-choice)}
 @media(hover:hover) and (pointer:fine){
  :is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only):not(:disabled):hover::before,#settings .choice-options label:hover span::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 65%),var(--shell-choice)}
 }
}
/* Floating readers use the dock's exact material without changing their geometry. */
#settings-open,#song-open{position:relative;isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--shell-edge);box-shadow:inset 0 1px 0 var(--shell-reflection),0 6px 20px #071b2b26}
#settings-open[aria-expanded=true],#song-open[aria-expanded=true]{background:transparent}
#settings-open::before,#song-open::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(135deg,var(--shell-reflection),transparent 60%),var(--shell-fallback)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #settings-open::before,#song-open::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 60%),var(--shell-glass);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
}
#settings-open:focus-visible,#song-open:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(hover:hover) and (pointer:fine){#settings-open:hover,#song-open:hover{box-shadow:inset 0 0 0 1px var(--choice-edge),inset 0 1px 0 var(--shell-reflection),0 6px 20px #071b2b26}}
@media(prefers-reduced-motion:no-preference){
 :is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only,#settings .choice-options span,#settings-open,#song-open){transition:color 160ms ease-out,box-shadow 160ms ease-out}
 :is(dialog .sheet-head .icon,dialog .editorial-sheet-head button.icon,#song-dialog .switch-control,.service-actions>a.service-icon,#settings .language-button,#thai-only,#settings .choice-options span)::before{transition:background-color 160ms ease-out}
}
@media(prefers-reduced-motion:reduce){:is(#settings-open,#song-open,#settings .language-button,#thai-only,#settings .choice-options span),:is(#settings .language-button,#thai-only,#settings .choice-options span)::before{transition:none}}

/* Match the email stroke to the black/white social artwork in each theme. */
:root{--social-icon-color:#000}
html.dark,body.dark{--social-icon-color:#fff}
footer .socials a[aria-label=Email]{color:var(--social-icon-color)}

/* Feedback belongs to each control, leaving the fixed navigation geometry intact. */
.top>.brand,.top>.icon,.top .dock :is(a,.find){position:relative;isolation:isolate}
.top>.brand::before,.top>.icon::before,.top .dock :is(a,.find)::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--shell-choice);box-shadow:inset 0 0 0 1px var(--shell-edge),inset 0 1px 0 var(--shell-reflection);opacity:0}
.top>.brand::before{inset:-6px -8px;border-radius:12px}
.top>.brand:focus-visible::before,.top>.icon:focus-visible::before,.top .dock :is(a,.find):focus-visible::before{opacity:1}
@media(hover:hover) and (pointer:fine){
 .top>.brand:hover::before,.top>.icon:hover::before,.top .dock :is(a,.find):hover::before{opacity:1}
}
@media(prefers-reduced-motion:no-preference){
 .top>.brand::before,.top>.icon::before,.top .dock :is(a,.find)::before{transition:opacity 160ms ease-out}
}
@media(prefers-reduced-motion:reduce){
 .top>.brand::before,.top>.icon::before,.top .dock :is(a,.find)::before{transition:none}
}

/* A short error document still fills the viewport; the footer stays in normal flow. */
body.error-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.error-page>.top{flex:0 0 auto}
body.error-page>main{flex:1 0 auto;width:100%;margin:0 auto;display:grid;place-items:center;padding:40px 32px;min-height:240px;text-align:center}
.error-content{width:100%;max-width:560px}
.error-content h1{margin:0 0 16px}
.error-content p{margin:0 0 24px}
body.error-page>footer{flex:0 0 auto;margin:0}
@media(max-width:699px){body.error-page>main{padding:32px 16px;min-height:220px}}

/* Quiet row feedback preserves dividers and the full hit area. */
:root{--choice-selected:rgba(125,195,214,.48)}
html.dark,body.dark{--choice-selected:rgba(73,130,151,.65)}
.track{border-radius:14px}

#settings :is(.language-button,#thai-only)[aria-pressed=true]::before,#settings .choice-options input:checked+span::before{background:linear-gradient(135deg,var(--shell-reflection),transparent 65%),var(--choice-selected)}
#settings :is(.language-button,#thai-only)[aria-pressed=true],#settings .choice-options input:checked+span{box-shadow:inset 0 0 0 1.5px var(--choice-edge),inset 0 1px 0 var(--shell-reflection),0 2px 8px #071b2b14}

/* One horizontal shell for the header and the two reading/search dialogs. */
:root{--shell-max-width:1056px;--shell-gutter:16px}
@media(min-width:1100px){:root{--shell-gutter:32px}}
@media(min-width:700px){
 .top,#search-dialog,#viewpoint-dialog{width:min(var(--shell-max-width),calc(100% - 2 * var(--shell-gutter)));max-width:none;margin-inline:auto}
 body{padding-bottom:0}
 footer,body:has(#settings-open) footer{padding-bottom:36px}
 .top .dock{position:static;inset:auto;width:auto;max-width:none;min-width:0;margin-left:auto;transform:none;flex-shrink:0;display:flex;flex-direction:row;height:auto;min-height:0;padding:0;gap:2px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 .top .dock::before,.top .dock::after{content:none}
 .top .dock a,.top .dock a.nav-extra,.top .dock .find{display:flex;flex-direction:row;justify-content:center;align-items:center;width:auto;height:auto;min-height:40px;gap:6px;padding:0 10px;line-height:1.4}
 .top .dock span{max-height:none;opacity:1;font-size:13px;font-weight:500;margin:0;letter-spacing:0}
 .top .dock svg{width:18px;height:18px;flex-shrink:0}
 .top .dock [aria-current]{background:var(--selected)}
 .top .mobile-find{display:none}
 .top .theme{margin-left:0;flex-shrink:0}
}
@media(min-width:700px) and (max-width:1099px){
 .top{gap:8px;padding:8px 12px}
 .top .brand{margin-right:auto;font-size:14px;flex-shrink:0}
 .top .dock a,.top .dock a.nav-extra,.top .dock .find{position:relative;width:44px;height:44px;min-height:44px;padding:0;gap:0;border-radius:22px}
 .top .dock svg{width:22px;height:22px}
 .top .dock span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .top .theme{width:44px;height:44px;flex:0 0 44px}
 .reader-actions,.migrated-page .reader-actions{position:fixed!important;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));justify-content:space-between;pointer-events:none;z-index:11}
 .reader-actions .pill{pointer-events:auto}
 .archive-open{position:fixed;right:16px;bottom:calc(24px + env(safe-area-inset-bottom))}
 body:has(#settings-open){--reader-bottom:calc(92px + env(safe-area-inset-bottom))}
 body:has(#settings-open) footer,body:has(#song-open) footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}
/* List feedback is typography only; query marks remain unchanged. */
main .track,#search-results a{background:transparent}
main .track:focus-visible,#search-results a:focus-visible{background:transparent;outline:2px solid var(--accent);outline-offset:2px}
main .track:focus-visible .track-title strong,#search-results a:focus-visible strong{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(hover:hover) and (pointer:fine){
 main .track:hover,#search-results a:hover{background:transparent}
 main .track:hover .track-title strong,#search-results a:hover strong{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
}
@media(prefers-reduced-motion:no-preference){.track-title strong,#search-results strong{transition:color 160ms ease-out}}
@media(prefers-reduced-motion:reduce){.track-title strong,#search-results strong{transition:none}}