/* =========================================================
   theme: 98  (windows 98, teal desktop)

   framework: 98.css (themes/lib/98.css) - windows, title bar, buttons, and
   the pixel font. it brings its whole look with it, so almost all that is
   left here is which colours the base tokens get.

   the colours are the original system colours: silver c0c0c0, desktop
   teal 008080, title bar navy. they stand here as plain numbers and not as
   tokens, because 98.css resolved its own away in the minified build.
   ========================================================= */

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

    /* absolute path even though the file sits right next to this one: the
       browser resolves a relative url() inside a custom property against the
       file where var() is USED, and that is feed.css at the root.

       the base colour stays the system teal even though the photo covers it.
       it is what shows while the 46 kb are loading and what is left if they
       never arrive - and teal IS the windows 98 desktop, so the theme keeps
       its identity either way.

       fixed, so the desktop stays put while the windows scroll over it */
    --surface: url("/feed/themes/98/desktop.webp");
    --base-color: #008080;
    --surface-size: cover;
    --surface-repeat: no-repeat;
    --surface-attach: fixed;

    --ink: #222;
    --muted: #6a6a6a;
    --link: #0000ee;

    /* title, back link and the credit lines lie on the desktop itself. one
       hard shadow was enough over the plain teal, but the wallpaper is a
       bright sky at the top and a dark logo further right - white survives
       neither on its own. so: a hard outline in all four directions for the
       edge, plus a soft dark glow that carries it over the light sky */
    --head-ink: #fff;
    --head-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
        0 2px 6px rgba(0, 0, 0, 0.65);

    --paper: #c0c0c0;
    --paper-clear: rgba(192, 192, 192, 0);

    --block: #fff;
    --block-edge: #808080;

    --rule: #808080;

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

    --top-gap: 20px;
}

/* the classic teal desktop. --surface is an image, the surface itself is
   a colour here - which is why it stands separately */
[data-theme="98"] body {
    font-size: 12px;
    line-height: 1.5;
    padding: var(--top-gap) 20px 60px;
}

/* 98.css puts the window padding on .window/.window-body. so our .note
   needs none, otherwise it would be doubled up. */
[data-theme="98"] .note {
    padding: 0;
    margin-bottom: 40px;
}
[data-theme="98"] .window-body {
    margin: 14px 16px;
}

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

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

/* the blocks: everything sunken, the way 98 drew every text field */
[data-theme="98"] blockquote,
[data-theme="98"] .callout,
[data-theme="98"] pre,
[data-theme="98"] table {
    border: 0;
    box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
[data-theme="98"] blockquote {
    border-left: 0;
}
[data-theme="98"] .callout {
    background: #c0c0c0;
}
[data-theme="98"] .bookmark {
    /* a bookmark is something to press - so, a 98 button */
    border: 0;
    background: #c0c0c0;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
[data-theme="98"] .bookmark:active {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
[data-theme="98"] th {
    background: #c0c0c0;
}
[data-theme="98"] hr {
    border: 0;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

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

/* ---------- taskbar: silver with a light edge ---------- */
[data-theme="98"] .credit[data-for="98"] {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    margin: 0;
    padding: 6px 10px;
    background: #c0c0c0;
    box-shadow: inset 0 1px 0 #fff, inset 0 2px 0 #dfdfdf;
    font-size: 11px;
    color: #222;
}