@font-face {
    font-family: "Orbitron";
    src: url("/assets/fonts/Orbitron-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

:root {
    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,
body {
    background: var(--dave-background) !important;
}

body,
button,
input,
select,
textarea {
    font-family: "Orbitron", system-ui, sans-serif !important;
}

/*
 * WriteFreely assigns its serif font directly to article elements.
 * Enforce Orbitron throughout every public blog page.
 */
body#collection,
body#collection *,
body#post,
body#post *,
body#subpage,
body#subpage * {
    font-family: "Orbitron", system-ui, sans-serif !important;
}

body {
    color: var(--dave-text) !important;
    font-weight: 400;
    letter-spacing: 0.012em;
    line-height: 1.75;
}

::selection {
    color: var(--dave-background);
    background: var(--dave-accent);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: var(--dave-heading) !important;
    font-family: "Orbitron", system-ui, sans-serif !important;
    font-weight: 650;
    letter-spacing: 0.025em;
}

body header p.description,
body time,
body .views,
body p.meta-note {
    color: var(--dave-muted) !important;
}

a:link,
a:visited {
    color: var(--dave-accent) !important;
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
    padding-bottom: 3px;
    transition:
        color 140ms ease,
        background-color 140ms ease;
}

/*
 * Use the exact 2×1 image as an alpha mask:
 * one solid pixel, one transparent pixel.
 */
a:link::after,
a:visited::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--dave-accent);
    pointer-events: none;

    -webkit-mask-image: url("/assets/underline-v2.png");
    mask-image: url("/assets/underline-v2.png");

    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;

    -webkit-mask-position: left bottom;
    mask-position: left bottom;
}

a:visited::after {
    /*
     * Visually equivalent to #fa6862 at 70% opacity over #061318.
     * Browser privacy rules prevent changing image opacity directly
     * according to visited-link state.
     */
    background-color: var(--dave-accent-visited);
}

a:hover,
a:active {
    color: var(--dave-accent-soft) !important;
    text-decoration: none !important;
    background-color: rgb(250 104 98 / 8%);
}

a:hover::after,
a:active::after {
    background-color: var(--dave-accent-soft);
}

a:focus-visible {
    color: var(--dave-accent-soft) !important;
    outline: 2px solid var(--dave-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

body #blog-title a {
    color: var(--dave-heading) !important;
    background-image: none;
    padding-bottom: 0;
}

body #blog-title a:hover {
    color: var(--dave-accent) !important;
    background-color: transparent;
}

a.action-btn,
a.simple-btn,
nav#manage a.write {
    background-image: none;
}

body #blog-title a::after,
a.action-btn::after,
a.simple-btn::after,
nav#manage a.write::after {
    content: none;
}

body#collection header,
body#post header,
body#subpage header {
    border-bottom: 1px solid var(--dave-border);
}

body#collection #wrapper article,
body#subpage #wrapper article {
    border-bottom-color: var(--dave-border) !important;
}

body#collection #wrapper article:hover,
body#subpage #wrapper article:hover {
    background: rgb(16 41 50 / 45%);
}

body#post article,
body#collection article,
body#subpage article,
body#collection article p,
body#post article p,
body#subpage article p {
    color: var(--dave-text) !important;
}

body#post article h2#title {
    color: var(--dave-heading) !important;
}

body#collection blockquote,
body#post blockquote,
body#subpage blockquote {
    color: var(--dave-text) !important;
    background: var(--dave-surface) !important;
    border-left: 4px solid var(--dave-accent) !important;
    padding: 0.8em 1.2em;
}

body#collection code,
body#post code,
body#subpage code {
    color: var(--dave-accent-soft) !important;
    background: var(--dave-surface-raised) !important;
    border: 1px solid var(--dave-border);
    border-radius: 4px;
}

body#collection pre,
body#post pre,
body#subpage pre {
    color: var(--dave-text) !important;
    background: var(--dave-surface) !important;
    border: 1px solid var(--dave-border);
    border-radius: 6px;
}

body#collection pre code,
body#post pre code,
body#subpage pre code {
    color: inherit !important;
    background: transparent !important;
    border: 0;
}

