/*
 * Distill Log web pages: the design system of docs/design.md in plain CSS.
 * Paper and ink, one copper accent, hairlines instead of boxes, no shadows.
 * Used by resources/views/layouts/app.blade.php; extend it rather than restyling.
 */

@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/InstrumentSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/InstrumentSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/InstrumentSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Fragment Mono';
    src: url('../fonts/FragmentMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

/* Tokens */

:root {
    color-scheme: light dark;

    --canvas: #f3f0ea;
    --surface: #fbf9f5;
    --sunken: #ebe7e0;
    --rule: #d9d4c9;
    --ink: #1b1916;
    --ink2: #5c5750;
    --ink3: #6d6860;
    --accent: #ae4e1a;
    --on-accent: #fbf9f5;
    --accent-wash: rgb(174 78 26 / 10%);
    --pressed: rgb(27 25 22 / 7%);
    --hover: rgb(27 25 22 / 4%);
    --good: #506e2c;
    --warn: #956612;
    --danger: #af3d34;

    --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --gutter: 20px;
    --section: 32px;
    --measure: 680px;
    --label-gap: 8px;
    --radius: 12px;
    --fast: 150ms;
    --standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #12100e;
        --surface: #191714;
        --sunken: #211f1c;
        --rule: #2e2b26;
        --ink: #ece9e3;
        --ink2: #ada79c;
        --ink3: #858076;
        --accent: #dc7a44;
        --on-accent: #12100e;
        --accent-wash: rgb(220 122 68 / 14%);
        --pressed: rgb(236 233 227 / 8%);
        --hover: rgb(236 233 227 / 5%);
        --good: #90b16d;
        --warn: #e0ae57;
        --danger: #e17366;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --fast: 0ms;
    }
}

/* Base */

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

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

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 400 15px/22px var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p {
    margin: 0;
}

a {
    color: var(--accent);
    text-underline-offset: 3px;
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* Type */

.title-large {
    font-size: 30px;
    line-height: 34px;
    font-weight: 600;
    letter-spacing: -0.6px;
    text-wrap: balance;
}

.title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.lede {
    margin-top: 8px;
    color: var(--ink2);
    text-wrap: pretty;
}

.body-small {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink2);
}

.label {
    display: block;
    font: 400 11px/14px var(--mono);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink3);
}

/* A dot and a mono label: "● DONE". The colour always comes with the word. */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 11px/14px var(--mono);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink2);
}

.tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.tag-good::before {
    background: var(--good);
}

.tag-warn::before {
    background: var(--warn);
}

.tag-danger::before {
    background: var(--danger);
}

.hairline {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

/* Page */

.page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: calc(440px + 2 * var(--gutter));
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* For pages with tables or wide lists (the admin). */
.page-wide {
    max-width: calc(960px + 2 * var(--gutter));
}

.masthead {
    padding-top: 40px;
    margin-bottom: var(--section);
}

/* The mark has no margin of its own: the D's stem sits on the gutter. */
.mark {
    display: block;
    width: 40px;
    height: auto;
}

.mark-d {
    fill: var(--ink);
}

.mark-drop {
    fill: var(--accent);
}

.main > .tag {
    margin-bottom: 12px;
}

.colophon {
    margin-top: auto;
    padding: var(--section) 0 24px;
}

.colophon .hairline {
    margin-bottom: 16px;
}

/* Forms */

.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: var(--section);
}

.form > .button {
    margin-top: 8px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--label-gap);
}

.input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--sunken);
    color: var(--ink);
    caret-color: var(--accent);
    font: 400 17px/24px var(--sans);
    transition: border-color var(--fast) var(--standard);
    appearance: none;
}

.input::placeholder {
    color: var(--ink2);
}

.input:focus {
    outline: none;
    border-color: var(--ink2);
}

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

/* A value shown as text, still sent with the form (the email a link is for). */
.input[readonly] {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 15px;
    line-height: 22px;
}

.field-hint,
.field-error {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink2);
}

.field-error {
    color: var(--danger);
}

/* An error (danger, warning icon) or a note (ink2, info icon). */
.message {
    --message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.75' r='0.6' fill='black'/%3E%3C/svg%3E");

    display: flex;
    gap: 8px;
    color: var(--ink2);
}

.message-error {
    --message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.25' r='0.6' fill='black'/%3E%3C/svg%3E");

    color: var(--danger);
}

.message::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background: currentColor;
    -webkit-mask: var(--message-icon) center / contain no-repeat;
    mask: var(--message-icon) center / contain no-repeat;
}

/* Buttons: height 52, radius 12. One primary per page. */

.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 52px;
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--radius);
    background: var(--sunken);
    color: var(--ink);
    font: 600 16px/20px var(--sans);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--fast) var(--standard),
        color var(--fast) var(--standard),
        box-shadow var(--fast) var(--standard);
}

