/* a11y-button-overrides.css
 * Auto-generated — parallel rules so <button> elements we converted from <a>
 * (navigation.php: #toggle-nav, #side-toolbar-read-settings, #nav-side-toolbar-read-settings,
 *  #navbar-search, 8 .background-color-control) retain their Mirages visual.
 *
 * Generated from mirages.min.css selectors: a#toggle-nav / .side-toolbar-list li a /
 * .navbar-search-container > a / .background-color-controls li > a
 */

/* 1a. High-specificity `appearance: none` reset — MUST beat Mirages'
 *     `button,html input[type=button],...{-webkit-appearance:button}` rule
 *     (specificity 0,0,0,1) that forces native button chrome and breaks our
 *     icon-button sizing. Explicit id-based selectors give (0,1,0,1). */
button#toggle-nav,
button#side-toolbar-read-settings,
button#nav-side-toolbar-read-settings,
button#navbar-search,
.background-color-controls li > button,
.navbar-search-container > button,
.navbar-nav.side-toolbar-list li button,
#nav-toolbar .side-toolbar .side-toolbar-list li button {
    -webkit-appearance: none;
    appearance: none;
}

/* 1b. Low-specificity defaults (zero via :where) — Mirages-mirror rules below
 *     will override background/color where needed without fighting id specificity. */
:where(
    #toggle-nav,
    #side-toolbar-read-settings,
    #nav-side-toolbar-read-settings,
    #navbar-search,
    .background-color-controls li > button,
    .navbar-search-container > button
) {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* 1c. Inline SVG inside the two PC navbar icon buttons — match sibling <a> SVG size.
 *     Mirages styles sibling-<a>-SVG via rules that don't reach our <button> SVG;
 *     apply the known sibling metrics directly. */
#navbar-search > svg,
#nav-side-toolbar-read-settings > svg {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
}

/* 2. Parallel rules mirroring Mirages a{} rules but for button. */

button#toggle-nav {
    top: .625rem;
    left: .625rem;
    font-size: .75rem;
    position: fixed;
    z-index: 899;
    padding: .125rem 1.25rem;
    color: #333;
    background-color: rgba(255,255,255,0.9);
    cursor: pointer;
    line-height: 1.875rem;
    border-radius: 2.5rem;
    font-family: "Open Sans",Helvetica,"Microsoft Yahei",sans-serif;
    font-weight: 300;
    -webkit-transition: 0.5s ease all;
    -moz-transition: 0.5s ease all;
    -ms-transition: 0.5s ease all;
    -o-transition: 0.5s ease all;
    transition: 0.5s ease all;
    -webkit-box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.117);
    -moz-box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.117);
    box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.117);
}
body.theme-dark button#toggle-nav {
    color: #fff;
    background-color: rgba(44,42,42,0.9);
}
body.theme-sunset button#toggle-nav {
    background-color: rgba(248,241,228,0.9);
}
#wrap.display-nav button#toggle-nav {
    background-color: #333;
    border: .0625rem solid #333;
    color: #fff !important;
    -webkit-transform: translateX(14.5rem);
    -moz-transform: translateX(14.5rem);
    -ms-transform: translateX(14.5rem);
    -o-transform: translateX(14.5rem);
    transform: translateX(14.5rem);
}
body.theme-dark #wrap.display-nav button#toggle-nav {
    background-color: #fff;
    border: 0.0625rem solid #fff;
    color: #333 !important;
}
button#toggle-nav:hover {
    -webkit-box-shadow: 0 0.375rem 0.9375rem rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0.375rem 0.9375rem rgba(0,0,0,0.2);
    box-shadow: 0 0.375rem 0.9375rem rgba(0,0,0,0.2);
}
/* （已删除 button#toggle-nav.hide { left:-5.3125rem }：该条镜像自主题的滚动隐藏规则，
 *   但线上实际表现是 #toggle-nav 滚动时常驻——ai/css/index.css 的 left:0 压住了主题 hide；
 *   此镜像因加载顺序在 index.css 之后反而生效，导致滚动时按钮滑出屏幕，与线上不一致） */