body#collection article hr,
body#post article hr,
body#subpage article hr,
body footer {
    border-color: var(--dave-border) !important;
}

body footer,
body footer p,
body footer nav {
    color: var(--dave-muted) !important;
}

input,
select,
textarea {
    color: var(--dave-text) !important;
    background: var(--dave-surface) !important;
    border-color: var(--dave-border) !important;
}

img,
video {
    border-radius: 4px;
}

/*
 * Dave's Log typography v3
 *
 * Orbitron needs slightly more size and stroke weight than a
 * conventional reading face, especially against a dark background.
 */
body#post article#post-body,
body#post article#post-body p,
body#post article#post-body li,
body#collection #wrapper article p,
body#collection #wrapper article li,
body#subpage #wrapper article p,
body#subpage #wrapper article li {
    font-size: 1.0625rem !important;
    font-weight: 450 !important;
    line-height: 1.8 !important;
}

/*
 * Keep secondary controls subordinate, but not nearly invisible.
 */
body#collection nav#manage,
body#post header nav,
body#subpage header nav {
    color: var(--dave-muted) !important;
    opacity: 0.85 !important;
}

body#collection nav#manage > *,
body#post header nav > *,
body#subpage header nav > * {
    opacity: 1 !important;
}

body#collection nav#manage:hover,
body#post header nav:hover,
body#subpage header nav:hover {
    opacity: 1 !important;
}

/*
 * Retain a conventional 16px reading size on narrow screens, where
 * Orbitron's wide characters otherwise create excessively short lines.
 */
@media (max-width: 640px) {
    body#post article#post-body,
    body#post article#post-body p,
    body#post article#post-body li,
    body#collection #wrapper article p,
    body#collection #wrapper article li,
    body#subpage #wrapper article p,
    body#subpage #wrapper article li {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }
}

/*
 * Dave's Log authenticated interface v4
 *
 * WriteFreely does not include collection Custom CSS on /me/ and
 * /admin pages. The shared authenticated-page header links this
 * stylesheet directly.
 */

body#me,
body#me * {
    font-family: "Orbitron", system-ui, sans-serif !important;
}

body#me {
    color: var(--dave-text) !important;
    background: var(--dave-background) !important;
    font-weight: 400;
    letter-spacing: 0.012em;
}

body#me > header,
body#me > header.singleuser,
body#me > header.multiuser {
    color: var(--dave-text) !important;
    background: var(--dave-background) !important;
    border-bottom: 1px solid var(--dave-border) !important;
    box-shadow: none !important;
}

body#me nav#full-nav,
body#me nav#user-nav,
body#me nav.tabs,
body#me header nav {
    color: var(--dave-muted) !important;
    background: transparent !important;
}

body#me header a,
body#me header a:link,
body#me header a:visited {
    color: var(--dave-muted) !important;
}

body#me header a.title,
body#me header a.title:link,
body#me header a.title:visited {
    color: var(--dave-heading) !important;
    font-weight: 650 !important;
}

body#me header a.selected,
body#me header a:hover,
body#me header a:focus-visible {
    color: var(--dave-accent) !important;
}

body#me header a::after,
body#me a.simple-btn::after,
body#me a.btn::after,
body#me a.action-btn::after,
body#me button::after {
    content: none !important;
}

body#me .dropdown-nav ul li ul {
    color: var(--dave-text) !important;
    background: var(--dave-surface-raised) !important;
    border: 1px solid var(--dave-border) !important;
    box-shadow: 0 12px 30px rgb(0 0 0 / 35%) !important;
}

body#me .dropdown-nav ul li ul a,
body#me .dropdown-nav ul li ul a:link,
body#me .dropdown-nav ul li ul a:visited {
    color: var(--dave-text) !important;
    background: transparent !important;
}

body#me .dropdown-nav ul li ul a:hover,
body#me .dropdown-nav ul li ul a:focus-visible {
    color: var(--dave-accent) !important;
    background: rgb(250 104 98 / 8%) !important;
}