.button:active {
    box-shadow: inset 0 0 0 100px var(--pressed);
}

.button-primary {
    background: var(--accent);
    color: var(--on-accent);
}

.button-primary:active {
    box-shadow: inset 0 0 0 100px rgb(251 249 245 / 16%);
}

.button-ghost {
    padding: 0 16px;
    background: none;
}

.button-block {
    width: 100%;
}

.button:disabled {
    opacity: 0.38;
    cursor: default;
}

/* Busy: the work is running. A primary steps back to the quiet look; no fade, same size. */
.button[aria-busy='true'] {
    background: var(--sunken);
    color: var(--ink);
    box-shadow: none;
    cursor: progress;
}

.button[aria-busy='true']::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--ink2);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .button[aria-busy='true']::before {
        animation-duration: 2.4s;
    }
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

/* Visually hidden, still read by screen readers and password managers. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Compact and destructive buttons, and links that look like buttons. */

.button-compact {
    min-width: 40px;
    height: 40px;
    padding: 0 16px;
    font-size: 15px;
}

.button-ghost.button-compact,
.button-destructive.button-compact {
    padding: 0 12px;
}

.button-destructive {
    padding: 0 16px;
    background: none;
    color: var(--danger);
}

.button-destructive:active {
    box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--danger) 8%, transparent);
}

.button-destructive[aria-busy='true'] {
    background: none;
    color: var(--danger);
}

.button-destructive[aria-busy='true']::before {
    border-color: var(--danger);
    border-right-color: transparent;
}

a.button {
    color: var(--ink);
}

a.button-primary {
    color: var(--on-accent);
}

@media (hover: hover) {
    .button-ghost:hover,
    .button-destructive:hover {
        box-shadow: inset 0 0 0 100px var(--hover);
    }
}

/* Signed-in pages: the mark, the sections as a tab strip on the masthead's hairline, and who is signed in. */

.mark-link {
    display: inline-block;
    border-radius: 6px;
}

.page-community .masthead {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        'mark . account'
        'nav nav nav';
    align-items: center;
    row-gap: 12px;
    padding-top: 20px;
    border-bottom: 1px solid var(--rule);
}

.page-community .mark-link {
    grid-area: mark;
}

.page-community .mark {
    width: 28px;
}

.nav {
    grid-area: nav;
    display: flex;
    gap: 24px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.nav::-webkit-scrollbar {
    display: none;
}

.nav-link {
    position: relative;
    flex: none;
    padding: 6px 0 12px;
    color: var(--ink3);
    font: 500 15px/22px var(--sans);
    text-decoration: none;
    transition: color var(--fast) var(--standard);
}

.nav-link:hover,
.nav-link[aria-current='page'] {
    color: var(--ink);
}

/* The selected section's 2px copper bar sits on the masthead's hairline. */
.nav-link[aria-current='page']::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
}

.account {
    grid-area: account;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.account-name {
    overflow: hidden;
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account .button {
    margin-right: -12px;
}

@media (min-width: 720px) {
    .page-community .masthead {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 'mark nav account';
        column-gap: 40px;
        padding-top: 24px;
    }

    .page-community .mark-link {
        margin-bottom: 12px;
    }

    .nav {
        margin: 0;
        padding: 0;
        align-self: end;
    }

    .nav-link {
        padding: 0 0 20px;
    }

    .account {
        margin-bottom: 12px;
    }
}

/* The measure: discussions and forms keep a readable line length on wide pages. */
.measure {
    max-width: var(--measure);
}

/* A page's title, its count or byline, and its one primary action. */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

.page-head .button {
    flex: none;
}

.back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    margin: -4px 0 16px -2px;
    color: var(--ink2);
    font: 500 15px/22px var(--sans);
    text-decoration: none;
}

.back::before {
    content: '';
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.back:hover {
    color: var(--ink);
}

.meta {
    margin-top: 8px;
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 12px;
}

.tags-tight {
    margin-bottom: 4px;
}

.tag-plain::before {
    content: none;
}

.tag-accent::before {
    background: var(--accent);
}

/* Search: a sunken well with a magnifier, submitted with the return key. */

.toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.search {
    position: relative;
    max-width: var(--measure);
}

.search::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--ink3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.search .input {
    height: 44px;
    padding-left: 44px;
    font-size: 15px;
}

.search .input::-webkit-search-cancel-button {
    filter: grayscale(1);
}

/* Segmented: a sunken track of choices; the selected one is a surface chip with a hairline. Used
   for links (filters, sub-sections) and for radio buttons (category, role). */

.segmented {
    display: flex;
    width: max-content;
    max-width: 100%;
    padding: 3px;
    border-radius: var(--radius);
    background: var(--sunken);
    overflow-x: auto;
    scrollbar-width: none;
}

.segmented::-webkit-scrollbar {
    display: none;
}

.segment {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ink2);
    font: 500 15px/20px var(--sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--fast) var(--standard),
        color var(--fast) var(--standard),
        border-color var(--fast) var(--standard);
}

.segment:hover {
    color: var(--ink);
}

.segment[aria-current='page'],
.segment[aria-current='true'],
.segment:has(:checked) {
    border-color: var(--rule);
    background: var(--surface);
    color: var(--ink);
}

.segment:has(:focus-visible) {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.segment .count {
    margin-left: 6px;
    color: var(--ink3);
    font-variant-numeric: tabular-nums;
}

.fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.fieldset > legend {
    margin-bottom: var(--label-gap);
    padding: 0;
}

/* Choices with a line each (roles): radio rows with a copper dot when chosen. */

.choices {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule);
}

.choice {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 2px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
}

.choice input {
    grid-row: span 2;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border: 1.5px solid var(--ink3);
    border-radius: 50%;
    background: none;
    appearance: none;
    transition: border-color var(--fast) var(--standard), box-shadow var(--fast) var(--standard);
}

.choice input:checked {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 4px var(--canvas), inset 0 0 0 10px var(--accent);
}

.choice input:disabled,
.choice input:disabled ~ * {
    opacity: 0.38;
}

.choice-label {
    font: 500 17px/22px var(--sans);
}

.choice-hint {
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
}

/* Section header: a mono label, an optional count and a hairline filling the rest. */

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: var(--section) 0 var(--label-gap);
    font: 400 11px/14px var(--mono);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink3);
}

