/* win98.css — classless Windows 98 components */

/* Section = Win98 window */
section {
    background: var(--w98-bg);
    box-shadow: inset 1px 1px 0 var(--w98-white),
    inset -1px -1px 0 #000,
    inset 2px 2px 0 var(--w98-shadow-light),
    inset -2px -2px 0 var(--w98-shadow-dark);
    padding: 3px;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: var(--w98-text);
    margin-bottom: 16px;
}

/* Headings inside section = Win98 title bar */
section > h1,
section > h2,
section > h3,
section > h4,
section > h5,
section > h6 {
    margin: 0 0 3px;
    padding: 3px 4px;
    background: linear-gradient(90deg, #000080, #1084d0);
    color: var(--w98-title-text);
    font-size: 13px;
    font-weight: bold;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
    line-height: 1.4;
}

/* Link inside title bar — inherit style, pointer on hover */
section > h1 a,
section > h2 a,
section > h3 a,
section > h4 a,
section > h5 a,
section > h6 a {
    color: inherit;
    text-decoration: none;
    text-shadow: inherit;
    cursor: pointer;
}

section > h1 a:hover,
section > h2 a:hover,
section > h3 a:hover,
section > h4 a:hover,
section > h5 a:hover,
section > h6 a:hover {
    text-decoration: underline;
}

/* Div inside section — padded content area */
section > div {
    margin: 2px 4px;
    padding: 0;
    line-height: 1.4;
}

/* Paragraph inside section — compact Win98 label text */
section > p {
    margin: 2px 4px;
    padding: 0;
    line-height: 1.4;
    white-space: break-spaces;
}

section > section > p {
    margin-bottom: 16px;
}

/* Headings inside sunken pane — gradient fades to transparent */
section > section > h1,
section > section > h2,
section > section > h3,
section > section > h4,
section > section > h5,
section > section > h6 {
    background: linear-gradient(90deg, #000080, transparent 60%);
}

section img {
    max-width: 100%;
}

/* Nested section = Win98 sunken content pane (Explorer white area) */
section > section {
    background: var(--w98-white);
    box-shadow: inset 1px 1px 0 var(--w98-shadow-dark),
    inset -1px -1px 0 var(--w98-white),
    inset 2px 2px 0 #000,
    inset -2px -2px 0 var(--w98-shadow-light);
    padding: 4px;
    margin: 0;
    overflow: auto;
}

/* Button — Win98 raised pushbutton */
button {
    background: var(--w98-bg);
    color: var(--w98-text);
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    border: none;
    border-radius: 0;
    padding: 4px 16px;
    cursor: pointer;
    box-shadow: inset 1px 1px 0 var(--w98-white),
    inset -1px -1px 0 #000,
    inset 2px 2px 0 var(--w98-shadow-light),
    inset -2px -2px 0 var(--w98-shadow-dark);
    min-width: 75px;
}

button:active {
    box-shadow: inset 1px 1px 0 #000,
    inset -1px -1px 0 var(--w98-white),
    inset 2px 2px 0 var(--w98-shadow-dark),
    inset -2px -2px 0 var(--w98-shadow-light);
    padding: 5px 15px 3px 17px;
}

button:focus-visible {
    outline: 1px dotted var(--w98-text);
    outline-offset: -4px;
}

button:disabled {
    color: var(--w98-shadow-dark);
    text-shadow: 1px 1px 0 var(--w98-white);
    cursor: default;
}

/* Label — Win98 form field wrapper */
label {
    display: block;
    margin-bottom: 8px;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: var(--w98-text);
    line-height: 1.4;
}

/* Input inside label — Win98 sunken text field */
label > input,
label > textarea,
label > select {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 3px 4px;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: var(--w98-text);
    background: var(--w98-white);
    border: none;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--w98-shadow-dark),
    inset -1px -1px 0 var(--w98-white),
    inset 2px 2px 0 #000,
    inset -2px -2px 0 var(--w98-shadow-light);
    outline: none;
}

label > input:focus,
label > textarea:focus,
label > select:focus {
    outline: none;
}

label > textarea {
    resize: vertical;
    min-height: 540px;
}

label > select {
    cursor: pointer;
    appearance: auto;
}

/* Checkbox / radio — inline, no sunken box */
label > input[type="checkbox"],
label > input[type="radio"] {
    display: inline;
    width: auto;
    box-shadow: none;
    margin: 0 4px 0 0;
    vertical-align: middle;
}

/* HR inside section — Win98 etched divider */
section > hr {
    border: none;
    height: 2px;
    background: none;
    box-shadow: 0 0 0 0;
    border-top: 1px solid var(--w98-shadow-dark);
    border-bottom: 1px solid var(--w98-white);
    margin: 6px 4px;
}

/* HR inside sunken pane — lighter etch on white */
section > section > hr {
    border-top-color: var(--w98-shadow-light);
    border-bottom-color: var(--w98-white);
}

/* Disabled input */
label > input:disabled,
label > textarea:disabled,
label > select:disabled {
    background: var(--w98-bg);
    color: var(--w98-shadow-dark);
    cursor: default;
}

/* Pagination — Win98 toolbar-style page nav */
nav.pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: var(--w98-text);
    margin-bottom: 16px;
}