body#me .dropdown-nav img.ic-18dp {
    filter: invert(1);
    opacity: 0.65;
}

body#me #official-writing,
body#me .content-container,
body#me .snug {
    color: var(--dave-text) !important;
    background: transparent !important;
}

body#me #official-writing p,
body#me #official-writing li,
body#me #official-writing label,
body#me #official-writing date,
body#me #official-writing time,
body#me #official-writing td,
body#me #official-writing dd,
body#me #official-writing dt {
    color: var(--dave-text) !important;
}

body#me #official-writing h1,
body#me #official-writing h2,
body#me #official-writing h3,
body#me #official-writing h4 {
    color: var(--dave-heading) !important;
}

body#me #official-writing p,
body#me #official-writing li {
    line-height: 1.75 !important;
}

body#me hr,
body#me .post,
body#me .collection,
body#me table.classy,
body#me table.classy th,
body#me table.classy td {
    border-color: var(--dave-border) !important;
}

body#me table.classy th {
    color: var(--dave-heading) !important;
    background: var(--dave-surface-raised) !important;
}

body#me table.classy td {
    color: var(--dave-text) !important;
    background: var(--dave-surface) !important;
}

body#me input,
body#me select,
body#me textarea {
    color: var(--dave-text) !important;
    background: var(--dave-surface) !important;
    border-color: var(--dave-border) !important;
}

body#me input::placeholder,
body#me textarea::placeholder {
    color: var(--dave-muted) !important;
    opacity: 0.8;
}

body#me input:focus,
body#me select:focus,
body#me textarea:focus {
    border-color: var(--dave-accent) !important;
    outline-color: var(--dave-accent) !important;
}

body#me a.simple-btn,
body#me a.btn,
body#me a.action-btn,
body#me button,
body#me input[type="button"],
body#me input[type="submit"] {
    color: var(--dave-heading) !important;
    background: var(--dave-surface-raised) !important;
    border: 1px solid var(--dave-border) !important;
    box-shadow: none !important;
}

body#me a.simple-btn:hover,
body#me a.btn:hover,
body#me a.action-btn:hover,
body#me button:hover,
body#me input[type="button"]:hover,
body#me input[type="submit"]:hover {
    color: var(--dave-accent) !important;
    background: rgb(250 104 98 / 8%) !important;
    border-color: var(--dave-accent) !important;
}

body#me .option,
body#me .alert,
body#me .modal .body {
    color: var(--dave-text) !important;
    background: var(--dave-surface) !important;
    border-color: var(--dave-border) !important;
}

body#me .electron,
body#me .explain,
body#me .describe,
body#me .description,
body#me .content-desc,
body#me p.docs {
    color: var(--dave-muted) !important;
}

body#me footer,
body#me footer p,
body#me footer nav {
    color: var(--dave-muted) !important;
    border-color: var(--dave-border) !important;
}

@media (max-width: 640px) {
    body#me #official-writing p,
    body#me #official-writing li {
        line-height: 1.7 !important;
    }
}

/*
 * Dave's Log dropdown integration v5
 *
 * Remove WriteFreely's light-theme menu surfaces and turn the
 * blog-title trigger and submenu into one coherent dark control.
 */

body#me nav.dropdown-nav,
body#me nav.dropdown-nav > ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body#me nav.dropdown-nav > ul {
    list-style: none !important;
}

body#me nav.dropdown-nav > ul > li {
    position: relative !important;
    box-sizing: border-box !important;
    min-width: 12rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--dave-heading) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

body#me nav.dropdown-nav > ul > li:hover,
body#me nav.dropdown-nav > ul > li:focus-within {
    color: var(--dave-heading) !important;
    background: var(--dave-surface) !important;
    border-color: var(--dave-border) !important;
}

body#me nav.dropdown-nav > ul > li > a.title,
body#me nav.dropdown-nav > ul > li > a.title:link,
body#me nav.dropdown-nav > ul > li > a.title:visited {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 2.75rem !important;
    margin: 0 !important;
    padding: 0.7rem 2.35rem 0.7rem 0.75rem !important;
    color: var(--dave-heading) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

