/* budkavle — see DESIGN.md for the reasoning behind these tokens. */

@font-face {
    font-family: "Jost";
    src: url("fonts/Jost.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}
/* Runes for the wordmark's inscription only (Noto Sans Runic, OFL). */
@font-face {
    font-family: "Runic";
    src: url("fonts/NotoSansRunic.ttf") format("truetype");
    unicode-range: U+16A0-16FF;
    font-display: swap;
}

:root {
    --paper: #f4f6f4;
    --ink: #1f2529;
    --pine: #2d5545;
    --pine-deep: #234537;
    --rule: #e3e7e3;
    --muted: #69727a;
    --wax: #a3372b;
    --on-pine: #e9efeb;

    --ui: "Jost", system-ui, sans-serif;
    --letter: Charter, "Iowan Old Style", "Bitstream Charter", Georgia, serif;
    --rail-w: 11rem;
}

* { box-sizing: border-box; }

html { background: var(--paper); color: var(--ink); }

body {
    margin: 0;
    font: 400 .9375rem/1.45 var(--ui);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--pine); }

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

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

/* Display rules such as .stack's grid would otherwise override [hidden]. */
[hidden] { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Shell: the rail is the stick, the current folder a notch cut into it */

.shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    min-height: 100vh;
}

.rail {
    background: var(--pine);
    color: var(--on-pine);
    padding: 1rem 0 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.wordmark {
    color: var(--on-pine);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: .01em;
    padding-right: .75rem;
}

.write {
    margin-right: .75rem;
    padding: .35rem .75rem;
    border: 1px solid rgb(233 239 235 / .55);
    border-radius: 3px;
    color: var(--on-pine);
    text-decoration: none;
    font-weight: 500;
    text-align: center;
}
.write:hover { background: var(--pine-deep); }

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

.folders a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .3rem .75rem .3rem .6rem;
    color: var(--on-pine);
    text-decoration: none;
    border-radius: 4px 0 0 4px;
}
.folders a:hover { background: var(--pine-deep); }

.folders a.current {
    background: var(--paper);
    color: var(--ink);
    font-weight: 500;
}

.count {
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.folders a.current .count { color: var(--wax); }

/* Search sits under Write, as a link like a folder's: the box lives on the
   search page, so the rail spends one line on it, not a field. */
.search-link {
    display: flex;
    align-items: center;
    padding: .3rem .75rem .3rem .6rem;
    margin-bottom: .35rem;
    color: var(--on-pine);
    text-decoration: none;
    border-radius: 4px 0 0 4px;
}
.search-link:hover { background: var(--pine-deep); }
.search-link .icon { opacity: .85; }
.search-link.current { background: var(--paper); color: var(--ink); font-weight: 500; }
.search-link.current .icon { opacity: 1; color: var(--pine); }

/* The box on the search page. */
.search-box { display: flex; gap: .5rem; margin: .25rem 0 1rem; max-width: 44rem; }
.search-box input {
    flex: 1;
    min-width: 0;
    padding: .4rem .6rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: #fff;
}
.search-box input:focus { outline: 2px solid var(--pine); outline-offset: -1px; border-color: var(--pine); }

/* Labels under the folders, quieter: names come from the encrypted book. */
.labels-nav { display: flex; flex-direction: column; gap: .2rem; }
.label-list a { font-size: .875rem; padding-top: .2rem; padding-bottom: .2rem; }
.label-list a span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-labels { color: rgb(233 239 235 / .75); font-size: .8125rem; padding: .1rem .6rem; text-decoration: none; }
.manage-labels:hover { color: var(--on-pine); text-decoration: underline; }

/* Account menu: address plus a key dot; key status, Settings and Log out
   open above it (in the narrow top bar, below it). */
.account {
    position: relative;
    margin-top: auto;
    padding-right: .75rem;
    font-size: .8125rem;
}
.account summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .5rem;
    border-radius: 4px;
    color: rgb(233 239 235 / .85);
    cursor: pointer;
    list-style: none;
}
.account summary::-webkit-details-marker { display: none; }
.account summary::after { content: "▾"; margin-left: auto; font-size: .7rem; }
.account[open] summary::after { content: "▴"; }
.account summary:hover, .account[open] summary { background: var(--pine-deep); color: var(--on-pine); }
.account .address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .user { display: none; }
.key-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: rgb(233 239 235 / .4); }
.account[data-key="ok"] .key-dot { background: #9fd0b6; }
.account[data-key="missing"] .key-dot { background: var(--wax); box-shadow: 0 0 0 2px #ffd2cc; }
.menu {
    position: absolute;
    bottom: calc(100% + .25rem);
    left: 0;
    right: .75rem;
    z-index: 10;
    min-width: 13rem;
    padding: .35rem 0;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgb(31 37 41 / .15);
}
.menu > a, .menu button {
    display: block;
    width: 100%;
    padding: .4rem .8rem;
    border: 0;
    background: none;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
}
.menu > a:hover, .menu button:hover { background: var(--paper); }
.menu .danger { color: var(--wax); }

/* The message menu: ⋯ at the end of each row and in the message's action
   bar, opening below and to the left. */
.msg-menu { position: relative; }
.msg-menu summary {
    list-style: none;
    padding: 0 .55rem;
    border-radius: 3px;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.6;
    cursor: pointer;
}
.msg-menu summary::-webkit-details-marker { display: none; }
.msg-menu summary:hover, .msg-menu[open] summary { background: var(--rule); color: var(--ink); }
.msg-menu .menu { top: calc(100% + .2rem); bottom: auto; left: auto; right: 0; font-size: .875rem; }
.actions .msg-menu { margin-left: auto; }
.menu form { margin: 0; border-top: 1px solid var(--rule); margin-top: .25rem; padding-top: .25rem; }

/* ── Pane ───────────────────────────────────────────────────────────── */

.pane { padding: 1rem clamp(.75rem, 2.5vw, 1.75rem) 2rem; }

.pane-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .5rem;
}

h1 { font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin: 0; }

.empty { color: var(--muted); padding: 1.25rem 0; max-width: 34rem; }

/* ── Folder list ────────────────────────────────────────────────────── */

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

.list li { display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.list li:hover { background: #eaeeea; }
.list li > a {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: .6rem minmax(6rem, 10rem) minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: baseline;
    padding: .4rem .5rem;
    color: var(--ink);
    text-decoration: none;
}

.who, .what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* How many messages an Inbox conversation holds. */
.thread-n { color: var(--muted); font-size: .8125rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.snippet { color: var(--muted); }
.list time { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* Ticking rows: the bar sits on the list's top rule, its box in line
   with the rows' boxes. */
.pick, .pick-all { margin: 0; accent-color: var(--pine); flex: none; }
.pick-area { display: flex; align-items: center; align-self: stretch; flex: none; padding: 0 .25rem 0 .5rem; cursor: pointer; }
.pick-area[hidden] { display: none; }
.list li.picked { background: #e2ebe5; }
.bulk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    min-height: 2.1rem;
    padding: .2rem 0;
    font-size: .875rem;
}
.bulk .picked { color: var(--muted); }
.bulk-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.bulk-actions[hidden] { display: none; }
.bulk button {
    background: none;
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: .15rem .65rem;
}
.bulk button:hover { border-color: var(--muted); }
.bulk .danger { color: var(--wax); }

/* The wax seal: only unread mail carries one, and opening breaks it. */
.seal {
    width: .5rem;
    height: .5rem;
    align-self: center;
    border-radius: 50%;
}
.unread .seal {
    background: var(--wax);
    box-shadow: 0 0 0 2px rgb(163 55 43 / .18);
}
.unread .who, .unread .subject { font-weight: 600; }

/* ── One message: a letter, set for reading ─────────────────────────── */

.letter { max-width: 44rem; }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    align-items: baseline;
    margin-bottom: 1rem;
    font-size: .875rem;
}
.actions form { margin: 0; }
.back::before { content: "‹ "; }

.letter h1 { font-size: 1.4rem; margin-bottom: .5rem; }

.meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem 1rem;
    margin: 0 0 1.1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--rule);
    font-size: .875rem;
}
.meta dt { color: var(--muted); }
.meta dd { margin: 0; }

.body {
    font-family: var(--letter);
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 38em;
}

/* ── Compose ────────────────────────────────────────────────────────── */

.compose { max-width: 44rem; }

.field {
    display: grid;
    grid-template-columns: 5rem 1fr;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
}
.field label { color: var(--muted); }
.field input {
    border: 0;
    background: transparent;
    padding: .4rem 0;
}
.field input:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--pine); }