.section-header::after {
    content: '';
    flex: 1;
    order: 1;
    margin-top: 1px;
    border-top: 1px solid var(--rule);
}

.section-header > .section-action {
    order: 2;
}

/* Rows, not cards: full-width rows separated by hairlines inset from the left. */

.rows {
    margin: 0 calc(-1 * var(--gutter));
    padding: 0;
    list-style: none;
}

.row {
    position: relative;
}

.row::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: var(--gutter);
    border-top: 1px solid var(--rule);
}

.row-link,
.row-body {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px var(--gutter);
    color: inherit;
    text-decoration: none;
}

.row-body {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
}

.row-link {
    transition: background-color var(--fast) var(--standard);
}

.row-link:active {
    background: var(--pressed);
}

@media (hover: hover) {
    .row-link:hover {
        background: var(--hover);
    }
}

/* The chevron that says a row opens. */
.row-link::after {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--ink3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.row-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.row-title {
    font: 500 17px/24px var(--sans);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.row-excerpt {
    color: var(--ink2);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    margin-top: 2px;
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
}

.row-meta > * + *::before {
    content: '·';
    margin-right: 6px;
    color: var(--ink3);
}

.row-meta .label {
    display: inline;
}

/* A value and its unit on the right of a row: "12 REPLIES", "20 L". */
.row-figure {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    min-width: 56px;
}

.number {
    font: 500 17px/22px var(--sans);
    font-variant-numeric: tabular-nums;
}

/* Units sit beside their number, quieter: "20 L", "4 kg". Never uppercased: mL is not ML. */
.unit {
    color: var(--ink3);
    font-size: 13px;
    line-height: 18px;
}

/* What a figure on the right of a row counts: "REPLIES". */
.figure-label {
    margin-top: 2px;
    color: var(--ink3);
    font: 400 11px/14px var(--mono);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* A reported or hidden post: its text, clamped, and the report's reason set off by a rule. */
.report-preview {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
}

.report-reason {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--rule);
}

.report-reason .label {
    margin-bottom: 2px;
}

/* Accounts: who (name over email), then role and state; one line each on wide screens. */
.account-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        'who who'
        'role state';
    align-items: center;
    gap: 6px 16px;
}

.account-who {
    grid-area: who;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-email {
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.account-role {
    grid-area: role;
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
}

.account-grid > .tag {
    grid-area: state;
}

@media (min-width: 720px) {
    .account-grid {
        grid-template-columns: minmax(0, 1fr) 140px 180px;
        grid-template-areas: 'who role state';
        column-gap: 24px;
    }
}

/* Posts: plain text as written, line breaks kept, long words broken. */

.prose {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.prose-lead {
    font-size: 17px;
    line-height: 26px;
}

.post {
    margin-top: 24px;
}

.post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 20px;
    margin-top: 16px;
}

/* Quiet text actions under a post: mono and uppercase, like a section header's action. */
.action {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink3);
    font: 400 11px/14px var(--mono);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--fast) var(--standard);
}

.action:hover {
    color: var(--ink);
}

.action-danger,
.action-danger:hover {
    color: var(--danger);
}

.action-form {
    display: contents;
}

.replies {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reply {
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    scroll-margin-top: 24px;
}

.reply:target {
    margin: 0 calc(-1 * var(--gutter));
    padding-right: var(--gutter);
    padding-left: var(--gutter);
    background: var(--accent-wash);
}

.reply-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-bottom: 6px;
}

.reply-author {
    font-weight: 500;
}

.reply-time {
    color: var(--ink3);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
}

.reply-time:hover {
    color: var(--ink);
}

.reply-head .label {
    color: var(--ink3);
}

.reply-head .label {
    display: inline;
    font-size: 11px;
}

.is-hidden .prose,
.is-hidden .photos {
    opacity: 0.55;
}

/* Photos: a grid of wells; each opens full size. */

.photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.photo {
    margin: 0;
}

.photo a {
    display: block;
    border-radius: var(--radius);
}

.photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--sunken);
    object-fit: cover;
}

