@media screen and (max-width: 40rem) {
    body {
        grid-template-areas:
            "header"
            "misc"
            "main"
            "notifs";
        grid-row-gap: 0;
        margin: 0;
    }
    nav {
        margin: 8px 0 0 4px;
    }
    h1, nav ul, nav li {
        display: inline;
        line-height: 150%;
        margin-right: 4px;
    }
    nav li {
        white-space: nowrap;
    }
    h1 {
        font-size: medium;
    }
    main > article {
        padding: 8px;
    }
    main > h3 {
        margin-left: .5rem;
    }
    .horizontal-scroll-on-phone {
        overflow-x: scroll;
        white-space: nowrap;
    }
    .hide-on-phone,
    .horizontal-scroll-on-phone::-webkit-scrollbar {
        display: none;
    }
    .misc {
        margin-top: 0;
        margin-left: -3px;
    }
    .misc input {
        max-width: 15rem;
    }
    .misc * {
        display: inline-block;
    }
    div.card-line {
        margin: -.5rem -.5rem .25rem -.5rem;
        padding: 0 .5rem;
    }
}

@media screen and (min-width: 40rem) {
    body {
        grid-template-columns: 180px 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "header main"
            "misc   main"
            "notifs main";
        grid-column-gap: 8px;
    }
    nav li {
        padding: 4px 8px;
    }
    h1 {
        margin: 8px;
    }
    main > article {
        max-width: 40rem;
        padding: 8px 16px;
    }
    .date-heading {
        margin-left: 1rem;
    }
    .submit-another {
        display: inline-block;
        margin-left: 1rem;
    }
    .visibility-field input {
        margin-left: .5rem;
    }
    .visibility-field-title {
        display: inline-block;
    }
    .tags-field {
        margin-top: 0;
    }
}