.compose textarea {
    width: 100%;
    margin-top: .75rem;
    padding: .6rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: #fff;
    font-family: var(--letter);
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
}
.compose textarea:focus { outline: none; border-color: var(--pine); }

.send-row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; margin-top: .75rem; }
#draft-status { margin: 0; }
#draft-status[data-state="error"] { color: var(--wax); }

/* ── Controls ───────────────────────────────────────────────────────── */

button { cursor: pointer; }

/* Line icons from public/img/icons.svg, in the text's own colour. */
.icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    vertical-align: -.2em;
    margin-right: .4em;
}
.folders a > span:first-child { display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; }
.folders a .icon { opacity: .85; }
.folders a.current .icon { opacity: 1; color: var(--pine); }
.label-list .icon { width: 1em; height: 1em; opacity: 1;
                    color: color-mix(in srgb, var(--label, currentColor) 70%, white); }
.label-list a.current .icon { color: var(--label, var(--pine)); }
.more-labels {
    background: none; border: 0; padding: .1rem .6rem; text-align: left;
    color: rgb(233 239 235 / .75); font-size: .8125rem; cursor: pointer;
}
.more-labels:hover { color: var(--on-pine); text-decoration: underline; }
.write .icon { margin-right: .35em; }
.actions .icon { color: var(--pine); }
.bulk button .icon { margin-right: .3em; }

