/* Permanent theme controls. Fonts are fixed per design. */
html[data-design] .appearance-control{margin:0;flex:none;gap:0;align-self:center;color:var(--muted)}
html[data-design] .appearance-control>.ui-icon{display:none}
html[data-design] .appearance-control select{font:13px/1.8 var(--sans);width:154px;min-height:44px;background-color:var(--panel);border:1px solid var(--line);border-radius:0;color:var(--text);padding:7px 31px 7px 12px}
html[data-design="c"] .appearance-control{margin-top:auto;align-self:stretch;width:100%;padding-top:20px;border-top:1px solid var(--line)}
html[data-design="c"] .appearance-control select{width:100%;border-radius:22px 22px 3px 3px}
html[data-design="a"] .reading-page .reader-shell{max-width:var(--reader-shell-width,900px)}
html[data-design="c"] .reading-page .reader-shell{width:min(var(--reader-shell-width,900px),calc(100% - 205px));max-width:none;margin-left:calc(205px + (100% - 205px - min(var(--reader-shell-width,900px),100% - 205px))/2)}
@media(max-width:760px){
 html[data-design] .appearance-control,html[data-design="c"] .appearance-control{width:auto;margin:0;padding:0;border:0;align-self:center;justify-self:end}
 html[data-design] .appearance-control select{width:122px;min-height:44px;font-size:13px;padding:7px 27px 7px 9px;background-position:right 7px center}
 html[data-design="c"] .appearance-control select{border-radius:18px 18px 3px 3px}
 html[data-design] .reading-page .reader-shell,html[data-design="c"] .reading-page .reader-shell{width:100%;max-width:100%;margin-left:0}
}
@media(max-width:360px){html[data-design] .header .brand{font-size:16px;gap:7px}html[data-design] .appearance-control select{width:104px}}

/* Functional ink is separate from the retained decorative palette. */
html[data-design]{--ui-muted:var(--muted);--ui-gold:var(--gold)}
html[data-design="a"][data-palette="original"]{--ui-muted:#645f51;--ui-gold:#7a592b}
html[data-design="c"][data-palette="original"]{--ui-muted:#566863;--ui-gold:#446b62}
html[data-design] :is(.header .brand small,.header nav a>span,.update-meta,.update-preview p,.calendar-weekdays,.calendar-summary,.calendar-detail,.word-percent,.word-legend-row small,.recommend-book .story-tag,.recommend-summary,.recommend-bottom .story-stats p,.keyword small,.reader-book-title,.reader-meta,.reader-setting-row>span,.chapter-count,.story-word-count,.tab-button,.quiet-button){color:var(--ui-muted)}
html[data-design] :is(.text-link,.recommend-action,.roll-button,.update-kind,.calendar-day.is-selected,.tab-button.active,.chapter-controls .button,.reader-bottom .button,#more-entries){color:var(--ui-gold)}
html[data-design] .search-box input::placeholder{color:var(--ui-muted)}
html[data-design] :is(.header .brand small,.update-meta,.update-kind,.calendar-weekdays,.calendar-summary,.calendar-detail,.word-percent,.word-legend-row small,.recommend-info>.eyebrow,.recommend-book .story-tag,.recommend-bottom .story-stats p,.keyword small){font-size:12px}
html[data-design] :is(.text-link,.recommend-action,.roll-button){font-size:13px}
html[data-design] .header nav a{font-size:13px}
html[data-design] .header nav a[aria-current]>span,html[data-design] .header nav a:hover>span{color:var(--ui-gold)}

@media(max-width:760px){
 html[data-design] .header{padding-top:18px;gap:12px}
 html[data-design] .header nav{padding-block:6px}
 html[data-design] .header nav a{min-height:44px;font-size:14px;padding-block:9px}
 html[data-design] :is(.tab-button,.page-button,.roll-button,.quiet-button,.button,.chapter-controls select,.reader-controls button){min-height:44px;font-size:14px}
 html[data-design] .page-button{min-width:44px}
 html[data-design] .text-link{display:inline-flex;align-items:center;min-height:44px}
 html[data-design] .calendar-controls .icon-button{min-width:44px;min-height:44px}
 html[data-design] .calendar-day{min-height:44px}
 html[data-design] .era-ribbon a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
 html[data-design] .search-box input{font-size:16px}
 html[data-design] .reading-page .reader-shell{padding-top:18px}
 html[data-design] .reading-page .reader-toolbar{padding:8px 0 14px}
 html[data-design] .chapter-controls{margin-top:16px}
 html[data-design] .reading-page .reader-head{margin:24px 0 20px;padding-bottom:18px}
 html[data-design] .reader-head .eyebrow{font-size:13px;line-height:1.6;margin-bottom:12px}
 html[data-design] .reader-head .reader-book-title{margin-bottom:8px}
 html[data-design] .reader-head h1{margin-block:8px}
 html[data-design] .reader-meta{margin-top:18px}
}

/* Search results explain each match; the random-word layout is retained. */
html[data-design] #keyword-cloud.is-searching{display:block;padding:22px 0 0;background:none;border:0}
html[data-design] .entry-result-group+.entry-result-group{margin-top:32px}
html[data-design] .entry-result-heading{display:flex;align-items:baseline;gap:16px;margin-bottom:4px}
html[data-design] .entry-result-heading h2{font:400 22px/1.5 var(--serif);margin:0;color:var(--text)}
html[data-design] .entry-result-heading>span{font:12px/1.8 var(--sans);color:var(--ui-muted);font-variant-numeric:tabular-nums}
html[data-design] .entry-result{display:block;padding:20px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
html[data-design] .entry-result-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:5px 20px}
html[data-design] .entry-result-title{font:400 23px/1.6 var(--serif);color:var(--text)}
html[data-design] .entry-result-top>small{font:12px/1.8 var(--sans);color:var(--ui-muted)}
html[data-design] .entry-result-alias{font:13px/1.8 var(--sans);margin:5px 0 0;color:var(--ui-muted)}
html[data-design] .entry-result-excerpt{font:15px/1.9 var(--reading);margin:8px 0 0;color:var(--ui-muted)}
html[data-design] .entry-result mark{color:var(--text);background:color-mix(in srgb,var(--gold) 12%,var(--bg));text-decoration:underline;text-decoration-color:var(--ui-gold);text-underline-offset:3px}
html[data-design] .entry-result:hover .entry-result-title{color:var(--ui-gold)}
html[data-design] .entry-result:focus-visible{outline:2px solid var(--ui-gold);outline-offset:4px}
