/* Settings menu (appearance), shared by every page. */
.settings{position:relative;flex-shrink:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.settings-button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);background:transparent;color:inherit;font:600 14px/1 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;transition:background .2s}
.settings-button:hover,.settings-button[aria-expanded=true]{background:color-mix(in srgb,currentColor 9%,transparent)}
.settings-button:focus-visible{outline:3px solid #d7893b;outline-offset:3px}
.settings-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:248px;padding:14px;border-radius:14px;background:#fff;color:#2a2420;border:1px solid #e6dfd4;box-shadow:0 14px 40px #2a14081f;text-align:left}
.settings-panel[hidden]{display:none}
.settings fieldset{border:0;margin:0;padding:0}
.settings legend{padding:0 4px 8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#916738}
.settings-option{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer}
.settings-option:hover{background:#f5f1ea}
.settings-option:has(input:checked){background:#fbf0e3;font-weight:700}
.settings-option input{accent-color:#c8742a;width:17px;height:17px;margin:0}
.settings-icon{width:20px;text-align:center;font-size:16px}
.settings-note{margin:8px 4px 0;font-size:12.5px;color:#7a7168}
/* Pages without a header bar: a small floating button in the top-right corner. */
.settings-slot.floating{position:fixed;top:14px;right:14px;z-index:40;color:#3a332d}
.settings-slot.floating .settings-button{background:#fffffff0;box-shadow:0 4px 14px #2a140814}

/* Dark appearance */
[data-theme=dark] .settings-panel{background:#241c18;color:#f1e6d8;border-color:#3d302a;box-shadow:0 14px 40px #0008}
[data-theme=dark] .settings legend{color:#e0a274}
[data-theme=dark] .settings-option:hover{background:#2f2520}
[data-theme=dark] .settings-option:has(input:checked){background:#3a2b22}
[data-theme=dark] .settings-note{color:#b0a294}
[data-theme=dark] .settings-slot.floating{color:#f1e6d8}
[data-theme=dark] .settings-slot.floating .settings-button{background:#241c18f0;box-shadow:0 4px 14px #0006}
.settings-slot{display:flex;align-items:center}
.order-header .settings-slot{margin-left:8px}
.topbar .settings-slot{margin-left:auto;padding-left:8px}
.topbar .top-actions{margin-left:auto}
.topbar .top-actions:not([hidden])+.settings-slot{margin-left:0}
/* The gear turns a little on hover, and a quarter turn while the menu is open. */
.settings-button svg{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.settings-button:hover svg,.settings-button:focus-visible svg{transform:rotate(60deg)}
.settings-button[aria-expanded=true] svg{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.settings-button svg{transition:none}.settings-button:hover svg,.settings-button:focus-visible svg,.settings-button[aria-expanded=true] svg{transform:none}}