/* Keep each archive's own palette and typography. */
/* Compact controls are opt-in; other observation archives retain their layout. */
html[data-language-ui=compact]{--archive-language:0px}
html[data-language-ui=compact] .language-bar,
html[data-language-ui=compact] .dialog-languages{position:relative;top:auto;z-index:40;display:block;padding:0;min-height:0;border:0;background:none;color:var(--paper)}
html[data-language-ui=compact] .dialog-top .dialog-languages{margin-left:auto}
html[data-language-ui=compact] .top-tools{gap:12px}
html[data-language-ui=compact] .language-bar{flex-shrink:0}
.language-picker{position:relative;font-family:var(--sans);text-align:left}
.language-picker summary{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 11px;list-style:none;cursor:pointer;font-size:12px;letter-spacing:.03em;white-space:nowrap;color:var(--muted);border:1px solid transparent;transition:color .16s,background-color .16s,border-color .16s;touch-action:manipulation}
.language-picker summary::-webkit-details-marker{display:none}
.language-symbol{width:19px;height:19px;flex:none}
.language-chevron{font-family:var(--mono);font-size:16px;color:var(--green);transition:transform .18s}
.language-picker summary:before,.language-picker summary:after{content:"";position:absolute;width:7px;height:7px;border-color:var(--green);opacity:0;transition:opacity .16s}
.language-picker summary:before{top:2px;left:2px;border-left:1px solid;border-top:1px solid}
.language-picker summary:after{right:2px;bottom:2px;border-right:1px solid;border-bottom:1px solid}
.language-picker summary:hover,.language-picker[open] summary{color:var(--paper);background:var(--panel2);border-color:var(--line)}
.language-picker summary:hover:before,.language-picker summary:hover:after,.language-picker[open] summary:before,.language-picker[open] summary:after{opacity:1}
.language-picker summary:active{background:var(--line)}
.language-picker[open] .language-chevron{transform:rotate(180deg)}
.language-picker summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.language-picker .language-switch{position:absolute;top:calc(100% + 8px);right:0;z-index:60;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:168px;padding:7px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 30px #0005}
.language-picker:not([open]) .language-switch{display:none}
.language-picker[open] .language-switch{animation:language-reveal .16s ease-out}
.language-picker .language-switch button{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:44px;padding:8px 12px;text-align:left;font-size:13px;color:var(--muted);border:1px solid transparent;font-weight:400;transition:background-color .15s,color .15s}
.language-picker .language-switch button:hover,.language-picker .language-switch button:focus-visible{color:var(--paper);background:var(--panel2)}
.language-picker .language-switch button[aria-pressed=true]{color:var(--paper);border-color:var(--line);background:var(--panel2);font-weight:500}
.language-picker .language-switch button[aria-pressed=true]:after{content:"✓";color:var(--green)}
html[data-language-ui=compact][data-archive=malfoy] .record-dialog .detail-layout{height:calc(90dvh - 50px)}
@keyframes language-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.language-picker *{animation:none!important;transition:none!important}}
@media(max-width:960px){html[data-language-ui=compact] .top-tools .storage-pill{display:none}}
@media(max-width:700px){html[data-language-ui=compact] .top-tools{gap:3px}.language-picker summary{gap:5px;padding:0 5px;font-size:11px}.language-symbol{width:17px;height:17px}html[data-language-ui=compact][data-archive=malfoy] .record-dialog .detail-layout{height:auto}}
@media(max-width:380px){.topbar .language-picker summary{gap:0;min-width:44px;justify-content:center}.topbar .language-symbol,.topbar .language-chevron{display:none}}
.language-bar{position:sticky;top:var(--archive-header,70px);z-index:29;display:flex;justify-content:flex-end;padding:3px 24px;background:var(--bg,#101915);border-bottom:1px solid var(--line,#394137);min-height:44px}
.sidebar{top:calc(var(--archive-header,70px) + var(--archive-language,51px));height:calc(100dvh - var(--archive-header,70px) - var(--archive-language,51px))}
.control-deck,.menu-backdrop{top:calc(var(--archive-header,70px) + var(--archive-language,51px))}
.filter-right{flex-wrap:wrap;justify-content:flex-end}
.series-label{font-size:10px;opacity:.8}
.language-switch{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.language-switch button{font:inherit;font-size:12px;background:transparent;color:inherit;min-height:44px;padding:7px 12px;border:1px solid transparent;cursor:pointer}
.language-switch button[aria-pressed=true]{border-color:currentColor;font-weight:700}
.language-switch button:focus-visible,.archive-links a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.dialog-languages{padding:0 18px;border-bottom:1px solid var(--line,#394137)}
html[data-archive=karma] .record-dialog .detail-layout{height:calc(100% - 97px)}
@media(min-width:701px){html[data-archive=malfoy] .record-dialog .detail-layout{height:calc(90dvh - 98px)}}
@media(max-width:650px){html[data-archive=karma] .record-dialog .detail-layout{height:calc(100% - 93px)}}
.archive-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin:16px 0 4px;font-size:12px}
.archive-links a{color:inherit;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.topbar~.language-bar{color:var(--text,#d7d9c9)}
html[lang=en] .view-tabs,html[lang=ja] .view-tabs{flex-wrap:wrap}
html[lang=en] .kind-tabs{flex-wrap:wrap}
html[lang=ja] .masthead h1,html[lang=en] .masthead h1{text-wrap:balance}
@media(max-width:700px){.language-bar{padding:0 12px;justify-content:center}.language-switch button{padding:6px 14px}.dialog-languages{padding:0 8px}.archive-links{gap:4px 10px}}