/* Retro Mac — Classic Mac OS System 7: window chrome, Chicago-ish type, desktop pattern */

body, input, button, textarea, select {
    background-color: #aaaaaa;
    color: #000;
    font-family: 'Helvetica Neue', 'Helvetica', 'Geneva', 'Arial', sans-serif;
    font-size: 12px;
}

/* Classic Mac desktop: fine diagonal hatch */
body {
    background-color: #aaaaaa;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 1px,
        rgba(0,0,0,.25) 1px,
        rgba(0,0,0,.25) 2px
    );
}

/* Fake menu bar */
header {
    background: linear-gradient(180deg,
        #ffffff 0%,
        #dddddd 48%,
        #bbbbbb 49%,
        #cccccc 100%);
    color: #000;
    text-shadow: none;
    border-bottom: 1px solid #888;
    border-radius: 0;
    box-shadow: 0 2px 0 #555;

    a { color: #000; font-weight: bold; }
}

/* Window chrome: title bar with classic active-window stripes */
.board, .post, .thread, .thread-warning, .flashed-message, .recent-post {
    background: #fff;
    border: 2px solid #000;
    border-radius: 6px 6px 0 0;
    margin-bottom: 16px;
    color: #000;
    box-shadow: 2px 2px 0 #666;
    padding-top: 20px; /* room for title bar */
    position: relative;
    border-top: 2px solid #000;

    /* Title bar */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 18px;
        background: repeating-linear-gradient(
            180deg,
            #000 0px,
            #000 1px,
            #fff 1px,
            #fff 2px
        );
        border-radius: 4px 4px 0 0;
        border-bottom: 1px solid #000;
    }

    /* Close box */
    &::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 6px;
        width: 12px;
        height: 12px;
        background: #fff;
        border: 1px solid #000;
        z-index: 1;
    }

    &:hover { box-shadow: 3px 3px 0 #444; }
}

.board .name, .thread .name, .recent-post .name,
.recent-posts-header h2 a, .recent-attachments h2 a,
.subheader .title a {
    color: #000;
    font-weight: bold;
    text-shadow: none;
}

.board .description, .thread .author, .thread .time,
.thread .reply-count, .post .author, .post .time { color: #444; }

.subheader {
    background: #fff;
    border: 2px solid #000;
    border-radius: 6px 6px 0 0;
    padding-top: 24px;
    margin-bottom: 12px;
    box-shadow: 2px 2px 0 #666;
    position: relative;

    /* Subheader title bar */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 20px;
        background: repeating-linear-gradient(
            180deg,
            #000 0px,
            #000 1px,
            #fff 1px,
            #fff 2px
        );
        border-radius: 4px 4px 0 0;
    }

    .title, .title a { color: #000; text-shadow: none; font-weight: bold; }
}

:is(.subheader .right .button, form input[type=submit]) {
    background: linear-gradient(180deg, #eee 0%, #bbb 100%);
    border: 1px solid #666;
    color: #000;
    text-shadow: none;
    border-radius: 0;
    box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #888 inset;
    text-transform: none;
    font-weight: bold;
    font-size: 10px;
    padding: 2px 14px;
    line-height: 24px;

    &:hover { background: linear-gradient(180deg, #ccc 0%, #aaa 100%); }
    &:active { box-shadow: -1px -1px 0 #fff inset, 1px 1px 0 #888 inset; }
}

a { color: #000055; text-decoration: underline; }
a:visited { color: #550055; }

.pager {
    a, span, span.current {
        background: linear-gradient(180deg, #eee, #ccc);
        border: 1px solid #888;
        color: #000;
        border-radius: 0;
        box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #888 inset;
    }
    span.current {
        background: linear-gradient(180deg, #555, #333);
        color: #fff;
        box-shadow: -1px -1px 0 #fff inset, 1px 1px 0 #222 inset;
    }
    a:hover { background: linear-gradient(180deg, #ddd, #bbb); }
}

.posts .post-meta {
    background: #ddd;
    border-top: 1px solid #888;

    a { color: #000; }
}

.recent-attachments-gallery .recent-attachment {
    background: #fff;
    border: 1px solid #888;
    box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #555 inset;
}

.form, form {
    background: #fff;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #666;
}

input[type=text], input[type=password], input[type=number], textarea, select {
    background: #fff;
    border: 1px solid #000;
    color: #000;
    box-shadow: 1px 1px 0 #888 inset;
    border-radius: 0;
}

.post .text { .greentext { color: #004400; } .title { color: #000; } }
mark { background: #000080; color: #fff; }
footer, footer a { color: #333; font-size: 10px; }

.thread-warning {
    background: #ffffcc;
    border: 2px solid #000;
    color: #000;
    &.thread-deleted-notice { background: #ffcccc; }
}

h3 { font-weight: bold; color: #000; }
.boards h2, .recent-posts-header h2, .recent-attachments h2 { color: #000; font-weight: bold; }
.sort-bar a { color: #000055; }

/* contrast fixes: sort-bar text on medium gray body bg */
.sort-bar { color: #222; }