/* foltzconvo — what a conversation is about, while it is happening.
 *
 * ⭐ ITS ONE JOB IS TO BE GLANCEABLE MID-SENTENCE. Chris reads this with a
 * conversation running in another window; if it takes more than a second to
 * answer "are we on track", he will stop opening it and the register dies of
 * disuse — which is the failure the ticket names as worse than not building it.
 *
 * ⚠ SELF-CONTAINED. No Tailwind, no CDN. A sibling app shipped with utility
 * classes copied from elsewhere and rendered with no styling at all.
 */

:root {
    /* Warm paper, not the machine greys of the build page. This is a record of
     * a conversation between two people, and it should not look like a console
     * — the two get read in completely different frames of mind. */
    --bg:      #17150f;
    --panel:   #1f1c15;
    --raised:  #29251c;
    --line:    #383225;
    --text:    #e8e0cf;
    --dim:     #a2977f;
    --faint:   #6b6252;

    /* ⚠ ONE ACCENT, SPENT ON ONE THING: a question they asked that is still
     * owed. Every state also carries a glyph and a word, so the page reads
     * correctly in greyscale and for colour blindness. */
    --owed:    #d99a3c;
    --done:    #7a9e6b;
    --agentc:  #7d93b8;

    --gap: 1.4rem;
    --radius: 3px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.1rem; }

.top { border-bottom: 1px solid var(--line); background: var(--panel); }
.top-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem; flex-wrap: wrap;
}
.brand { font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
.brand b { color: var(--text); font-weight: 600; }
.expiry { font-size: 0.72rem; color: var(--faint); }

.head { padding-top: 1.5rem; }
h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
}

/* ⭐ THE ONE NUMBER WORTH THE ACCENT. */
.owed {
    margin: 0.4rem 0 0;
    font-size: 0.86rem;
    color: var(--owed);
}
.owed.clear { color: var(--faint); }

.notice {
    margin-top: 1rem; padding: 0.6rem 0.8rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--raised); font-size: 0.84rem; color: var(--dim);
}

/* ── the thread ─────────────────────────────────────────────────────────── */

.thread { margin: var(--gap) 0 0; }

.item {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.item:last-child { border-bottom: 0; }

.mark { flex: 0 0 auto; width: 1.1rem; text-align: center; color: var(--faint); }
.item.is-open   .mark { color: var(--owed); }
.item.is-done   .mark { color: var(--done); }

.body { flex: 1 1 auto; min-width: 0; }

.text {
    margin: 0;
    /* ⚠ WRAPS, NEVER TRUNCATES. The value is in the exact wording — a clipped
     * item is one you cannot recognise later, which is the whole point lost. */
    overflow-wrap: anywhere;
}
.item.is-done .text, .item.is-parked .text { color: var(--dim); }

.meta { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--faint); }
.meta .asked { color: var(--owed); }
.meta .tick  { color: var(--agentc); }

/* Editing in place: the person can fix a mis-captured item. */
.text[contenteditable="true"] {
    outline: 1px solid var(--owed);
    border-radius: 2px;
    padding: 0.1rem 0.25rem;
    margin: -0.1rem -0.25rem;
}

.acts { flex: 0 0 auto; display: flex; gap: 0.15rem; align-items: center; }
.acts button {
    background: none; border: 1px solid transparent; border-radius: 2px;
    color: var(--faint); cursor: pointer;
    font: inherit; font-size: 0.78rem; line-height: 1;
    padding: 0.3rem 0.35rem;
}
.acts button:hover  { color: var(--text); border-color: var(--line); background: var(--raised); }
.acts button:focus-visible { outline: 2px solid var(--owed); outline-offset: 1px; }

/* ── the log ────────────────────────────────────────────────────────────── */

.log { margin: 2rem 0 0; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.log h2 {
    margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}

.events { list-style: none; margin: 0; padding: 0; }
.ev {
    display: flex; gap: 0.5rem; align-items: baseline;
    padding: 0.22rem 0; font-size: 0.78rem; color: var(--dim);
}
.ev-when  { flex: 0 0 auto; color: var(--faint); font-variant-numeric: tabular-nums; }
/* ⚠ WHO IS COLOURED, AND ALSO MARKED. An agent line reads differently from a
 * person's at a glance — that distinction is the reason the log exists. */
.ev-who   { flex: 0 0 auto; color: var(--text); }
.ev-who.agent { color: var(--agentc); }
.ev-what  { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* ⭐ A reorder's REASON is the most important thing in the log — it is the
 * whole basis on which an agent is allowed to reorder at all. */
.ev.reordered .ev-what { color: var(--text); }

.foot {
    display: flex; justify-content: space-between; gap: 1rem;
    margin: 2.5rem 0 1.5rem; padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    font-size: 0.72rem; color: var(--faint);
}

@media (max-width: 34rem) {
    h1 { font-size: 1.15rem; }
    .acts button { padding: 0.4rem 0.45rem; } /* bigger tap targets */
    .ev { flex-wrap: wrap; gap: 0.3rem; }
}