.primary {
    background: var(--pine);
    color: var(--on-pine);
    border: 0;
    border-radius: 3px;
    padding: .4rem 1.2rem;
    font-weight: 500;
}
.primary:hover { background: var(--pine-deep); }
.primary:disabled { background: var(--muted); cursor: progress; }

.quiet {
    background: none;
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: .3rem .8rem;
    color: var(--muted);
}

.link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--pine);
    text-decoration: underline;
}
.danger { color: var(--wax); }

.error {
    margin: 0 0 1rem;
    padding: .6rem .8rem;
    border-left: 3px solid var(--wax);
    background: #f8ecea;
    color: #6e241c;
}

/* ── Login: a single card on paper ─────────────────────────────────── */

.gate {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.gate-card { width: min(22rem, 100%); }

.wordmark-large {
    font-size: 2.75rem;
    font-weight: 600;
    color: var(--pine);
    letter-spacing: -.01em;
}
/* "budkavle" in Younger Futhark (b u t k a f l i: the row has no d, v or e),
   carved under the wordmark. Decorative: screen readers skip it. */
.runes {
    font-family: "Runic", var(--ui);
    letter-spacing: .38em;
    color: var(--pine);
    opacity: .7;
}
.gate-card .runes { font-size: 1.15rem; margin: -.35rem 0 .35rem .1rem; }
.wordmark .runes { display: block; font-size: .72rem; letter-spacing: .42em; color: var(--on-pine); opacity: .55;
                   margin-top: .1rem; font-weight: 400; }

/* Artwork is drawn at twice its display size, so it stays sharp on dense screens. */
.gate-art { display: block; width: min(18.75rem, 100%); height: auto; margin: 0 0 .25rem -.4rem; }
.empty-art { display: block; width: 10rem; height: auto; margin: 0 0 .5rem; }
.empty p { margin: 0; }

.tagline { margin: 0 0 1.75rem; color: var(--muted); font-family: var(--letter); font-style: italic; }

.stack { display: grid; gap: .35rem; }
.stack label { font-size: .875rem; color: var(--muted); margin-top: .5rem; }
.stack input {
    padding: .55rem .7rem;
    border: 1px solid #cdd3cd;
    border-radius: 3px;
    background: #fff;
}
.stack input:focus { outline: 2px solid var(--pine); outline-offset: -1px; border-color: var(--pine); }
.stack .primary { margin-top: 1rem; }

.note { font-size: .875rem; color: var(--muted); margin-top: 1.5rem; }

/* ── Narrow screens: the rail becomes a top bar ─────────────────────── */

@media (max-width: 44rem) {
    /* minmax(0, …): a long word in the pane must not widen the page. */
    .shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .rail {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem 1rem;
        padding: .75rem 1rem;
    }
    .write { margin: 0 0 0 auto; padding: .35rem .8rem; }
    .wordmark .runes { display: none; }
    .folders { display: flex; width: 100%; overflow-x: auto; gap: .25rem; }
    .folders a { border-radius: 4px; padding: .35rem .7rem; gap: .4rem; }
    .account { margin: 0; padding: 0; }
    .account .address { display: none; }
    .account .user { display: inline; }
    .account { order: 1; }
    .folders { order: 2; }
    /* On a phone, a small button beside Write instead of a whole row. */
    .search-link { margin: 0; padding: .35rem .55rem; border: 1px solid rgb(233 239 235 / .55); border-radius: 3px; }
    .search-link .icon { margin: 0; }
    .search-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .labels-nav { order: 4; width: 100%; flex-direction: row; align-items: center; gap: .75rem; }
    .label-list { order: 0; flex: 1; min-width: 0; width: auto; }
    .label-list:empty { display: none; }
    .label-list a { padding: .2rem .6rem; white-space: nowrap; }
    .manage-labels { padding: 0; flex: none; margin-left: auto; }
    .menu { bottom: auto; top: calc(100% + .25rem); left: auto; right: 0; }
    /* Narrowest phones: the menu shows only its dot, so the top bar stays one row. */
    @media (max-width: 22.5rem) {
        .account .user { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
        .rail { gap: .5rem .6rem; }
    }
    .list li > a { grid-template-columns: .75rem minmax(0, 1fr) auto; }
    .what { grid-column: 2 / -1; grid-row: 2; }
    .list time { grid-column: 3; grid-row: 1; }
}

/* ── Rail as buttons (trial, 2026-10-13) ─────────────────────────────
   Folders and Search as outlined buttons, the current one filled with
   paper; labels filled with their colour. Replaces the notch. Delete this
   block to go back. */
.rail .folders li + li { margin-top: .3rem; }
.rail .folders a, .rail .search-link {
    margin-right: .75rem;
    border: 1px solid rgb(233 239 235 / .28);
    border-radius: 6px;
    align-items: center;
}
.rail .folders a:hover, .rail .search-link:hover { background: var(--pine-deep); border-color: rgb(233 239 235 / .5); }
.rail .folders a.current, .rail .search-link.current { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.rail .label-list a {
    background: color-mix(in srgb, var(--label, var(--pine-deep)) 82%, black);
    border-color: transparent;
    color: #fff;
}
.rail .label-list a:hover { background: color-mix(in srgb, var(--label, var(--pine-deep)) 65%, black); }
.rail .label-list a .icon { color: #fff; opacity: .85; }
.rail .label-list a.current { box-shadow: 0 0 0 2px var(--paper); }
.rail .label-list a .count { color: #fff; }
@media (max-width: 44rem) {
    .rail .folders li + li { margin-top: 0; }
    .rail .folders a { margin-right: 0; }
}

/* ── Touch: tap targets of at least about 36 px ─────────────────────── */

@media (max-width: 44rem), (pointer: coarse) {
    .pick-area { padding: 0 .6rem 0 .75rem; min-height: 2.25rem; }
    .compose > .check { display: flex; align-items: center; gap: .5rem; min-height: 2.25rem; }
    .actions { gap: 0 1.1rem; }
    .actions > a, .actions > .link { padding: .55rem 0; }
    .msg-menu summary { min-width: 2.25rem; min-height: 2.25rem; display: flex; align-items: center; justify-content: center; }
    .search-link { padding: .5rem .6rem; }
    .manage-labels { padding: .5rem 0; }
    .account summary { padding-top: .45rem; padding-bottom: .45rem; }
    #discard, .thread-open { display: inline-block; padding: .5rem 0; }
    .search-help summary { padding: .5rem 0; }
    .remove { padding: .5rem .25rem .5rem .6rem; }
    .label-list a { padding-top: .45rem; padding-bottom: .45rem; }
}

/* ── Speed test page (public/bench.html) ───────────────────────────── */

.bench { width: min(36rem, 100%); }
.bench pre {
    margin-top: 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .8125rem;
}

/* ── Accounts: setup, key status, settings ─────────────────────────── */

.setup { width: min(26rem, 100%); }
.lead { font-size: 1.0625rem; margin: 0 0 .5rem; }

.warning {
    margin: 1rem 0 .25rem;
    padding: .7rem .8rem;
    border-left: 3px solid var(--wax);
    background: #f8ecea;
    font-size: .875rem;
}
.warning p { margin: 0 0 .5rem; }
.check { display: flex; gap: .5rem; align-items: baseline; color: var(--ink); }
.stack .check { margin-top: 0; font-size: .875rem; }

.key-status { margin: 0 0 .25rem; padding: .3rem .8rem .5rem; border-bottom: 1px solid var(--rule); color: var(--muted); }
.key-status[data-state="ok"]::before { content: "● "; color: var(--pine); }
.key-status[data-state="missing"] { color: var(--wax); }

.settings { max-width: 40rem; }
.settings h2 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .4rem; }
.settings p { margin: 0 0 .5rem; }
/* Passkeys: the list, adding one, and recovery codes shown once. */
.passkey-list { list-style: none; margin: .25rem 0 .5rem; padding: 0; }
.passkey-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
                   padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.passkey-name { font-weight: 500; }
.passkey-list .passkey-remove { margin-left: auto; }
.passkey-add { display: flex; gap: .5rem; margin: .5rem 0; max-width: 30rem; }
.passkey-add input {
    flex: 1; min-width: 0; padding: .35rem .5rem;
    border: 1px solid var(--rule); border-radius: 3px; background: #fff;
}
.recovery-codes { border-left: 3px solid var(--pine); padding: .25rem 0 .25rem 1rem; margin: 1rem 0; }
.recovery-codes h3 { font-size: 1rem; margin: 0 0 .25rem; }
.recovery-list { columns: 2; font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: .9375rem;
                 margin: .5rem 0; padding-left: 1.5rem; }
.second-step .link { justify-self: start; margin-top: .25rem; }
.settings-lists .check { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; }
.key { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.narrow { max-width: 22rem; }

.ok {
    margin: 0 0 .5rem;
    padding: .5rem .8rem;
    border-left: 3px solid var(--pine);
    background: #e7efe9;
}

/* ── Mail (stage 4) ─────────────────────────────────────────────────── */

.pager { display: flex; gap: 1.25rem; padding: .75rem .5rem; font-size: .875rem; }
.delivery { color: var(--muted); font-size: .8125rem; }
/* A header whose sender disagrees with the delivery record. */
.list li.mismatch .who::after { content: " ⚠"; color: var(--wax); }

/* ── Attachments ────────────────────────────────────────────────────── */

.files { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.file {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: .3rem .7rem;
    color: var(--pine);
    font-size: .875rem;
}
.file:hover { border-color: var(--pine); }
.file.broken { color: var(--wax); border-color: var(--wax); }
.list li.has-files .subject::before { content: "📎 "; }
/* Picks add to the list rather than replace it: phone pickers often take
   one file at a time. The native input is hidden behind the label. */
.attach { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem 0; }
.attached { display: contents; list-style: none; }
.field .add-file { color: var(--pine); cursor: pointer; }
.attach input:focus-visible + .add-file { outline: 2px solid var(--pine); outline-offset: 2px; }
.attached .file { color: var(--ink); }
.remove { background: none; border: 0; padding: 0 0 0 .4rem; color: var(--muted); font-size: 1rem; line-height: 1; }
.remove:hover { color: var(--wax); }
.forward-files { border: 0; margin: .5rem 0 0; padding: 0; font-size: .875rem; }
.forward-files legend { color: var(--muted); padding: 0; margin-bottom: .25rem; }
.forward-files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

/* ── History ────────────────────────────────────────────────────────── */

.history { max-width: 44rem; }
.history h1 { font-size: 1.25rem; margin-bottom: .75rem; }
.history h2 { font-size: .9375rem; font-weight: 600; margin: 1.25rem 0 .4rem; }
.muted { color: var(--muted); font-weight: 400; }
.events { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.events li { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; padding: .2rem 0; }
.events time, .delivery-table td:nth-child(n+4) { color: var(--muted); font-variant-numeric: tabular-nums; }
.delivery-table { border-collapse: collapse; font-size: .875rem; width: 100%; }
.delivery-table th { text-align: left; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--rule); padding: .25rem .75rem .25rem 0; }
.delivery-table td { padding: .25rem .75rem .25rem 0; border-bottom: 1px solid var(--rule); }
.ack-check { display: block; font-size: .8125rem; }
.receipt[data-check="ok"] .ack-check { color: var(--pine); }
.receipt[data-check="bad"] .ack-check { color: var(--wax); }
@media (max-width: 44rem) {
    .events li { grid-template-columns: 1fr; gap: 0; }
}

/* ── Acknowledgments ────────────────────────────────────────────────── */

/* The request sits between the header and the text, where it is read
   before the letter, like a note clipped to it. */
.ack-request {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    border-left: 3px solid var(--pine);
    background: #fff;
    padding: .6rem .9rem;
    margin: 0 0 1rem;
    font-size: .9375rem;
}
.ack-request p { margin: 0; flex: 1 1 16rem; }
#ack-status[data-state="error"] { color: var(--wax); }
.ack-tag {
    border: 1px solid var(--pine); border-radius: 3px;
    color: var(--pine); font-size: .75rem; padding: 0 .3rem;
}
.compose > .check { font-size: .875rem; margin: .5rem 0; }
.check input { accent-color: var(--pine); }

/* ── Conversation: the thread under a message, oldest first ─────────── */

.thread { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: .75rem; }
.thread h2 { font-size: .9375rem; font-weight: 600; margin: 0 0 .4rem; }
.thread-count { color: var(--muted); font-weight: 400; margin-left: .35rem; }
.thread-list { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.thread-item { border-bottom: 1px solid var(--rule); }
.thread-item details { margin: 0; }
.thread-line {
    display: grid;
    grid-template-columns: .6rem minmax(5rem, 9rem) minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: baseline;
    padding: .35rem .25rem;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.thread-line::-webkit-details-marker { display: none; }
a.thread-line:hover, summary.thread-line:hover { background: #eaeeea; }
.thread-item.current .thread-line { cursor: default; background: #e2ebe5; }
.thread-item .here { color: var(--pine); font-size: .8125rem; }
.thread-item time { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.thread-item.mismatch .who::after { content: " ⚠"; color: var(--wax); }
.thread-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--letter);
    font-size: 1rem;
    line-height: 1.55;
    padding: .5rem .25rem .25rem 1.45rem;
    max-width: 40rem;
}
.thread-open { display: inline-block; font-size: .8125rem; margin: 0 0 .6rem 1.45rem; }
@media (max-width: 44rem) {
    .thread-line { grid-template-columns: .6rem minmax(0, 1fr) auto; }
    .thread-line .what { grid-column: 2 / -1; grid-row: 2; }
    .thread-body, .thread-open { padding-left: 0; margin-left: 0; }
}

/* ── Labels ─────────────────────────────────────────────────────────── */

.chips:empty { display: none; }
.chip {
    display: inline-block;
    margin-right: .3rem;
    padding: 0 .35rem;
    border-radius: 3px;
    /* The label's colour as a tint behind ink, and as a left edge. */
    background: color-mix(in srgb, var(--label, var(--muted)) 18%, var(--paper));
    box-shadow: inset 2px 0 0 var(--label, transparent);
    color: var(--ink);
    font-size: .75rem;
    font-weight: 400;
    vertical-align: .1em;
}
p.chips { margin: -.25rem 0 .75rem; }
a.chip { text-decoration: none; }
.suggest { margin: -.25rem 0 .75rem; font-size: .8125rem; color: var(--muted); }
.suggest[hidden] { display: none; }
.suggest .suggested {
    border: 1px dashed var(--label, var(--muted));
    background: none;
    box-shadow: none;
    color: var(--label, var(--pine));
    cursor: pointer;
}
.suggest .suggested:hover { border-style: solid; }
/* Label colours: the dialog's dots, and the Labels page's swatches. */
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
       background: var(--label, var(--muted)); margin: 0 .1rem 0 .15rem; align-self: center; }
.suggested-note { color: var(--muted); font-size: .8125rem; }
.swatch {
    width: 1.35rem; height: 1.35rem; flex: none; padding: 0; cursor: pointer;
    border: 2px solid var(--paper); border-radius: 50%; background: var(--label, var(--muted));
    box-shadow: 0 0 0 1px var(--rule);
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.label-admin li { flex-wrap: wrap; }
.palette { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .35rem; padding: .25rem 0 .35rem 1.9rem; }
.palette[hidden] { display: none; }
.pane > .suggest { margin: 0 0 .5rem; color: var(--ink); }
a.chip:hover { background: var(--pine); color: var(--on-pine); }

.label-dialog {
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    width: min(22rem, calc(100vw - 2rem));
    background: var(--paper);
    color: var(--ink);
}
.label-dialog::backdrop { background: rgb(31 37 41 / .35); }
.label-dialog h2 { font-size: 1rem; margin: 0 0 .5rem; }
.label-choices { list-style: none; margin: 0 0 .75rem; padding: 0; max-height: 50vh; overflow-y: auto; }
.label-choices label { display: flex; gap: .5rem; padding: .2rem 0; cursor: pointer; }
.label-choices input, .label-admin input[type=checkbox] { accent-color: var(--pine); }
.new-label { display: flex; gap: .5rem; margin-bottom: .75rem; }
.new-label input, .label-create input, .label-admin input {
    flex: 1;
    min-width: 0;
    padding: .3rem .5rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: #fff;
}

.labels-admin { max-width: 36rem; }
/* The cloud: names in alphabetical order, size by message count. */
.label-cloud { margin: .75rem 0 1.25rem; line-height: 1.5; }
.label-cloud:empty { display: none; }
.label-cloud a {
    display: inline-block;
    margin: 0 .7rem .1rem 0;
    color: var(--pine);
    font-weight: 500;
    text-decoration: none;
    vertical-align: baseline;
    line-height: 1.15;
}
.label-cloud a:hover { text-decoration: underline; }
.label-cloud a.none { color: var(--muted); font-weight: 400; }
.label-edit-head { font-size: .9375rem; font-weight: 600; margin: 1.5rem 0 .25rem; }
.label-create { display: flex; gap: .5rem; margin: 1rem 0; }
.label-admin { list-style: none; margin: 0; padding: 0; }
.label-admin li { display: flex; align-items: center; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.label-admin a { font-size: .875rem; white-space: nowrap; }

/* ── Search ─────────────────────────────────────────────────────────── */

.search-page { max-width: 60rem; }
.search-help code { overflow-wrap: anywhere; }
.search-page code, .search-help code { font-size: .8125rem; background: var(--rule); border-radius: 3px; padding: 0 .25rem; }
#search-status[data-state="error"] { color: var(--wax); }
.empty-note { color: var(--muted); padding: 1rem .5rem; }
.search-help { margin-top: 1.5rem; font-size: .875rem; max-width: 44rem; }
.search-help summary { cursor: pointer; color: var(--pine); }
.search-help dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .75rem 0; }
.search-help dd { margin: 0; }
@media (max-width: 44rem) {
    .search-help dl { grid-template-columns: 1fr; gap: 0; }
    .search-help dd { margin-bottom: .5rem; }
}