/* Fable: Sampler — a cross-stitch sampler on linen: dashed stitch borders,
   folk-art madder red and indigo, and a hemmed edge on everything. */

body, input, button, textarea, select {
    font-family: 'Trebuchet MS', 'Verdana', sans-serif;
    font-size: 10pt;
    color: #4a3428;
}

body {
    /* woven linen */
    background-color: #efe6d4;
    background-image:
        repeating-linear-gradient(0deg, rgba(160, 140, 100, .12) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(160, 140, 100, .12) 0 1px, transparent 1px 4px);
}

.wrapper { max-width: 800px; }

header {
    background: #9e2b25;
    color: #f5ecd9;
    border-radius: 0;
    border: 3px dashed #f5ecd9;
    border-top: 0;
    outline: 3px solid #9e2b25;
    text-shadow: none;
    letter-spacing: 3px;
    padding: 6px 10px;

    a { color: #f5ecd9; }
}

.subheader {
    background: transparent;

    .title {
        color: #9e2b25;
        letter-spacing: 2px;

        a { color: #9e2b25; }
    }
    .title .thread-views { color: #8a7358; }
}

.boards h2, .recent-attachments h2, .recent-posts-header h2 {
    color: #2e4a6e;
    letter-spacing: 3px;
    text-align: center;

    a { color: #2e4a6e; }
    /* stitched hearts flanking each heading */
    &::before { content: '❥ '; color: #9e2b25; }
    &::after { content: ' ❥'; color: #9e2b25; }
}

/* every panel is hemmed with running stitches */
.board, .post, .thread, .thread-warning, .flashed-message, .recent-post {
    background: #f7f0df;
    border: 2px dashed #9e2b25;
    color: #4a3428;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(90, 60, 30, .18);
}
.thread { border-color: #2e4a6e; }
.recent-post { border-color: #5e7a3a; }

.board .name, .thread .name, .recent-post .name {
    color: #9e2b25;
    letter-spacing: 1px;
    font-weight: bold;
}
.thread .name { color: #2e4a6e; }
.board .description { color: #8a7358; }
.thread {
    .author { color: #9e2b25; }
    .time, .view-count { color: #8a7358; a { color: #8a7358; } }
    .reply-count { color: #5e7a3a; font-weight: bold; }
    &:visited .name { color: #6e5a7e; }
}

a { color: #2e4a6e; text-decoration: underline; text-decoration-style: dashed; }
a:visited { color: #6e5a7e; }
a:hover { color: #9e2b25; }

.post {
    .author { color: #9e2b25; }
    .time a { color: #8a7358; }
    .ip_hash { background: #e4d8bc; color: #4a3428; }
    .text {
        line-height: 1.6;

        .greentext { color: #5e7a3a; }
        .title { color: #2e4a6e; font-weight: bold; letter-spacing: 1px; }
    }
    .post-buttons .post-button {
        background: #f7f0df;
        border: 2px dashed #8a7358;
        color: #9e2b25;
    }
}

.posts .post-meta {
    background: #efe6d4;
    border-top: 2px dashed #8a7358;

    a { color: #2e4a6e; }
}

:is(.subheader .right .button, form input[type=submit]) {
    background: #2e4a6e;
    color: #f5ecd9;
    border: 2px dashed #f5ecd9;
    border-radius: 0;
    text-shadow: none;
    letter-spacing: 2px;
    font-family: inherit;

    &:hover { background: #9e2b25; }
}

.form, form { background: #f7f0df; border: 2px dashed #2e4a6e; }

input[type=text], input[type=password], input[type=number], textarea, select {
    background: #fdf8ea;
    border: 1px solid #b8a482;
    color: #4a3428;
    font-family: inherit;

    &:focus { outline: 2px dashed #9e2b25; }
}

.pager {
    a, span, span.current {
        background: #f7f0df;
        border: 2px dashed #2e4a6e;
        color: #2e4a6e;
        border-radius: 0;
    }
    span.current { background: #9e2b25; color: #f5ecd9; border-color: #9e2b25; border-style: solid; }
    a:hover { border-color: #9e2b25; color: #9e2b25; }
}

.recent-attachments-gallery .recent-attachment {
    background: #f7f0df;
    border: 2px dashed #5e7a3a;
    padding: 3px;
}

mark { background: #d9a520; color: #3a2a18; }

.sort-bar {
    color: #8a7358;
    a { color: #2e4a6e; &.sort-active { color: #9e2b25; } }
}

.thread-warning {
    background: #f2e2c8;
    border-color: #d9a520;
    &.thread-deleted-notice { color: #9e2b25; border-color: #9e2b25; }
}
.flashed-message { border-color: #5e7a3a; }
.no-threads { color: #8a7358; text-align: center; letter-spacing: 2px; }

footer {
    color: #8a7358;
    a { color: #2e4a6e; }
    text-align: center;
    /* the maker's mark at the bottom of every sampler */
    &::after { content: ' ✂ ─ ─ ─ ─'; color: #b8a482; }
}