/**
 * 98.css - Corrected, Responsive, and Self-Contained
 *
 * This version merges the original 98.css with a responsive refactor.
 * - It uses relative units (rem) and media queries for mobile-friendliness.
 * - It restores all UI components from the original library.
 * - The non-standard `svg-load()` function has been replaced with inline
 * Data URIs, so this file works without any build tools.
 *
 * Original Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
 * https://github.com/jdan/98.css/blob/main/LICENSE
 */

:root {
    /* Color (unchanged) */
    --text-color: #222222;
    --surface: #c0c0c0;
    --button-highlight: #ffffff;
    --button-face: #dfdfdf;
    --button-shadow: #808080;
    --window-frame: #0a0a0a;
    --dialog-blue: #000080;
    --dialog-blue-light: #1084d0;
    --dialog-gray: #808080;
    --dialog-gray-light: #b5b5b5;
    --link-blue: #0000ff;

    --element-spacing: 0.5rem;
    --grouped-button-spacing: 0.25rem;
    --grouped-element-spacing: 0.375rem;
    --radio-width: 0.75rem;
    --checkbox-width: 0.8125rem;
    --radio-label-spacing: 0.375rem;
    --range-track-height: 0.25rem;
    --range-spacing: 0.625rem;
    --border-width: 1px;

    /* Detailed computations for radio/checkbox (using rem) */
    --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
    --radio-total-width: var(--radio-total-width-precalc);
    --radio-left: calc(-1 * var(--radio-total-width-precalc));
    --radio-dot-width: 0.25rem;
    --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
    --radio-dot-left: calc(-1 * var(--radio-total-width) + var(--radio-width) / 2 - var(--radio-dot-width) / 2);
    --checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);
    --checkbox-total-width: var(--checkbox-total-width-precalc);
    --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
    --checkmark-width: 0.4375rem;
    --checkmark-left: 0.1875rem;

    /* Borders */
    --border-raised-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight);
    --border-raised-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face);
    --border-sunken-outer: inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame);
    --border-sunken-inner: inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);
    --default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
    --default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
    --default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
    --default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);
    --border-window-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face);
    --border-window-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
    --border-field: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);
    --border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
    --border-tab: inset -1px 0 var(--window-frame), inset 1px 1px var(--button-face), inset -2px 0 var(--button-shadow), inset 2px 2px var(--button-highlight);

    /* SVG Icons (as Data URIs) */
    --icon-close: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0H2V1H3V2H4V3H5V2H6V1H7V0H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7V6H6V5H5V4H4V5H3V6H2V7H1V6H2V5H3V4H4V3H3V2H2V1H1V0Z' fill='black'/%3E%3C/svg%3E");
    --icon-minimize: url("data:image/svg+xml,%3Csvg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H8V1H0V0Z' fill='black'/%3E%3C/svg%3E");
    --icon-maximize: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H9V1H0V0Z' fill='black'/%3E%3Cpath d='M0 1H1V8H8V1H9V8H0V1Z' fill='black'/%3E%3Cpath d='M1 8H8V9H1V8Z' fill='black'/%3E%3C/svg%3E");
    --icon-button-down: url("data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H7L3.5 4L0 0Z' fill='black'/%3E%3C/svg%3E");
    --icon-checkmark: url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3H1V4H2V5H3V6H4V5H5V4H6V3H7V4H6V5H5V6H4V7H3V6H2V5H1V4H0V3Z' fill='black'/%3E%3C/svg%3E");
    --icon-radio-dot: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1H1V0H2V1H3V2H4V3H2V4H1V3H0V1Z' fill='black'/%3E%3C/svg%3E");
    --group-box-border-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 0V1H1V2H0V4H1V5H2V6H4V5H5V4H6V2H5V1H4V0H2Z' fill='%23c0c0c0'/%3E%3Cpath d='M1 1V2H2V1H1Z' fill='white'/%3E%3Cpath d='M4 1H5V2H4V1Z' fill='white'/%3E%3Cpath d='M1 4H2V5H1V4Z' fill='white'/%3E%3Cpath d='M4 4H5V5H4V4Z' fill='white'/%3E%3Cpath d='M2 1H4V2H2V1Z' fill='%23808080'/%3E%3Cpath d='M1 2H2V4H1V2Z' fill='%23808080'/%3E%3Cpath d='M4 2H5V4H4V2Z' fill='%23808080'/%3E%3Cpath d='M2 4H4V5H2V4Z' fill='%23808080'/%3E%3C/svg%3E");
    --scrollbar-track-background: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H1V1H0V0Z' fill='%23C0C0C0'/%3E%3Cpath d='M1 1H2V2H1V1Z' fill='%23C0C0C0'/%3E%3Cpath d='M1 0H2V1H1V0Z' fill='white'/%3E%3Cpath d='M0 1H1V2H0V1Z' fill='white'/%3E%3C/svg%3E");
    --icon-scrollbar-up: url("data:image/svg+xml,%3Csvg width='6' height='4' viewBox='0 0 6 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0L0 4H6L3 0Z' fill='black'/%3E%3C/svg%3E");
    --icon-scrollbar-down: url("data:image/svg+xml,%3Csvg width='6' height='4' viewBox='0 0 6 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4L0 0H6L3 4Z' fill='black'/%3E%3C/svg%3E");
    --icon-scrollbar-left: url("data:image/svg+xml,%3Csvg width='4' height='6' viewBox='0 0 4 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3L4 0V6L0 3Z' fill='black'/%3E%3C/svg%3E");
    --icon-scrollbar-right: url("data:image/svg+xml,%3Csvg width='4' height='6' viewBox='0 0 4 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 3L0 0V6L4 3Z' fill='black'/%3E%3C/svg%3E");
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url("https://unpkg.com/98.css@0.1.16/src/font/ms_sans_serif.woff") format("woff"), url("https://unpkg.com/98.css@0.1.16/src/font/ms_sans_serif.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url("https://unpkg.com/98.css@0.1.16/src/font/ms_sans_serif_bold.woff") format("woff"), url("https://unpkg.com/98.css@0.1.16/src/font/ms_sans_serif_bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
}

