/* ─────────────────────────────────────
   Prompt note — the thing that came before the writing
   ─────────────────────────────────────

   ⭐ ONE COMPONENT, FOUR SCREENS. The composer shows the prompt she is writing
   to, focus mode shows the same, quick capture shows one to start with, and the
   entry page shows the prompt she wrote FROM. Same object, same shape, four
   labels.

   ⛔ IT WAS THREE NEAR-IDENTICAL BLOCKS. `entry-form.css` had one,
   `journal-home.css` had a second that re-specified every rule so focus mode
   would not inherit a page stylesheet it does not load, and `entry-detail.css`
   grew a third (`.entry-prompt`) during Design 2.0. They drifted: the focus
   copy hard-coded `#b45309` for the category tag, which dark mode could not
   reach.

   ⭐ **AND THEN IT WAS ONE BLOCK IN ITS OWN PRIVATE RECIPE — PORTED 2026-09-08.**
   Gabriel: *"review the layout of how we show the prompt there as well, it is
   not with the Design 2.0 concept."* He was right, and the reason is that the
   composer never entered the port register: every other screen was ported in
   Batches 12-16, so this block kept a shape that is none of the four surfaces —
   a terra-tinted panel with a 3px left bar and a rounded-on-one-side corner.

   ⭐ **THE ANSWER HAD ALREADY SHIPPED, ON `/prompts/`.** The offer there is
   `.card-surface` + `.eyebrow.eyebrow--terra` + `.quote`, and this is the same
   object: something Pensio put in front of her to write from. The templates
   compose those three primitives now; this sheet holds only what stays
   page-unique. `prompt-note*` stays on the same elements as the hooks.

   ⭐ **TERRA MOVED TO THE EYEBROW AND LEFT THE PANEL**, which is where it means
   something: *this came from somewhere else*. The tint and the bar were saying
   it a second and third time, in a shape the grammar has no name for. Sage is
   ours-and-inviting; terra is came-from-somewhere-else; the eyebrow is where
   that gets said.

   ⚠️ THIS FILE IS LOADED FROM base.html, on every page — the `.emotion-dot`
   lesson. A rule that four pages need cannot live in one page's stylesheet;
   the dots rendered as nothing on the entry page for exactly that reason. */

/* The block's own business: the space beneath it, before her writing starts.
   Everything else — surface, border, radius, padding — is `.card-surface`. */
.prompt-note {
    margin: 0 0 var(--space-xl);
}

/* ⚠️ `.eyebrow` sets `margin: 0`; the note wants a step before the question,
   and it is declared here rather than on the primitive because the primitive
   is used above rows, cards and section runs that each want their own. */
.prompt-note__label {
    margin-bottom: var(--space-xs);
}

/* The category, when the prompt came from the library. Not a badge with a
   border — it sits inside a card that already has one.

   ⚠️ It opts OUT of the eyebrow's caps and tracking on purpose: it is a name
   ("Gratitude"), not a label, and the eyebrow's rung is already spent on the
   words beside it. */
.prompt-note__tag {
    margin-left: var(--space-xs);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

/* ⚠️ `<blockquote>` carries a browser default margin and indent that would put
   the question 40px in from the card's own padding. `.quote` sets the type;
   this un-sets the element. */
.prompt-note__text {
    margin: 0;
    padding: 0;
    border: none;
}

/* The template note's title. ⛔ **IT USED TO SHARE `__text` WITH THE QUESTION**
   and that stopped working the moment the question took `.quote`: one class
   cannot be Lora italic at `--text-lg` for a question and plain body type for
   a name. A separate hook, because these are two different things that happened
   to sit in the same slot. */
.prompt-note__name {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-color);
}

/* A description under the name — used by the template note, which has a name
   and a sentence rather than a single question. */
.prompt-note__detail {
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--text-secondary);
}