/* =========================================================
   theme: xp  (windows xp, luna blue)

   framework: XP.css (themes/lib/XP.css) - windows, the luna title bar with
   the blue gradient, the rounded buttons. it brings its look with it, so
   all that stands here is the tokens and whatever XP.css does not know.

   original colours: window surface ece9d8, desktop blue 3a6ea5 (that is
   the xp solid colour "blue", not the photo), luna blue 0050ee.
   ========================================================= */

[data-theme="xp"] {
    --font: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;

    /* bliss. absolute path - see the note in 98/theme.css.
       the base colour stays the xp solid blue: that is the desktop colour xp
       shipped alongside the photograph, so it is the right thing to show
       while the image loads or if it is gone */
    --surface: url("/feed/themes/xp/desktop.webp");
    --base-color: #3a6ea5;
    --surface-size: cover;
    --surface-repeat: no-repeat;
    --surface-attach: fixed;

    --ink: #222;
    --muted: #6a6a6a;
    --link: #0033aa;

    --head-ink: #fff;
    --head-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);

    --paper: #ece9d8;
    --paper-clear: rgba(236, 233, 216, 0);

    --block: #fff;
    --block-edge: #919b9c;

    --rule: #d4d0c8;

    --radius: 0;
    --radius-lg: 0;

    --top-gap: 20px;
}

[data-theme="xp"] body {
    font-size: 12px;
    line-height: 1.5;
    padding: var(--top-gap) 20px 60px;
}

[data-theme="xp"] .note {
    padding: 0;
    margin-bottom: 40px;
}
[data-theme="xp"] .window-body {
    margin: 14px 16px;
}

/* the topbar is itself a window of the framework (#ece9d8) - the back link
   must not keep the light type from the desktop in there */
[data-theme="xp"] .topbar-inner {
    align-items: center;
    padding: 4px 10px;
}
[data-theme="xp"] .topbar .back a {
    color: #0a3c7d;
    text-shadow: none;
}

[data-theme="xp"] .title-bar-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* xp softened the hard 98 edges: a thin grey line instead of a double
   bevel, and the surfaces are white instead of silver */
[data-theme="xp"] blockquote,
[data-theme="xp"] .callout,
[data-theme="xp"] pre,
[data-theme="xp"] table {
    border: 1px solid var(--block-edge);
}
[data-theme="xp"] blockquote {
    border-left: 3px solid #0050ee;
}

/* XP.css puts "Perfect DOS VGA 437 Win" on pre and pre * and ships the woff
   with it - but without a licence file, unlike the two ms sans serif fonts in
   the same package, which come with theirs. an undocumented font is exactly
   what got the aero wallpaper thrown out twice, so it is not vendored here.
   without the file the family resolves to nothing and the browser falls back
   to its default font - which for code is the wrong one, and it costs two 404s
   per page load on top. so the family is named here instead.
   the size too: XP.css sets 1rem on pre and thereby overrides feed.css */
[data-theme="xp"] pre,
[data-theme="xp"] pre * {
    font-family: monospace;
}
[data-theme="xp"] pre {
    font-size: 0.8rem;
}
[data-theme="xp"] .callout {
    background: #ece9d8;
}
[data-theme="xp"] .callout .callout-kind {
    color: #0a3c7d;
}
[data-theme="xp"] .bookmark {
    /* the xp button: light gradient, rounded corners, green focus edge */
    border: 1px solid #003c74;
    border-radius: 3px;
    background: linear-gradient(#fff, #ecebe5 86%, #d8d0c4);
}
[data-theme="xp"] .bookmark:hover {
    background: linear-gradient(#fff, #f3f3ec 86%, #dedbcf);
}
[data-theme="xp"] .bookmark-host {
    color: #0a3c7d;
}
[data-theme="xp"] th {
    background: #ece9d8;
}
[data-theme="xp"] hr {
    border-top: 1px solid var(--block-edge);
}

/* ---------- theme picker: real xp buttons, selected = focus outline ---------- */
[data-theme="xp"] .theme-picker button.selected {
    font-weight: bold;
    outline: 1px dotted #000;
    outline-offset: -4px;
}

/* ---------- taskbar: the luna gradient ---------- */
[data-theme="xp"] .credit[data-for="xp"] {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    margin: 0;
    padding: 6px 10px;
    border-top: 1px solid #1042a0;
    background: linear-gradient(#3168d5 0%, #4993dd 8%, #2e69d2 40%, #2e5fd0 88%, #2358c8 93%, #1c50c0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    font-size: 11px;
    color: #e8f0ff;
}
[data-theme="xp"] .credit a {
    color: #cfe2ff;
}