nav.pagination a,
nav.pagination span {
    display: inline-block;
    padding: 4px 8px;
    min-width: 28px;
    text-align: center;
    text-decoration: none;
    color: var(--w98-text);
    background: var(--w98-bg);
    box-shadow: inset 1px 1px 0 var(--w98-white),
    inset -1px -1px 0 #000,
    inset 2px 2px 0 var(--w98-shadow-light),
    inset -2px -2px 0 var(--w98-shadow-dark);
    cursor: pointer;
}

nav.pagination a:hover {
    background: var(--w98-highlight);
    color: var(--w98-highlight-text);
}

nav.pagination a:active {
    box-shadow: inset 1px 1px 0 #000,
    inset -1px -1px 0 var(--w98-white),
    inset 2px 2px 0 var(--w98-shadow-dark),
    inset -2px -2px 0 var(--w98-shadow-light);
    padding: 5px 7px 3px 9px;
}

/* Current page — sunken active state */
nav.pagination .current {
    background: var(--w98-white);
    box-shadow: inset 1px 1px 0 var(--w98-shadow-dark),
    inset -1px -1px 0 var(--w98-white),
    inset 2px 2px 0 #000,
    inset -2px -2px 0 var(--w98-shadow-light);
    font-weight: bold;
    cursor: default;
}

/* Taskbar clock — sunken tray, pushed to far right */
.taskbar-clock {
    margin-left: auto;
    padding: 4px 8px;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: var(--w98-text);
    box-shadow: inset 1px 1px 0 var(--w98-shadow-dark),
    inset -1px -1px 0 var(--w98-white);
}

/* ── Taskbar ── */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 9999;
    background: var(--w98-bg);
    box-shadow: inset 0 1px 0 var(--w98-white),
    inset 0 2px 0 var(--w98-shadow-light);
    display: flex;
    align-items: center;
    padding: 2px 4px;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
}

/* Start button */
.start-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin: 0;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: var(--w98-text);
    background: var(--w98-bg);
    cursor: pointer;
    box-shadow: inset 1px 1px 0 var(--w98-white),
    inset -1px -1px 0 #000,
    inset 2px 2px 0 var(--w98-shadow-light),
    inset -2px -2px 0 var(--w98-shadow-dark);
    line-height: 20px;
    user-select: none;
}

#start-toggle:checked ~ .start-button {
    box-shadow: inset 1px 1px 0 #000,
    inset -1px -1px 0 var(--w98-white),
    inset 2px 2px 0 var(--w98-shadow-dark),
    inset -2px -2px 0 var(--w98-shadow-light);
    padding: 3px 7px 1px 9px;
}

/* Start menu — hidden by default */
.start-menu {
    display: none;
    position: absolute;
    bottom: 40px;
    left: 4px;
    background: var(--w98-bg);
    box-shadow: inset 1px 1px 0 var(--w98-white),
    inset -1px -1px 0 #000,
    inset 2px 2px 0 var(--w98-shadow-light),
    inset -2px -2px 0 var(--w98-shadow-dark);
    min-width: 200px;
    flex-direction: row;
    padding: 3px;
}

#start-toggle:checked ~ .start-menu {
    display: flex;
}

/* Navy vertical stripe */
.start-menu-stripe {
    width: 24px;
    background: linear-gradient(0deg, #000080, #1084d0);
    color: var(--w98-title-text);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0;
    flex-shrink: 0;
}

/* Menu items */
.start-menu-items {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2px 0;
}

.start-menu-items > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 24px 6px 8px;
    color: var(--w98-text);
    text-decoration: none;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    white-space: nowrap;
    position: relative;
}

.start-menu-items > a:hover {
    background: var(--w98-highlight);
    color: var(--w98-highlight-text);
}

.start-menu-items > a > span {
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

/* Separator inside start menu */
.start-menu-items > hr {
    border: none;
    border-top: 1px solid var(--w98-shadow-dark);
    border-bottom: 1px solid var(--w98-white);
    margin: 3px 4px;
}

/* ── Submenus (nestable) ── */
.has-submenu {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 24px 6px 8px;
    color: var(--w98-text);
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    white-space: nowrap;
    position: relative;
    cursor: default;
}

.has-submenu::after {
    content: "▸";
    position: absolute;
    right: 8px;
}

.has-submenu:hover {
    background: var(--w98-highlight);
    color: var(--w98-highlight-text);
}

.has-submenu > .submenu {
    display: none;
    position: absolute;
    left: 100%;
    bottom: -3px;
    background: var(--w98-bg);
    box-shadow: inset 1px 1px 0 var(--w98-white),
    inset -1px -1px 0 #000,
    inset 2px 2px 0 var(--w98-shadow-light),
    inset -2px -2px 0 var(--w98-shadow-dark);
    min-width: 160px;
    padding: 3px;
    flex-direction: column;
}

.has-submenu:hover > .submenu {
    display: flex;
}

.submenu > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 24px 6px 8px;
    color: var(--w98-text);
    text-decoration: none;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 13px;
    white-space: nowrap;
}

.submenu > a:hover {
    background: var(--w98-highlight);
    color: var(--w98-highlight-text);
}

.submenu > a > span,
.has-submenu > span {
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

/* Container — centered, width-constrained layout wrapper */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Utility — margin top */
.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 16px;
}

.mt-4 {
    margin-top: 32px;
}

/* Utility — margin bottom */
.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 16px;
}

.mb-4 {
    margin-bottom: 32px;
}