/* The main page, drawn by explore.js, and the controls under the masthead on every page */

/* One line, 32px tall, like the timeline on the archive page; 48px is its height plus margins */
.controls {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5em;
        align-items: center;
        clear: both;
        height: 32px;
        margin: 8px 0;
        font-size: 70%;
        color: var(--color-black);
        white-space: nowrap;
}

div.about:has(.controls) span.buttons {
        bottom: calc(0.5em + 48px);
}

/* The archive index has the timeline under the controls too; their 8px margins overlap */
div.about:has(.controls):has(svg.timeline) span.buttons {
        bottom: calc(0.5em + 116px);
}

.controls input, .controls select, .controls button {
        font: inherit;
}

/* reset.css takes their borders */
.controls input, .controls select {
        border: 1px solid #999;
        border-radius: 3px;
        padding: 0.1em 0.3em;
        background: #fff;
}

.controls input::placeholder {
        color: #999;
}

.controls input {
        flex: 1;
        min-width: 4em;
}

.controls select {
        flex: none;
}

.controls button {
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
}

#tag {
        overflow: hidden;
        text-overflow: ellipsis;
}

#summary {
        opacity: 65%;
}

/* The date at the far end of the tags line: left on disliked posts, which are right-aligned.
   Only on the main page; the archive pages keep the date hidden */
#posts div.tags_and_ts {
        display: flex;
        justify-content: space-between;
        align-items: last baseline;  /* when the tags take two lines, the date sits on the last */
        gap: 1.5em;
}

#posts span.timestamp {
        display: inline;
        padding-right: 0;
        white-space: nowrap;
        font-variant: small-caps;
        font-variant-numeric: tabular-nums;
        opacity: 75%;
}

#posts div.positive span.timestamp, #posts div.unknown span.timestamp {
        order: 2;
}

/* The main page without JavaScript: like a post's notes, without the space they leave under a title */
div.nojs {
        font-family: source-serif, serif;
}

div.nojs a {
        text-decoration: underline;
}

span.tag:hover {
        text-decoration: underline;
        cursor: pointer;
}

#posts {
        max-width: 800px;
}