/*
 * 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;
}

/*
 * Dave's log all-viewport navigator v8.3.3
 *
 * The four-button page rail was already generated on small screens;
 * an earlier media query merely concealed it. These final rules make
 * it visible, touch-sized and safe-area-aware on phones and tablets.
 */

aside#dave-scroll-nav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (max-width: 760px) {
    aside#dave-scroll-nav {
        display: flex !important;
        visibility: visible !important;
        right: calc(0.65rem + env(safe-area-inset-right, 0px)) !important;
        top: 50% !important;
        bottom: auto !important;
        gap: 0.35rem !important;
        opacity: 1 !important;
        transform: translateY(-50%) !important;
    }

    aside#dave-scroll-nav button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 760px) and (max-height: 480px) {
    aside#dave-scroll-nav {
        gap: 0.2rem !important;
    }

    aside#dave-scroll-nav button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
}

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

/*
 * Dave's log vertical navigator v8.3.5
 *
 * Fix the rail's axis explicitly instead of relying on inherited
 * flex defaults. Keep all four touch targets on-screen, translucent
 * over content, and visibly focused without becoming opaque.
 */

aside#dave-scroll-nav {
    position: fixed !important;
    z-index: 2147483000 !important;
    top: 50% !important;
    right: calc(0.75rem + env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.38rem !important;

    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) !important;
}

aside#dave-scroll-nav > button {
    box-sizing: border-box !important;
    display: grid !important;
    flex: 0 0 44px !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;
    margin: 0 !important;
    padding: 0 !important;

    background: rgb(11 30 37 / 72%) !important;
    border: 1px solid rgb(137 160 168 / 28%) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 10px rgb(0 0 0 / 18%) !important;
    opacity: 0.84 !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition:
        opacity 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease !important;
}

aside#dave-scroll-nav > button:hover,
aside#dave-scroll-nav > button:focus-visible,
aside#dave-scroll-nav > button:active {
    border-color: rgb(250 104 98 / 72%) !important;
    box-shadow:
        0 0 0 1px rgb(250 104 98 / 32%),
        0 0 14px rgb(250 104 98 / 44%) !important;
    opacity: 1 !important;
    transform: scale(1.04) !important;
}

aside#dave-scroll-nav > button:disabled {
    box-shadow: none !important;
    opacity: 0.34 !important;
    transform: none !important;
}

html[data-dave-theme="light"] aside#dave-scroll-nav > button {
    color: #24434d !important;
    background: rgb(255 252 246 / 74%) !important;
    border-color: rgb(36 67 77 / 24%) !important;
    box-shadow: 0 2px 10px rgb(36 67 77 / 14%) !important;
}

html[data-dave-theme="light"] aside#dave-scroll-nav > button:hover,
html[data-dave-theme="light"] aside#dave-scroll-nav > button:focus-visible,
html[data-dave-theme="light"] aside#dave-scroll-nav > button:active {
    color: #9d302d !important;
    border-color: rgb(177 79 76 / 76%) !important;
    box-shadow:
        0 0 0 1px rgb(177 79 76 / 24%),
        0 0 13px rgb(177 79 76 / 38%) !important;
}

@media (max-width: 760px) {
    aside#dave-scroll-nav {
        right: calc(0.55rem + env(safe-area-inset-right, 0px)) !important;
        gap: 0.3rem !important;
    }
}

@media (max-height: 420px) {
    aside#dave-scroll-nav {
        gap: 0.2rem !important;
    }

    aside#dave-scroll-nav > button {
        flex-basis: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }
}