/*
 * Dave's Log controls-only stylesheet v8.3.1
 *
 * Floating-control styles for editor and auxiliary templates
 * that execute dave-theme.js without loading dave-log.css.
 */

html[data-dave-theme="dark"],
html:not([data-dave-theme]) {
    color-scheme: dark;
    --dave-background: #061318;
    --dave-surface: #0b1e25;
    --dave-surface-raised: #102932;
    --dave-text: #dbe7ea;
    --dave-heading: #f1f6f7;
    --dave-muted: #89a0a8;
    --dave-border: #24434d;
    --dave-accent: #fa6862;
    --dave-accent-soft: #ff9893;
    --dave-accent-visited: #b14f4c;
}

html[data-dave-theme="light"] {
    color-scheme: light;
    --dave-background: #f3efe7;
    --dave-surface: #e8e1d6;
    --dave-surface-raised: #fffaf2;
    --dave-text: #26353a;
    --dave-heading: #10191d;
    --dave-muted: #607278;
    --dave-border: #aebdc2;
    --dave-accent: #fa6862;
    --dave-accent-soft: #c94b46;
    --dave-accent-visited: #a84844;
}

/*
 * Dave's Log admin pager and floating navigator v8.3
 *
 * Finish the dark/light treatment of WriteFreely's pager links and
 * provide a right-edge navigation rail matching the theme switcher.
 */

/* Backend pager and Admin-section navigation */

html[data-dave-theme] body#me nav.pager a,
html[data-dave-theme] body#me nav.pager a:link,
html[data-dave-theme] body#me nav.pager a:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 2rem !important;
    box-sizing: border-box !important;
    margin: 0 0.12rem 0.25rem !important;
    padding: 0.35rem 0.65rem !important;

    color: var(--dave-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;

    font-family:
        "Orbitron",
        system-ui,
        sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

html[data-dave-theme] body#me nav.pager a:hover,
html[data-dave-theme] body#me nav.pager a:focus-visible {
    color: var(--dave-accent) !important;
    background: rgb(250 104 98 / 8%) !important;
    border-color: var(--dave-border) !important;
    outline: 0 !important;
}

html[data-dave-theme] body#me nav.pager a.selected,
html[data-dave-theme] body#me nav.pager a.selected:link,
html[data-dave-theme] body#me nav.pager a.selected:visited,
html[data-dave-theme] body#me nav.pager a.selected:hover {
    color: var(--dave-accent) !important;
    background: var(--dave-surface-raised) !important;
    border-color: var(--dave-accent) !important;
    box-shadow:
        inset 0 -2px 0 rgb(250 104 98 / 35%)
        !important;
}

/* Floating page-navigation rail */

aside#dave-scroll-nav {
    position: fixed !important;
    top: 50% !important;
    right:
        calc(1rem + env(safe-area-inset-right))
        !important;
    z-index: 2147482999 !important;

    display: grid !important;
    grid-template-columns: 44px !important;
    gap: 0.4rem !important;

    width: 44px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: translateY(-50%) !important;
}

aside#dave-scroll-nav button.dave-scroll-button {
    appearance: none !important;
    display: grid !important;
    place-items: center !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--dave-heading) !important;
    background: var(--dave-surface-raised) !important;

    border: 1px solid var(--dave-border) !important;
    border-radius: 50% !important;
    outline: 0 !important;

    box-shadow:
        0 5px 18px rgb(0 0 0 / 35%)
        !important;

    cursor: pointer !important;
    opacity: 1 !important;

    transition:
        transform 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        background-color 150ms ease,
        opacity 150ms ease !important;
}

aside#dave-scroll-nav
button.dave-scroll-button:hover:not(:disabled) {
    color: var(--dave-accent) !important;
    border-color: var(--dave-accent) !important;
    transform: translateY(-1px) !important;
}

aside#dave-scroll-nav
button.dave-scroll-button:active:not(:disabled) {
    transform: translateY(0) !important;
}

aside#dave-scroll-nav
button.dave-scroll-button:focus-visible {
    outline:
        3px solid rgb(250 104 98 / 35%)
        !important;
    outline-offset: 3px !important;
}