@media screen and (min-width: calc(40rem + 360px)) {
    body {
        grid-template-columns: 1fr 40rem 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "header main misc"
            "header main notifs";
        grid-column-gap: 8px;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html {
    padding: 0;
}
body, button {
    display: grid;
    font-family: sans-serif;
    word-break: break-word;
    line-height: 150%;
}
header {
    grid-area: header;
}
main {
    grid-area: main;
}
.misc {
    grid-area: misc;
}
.notifs {
    grid-area: notifs;
}

/* Design */
p + form {
    margin-top: .5rem;
}
.invisible {
    display: none;
}
.post-visibility-private {
    font-weight: bold;
}
.date-heading {
    font-size: 1rem;
    font-weight: normal;
    padding-top: .25rem;
}
.submit-another input {
    margin-top: 1rem;
}
main > article {
    box-shadow: 0 4px 12px 0#0d234308;
    border-radius: .5rem;
}

.u-repost-of {
    font-size: small;
}
.u-url {
    text-decoration: none;
}
.u-url:hover, .u-bookmark-of:hover {
    text-decoration: underline;
}
.paginator {
    margin-top: .5rem;
    background: white;
    padding: .5rem;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.paginator-entry {
    padding: .5rem;
    margin-right: 1rem;
}

.misc form {
    margin: 8px;
    margin-left: 5px;
    max-width: 20em;
}
nav {
    padding: 0 4px;
}
nav ul {
    padding: 0;
    margin: 8px 0;
}
nav li {
    list-style-type: none;
}
main {
    max-width: 40rem;
}
main > article:first-of-type {
    margin-top: 0;
}
a.edit-post-btn {
    float: right;
    font-size: small;
    margin: 2px;
}
.post-tags {
    font-size: small;
    overflow: hidden;
    clear: both;
}
.post-page .post-tags {
    font-size: medium;
}
.post-tags > * {
    display: inline;
}
.u-bookmark-of {
    display: inline-block;
    font-size: small;
    text-decoration: none;
}
.post-page .u-repost-of,
.post-page .u-bookmark-of {
    font-size: medium;
    line-height: 150%;
}
dt {
    font-weight: bold;
}
dd + dt {
    margin-top: 8px;
}
.mv-tags ol {
    padding-left: .25rem;
    list-style-position: inside;
}
.mv-tags li {
    line-height: 150%;
}
.tags {
    display: flex;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 4px 0;
}
.tags li {
    list-style-type: none;
}
.tags li + li {
    margin-left: 8px;
}
.tags a {
    display: block;
    padding: 4px 8px;
    text-decoration: none;
}
form > div + div {
    margin-top: 16px;
}
form label {
    display: block;
    margin-bottom: 8px;
}
input[type="radio"] {
    margin-top: -1px;
    vertical-align: middle;
}
form input[type="radio"] + label,
form input[type="checkbox"] + label {
    display: inline-block;
}
form input[type="number"],
form input[type="text"],
form input[type="url"],
form input[type="password"],
form input[type="search"],
textarea {
    display: block;
    width: 100%;
    margin: 0;
    line-height: 1.5rem;
    font-size: 1rem;
    font-family: sans-serif;
}
form input[type="submit"] {
    min-width: 33%;
    max-width: 15rem;
    margin-top: 8px;
}
textarea {
    padding: 1px;
}
textarea:not(.one-row) {
    height: 100px;
}
#link-description {
    height: 13rem;
}
.one-row {
    height: calc(1.5rem + 6px); /* 150% line-height + 2x 1px padding + 2x 2px border of a regular input*/
}
.input-caption {
    font-size: small;
    margin: 4px 0;
}
h2 {
    margin: 0;
    font-size: 1.5rem;
}
h3, h4 {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 1.2rem;
}
.h-entry h4 {
    margin: 0;
    font-size: medium;
}
article p:last-of-type:not(.h-entry p) {
    margin-bottom: 0;
}
h2 + *:not(p, .u-bookmark-of),
h3 + *:not(p, .u-bookmark-of) {
    margin-top: 8px;
}
article + article {
    margin-top: .5rem;
}
.post-tags .p-category + .p-category {
    margin-left: .25rem;
}
pre {
    white-space: pre-wrap;
}
.date-link .dt-published {
    text-decoration: underline;
}
.card-line {
    border-radius: .25rem .25rem 0 0;
    margin: -.5rem -1rem .25rem;
    padding: 0 1rem;
    font-size: small;
}
.post-page .card-line {
    font-size: 1rem;
}
.edit-post-link {
    float: right;
}

/* Buttons */
::-webkit-file-upload-button,
.btn {
    line-height: normal;
    display: inline-block;
    border: 1px #999 solid;
    text-decoration: none;
    padding: .25rem .5rem;
    font-size: 1rem;
    margin: 0;
    background: #eee;
}

.btn:hover {
    cursor: pointer;
}

.btn_accent {
    font-weight: bold;
}

.confirmation-tick:checked ~ .btn_confirmation-tick {
    border: 1px #999 solid;
    cursor: pointer;
}

.confirmation-tick:not(checked) ~ .btn_confirmation-tick {
    border: 1px dashed #999;
    background-color: transparent;
    cursor: not-allowed;
}

.btn_weak {
    border: 1px dashed #999;
    background-color: transparent;
}

.bookmarklet {
    border: 1px dashed #999;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
}

.bookmarklet a {
    text-decoration: none;
    font-weight: bold;
}
.card-line .float-right + .float-right {
    margin-right: .25rem;
}
.float-right {
    float: right;
}
.dashed-btn {
    text-decoration: underline;
    text-decoration-style: dashed;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: inherit;
    text-indent: 0;
    display: inline;
    text-align: left;
    cursor: copy;
    font-size: inherit;
}
.dashed-btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Autocompletion */
.autocompletion-wrapper {
    position: relative;
    height: 200px;
    margin-bottom: -200px;
    pointer-events: none;
}

.autocompletion-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 100%;
    overflow-y: auto;
    pointer-events: auto;
}

.autocompletion-item {
    list-style: none;
    padding: 0.2em 0.5em;
    cursor: pointer;
}

/* Mycomarkup */
.myco, .myco * {
    max-width: 100%;
}
.myco blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: #999 2px solid;
}
.myco *:first-child {
    margin-top: .25rem;
}
.myco *:last-child {
    margin-bottom: .25rem;
}
.myco figure:first-child {
    margin-top: 0;
}
.myco figure:last-child {
    margin-bottom: 0;
}

.codeblock {
    padding:.5rem;
    white-space: pre-wrap;
    border-radius: .25rem;
}

code {
    border-radius: .25rem;
    font-size: 90%;
    font-family: 'Menlo', 'PT Mono', monospace;
}

p code {
    padding: .1rem .3rem;
}

.transclusion_failed { padding: 0 .5rem; }