.photo figcaption {
    margin-top: 6px;
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
}

/* Disclosure: a quiet action that opens a small form in place (Report). */

.disclosure > summary {
    list-style: none;
}

.disclosure[open] {
    flex-basis: 100%;
}

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

.disclosure[open] > summary {
    color: var(--ink);
}

.disclosure-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(var(--measure), calc(100vw - 2 * var(--gutter)));
    margin: 8px 0 8px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--rule);
}

.disclosure-panel .button {
    align-self: flex-start;
}

/* A multi-line field: the same well as an input. */

.textarea {
    min-height: 120px;
    height: auto;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 22px;
    resize: vertical;
}

.form-flush {
    gap: 12px;
    margin-top: 0;
}

.form > .button + .button-ghost {
    margin-top: -8px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Stats side by side, divided by hairlines, no boxes. */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin: 24px 0 0;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.stat {
    padding: 0 16px;
    border-left: 1px solid var(--rule);
}

.stat:first-child {
    padding-left: 0;
    border-left: 0;
}

.stat dt {
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
}

.stat dd {
    margin: 4px 0 0;
    font: 600 20px/26px var(--sans);
    letter-spacing: -0.2px;
}

.stat .unit {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
}

/* Value rows: a label on the left, a value and its unit on the right. */

.values {
    margin: 0;
}

.value-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}

.value-row dt {
    color: var(--ink2);
    overflow-wrap: anywhere;
}

.value-row dd {
    flex: none;
    margin: 0;
    text-align: right;
}

/* Scale: a number well with its unit inside, and a button. */

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}

.unit-input {
    position: relative;
    width: 160px;
}

.unit-input .input {
    height: 44px;
    padding-right: 40px;
    font-variant-numeric: tabular-nums;
}

.unit-input .unit {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -7px;
}

.inline-form .field-error {
    flex-basis: 100%;
}

.scale-form {
    margin-bottom: 8px;
}

.scale-form .button {
    height: 44px;
}

/* Pager: newer / older, and where you are. */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.pager .button[aria-disabled='true'] {
    visibility: hidden;
}

/* Empty: a title, one line and at most one button. No illustration. */

.empty {
    padding: var(--section) 0;
}

.empty .lede {
    margin-bottom: 20px;
}

/* A note under a section's controls. */
.note {
    margin-top: 8px;
    color: var(--ink2);
    font-size: 13px;
    line-height: 18px;
}

.section-body > .button,
.section-body > form {
    margin-top: 12px;
}

/* Text-only buttons on their own line start where the text does. */
.section-body .button-destructive:not(.button-compact),
.section-body .button-ghost:not(.button-compact) {
    margin-left: -16px;
}

/* Toast: ink on canvas, bottom centre, gone after a few seconds. */

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 10;
    width: max-content;
    max-width: calc(100vw - 2 * var(--gutter));
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--canvas);
    transform: translateX(-50%);
    animation:
        toast-in 250ms cubic-bezier(0.33, 1, 0.68, 1),
        toast-out 200ms var(--standard) 5s forwards;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: toast-out 0ms 6s forwards;
    }
}

/* Confirm: a themed dialog on a scrim; the destructive button is in danger. */

.dialog {
    width: min(400px, calc(100vw - 2 * var(--gutter)));
    padding: 24px;
    border: 0;
    border-radius: 20px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--rule);
}

.dialog[open] {
    animation: dialog-in 200ms cubic-bezier(0.33, 1, 0.68, 1);
}

.dialog::backdrop {
    background: rgb(27 25 22 / 40%);
}

@media (prefers-color-scheme: dark) {
    .dialog::backdrop {
        background: rgb(0 0 0 / 60%);
    }
}

@keyframes dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dialog[open] {
        animation: none;
    }
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}