/* log.css — the House's log.
 *
 * A log, not a feed. One line per entry, a mono label down the left, and
 * nothing else: no avatars, no cards, no timestamps on every row. The day
 * heading carries the date so the rows underneath do not have to.
 *
 * Shared by log.php and the short version on the front page, which is why
 * the row styling is separate from the page styling.
 */

.log {
    max-width: 52rem;
    margin-top: 1.75rem;
}

/* The date, once, above the things that happened on it. */
.log-day {
    margin: 2rem 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}
.log-day:first-child { margin-top: 0; }

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

/* Label and line. The label column is fixed so every kind lines up down the
   page -- that column is what makes it read as a log rather than a list. */
.log-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding: 0.5rem 0;
}

.log-kind {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--subtle);
    white-space: nowrap;
}

.log-text {
    line-height: 1.5;
    color: var(--fg);
}

/* design2.css colours links with a four-:not() chain scoring 0,4,1, so a
   plain .log-text a would lose and every line would be accent red. Matched
   here so the log stays quiet and only lifts on hover. */
.log-text a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--fg); }
.log-text a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--accent); }

/* ---- The short version, on the front page ---------------------------- */

.front-log .log-day { margin-top: 1.1rem; font-size: 0.66rem; }
.front-log .log-day:first-child { margin-top: 0; }
.front-log .log-row {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.92rem;
}
.front-log .log-kind { font-size: 0.6rem; letter-spacing: 0.16em; }

@media (max-width: 560px) {
    /* The label moves above its line rather than squeezing the text into a
       column two words wide. */
    .log-row,
    .front-log .log-row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
        padding: 0.6rem 0;
    }
}