body#me nav.dropdown-nav > ul > li > a.title:hover,
body#me nav.dropdown-nav > ul > li > a.title:focus-visible {
    color: var(--dave-accent) !important;
    background: transparent !important;
}

body#me nav.dropdown-nav > ul > li > a.title::after {
    content: none !important;
}

body#me nav.dropdown-nav > ul > li > img.ic-18dp {
    position: absolute !important;
    z-index: 2 !important;
    top: 1.375rem !important;
    right: 0.72rem !important;
    width: 18px !important;
    height: 18px !important;
    margin: -9px 0 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    filter:
        brightness(0)
        saturate(100%)
        invert(67%)
        sepia(10%)
        saturate(530%)
        hue-rotate(148deg)
        brightness(91%)
        contrast(86%) !important;
    opacity: 0.9 !important;
}

body#me nav.dropdown-nav > ul > li:hover >
    img.ic-18dp,
body#me nav.dropdown-nav > ul > li:focus-within >
    img.ic-18dp {
    filter:
        brightness(0)
        saturate(100%)
        invert(61%)
        sepia(55%)
        saturate(1446%)
        hue-rotate(316deg)
        brightness(107%)
        contrast(96%) !important;
    opacity: 1 !important;
}

body#me nav.dropdown-nav > ul > li > ul {
    box-sizing: border-box !important;
    top: calc(100% + 0.3rem) !important;
    left: -1px !important;
    width: calc(100% + 2px) !important;
    min-width: calc(100% + 2px) !important;
    margin: 0 !important;
    padding: 0.35rem 0 !important;
    color: var(--dave-text) !important;
    background: var(--dave-surface-raised) !important;
    border: 1px solid var(--dave-border) !important;
    border-radius: 4px !important;
    box-shadow: 0 14px 32px rgb(0 0 0 / 42%) !important;
    overflow: hidden !important;
}

body#me nav.dropdown-nav > ul > li > ul > li,
body#me nav.dropdown-nav > ul > li > ul > li:hover,
body#me nav.dropdown-nav > ul > li > ul > li:focus-within {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--dave-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body#me nav.dropdown-nav > ul > li > ul > li > a,
body#me nav.dropdown-nav > ul > li > ul > li > a:link,
body#me nav.dropdown-nav > ul > li > ul > li > a:visited {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.55rem 0.75rem !important;
    color: var(--dave-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

body#me nav.dropdown-nav > ul > li > ul > li > a:hover,
body#me nav.dropdown-nav > ul > li > ul > li > a:focus-visible {
    color: var(--dave-accent) !important;
    background: rgb(250 104 98 / 10%) !important;
    outline: 0 !important;
}

body#me nav.dropdown-nav > ul > li > ul > li > a::after {
    content: none !important;
}

body#me nav.dropdown-nav > ul > li > ul >
    li.separator {
    padding: 0.3rem 0.75rem !important;
}

body#me nav.dropdown-nav > ul > li > ul >
    li.separator hr {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--dave-border) !important;
}

@media (max-width: 640px) {
    body#me nav.dropdown-nav > ul > li {
        min-width: 10.5rem !important;
    }
}

/*
 * Dave's Log public manage menu v6
 *
 * Integrate collection-page nav#manage with the dark Dave theme.
 */

body#collection nav#manage {
    color: var(--dave-muted) !important;
    opacity: 0.92 !important;
}

body#collection nav#manage:hover,
body#collection nav#manage:focus-within {
    opacity: 1 !important;
}

body#collection nav#manage,
body#collection nav#manage > ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body#collection nav#manage > ul > li {
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--dave-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
}

body#collection nav#manage > ul > li:hover,
body#collection nav#manage > ul > li:focus-within,
body#collection nav#manage > ul > li.open {
    background: var(--dave-surface) !important;
    border-color: var(--dave-border) !important;
}

body#collection nav#manage > ul > li > a,
body#collection nav#manage > ul > li > a:link,
body#collection nav#manage > ul > li > a:visited {
    display: block !important;
    box-sizing: border-box !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0.45rem 0.7rem !important;
    color: var(--dave-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

body#collection nav#manage > ul > li > a:hover,
body#collection nav#manage > ul > li > a:focus-visible,
body#collection nav#manage > ul > li.open > a {
    color: var(--dave-accent) !important;
    background: transparent !important;
    outline: 0 !important;
}

