Main Character — disclosure

Disclosure

A section that opens and closes: a native <details> whose header is the section's italic accent title, with a small › that turns to ⌄ when open. A run of them, hairline between each, is help's accordion. Native, so it opens from the keyboard and for find-in-page with nothing extra.

Open and closed

ask · look things up

Ask your journal a question.

ask · look things up

Ask your journal a question: when you last saw someone, how often something comes up, what changed. It reads, it doesn't write; nothing said here becomes journal memory.

Accordion

Live. Each opens on its own; help adds an expand-all at the end of its jump row and opens the right section when a pill or a link points inside a closed one.

write · the journal companion

One chapter stays open for as long as it feels right, which is about a week in practice.

search · every match, instantly

Meaning finds passages close to what you describe; exact text finds the words themselves.

history · every chapter, one at a time

Every closed chapter, newest first, with the day's summary above its messages.

Anatomy

details.disclosure[open]
  summary
    span.mark          › closed, ⌄ open (::before)
    span               the title
  div.disclosure-body  .8rem gap, indented 1.5rem

header

The body serif, italic, 1.3rem, --text-accent; 1.1rem above and below. The whole line is the target.

mark

UI face .8rem in --text-muted, at least .8rem wide so the title doesn't shift when it changes.

body

A column, .8rem between blocks, indented 1.5rem so it hangs under the title, with 1.5rem below.

rule

A --border-default hairline under every section, open or closed.

Tokens

Title --text-accent; mark --text-muted; rule --border-default; type --font-body, --font-ui. In Figma: Disclosure, open, with title and body properties.