/* Your brain (web/core/brain.mjs): the editor for brain.md and the Activity list under it.
   Self-contained like listen.css. Same six colours, one accent. */
.brain-editor textarea {
  width: 100%; min-height: 22rem; resize: vertical; margin: 0;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 4px;
  padding: .75rem .85rem; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2;
}
.brain-editor textarea:focus { outline: none; border-color: var(--accent); }
.brain-editor .bar { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; }
.brain-editor .state { color: var(--dim); font-size: 12px; }
.brain-editor button, .activity button {
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: .25rem .65rem; font: inherit; font-size: 12px; color: var(--text); cursor: pointer;
}
.brain-editor button.save:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.brain-editor button:disabled { opacity: .5; cursor: default; }
.brain-editor button:focus-visible, .activity button:focus-visible { outline: none; border-color: var(--accent); }
.activity button:hover { border-color: var(--accent); }
.brain-editor .say, .activity .say { color: var(--dim); font-size: 13px; margin: .5rem 0 0; }
.brain-editor .say:empty, .activity .say:empty { display: none; }

.activity { margin-top: 2.5rem; }
.activity h3 { font-size: 13px; color: var(--dim); font-weight: 600; margin: 0; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.activity .empty { color: var(--dim); font-size: 13px; margin: .75rem 0 0; }
.activity ol { list-style: none; margin: 0; padding: 0; }
.activity li { border-bottom: 1px solid var(--line); padding: .75rem 0; }
.activity li.undone { opacity: .55; }
.activity .what { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.activity .what b { font-weight: 600; }
.activity .what a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.activity .what a:hover { text-decoration-color: var(--accent); }
.activity .why { margin: .25rem 0 0; color: var(--dim); font-size: 13px; }
.activity .meta { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 0; color: var(--dim); font-size: 12px; }
.activity .tag { color: var(--dim); }