body#collection nav#manage a::after {
    content: none !important;
}

body#collection nav#manage > ul > li > ul {
    box-sizing: border-box !important;
    top: calc(100% + 0.3rem) !important;
    left: -1px !important;
    width: auto !important;
    min-width: 12rem !important;
    max-width: 18rem !important;
    margin: 0 !important;
    padding: 0.35rem 0 !important;
    color: var(--dave-text) !important;
    background: var(--dave-surface-raised) !important;
    border: 1px solid var(--dave-border) !important;
    border-radius: 4px !important;
    box-shadow: 0 14px 32px rgb(0 0 0 / 42%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body#collection nav#manage > ul > li:focus-within > ul {
    display: block !important;
}

body#collection nav#manage > ul > li > ul > li,
body#collection nav#manage > ul > li > ul > li:hover,
body#collection nav#manage > ul > li > ul > li:focus-within {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--dave-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body#collection nav#manage > ul > li > ul > li > a,
body#collection nav#manage > ul > li > ul > li > a:link,
body#collection nav#manage > ul > li > ul > li > a:visited {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.55rem 0.75rem !important;
    color: var(--dave-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

body#collection nav#manage > ul > li > ul > li > a:hover,
body#collection nav#manage > ul > li > ul > li > a:focus-visible {
    color: var(--dave-accent) !important;
    background: rgb(250 104 98 / 10%) !important;
    outline: 0 !important;
}

body#collection nav#manage > ul > li > ul >
    li.separator {
    padding: 0.3rem 0.75rem !important;
}

body#collection nav#manage > ul > li > ul >
    li.separator hr {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--dave-border) !important;
}

body#collection nav#manage > ul > li > ul >
    li.menu-heading {
    padding: 0.45rem 0.75rem !important;
    color: var(--dave-muted) !important;
    background: transparent !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

body#collection nav#manage img.ic-18dp {
    margin-right: 0.25rem !important;
    filter:
        brightness(0)
        saturate(100%)
        invert(83%)
        sepia(11%)
        saturate(256%)
        hue-rotate(148deg)
        brightness(92%)
        contrast(87%) !important;
    opacity: 0.8 !important;
}

@media (max-width: 640px) {
    body#collection nav#manage {
        top: 0.75rem !important;
        left: 0.75rem !important;
    }

    body#collection nav#manage > ul > li > ul {
        min-width: 10.5rem !important;
        max-width: calc(100vw - 1.5rem) !important;
    }
}


/*
 * Dave's Log light/dark switcher v7
 */

html[data-dave-theme="dark"] {
    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;
}

html[data-dave-theme] {
    scrollbar-color:
        var(--dave-border)
        var(--dave-background);
}

html[data-dave-theme] body {
    background-color: var(--dave-background) !important;
    color: var(--dave-text) !important;
}

html[data-dave-theme] input,
html[data-dave-theme] textarea,
html[data-dave-theme] select,
html[data-dave-theme] button {
    accent-color: var(--dave-accent);
}

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 / 35%) !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(250 104 98 / 35%) !important;
    outline-offset: 3px !important;
}

button#dave-theme-toggle .dave-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 {
    display: none !important;
}

