/*
 * The site's stylesheet: colours, type and the layout every page shares.
 * Page-specific rules live in their own files (thread.css, editor.css).
 */

/* Typefaces, stored in static/fonts (SIL Open Font License, see the OFL files there) */

@font-face {
    font-family: 'Literata';
    src: url("../fonts/literata.c4911bc0a74d.woff2") format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Literata';
    src: url("../fonts/literata-italic.eedbc32777c5.woff2") format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Schibsted Grotesk';
    src: url("../fonts/schibsted-grotesk.798156822b9b.woff2") format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Tokens */

:root {
    /* Each colour as light-dark(light, dark): the page's color-scheme picks one. That is
       the system setting, unless the switch in the header (js/theme.js) set data-theme. */
    color-scheme: light dark;

    --ground: light-dark(#f1f4f0, #12201c);
    --surface: light-dark(#ffffff, #1a2b26);
    --ink: light-dark(#16231f, #e6ece8);
    --quiet: light-dark(#5e6b66, #9db0a8);
    --rule: light-dark(#d5dbd6, #2c423b);
    --spruce: light-dark(#1f5b4c, #7fc8ae);
    --spruce-strong: light-dark(#17463a, #a3dcc7);
    --on-spruce: light-dark(#ffffff, #0e1a17);
    --lichen: light-dark(#e3b505, #f0c93a);
    --lichen-wash: light-dark(#fbf3cf, #3a3413);
    --danger: light-dark(#a3271f, #f08a80);

    /* Monogram discs: six quiet tints, one per member (by id) */
    --tone-1: light-dark(#cfe3d9, #2f5a4c);
    --tone-2: light-dark(#f3e2a0, #6a5a16);
    --tone-3: light-dark(#d9d3ec, #4a4370);
    --tone-4: light-dark(#f0cfc0, #6b4334);
    --tone-5: light-dark(#c9dff0, #2f5270);
    --tone-6: light-dark(#dcdcd0, #4c4f45);

    /* Reading (titles, post text) and interface (everything else) */
    --serif: 'Literata', Georgia, 'Times New Roman', serif;
    --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --size-small: 0.875rem;
    --size-body: 1rem;
    --size-reading: 1.125rem;
    --size-h3: 1.25rem;
    --size-h2: 1.5rem;
    --size-h1: 2.25rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    --page: 48rem;
    --measure: 40rem;
    --radius: 6px;
}

:root[data-theme='light'] {
    color-scheme: light;
}

:root[data-theme='dark'] {
    color-scheme: dark;
}

/* Elements */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--size-body);
    line-height: 1.5;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    margin: var(--space-5) 0 var(--space-3);
    text-wrap: balance;
}

h1 {
    font-size: var(--size-h1);
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--size-h2);
}

h3 {
    font-size: var(--size-h3);
}

h4,
h5,
h6 {
    font-size: var(--size-body);
    font-weight: 700;
    margin: var(--space-4) 0 var(--space-2);
}

p,
ul,
ol,
blockquote,
pre,
table {
    margin: 0 0 var(--space-3);
}

a {
    color: var(--spruce);
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--spruce-strong);
    text-decoration-thickness: 0.12em;
}

:focus-visible {
    outline: 3px solid var(--lichen);
    outline-offset: 2px;
    border-radius: 2px;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--space-4) 0;
}

small {
    font-size: var(--size-small);
}

code,
pre {
    font-family: var(--mono);
    font-size: 0.9em;
}

pre {
    overflow-x: auto;
}

img {
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1px solid var(--rule);
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    text-align: left;
    vertical-align: top;
}

/* Forms */

label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

input,
select,
textarea,
button {
    font: inherit;
    color: inherit;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='search'],
input[type='number'],
input[type='date'],
select,
textarea {
    width: 100%;
    max-width: var(--measure);
    padding: var(--space-2) 0.75rem;
    background: var(--surface);
    border: 1px solid var(--quiet);
    border-radius: var(--radius);
}

/* A value that can't be changed, e.g. the invited address on the signup form */
input[readonly] {
    background: var(--ground);
    border-color: var(--rule);
    color: var(--quiet);
}

textarea {
    min-height: 10rem;
    line-height: 1.5;
}

/* Forms drawn by Django ({{ form }}): one <div> per field with the label, the help text,
   the errors and the field, in that order. Errors for the whole form come first. */

.form {
    max-width: var(--measure);
    margin: var(--space-4) 0;
}

.form > div {
    margin-bottom: var(--space-4);
}

/* A checkbox field: the box beside its label, the help text under the label */
.form > div:has(> input[type='checkbox']) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--space-2);
    align-items: center;
}

.form > div:has(> input[type='checkbox']) > input {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    accent-color: var(--spruce);
}

.form > div:has(> input[type='checkbox']) > label {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
}

.form > div:has(> input[type='checkbox']) > :not(input, label) {
    grid-column: 2;
}

/* The thread and post forms: the editor takes the page's width */
.form--wide,
.form--wide textarea {
    max-width: none;
}

.helptext {
    margin: 0 0 var(--space-2);
    color: var(--quiet);
    font-size: var(--size-small);
}

.errorlist {
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
    color: var(--danger);
    font-size: var(--size-small);
    font-weight: 600;
}

.errorlist.nonfield {
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    font-size: var(--size-body);
}

[aria-invalid='true'] {
    border-color: var(--danger);
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Buttons: links and <button>s with the class .button. Not every <button>: the editor's
   toolbar has its own. */

.button {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    background: var(--spruce);
    color: var(--on-spruce);
    border: 1px solid var(--spruce);
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: var(--size-body);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--spruce-strong);
    border-color: var(--spruce-strong);
    color: var(--on-spruce);
}

.button--quiet {
    background: transparent;
    color: var(--spruce);
}

.button--quiet:hover {
    background: transparent;
    color: var(--spruce-strong);
}

.button--danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

.button--danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--surface);
}

/* Page frame */

.wrap {
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.site-header {
    border-bottom: 4px solid var(--spruce);
}

.site-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-3);
}

.site-name {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.site-name:hover {
    color: var(--spruce);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
}

.site-nav a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--spruce);
    text-decoration: underline;
}

/* The section the page belongs to */
.site-nav a[aria-current='page'] {
    color: var(--spruce);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}

/* The light/dark switch (js/theme.js): a moon to go dark, a sun to go light */

.theme-toggle {
    align-self: center;
    padding: var(--space-1);
    border-color: var(--rule);
    color: var(--ink);
    line-height: 0;
}

.theme-toggle:hover {
    border-color: var(--spruce);
    color: var(--spruce);
}

.theme-toggle[hidden] {
    display: none;
}

.theme-toggle::before {
    content: '';
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background: currentColor;
    mask: url("../icons/moon.deb244b50255.svg") center / contain no-repeat;
}

.theme-toggle[aria-pressed='true']::before {
    mask-image: url("../icons/sun.320454b47ee8.svg");
}

.site-main {
    padding-block: var(--space-4) var(--space-6);
}

.site-main > h1:first-child,
.site-main > h2:first-child {
    margin-top: var(--space-3);
}

/* The user menu: a <details>, so it opens without JavaScript (js/menu.js only closes it) */

.menu {
    position: relative;
}

.menu > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.menu > summary::-webkit-details-marker {
    display: none;
}

.menu > summary::after {
    content: '';
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.2em) rotate(45deg);
}

.menu[open] > summary::after {
    transform: translateY(0.05em) rotate(-135deg);
}

.menu__items {
    position: absolute;
    right: 0;
    z-index: 10;
    min-width: 15rem;
    margin-top: var(--space-2);
    padding: var(--space-2) 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.menu__items a {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-weight: 400;
}

.menu__items a:hover {
    background: var(--ground);
    text-decoration: none;
}

.menu__who {
    padding: var(--space-1) var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--space-2);
    color: var(--quiet);
    font-size: var(--size-small);
    overflow-wrap: anywhere;
}

/* Messages from the site (saved, logged in, refused) */

.notices {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.notice,
.alert {
    margin: 0 0 var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--lichen-wash);
    border-left: 4px solid var(--lichen);
    border-radius: 2px;
}

.notice.error {
    border-left-color: var(--danger);
}

/* Small helpers */

.quiet {
    color: var(--quiet);
}

/* Page head: a title with its main action beside it */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) 0 var(--space-3);
}

.page-head h1 {
    margin: 0;
}

/* The way back up, above a page's title */
/* The way up (forums/_trail.html): Forums › forum › thread */
.trail ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) 0;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--size-small);
    font-weight: 600;
}

.trail li + li::before {
    content: '›';
    margin: 0 var(--space-2);
    color: var(--quiet);
    font-weight: 400;
}

.trail + .page-head {
    margin-top: var(--space-3);
}

/* What kind of page this is (Forum, Thread), above its title */
.kicker {
    margin: 0 0 var(--space-1);
    color: var(--quiet);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lead {
    max-width: var(--measure);
    color: var(--quiet);
    font-size: var(--size-reading);
}

.empty {
    padding: var(--space-4) 0;
    color: var(--quiet);
}

.note {
    color: var(--quiet);
    font-size: var(--size-small);
}

/* Lists of forums and threads: plain rows, a rule between them */

.rows {
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.row {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
}

.row__title {
    font-family: var(--serif);
    font-size: var(--size-h3);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    text-decoration: none;
}

.row__title:hover {
    color: var(--spruce);
    text-decoration: underline;
}

.row__text {
    margin: var(--space-1) 0 0;
    max-width: var(--measure);
}

.row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-2) 0 0;
    color: var(--quiet);
    font-size: var(--size-small);
}

.row__actions {
    display: flex;
    gap: var(--space-3);
    margin: var(--space-2) 0 0;
    font-size: var(--size-small);
}

/* A panel around a list (phpBB-like): a header row naming the columns, then the rows
   with a rule between them */

.panel {
    margin: var(--space-4) 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.panel__head {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule);
    color: var(--quiet);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.panel .rows {
    margin: 0;
    border-top: 0;
}

.panel .row {
    padding: var(--space-3);
}

.panel .row:last-child {
    border-bottom: 0;
}

/* Forum and thread rows: the main part, then the counts (and for threads the latest
   reply) in columns on the right. On a narrow screen the columns fold into lines. */

.forum-row,
.thread-row {
    display: grid;
    gap: var(--space-2) var(--space-4);
    align-items: start;
}

.forum-row {
    grid-template-columns: minmax(0, 1fr) 9rem;
}

.thread-row {
    grid-template-columns: minmax(0, 1fr) 5.5rem 11rem;
}

.forum-row__counts,
.thread-row__count,
.thread-row__latest {
    margin: 0;
    color: var(--quiet);
    font-size: var(--size-small);
}

.forum-row__counts strong,
.thread-row__count strong {
    color: var(--ink);
    font-size: var(--size-body);
}

.forum-row__counts span {
    display: block;
}

/* The forums are the places: their titles a size up from the threads' */
.forum-row .row__title {
    font-size: var(--size-h2);
}

/* A forum's announcements and most active threads, under its description: a box of
   their own on the page's ground, so they read as threads inside the forum */
.forum-row__recent {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--ground);
    border-radius: var(--radius);
}

.forum-row__label {
    margin: 0 0 var(--space-1);
    color: var(--quiet);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.forum-row__threads {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--sans);
    font-size: var(--size-small);
}

.forum-row__threads li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    padding: var(--space-1) 0;
}

