@font-face {
    font-family: 'chicagoflfregular';
    src: url('font/chicagoflf-webfont.woff2') format('woff2'),
         url('font/chicagoflf-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

:root {
    --font-stack: chicagoflfregular, Chicago, Silom, Krungthep, Fixedsys, System, monospace;
}

:root,
html.light {
    --bg: #fcfcfc;
    --fg: #1a1a1a;
    --fg-hl: #000000;
    --fg-ll: #545454;
    --fg-disabled: #aeaeae;
    --ival: 0;
    --iv-ival: 1;
    --color-mode: "light";
}

:root {
    --dark--bg: #1a1a1a;
    --dark--fg: #d9d9d9;
    --dark--fg-hl: #fcfcfc;
    --dark--fg-ll: #bebebe;
    --dark--fg-disabled: #545454;
}

html.dark {
    --bg: var(--dark--bg);
    --fg: var(--dark--fg);
    --fg-hl: var(--dark--fg-hl);
    --fg-ll: var(--dark--fg-ll);
    --fg-disabled: var(--dark--fg-disabled);
    --ival: 1;
    --iv-ival: 0;
    --color-mode:dark;
}
@media all and (prefers-color-scheme: dark) {
    :root {
        --bg: var(--dark--bg);
        --fg: var(--dark--fg);
        --fg-hl: var(--dark--fg-hl);
        --fg-ll: var(--dark--fg-ll);
        --fg-disabled: var(--dark--fg-disabled);
        --ival: 1;
        --iv-ival: 0;
        --color-mode:dark;
    }
}

* {
    box-sizing: border-box;
}

:focus {
    outline-color: var(--fg);
}
a {
    color: var(--fg);
}
a:hover {
    color: var(--fg-hl);
}

h1, h2, h3, strong {
    color: var(--fg-hl)
}

h2:first-child {
    margin-top: 5px;
}

body {
    background: var(--bg);
    color: var(--fg);
    margin: 0;
    padding: 0;
    font-family: var(--font-stack);
    overscroll-behavior: none;
    font-size: 0.9rem;
}

main {
    min-height: calc(100vh - 160px);
    padding-bottom: 160px;
}

input {
    accent-color: var(--dark--bg);
}

select {
    font-family: inherit;
    background-color: inherit;
    color: inherit;
}
.skip-link {
    position: absolute;
    left: -10000px;
    top: -10000px;;
    z-index: 100;
}
.skip-link:focus {
    left: 10px;
    top: 10px;
}
.inner {
    width: 100%;
    max-width: 640px;
    margin: auto;
    padding-top: 0px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}

.no-pad {
    padding: 0;
}

.no-td {
    text-decoration: none;
}

.icon-disabled {
    opacity: .6;
}

.detail {
    color: var(--fg-ll);
}

.disabled,
[aria-disabled="true"] {
    color: var(--fg-disabled);
    cursor: default;
}

.ui {
    /* user input fields, prevent disruptive text */
    overflow: hidden;
}

/* Messages */
.message-container ul {
    padding: 0;
}

.message-container li {
    list-style: none;
}

.message.success:before {
    content: "✓";
    margin-right: 5px;
}
.message.warning:before {
    content: "Warning: ";
}
.message.error:before {
    content: "ERROR: ";
}

/* Header */
header {
    position: sticky;
    top: 0;
    width: 100%;
    background: var(--bg);
    padding-top: 3px;
    z-index: 10;
}
.header-title {
    text-align: center;
    background-image: repeating-linear-gradient(
        var(--bg),
        var(--bg) 1px,
        var(--fg-hl) 1px,
        var(--fg-hl) 2px,
        var(--bg) 2px,
        var(--bg) 3px
    );
    height: 17px; /* ?? */
    margin: 0 0 3px;
}
.header-title span {
    background-color: var(--bg);
    padding: 1px 10px;
}
nav.header {
    border-bottom: 1px solid var(--fg);
}
nav.header ul {
    margin: 0;
    padding: 0;
}
nav.header li {
    list-style-type: none;
    display: inline-block;
}
nav.header li[aria-disabled="true"] {
    padding: 3px 8px;
}
nav.header a {
    display: inline-block;
    height: 100%;
    width: 100%;
    padding: 3px 8px;
    text-decoration: none;
}
nav.header a:hover,
nav.header a:focus,
nav.header button:hover,
nav.header button:focus {
    color: var(--bg);
    background: var(--fg);
    --ival: var(--iv-ival);
}

nav.header .nav-container {
    display: grid;
    grid-template-columns: 1fr 32px;
    justify-content: space-between;
}
.night-mode-toggle {
    grid-area: 1/2/2/3;
    height: 100%;
    width: 100%;
    cursor: pointer;
}
/*
.dark-mode-container .night-mode-toggle {
    float: right;
    cursor: pointer;
    height: 100%;
}
.dark-mode-container li {
    height: 100%;
    width: 100%;
}
*/
.night-mode-toggle .icon {
    top: 0;
}
.night-mode-toggle .icon {
    display: block;
}
.icon {
    filter: invert(var(--ival));
    height: 0.9rem;
    position: relative;
    top: 2px;
}
.icon.rmargin {
    margin-right: 5px;
}

footer {
    color: var(--fg-ll);
    text-align: center;
}
/*
nav.header li::first-letter {
    text-decoration: underline;
    text-decoration-color: var(--fg);
} */

/* test */
article {
    --post-border: var(--fg-ll);
    border: 3px solid var(--post-border);
    padding: 5px;
    margin-bottom: 15px;
    box-shadow: 2px 2px 0 var(--post-border);
}

.thread-list article,
article.parent {
    --post-border: var(--fg);
}

/* .sb -- semantic button -- act like button but not button style */
button:not(.sb),
.button-style,
input[type="file"]::file-selector-button {
    font-family: var(--font-stack);
    background: var(--bg);
    color: var(--fg);
    border: 3px solid var(--fg);
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
}

button:not(.sb):hover,
button:not(.sb):focus,
.button-style:hover,
.button-style:focus,
input[type="file"]::file-selector-button:hover,
input[type="file"]::file-selector-button:focus {
    background: var(--fg);
    color: var(--bg);
}

button.sb {
    appearance: none;
    background: unset;
    border: unset;
    color: unset;
    font-family: unset;
}
ul.flat-list,
ul.nav-list {
    padding: 0;
}

ul.flat-list li {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin-right: 10px;
}

ul.flat-list li:last-of-type {
    margin-right: 0;
}

ul.nav-list li {
    margin-bottom: 10px;
    list-style: none;
}

input, textarea {
    font-family: var(--font-stack);
    background: none;
    color: var(--fg);
    border: none;
    border-bottom: 2px solid var(--fg);
}

textarea {
    border: 2px solid var(--fg);
}

input[name="title"], textarea {
    width: 375px;
    max-width: calc(100% - 8px);
}

label {
    margin-right: 5px;
}

.form--field-wrapper {
    margin-bottom: 10px;
}

.form--label {
    display: block;
}

.form--realtime-status {
    margin-left: 5px;
}

.form--realtime-status[data-status="error"]::before {
    content: "✕";
    margin-right: 5px;
}

.form--realtime-status[data-status="ok"]::before {
    content: "✓";
    margin-right: 5px;
}

.form--section {
    margin-bottom: 15px;
}

.form--help-text {
    color: var(--fg-ll);
}

.post-content--container {
    cursor: pointer;
}
.post-content--deleted {
    color: var(--fg-disabled);
}

.post-content {
    margin: 10px 0;
}
.post-content p:first-child {
    margin-top: 0;
}
.post-content p:last-child {
    margin-bottom: 0;
}
h2.post-title {
    margin: 0;
    font-size: 1rem;
}
article.post p:first-child {
    margin-top: 0;
}
article.post p:last-child {
    margin-bottom: 0;
}

.post-detail {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    align-items: baseline;
}
.post-detail--links {
    grid-area: 1/1/2/2;
    display: inline-flex; /* fixes alignment */
}
.post-detail--links span::after {
    content: "-";
    content: "-" / "";
    margin: 0 5px;
    speak: none;
}
.post-detail--links span:last-child::after {
    content: none;
}
.post-detail--likes {
    grid-area: 1/2/2/3;
}
/* likes */
.like-button {
    overflow-y: hidden;
    cursor: pointer;
}
.like-button .icon {
    background-image: url('icon/heart-regular.svg');
    filter: invert(var(--ival));
    transition: top 0.12s;
    height: 0.9rem;
    width: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
.like-button[data-liked] .icon {
    background-image: url('icon/heart-solid.svg');
}
.like-button.loading,
.like-button.disabled {
    cursor: default;
}
.like-button.loading .icon {
    top: 30px;
}

/* changelog */
figure.changelog {
    margin: 0 0 20px;
}
figure.changelog h2 {
    margin-bottom: 0;
}
.changelog--detail {
    margin-top: 5px;
}
.touch-link {
    cursor: pointer;
}

/* image! */
img.post-attachment {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--fg);
    box-sizing: content-box;
}

.notice {
    border: 5px solid var(--fg);
    padding: 10px;
    margin-block: 20px 40px;
    box-shadow: 10px 10px;
}