html[data-dave-theme="light"]
button#dave-theme-toggle
.dave-theme-sun {
    display: none !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 refinement v8
 *
 * Audiowide branding, restrained backend typography, compact tables,
 * themed Ace editor, centred login layout, and legal/contact footer.
 */

@font-face {
    font-family: "Audiowide";
    src: url("/assets/fonts/Audiowide-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

html[data-dave-theme="dark"],
html:not([data-dave-theme]) {
    --dave-brand-glow-near: rgb(250 104 98 / 72%);
    --dave-brand-glow-far: rgb(250 104 98 / 32%);
    --dave-editor-background: #07191f;
    --dave-editor-gutter: #0b222a;
    --dave-editor-active: rgb(250 104 98 / 8%);
    --dave-editor-selection: rgb(250 104 98 / 24%);
    --dave-editor-string: #b7d99c;
    --dave-editor-number: #e8b86e;
}

html[data-dave-theme="light"] {
    --dave-brand-glow-near: rgb(250 104 98 / 48%);
    --dave-brand-glow-far: rgb(250 104 98 / 20%);
    --dave-editor-background: #f5f8f9;
    --dave-editor-gutter: #e6edef;
    --dave-editor-active: rgb(250 104 98 / 8%);
    --dave-editor-selection: rgb(250 104 98 / 20%);
    --dave-editor-string: #3c752c;
    --dave-editor-number: #8a5a12;
}

/* Public, standalone, and logged-out wordmarks. */

body#collection #blog-title a,
body#post > header h1 a,
body#me > header.singleuser nav.dropdown-nav > ul > li > a.title,
body:has(#btn-login) > header h2 a {
    color: var(--dave-heading) !important;
    font-family: "Audiowide", "Orbitron", system-ui, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.035em !important;
    text-shadow:
        0 0 0.16rem var(--dave-brand-glow-near),
        0 0 0.58rem var(--dave-brand-glow-near),
        0 0 1.15rem var(--dave-brand-glow-far) !important;
    background-image: none !important;
}

body#collection #blog-title a:hover,
body#post > header h1 a:hover,
body:has(#btn-login) > header h2 a:hover {
    color: var(--dave-accent-soft) !important;
}

/* Authenticated branding is quieter. */

body#me > header h1 a,
body#me > header h2 a {
    color: var(--dave-heading) !important;
    font-family: "Audiowide", "Orbitron", system-ui, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.025em !important;
    text-shadow:
        0 0 0.35rem var(--dave-brand-glow-far) !important;
    background-image: none !important;
}

/* Authenticated-page typography. */

body#me #official-writing,
body#me #wrapper {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

body#me #official-writing > h1,
body#me #wrapper > h1 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-bottom: 1.1rem !important;
}

body#me #official-writing h2,
body#me #wrapper h2,
body#me #collection-options .option h2 {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
}

body#me #official-writing h3,
body#me #wrapper h3 {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
}

body#me header nav,
body#me header nav a,
body#me header nav span {
    font-size: 0.95rem !important;
}

body#me p,
body#me label,
body#me .option,
body#me .option p {
    line-height: 1.65 !important;
}

/* Compact backend tables. */

body#me table.classy {
    width: 100% !important;
    table-layout: auto !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
}

body#me table.classy th {
    padding: 0.72rem 0.8rem !important;
    font-size: 0.76rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.055em !important;
    vertical-align: middle !important;
}

body#me table.classy td {
    padding: 0.72rem 0.8rem !important;
    font-size: 0.9rem !important;
    vertical-align: middle !important;
}

body#me table.classy td,
body#me table.classy td a {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

body#me table.classy th:last-child,
body#me table.classy td:last-child {
    width: 5.5rem !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* Customize-page controls. */

body#me #collection-options #title {
    min-height: 4.5rem !important;
    padding: 0.9rem 1rem !important;
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
}

body#me #collection-options #description {
    padding: 0.72rem 0.9rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Ace Custom CSS editor. */

body#me #css-editor,
body#me #css-editor.ace_editor,
body#me #css-editor .ace_scroller,
body#me #css-editor .ace_content {
    color: var(--dave-text) !important;
    background: var(--dave-editor-background) !important;
}

body#me #css-editor.ace_editor {
    border: 1px solid var(--dave-border) !important;
    border-radius: 0.28rem !important;
    box-shadow: none !important;
    font-family: ui-monospace, "Cascadia Mono",
        "DejaVu Sans Mono", monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
}

body#me #css-editor .ace_gutter {
    color: var(--dave-muted) !important;
    background: var(--dave-editor-gutter) !important;
    border-right: 1px solid var(--dave-border) !important;
}

body#me #css-editor .ace_gutter-active-line,
body#me #css-editor .ace_marker-layer .ace_active-line {
    background: var(--dave-editor-active) !important;
}