.forum-row__threads li + li {
    border-top: 1px dashed var(--rule);
}

.forum-row__threads a {
    min-width: 0;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.forum-row__threads a:hover {
    color: var(--spruce);
    text-decoration: underline;
}

.forum-row__who,
.forum-row__empty {
    color: var(--quiet);
}

.forum-row__empty {
    margin: var(--space-2) 0 0;
    font-size: var(--size-small);
}

/* Recent activity above the forum list: a few lines like a forum's Latest box */

.recent {
    margin: var(--space-4) 0;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--lichen);
    border-radius: var(--radius);
}

.recent__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
    font-size: var(--size-small);
}

.recent__title {
    margin: 0;
    color: var(--quiet);
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A small label, e.g. Announcement */
.tag {
    padding: 0 var(--space-2);
    border-radius: 1rem;
    background: var(--lichen-wash);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 600;
}

.thread-row__latest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding-left: var(--space-3);
    border-left: 1px solid var(--rule);
}

.thread-row__when {
    color: inherit;
}

/* On a narrow screen the columns' place no longer says what they are */
.row-label {
    display: none;
}

@media (max-width: 40rem) {
    .row-label {
        display: inline;
        font-weight: 600;
    }

    .panel__head {
        display: none;
    }

    .forum-row,
    .thread-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .forum-row__counts {
        display: flex;
        gap: var(--space-3);
    }

    .thread-row__latest {
        padding-left: 0;
        border-left: 0;
    }
}