/* Derived from https://commons.wikimedia.org/wiki/File:U%2B21D2.svg */
.launchpad__entry { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='25' height='12'%3E%3Cg transform='scale(0.7,0.8) translate(-613.21429,-421)'%3E%3Cpath fill='%23999' d='M 638.06773,429.49751 L 631.01022,436.87675 L 630.1898,436.02774 L 632.416,433.30375 L 613.46876,433.30375 L 613.46876,431.66382 L 633.82089,431.66382 L 635.57789,429.5261 L 633.79229,427.35979 L 613.46876,427.35979 L 613.46876,425.71985 L 632.416,425.71985 L 630.1898,422.99587 L 631.01022,422.08788 L 638.06773,429.49751 z '/%3E%3C/g%3E%3C/svg%3E"); }

p code,
article .codeblock,
table,
.transclusion_stand-out {
    background-color: rgba(220, 220, 220, 0.5);
}
.transclusion_failed {
    border: 1px solid #a55858;
}

.img-gallery { margin-top: .25rem; margin-bottom: .25rem; }
@media screen and (min-width: 700px) {
    .img-gallery_layout-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .img-gallery_layout-side {
        float: right;
        max-width: 50%;
        margin-left: 1em;
    }

    .img-gallery_layout-normal {
        display: table;
    }
    .img-gallery_layout-normal figure {
        width: 100%;
        display: table-row;
    }
    .img-gallery_layout-normal figure > a {
        display: table-cell;
    }
    .img-gallery_layout-normal figure figcaption {
        vertical-align: top;
        display: table-cell;
        padding-left: 1rem;
        width: 300px;
    }
}
.img-gallery img {
    max-width: 100%;
    max-height: 50vh;
}
figure {
    margin: 0;
}
figcaption {
    padding-bottom: .5rem;
}

/* Notifications */
.notifs {
    box-sizing: content-box;
}
.notif {
    border-radius: .5rem;
}
.notif + .notif {
    margin-top: .5rem;
}
.notifs .notif {
    padding: .75rem;
}
main .notif {
    padding: .5rem 1rem;
}
main .notif:last-of-type {
    margin-bottom: .5rem;
}

/* Colors. Keep both sections in sync. */
@media (prefers-color-scheme: dark) {
    a, .wikilink_external { color: #f1fa8c; }
    a:visited, .wikilink_external:visited { color: #ffb86c; }
    .wikilink_new, .wikilink_new:visited { color: #dd4444; }

    .transclusion .transclusion__link { color: #ddd; }

    article code,
    article .codeblock,
    table {
        border: 0;
        background-color: #444;
        color: #ddd;
    }
    mark { background: rgba(130, 80, 30, 5); color: inherit; }

    html {
        background: #222;
        color: #ddd;
    }
    main > article {
        background: #343434;
    }

    .btn,
    .btn:active,
    .btn:hover,
    .btn:visited,
    input[type="text"], input[type="password"], input[type="submit"], input[type="search"],
    ::-webkit-file-upload-button,
    .confirmation-tick:checked ~ .btn_confirmation-tick,
    .autocompletion-list,
    .paginator,
    textarea {
        background: #444;
        color: #ddd;
    }

    form input[type="number"],
    form input[type="text"],
    form input[type="url"],
    form input[type="password"],
    textarea {
        border: 2px inset black;
    }

    .edit-post-btn,
    .edit-post-btn:visited,
    .post-tags a,
    .date-heading a,
    .date-link,
    .card-line a,
    nav a,
    nav a:hover,
    nav a:visited,
    .paginator-entry {
        color: #ddd;
        text-decoration: underline;
    }
    .card-line {
        background: #343434;
    }
    .autocompletion-list {
        border: solid 1px #999;
    }
    .autocompletion-item:hover,
    .autocompletion-item.selected {
        background: #555;
    }

    .notif[notif-cat="Host mismatch"] {
        background: #311;
    }
    .notif[notif-cat="Wrong protocol"] {
        background: #400;
    }
    .notif[notif-cat="Failure"] {
        background: darkred;
    }
    .notif[notif-cat="Success"] {
        background: darkgreen;
    }
}

@media (prefers-color-scheme: light) {
    html {
        background: rgb(251, 251, 251);
    }
    main > article,
    .autocompletion-list {
        background: white;
    }

    .btn,
    .btn:active,
    .btn:hover,
    .btn:visited {
        color: black;
    }

    .edit-post-btn,
    .edit-post-btn:visited,
    .post-tags a,
    .date-heading a,
    .date-link,
    .card-line a,
    nav a,
    nav a:hover,
    nav a:visited {
        color: black;
        text-decoration: underline;
    }
    .card-line {
        background: #efefef;
    }
    a.btn_destructive,
    a.btn_destructive:visited,
    .btn_destructive {
        border-color: #aa1818;
        background-color: #ee4343;
        color: white;
    }
    .confirmation-tick:checked ~ .btn_confirmation-tick {
        background: #eee;
    }

    .autocompletion-list {
        border: 1px solid #ccc;
    }

    .autocompletion-item:hover,
    .autocompletion-item.selected {
        background: #ccc;
    }

    form input[type="number"],
    form input[type="text"],
    form input[type="url"],
    form input[type="password"],
    textarea {
        border: 2px inset #eee;
    }

    .notif[notif-cat="Host mismatch"] {
        background: bisque;
    }
    .notif[notif-cat="Wrong protocol"] {
        background: mistyrose;
    }
    .notif[notif-cat="Failure"] {
        background: salmon;
    }
    .notif[notif-cat="Success"] {
        background: darkseagreen;
    }
}