body#me #css-editor .ace_marker-layer .ace_selection {
    background: var(--dave-editor-selection) !important;
}

body#me #css-editor .ace_cursor {
    color: var(--dave-accent) !important;
    border-left-color: var(--dave-accent) !important;
}

body#me #css-editor .ace_keyword,
body#me #css-editor .ace_meta,
body#me #css-editor .ace_support,
body#me #css-editor .ace_constant.ace_language {
    color: var(--dave-accent) !important;
}

body#me #css-editor .ace_string {
    color: var(--dave-editor-string) !important;
}

body#me #css-editor .ace_constant.ace_numeric {
    color: var(--dave-editor-number) !important;
}

body#me #css-editor .ace_comment {
    color: var(--dave-muted) !important;
    font-style: italic !important;
}

body#me #css-editor .ace_identifier,
body#me #css-editor .ace_variable,
body#me #css-editor .ace_text-layer {
    color: var(--dave-text) !important;
}

/* Centred login page. */

body:has(#btn-login) > header {
    width: min(40rem, calc(100% - 2rem)) !important;
    margin: 1.4rem auto 0 !important;
    text-align: center !important;
}

body:has(#btn-login) > header h2 {
    display: block !important;
    margin: 0 !important;
    font-size: 2.15rem !important;
    line-height: 1.25 !important;
}

body:has(#btn-login) #official-writing {
    width: min(40rem, calc(100% - 2rem)) !important;
    margin: 1.8rem auto 0 !important;
    text-align: center !important;
}

body:has(#btn-login) #official-writing h1 {
    margin: 0 0 1.4rem !important;
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
}

body:has(#btn-login) #official-writing form {
    width: min(22.5rem, 100%) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body:has(#btn-login) #official-writing input[type="text"],
body:has(#btn-login) #official-writing input[type="password"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 0.68rem 0.8rem !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
}

body:has(#btn-login) #btn-login {
    min-height: 44px !important;
    padding: 0.58rem 0.95rem !important;
    font-size: 1rem !important;
}

/* Legal/contact footer. */

body footer .dave-legal {
    max-width: 40rem;
    margin: 1.35rem auto 2.4rem !important;
    color: var(--dave-muted) !important;
    font-size: 0.82rem !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

body footer .dave-legal a {
    color: var(--dave-accent) !important;
}

@media (max-width: 640px) {
    body#me #official-writing > h1,
    body#me #wrapper > h1 {
        font-size: 1.55rem !important;
    }

    body#me table.classy th {
        padding: 0.6rem !important;
        font-size: 0.72rem !important;
    }

    body#me table.classy td {
        padding: 0.65rem 0.6rem !important;
        font-size: 0.84rem !important;
    }

    body#me #collection-options #title {
        font-size: 1.4rem !important;
    }

    body:has(#btn-login) > header h2 {
        font-size: 1.8rem !important;
    }

    body:has(#btn-login) #official-writing h1 {
        font-size: 1.5rem !important;
    }
}

/*
 * Dave's Log post-header visibility v8.1
 *
 * Keep the compact article utility header while allowing the
 * Audiowide site wordmark to display at full intensity.
 */

body#post > header {
    opacity: 1 !important;
}

body#post > header nav {
    opacity: 0.52 !important;
    transition: opacity 160ms ease;
}

body#post > header:hover nav,
body#post > header:focus-within nav {
    opacity: 1 !important;
}

/*
 * Dave's Log unified wordmark and logout menu v8.2
 *
 * The public article and authenticated management headers share
 * the same Audiowide branding. The management wordmark keeps a
 * compact contextual size so that it does not crowd the tabs.
 */

body#me > header.singleuser
nav.dropdown-nav > ul > li > a.title,
body#me > header.singleuser
nav.dropdown-nav > ul > li > a.title:link,
body#me > header.singleuser
nav.dropdown-nav > ul > li > a.title:visited {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    white-space: nowrap;
}