#nav-toolbar .side-toolbar .side-toolbar-list li button {
    display: inline-block;
    height: 2.5rem;
    width: 2.5rem;
    line-height: 2.5rem;
    border-radius: 100%;
    font-size: .75rem;
    background: #2c2a2a;
    color: #ccc;
    vertical-align: middle;
    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    transition: 0.3s ease all;
}
body.theme-white #nav-toolbar .side-toolbar .side-toolbar-list li button {
    background: #f0f0f0;
    color: #333;
}
body.theme-white.theme-sunset #nav-toolbar .side-toolbar .side-toolbar-list li button {
    background-color: #F8F1E4;
    color: #333;
}
#nav-toolbar .side-toolbar .side-toolbar-list li button:hover {
    background: #fff;
    color: #333;
}
body.theme-white #nav-toolbar .side-toolbar .side-toolbar-list li button:hover {
    background: #333;
    color: #fff;
}
body.theme-white.theme-sunset #nav-toolbar .side-toolbar .side-toolbar-list li button:hover {
    background-color: #2c2a2a;
    color: #fff;
}
#nav-toolbar .side-toolbar .side-toolbar-list li button .night-mode,#nav-toolbar .side-toolbar .side-toolbar-list li button .night {
    background: #5856d6 !important;
    color: #fff !important;
}
#nav-toolbar .side-toolbar .side-toolbar-list li button .night-mode:hover,#nav-toolbar .side-toolbar .side-toolbar-list li button .night:hover {
    background: #5856d6 !important;
    color: #fff !important;
}
#nav-toolbar .side-toolbar .side-toolbar-list li button .day-mode .day {
    background: #ffcc33 !important;
    color: #fff !important;
}
#nav-toolbar .side-toolbar .side-toolbar-list li button .day-mode .day:hover {
    background: #ffcc33 !important;
    color: #fff !important;
}
#nav-toolbar .side-toolbar .side-toolbar-list li button i {
    font-size: .9rem;
    line-height: 2.5rem;
}
.background-color-controls li > button {
    display: inline-block;
    height: 2.5rem;
    width: 2.5rem;
    line-height: 2.5rem;
    border-radius: 100%;
    font-size: .75rem;
    background: #2c2a2a;
    color: #bcbcbc;
    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    transition: 0.3s ease all;
}
.background-color-controls li > button > i {
    opacity: 0;
    font-size: .9rem;
    line-height: 2.5rem;
}
.background-color-controls li > button.selected > i,.background-color-controls li > button.auto > i {
    opacity: 1;
}
.background-color-controls li > button.auto.selected {
    background: #fc3 !important;
    color: #fff !important;
}
body.theme-white .background-color-controls li > button.auto {
    background: #f0f0f0;
    color: #333;
}
body.theme-white.theme-sunset .background-color-controls li > button.auto {
    background: #F8F1E4;
}
.background-color-controls li > button.white {
    background: #fafafa;
    color: #333;
}
body.theme-white.theme-sunset .background-color-controls li > button.white {
    background: #fff;
}
.background-color-controls li > button.sunset {
    background: #F8F1E4;
    color: #333;
}
body.theme-white.theme-sunset .background-color-controls li > button.sunset {
    background: #e7e0d3;
}
.background-color-controls li > button.dark {
    background: #2c2a2a;
    color: #f0f0f0;
}
.navbar-nav.side-toolbar-list li button {
    display: inline-block;
    height: 2.5rem;
    width: 2.5rem;
    line-height: 2.5rem;
    border-radius: 100%;
    font-size: .75rem;
    background: #2c2a2a;
    color: #ccc;
    vertical-align: middle;
    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    transition: 0.3s ease all;
}
body.theme-white .navbar-nav.side-toolbar-list li button {
    background: #f0f0f0;
    color: #333;
}
body.theme-white.theme-sunset .navbar-nav.side-toolbar-list li button {
    background-color: #F8F1E4;
    color: #333;
}
.navbar-nav.side-toolbar-list li button:hover {
    background: #fff;
    color: #333;
}
body.theme-white .navbar-nav.side-toolbar-list li button:hover {
    background: #333;
    color: #fff;
}
body.theme-white.theme-sunset .navbar-nav.side-toolbar-list li button:hover {
    background-color: #2c2a2a;
    color: #fff;
}
.navbar-nav.side-toolbar-list li button .night-mode,.navbar-nav.side-toolbar-list li button .night {
    background: #5856d6 !important;
    color: #fff !important;
}
.navbar-nav.side-toolbar-list li button .night-mode:hover,.navbar-nav.side-toolbar-list li button .night:hover {
    background: #5856d6 !important;
    color: #fff !important;
}
.navbar-nav.side-toolbar-list li button .day-mode .day {
    background: #ffcc33 !important;
    color: #fff !important;
}
.navbar-nav.side-toolbar-list li button .day-mode .day:hover {
    background: #ffcc33 !important;
    color: #fff !important;
}
.navbar-nav.side-toolbar-list li button i {
    font-size: .9rem;
    line-height: 2.5rem;
}
.navbar .read-settings-container .background-color-controls li > button.auto.selected {
    background: #fc3 !important;
    color: #fff !important;
}
body.theme-white .navbar .read-settings-container .background-color-controls li > button.auto {
    background: #f0f0f0;
    color: #333;
}
body.theme-white.theme-sunset .navbar .read-settings-container .background-color-controls li > button.auto {
    background: #F8F1E4;
}
.navbar .read-settings-container .background-color-controls li > button.white,.navbar .read-settings-container .background-color-controls li > button.white:hover {
    background: #fafafa;
    color: #333;
}
body.theme-white.theme-sunset .navbar .read-settings-container .background-color-controls li > button.white,body.theme-white.theme-sunset .navbar .read-settings-container .background-color-controls li > button.white:hover {
    background: #fff;
}
.navbar .read-settings-container .background-color-controls li > button.sunset,.navbar .read-settings-container .background-color-controls li > button.sunset:hover {
    background: #F8F1E4;
    color: #333;
}
body.theme-white.theme-sunset .navbar .read-settings-container .background-color-controls li > button.sunset,body.theme-white.theme-sunset .navbar .read-settings-container .background-color-controls li > button.sunset:hover {
    background: #e7e0d3;
    color: #333;
}
.navbar .read-settings-container .background-color-controls li > button.dark,body.theme-white.theme-sunset .navbar .read-settings-container .background-color-controls li > button.dark {
    background: #2c2a2a;
    color: #f0f0f0;
}
.navbar-nav.side-toolbar-list .navbar-search-container > button {
    text-align: center;
    vertical-align: top;
}