aside#dave-scroll-nav
button.dave-scroll-button:disabled {
    color: var(--dave-muted) !important;
    border-color: var(--dave-border) !important;
    cursor: default !important;
    opacity: 0.28 !important;
    transform: none !important;
}

aside#dave-scroll-nav .dave-scroll-icon {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    pointer-events: none !important;
}

@media (max-width: 760px) {
    aside#dave-scroll-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    aside#dave-scroll-nav
    button.dave-scroll-button {
        transition: none !important;
    }
}

@media print {
    aside#dave-scroll-nav {
        display: none !important;
    }
}

/*
 * Dave's Log editor controls v8.3.2
 *
 * Auxiliary templates need the complete global theme-toggle styling.
 * The post editor instead retains its native theme control, now using
 * the same inline sun/moon symbols as the rest of the site.
 */

html[data-dave-theme="light"],
body#pad.light {
    --dave-accent: #c43d38;
    --dave-accent-soft: #a83232;
    --dave-accent-visited: #82423f;
}

body#pad.dark {
    --dave-background: #061318;
    --dave-surface: #0b1e25;
    --dave-surface-raised: #102932;
    --dave-text: #dbe7ea;
    --dave-heading: #f1f6f7;
    --dave-muted: #89a0a8;
    --dave-border: #24434d;
    --dave-accent: #fa6862;
    --dave-accent-soft: #ff9893;
    --dave-accent-visited: #b14f4c;
}

body#pad.light {
    --dave-background: #f3efe7;
    --dave-surface: #e8e1d6;
    --dave-surface-raised: #fffaf2;
    --dave-text: #26353a;
    --dave-heading: #10191d;
    --dave-muted: #607278;
    --dave-border: #aebdc2;
}

button#dave-theme-toggle {
    appearance: none !important;
    position: fixed !important;
    right: calc(1rem + env(safe-area-inset-right)) !important;
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--dave-border) !important;
    border-radius: 50% !important;
    outline: 0 !important;
    background: var(--dave-surface-raised) !important;
    color: var(--dave-heading) !important;
    box-shadow: 0 5px 18px rgb(0 0 0 / 24%) !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition:
        transform 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        background-color 150ms ease !important;
}

button#dave-theme-toggle:hover {
    color: var(--dave-accent) !important;
    border-color: var(--dave-accent) !important;
    transform: translateY(-1px) !important;
}

button#dave-theme-toggle:active {
    transform: translateY(0) !important;
}

button#dave-theme-toggle:focus-visible {
    outline: 3px solid rgb(196 61 56 / 28%) !important;
    outline-offset: 3px !important;
}

button#dave-theme-toggle .dave-theme-icon,
body#pad #toggle-theme .dave-editor-theme-icon {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}

html[data-dave-theme="dark"]
button#dave-theme-toggle .dave-theme-moon,
body#pad.dark
#toggle-theme .dave-editor-theme-moon {
    display: none !important;
}

html[data-dave-theme="light"]
button#dave-theme-toggle .dave-theme-sun,
body#pad.light
#toggle-theme .dave-editor-theme-sun {
    display: none !important;
}

body#pad #toggle-theme {
    display: grid !important;
    place-items: center !important;
    color: inherit !important;
}

body#pad #toggle-theme:hover,
body#pad #toggle-theme:focus-visible {
    color: var(--dave-accent) !important;
}

@media (max-width: 640px) {
    button#dave-theme-toggle {
        right: calc(0.75rem + env(safe-area-inset-right)) !important;
        bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    button#dave-theme-toggle {
        transition: none !important;
    }
}

@media print {
    button#dave-theme-toggle {
        display: none !important;
    }
}


/*
 * Dave's Log editor toggle alignment v8.3.2.2
 *
 * Match the optical centre of the native editor toolbar icons without
 * moving or resizing the toggle's interactive area.
 */

body#pad #toggle-theme .dave-editor-theme-icon {
    transform: translateY(0.18rem) !important;
}