html {
    font-size: 100%;
}

blockquote {
    margin: 1rem 0;
    padding: 1rem 2rem;
    border-left: 1px solid #808080;
}

.example {
    margin: 1rem 0;
    padding: 1rem 2rem;
    border-left: 1px solid #808080;
}

footer {
    margin: 1rem;
}

body {
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    color: var(--text-color);
    background: #008080; /* Classic Win98 teal background */
    padding: 1rem;
}

button,
label,
input,
legend,
textarea,
select,
option,
table,
ul.tree-view,
.window,
.title-bar,
li[role="tab"] {
    /*font-family: "Pixelated MS Sans Serif", Arial, sans-serif;*/
    /*-webkit-font-smoothing: none;*/
    /*font-size: 0.6875rem; !* 11px *!*/
}

h1, h2, h3, h4 {
    color: darkblue;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

u {
    text-decoration: none;
    border-bottom: 0.5px solid #222222;
}

button,
input[type="submit"],
input[type="reset"] {
    box-sizing: border-box;
    border: none;
    color: transparent;
    text-shadow: 0 0 var(--text-color);
    background: var(--surface);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    border-radius: 0;
    min-width: 4.6875rem;
    min-height: 1.4375rem;
    padding: 0 0.75rem;
}

button.default,
input[type="submit"].default,
input[type="reset"].default {
    box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
}

button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active {
    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
    text-shadow: 1px 1px var(--text-color);
}

button.default:not(:disabled):active,
input[type="submit"].default:not(:disabled):active,
input[type="reset"].default:not(:disabled):active {
    box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
}

button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
    outline: 1px dotted #000000;
    outline-offset: -4px;
}

button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
    border: 0;
}

:disabled,
:disabled + label,
input[readonly],
input[readonly] + label {
    color: var(--button-shadow);
}

button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
:disabled + label {
    text-shadow: 1px 1px 0 var(--button-highlight);
}

.window {
    box-shadow: var(--border-window-outer), var(--border-window-inner);
    background: var(--surface);
    padding: 3px;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
}

.title-bar {
    background: linear-gradient(90deg, var(--dialog-blue), var(--dialog-blue-light));
    padding: 3px 2px 3px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-bar.inactive {
    background: linear-gradient(90deg, var(--dialog-gray), var(--dialog-gray-light));
}

.title-bar-text {
    font-weight: bold;
    color: white;
    letter-spacing: 0;
    margin-right: 1.5rem;
}

.title-bar-controls {
    display: flex;
}

.title-bar-controls button {
    padding: 0;
    display: block;
    min-width: 1rem;
    min-height: 0.875rem;
    background-repeat: no-repeat;
}

.title-bar-controls button:focus {
    outline: none;
}

.title-bar-controls button[aria-label="Minimize"] {
    background-image: var(--icon-minimize);
    background-position: bottom 3px left 4px;
}

.title-bar-controls button[aria-label="Maximize"] {
    background-image: var(--icon-maximize);
    background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Close"] {
    margin-left: 2px;
    background-image: var(--icon-close);
    background-position: top 2px left 3px;
}

.status-bar {
    margin-bottom: 1px;
    margin-top: 1rem;
    display: flex;
    gap: 1px;
}

.status-bar-field {
    box-shadow: var(--border-status-field);
    flex-grow: 1;
    padding: 2px 3px;
    margin: 0;
}

.window-body {
    margin: var(--element-spacing);
}

fieldset {
    border-image: var(--group-box-border-image) 2;
    padding: calc(2 * var(--border-width) + var(--element-spacing));
    padding-block-start: var(--element-spacing);
    margin: 0;
}

legend {
    background: var(--surface);
}

.field-row, .field-row-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.field-row > * + *, .field-row-stacked * + * {
    margin-top: var(--grouped-element-spacing);
}

label {
    display: inline-flex;
    align-items: center;
    user-select: none;
}

input[type="radio"],
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    background: 0;
    position: fixed;
    opacity: 0;
    border: none;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
    line-height: 0.8125rem;
    position: relative;
}