/* A member: a monogram disc and the name. The disc's colour comes from the member's id. */

.person {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-weight: 600;
}

.monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.3rem;
    border-radius: 1rem;
    background: var(--tone-6);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.monogram--1 { background: var(--tone-1); }
.monogram--2 { background: var(--tone-2); }
.monogram--3 { background: var(--tone-3); }
.monogram--4 { background: var(--tone-4); }
.monogram--5 { background: var(--tone-5); }
.monogram--6 { background: var(--tone-6); }

/* What a delete page is about to delete */

.excerpt {
    max-width: var(--measure);
    margin: var(--space-4) 0;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.excerpt > :last-child {
    margin-bottom: 0;
}

.excerpt .row__meta {
    margin: 0 0 var(--space-2);
}

.excerpt__title {
    margin: 0 0 var(--space-2);
    font-family: var(--serif);
    font-size: var(--size-h3);
    font-weight: 600;
}

/* Search */

.search {
    margin: var(--space-4) 0;
}

.search__row {
    display: flex;
    gap: var(--space-2);
    max-width: var(--measure);
}

.search__row input {
    flex: 1;
    min-width: 0;
}

/* The search page: the words, then the filters in a grid that wraps */
.search-form {
    margin: var(--space-4) 0 var(--space-5);
}

.search-form__words .helptext {
    margin: var(--space-1) 0 0;
}

/* The toggle that folds the filters away on small screens (js/search.js opens it on wide) */
.search-form__more {
    margin-top: var(--space-3);
}

.search-form__more summary {
    width: fit-content;
    color: var(--spruce);
    font-size: var(--size-small);
    font-weight: 600;
    cursor: pointer;
}

/* A matched word in a search result */
mark {
    padding: 0 0.1em;
    border-radius: 2px;
    background: var(--lichen-wash);
    color: var(--ink);
}

.search-form__filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-3);
    max-width: var(--measure);
    margin-top: var(--space-3);
}