body#me > header.singleuser
nav.dropdown-nav > ul > li > a.title:hover,
body#me > header.singleuser
nav.dropdown-nav > ul > li > a.title:focus-visible {
    color: var(--dave-heading) !important;
    filter: brightness(1.1);
}

@media (max-width: 640px) {
    body#me > header.singleuser
    nav.dropdown-nav > ul > li > a.title,
    body#me > header.singleuser
    nav.dropdown-nav > ul > li > a.title:link,
    body#me > header.singleuser
    nav.dropdown-nav > ul > li > a.title:visited {
        font-size: 1.05rem !important;
    }
}

/*
 * Dave's Log admin header alignment v8.2.1
 *
 * Audiowide's visual baseline sits higher than the Orbitron tabs.
 * Move the complete desktop dropdown trigger down optically while
 * leaving the mobile navigation layout unchanged.
 */

@media (min-width: 641px) {
    body#me > header.singleuser
    nav#user-nav > nav.dropdown-nav {
        transform: translateY(0.45rem);
    }
}


/*
 * Dave's Log admin header alignment v8.2.2
 *
 * The dropdown is an inline box, so CSS transforms do not move it
 * reliably. Relative positioning provides the intended optical
 * baseline alignment without changing document flow.
 */

@media (min-width: 641px) {
    body#me > header.singleuser
    nav#user-nav > nav.dropdown-nav {
        transform: none !important;
        position: relative !important;
        top: 0.70rem !important;
    }
}


/*
 * Dave's Log continuous admin dropdown v8.2.3
 *
 * Remove the hover dead zone between the wordmark trigger and its
 * submenu. The submenu remains visually distinct through its border
 * and internal padding, while pointer movement is now continuous.
 */

@media (min-width: 641px) {
    body#me > header.singleuser
    nav.dropdown-nav > ul > li > ul {
        top: 100% !important;
    }
}


/*
 * 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 light-mode refinement v8.3.2
 *
 * Improve light-background contrast, remove the dark article hover
 * panel, make wrapped heading links readable, and restrain the
 * light-mode wordmark glow. Dark mode remains unchanged.
 */

html[data-dave-theme="light"] {
    --dave-accent: #c43d38;
    --dave-accent-soft: #a83232;
    --dave-accent-visited: #82423f;
    --dave-brand-glow-near: rgb(196 61 56 / 24%);
    --dave-brand-glow-far: rgb(196 61 56 / 10%);
}

html[data-dave-theme="light"]
body#collection #wrapper article,
html[data-dave-theme="light"]
body#collection #wrapper article:hover,
html[data-dave-theme="light"]
body#collection #wrapper article:focus-within,
html[data-dave-theme="light"]
body#subpage #wrapper article,
html[data-dave-theme="light"]
body#subpage #wrapper article:hover,
html[data-dave-theme="light"]
body#subpage #wrapper article:focus-within {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

body#collection #wrapper article h2,
body#collection #wrapper article h2 a,
body#subpage #wrapper article h2,
body#subpage #wrapper article h2 a,
body#post article#post-body h2#title {
    line-height: 1.35 !important;
}

body#collection #wrapper article h2 a,
body#collection #wrapper article h2 a:link,
body#collection #wrapper article h2 a:visited,
body#subpage #wrapper article h2 a,
body#subpage #wrapper article h2 a:link,
body#subpage #wrapper article h2 a:visited {
    padding-bottom: 0 !important;
    background-image: none !important;
    text-decoration-line: underline !important;
    text-decoration-style: dotted !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 0.22em !important;
    text-decoration-skip-ink: auto !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body#collection #wrapper article h2 a::after,
body#subpage #wrapper article h2 a::after {
    content: none !important;
    display: none !important;
}

html[data-dave-theme="light"]
body#collection #blog-title a,
html[data-dave-theme="light"]
body#post > header h1 a,
html[data-dave-theme="light"]
body#me > header.singleuser
nav.dropdown-nav > ul > li > a.title,
html[data-dave-theme="light"]
body:has(#btn-login) > header h2 a {
    text-shadow:
        0 0 0.18rem var(--dave-brand-glow-near),
        0 0 0.55rem var(--dave-brand-glow-far)
        !important;
}