input[type="radio"] + label {
    margin-left: var(--radio-total-width);
}

input[type="radio"] + label::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--radio-left);
    display: inline-block;
    width: var(--radio-width);
    height: var(--radio-width);
    margin-right: var(--radio-label-spacing);
    background: var(--button-highlight);
    border-radius: 50%;
    box-shadow: var(--border-sunken-inner);
}

input[type="radio"]:checked + label::after {
    content: "";
    display: block;
    width: var(--radio-dot-width);
    height: var(--radio-dot-width);
    top: var(--radio-dot-top);
    left: var(--radio-dot-left);
    position: absolute;
    background-image: var(--icon-radio-dot);
}

input[type="checkbox"] + label {
    margin-left: var(--checkbox-total-width);
}

input[type="checkbox"] + label::before {
    content: "";
    position: absolute;
    left: var(--checkbox-left);
    display: inline-block;
    width: var(--checkbox-width);
    height: var(--checkbox-width);
    background: var(--button-highlight);
    box-shadow: var(--border-field);
    margin-right: var(--radio-label-spacing);
}

input[type="checkbox"]:checked + label::after {
    content: "";
    display: block;
    width: var(--checkmark-width);
    height: var(--checkmark-width);
    position: absolute;
    left: calc(var(--checkbox-left) + var(--checkmark-left));
    top: 3px;
    background-image: var(--icon-checkmark);
}

input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
    outline: 1px dotted #000000;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
    padding: 3px 4px;
    border: none;
    box-shadow: var(--border-field);
    background-color: var(--button-highlight);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    width: 100%;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
select {
    height: 1.3125rem;
}

select {
    padding-right: 2rem;
    background-image: var(--icon-button-down);
    background-position: top 2px right 2px;
    background-repeat: no-repeat;
}

select:focus {
    color: var(--button-highlight);
    background-color: var(--dialog-blue);
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type="range"]:focus {
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.3125rem;
    width: 0.6875rem;
    background: var(--surface);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    transform: translateY(-0.5rem);
}
input[type="range"]::-moz-range-thumb {
    height: 1.3125rem;
    width: 0.6875rem;
    background: var(--surface);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    border: 0;
    border-radius: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    box-shadow: var(--border-sunken-inner);
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px;
    box-shadow: var(--border-sunken-inner);
}

.table-container {
    overflow-x: auto;
    box-shadow: var(--border-field);
}

table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    background-color: #fff;
}

table > thead > tr > * {
    position: sticky;
    top: 0;
    height: 1.0625rem;
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    background: var(--surface);
    box-sizing: border-box;
    font-weight: normal;
    padding: 0 var(--grouped-element-spacing);
}

table > tbody > tr > * {
    padding: 0 var(--grouped-element-spacing);
    height: 0.875rem;
}

table.interactive > tbody > tr {
    cursor: pointer;
}

table > tbody > tr.highlighted {
    color: #fff;
    background-color: var(--dialog-blue);
}

pre {
    display: block;
    background: var(--button-highlight);
    box-shadow: var(--border-field);
    padding: 0.75rem 0.5rem;
    margin: 0;
    overflow-x: auto;
}

code, code * {
    font-family: monospace;
    /*-moz-osx-font-smoothing: initial;*/
    /*-webkit-font-smoothing: initial;*/
}

ul.tree-view {
    display: block;
    background: var(--button-highlight);
    box-shadow: var(--border-field);
    padding: 0.375rem;
    margin: 0;
}
ul.tree-view li { list-style-type: none; }
ul.tree-view ul {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px dotted #808080;
}
ul.tree-view a { text-decoration: none; color: #000; }
ul.tree-view a:focus { background-color: var(--dialog-blue); color: var(--button-highlight); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 1rem;  }
::-webkit-scrollbar:horizontal { height: 1.0625rem; }
::-webkit-scrollbar-corner { background: var(--button-face); }
::-webkit-scrollbar-track { background-image: var(--scrollbar-track-background); }
::-webkit-scrollbar-thumb {
    background-color: var(--button-face);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}
::-webkit-scrollbar-button:vertical:start {
    height: 1.0625rem;
    background-image: var(--icon-scrollbar-up);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:vertical:end {
    height: 1.0625rem;
    background-image: var(--icon-scrollbar-down);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:horizontal:start {
    width: 1rem;
    background-image: var(--icon-scrollbar-left);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:horizontal:end {
    width: 1rem;
    background-image: var(--icon-scrollbar-right);
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Media Queries for Larger Screens --- */

@media (min-width: 37.5em) {
    .window {
        margin: 2rem auto;
    }

    .field-row {
        flex-direction: row;
        align-items: center;
    }

    .field-row > * + * {
        margin-top: 0;
        margin-left: var(--grouped-element-spacing);
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        width: auto;
    }
}