.search-form__filters label {
    font-size: var(--size-small);
}

.search-count {
    margin: 0;
    color: var(--quiet);
    font-size: var(--size-small);
}

/* What a result is: a thread, an announcement, or a reply and its number */
.result__kind {
    margin: 0 0 var(--space-1);
    color: var(--quiet);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Newer and older pages of a list */

.pages {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    color: var(--quiet);
    font-size: var(--size-small);
}

.pages a {
    font-weight: 600;
}

/* The home page for a visitor: the name, and the way in */

.door {
    display: grid;
    gap: var(--space-5);
    align-items: center;
    padding-block: clamp(2rem, 10vh, 6rem);
}

@media (min-width: 48rem) {
    .door {
        grid-template-columns: minmax(0, 1fr) 14rem;
    }

    /* Smaller beside the picture, so the name keeps to its column */
    .door .door__name {
        font-size: clamp(3.25rem, 9vw, 6.5rem);
    }
}

.door__name {
    margin: 0;
    font-size: clamp(3.25rem, 14vw, 7.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 0.95;
}

.door__text {
    margin: var(--space-4) 0;
    max-width: 24rem;
    color: var(--quiet);
    font-size: var(--size-reading);
}

.door__note {
    margin: var(--space-4) 0 0;
    max-width: 24rem;
    color: var(--quiet);
    font-size: var(--size-small);
}

.door__picture {
    display: block;
    width: 100%;
    height: auto;
    max-width: 14rem;
}

.door__sky {
    fill: var(--lichen-wash);
}

.door__sun {
    fill: var(--lichen);
}

.door__far-trees,
.door__far {
    fill: color-mix(in srgb, var(--spruce) 45%, var(--ground));
}

.door__near-trees,
.door__near {
    fill: var(--spruce);
}

.door__lake {
    fill: color-mix(in srgb, var(--spruce) 14%, var(--ground));
}

.door__glint {
    fill: none;
    stroke: var(--lichen);
    stroke-width: 3;
    stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
    a,
    .button {
        transition: background-color 0.12s, color 0.12s, border-color 0.12s;
    }
}