/* hyyryn-messages-type.css (rp173, 21 Oct 2026): the messages' type, for the night.

   Sir, 21 Oct 2026: "the messages fonts could be improved to suit the theme and the brand in messages".

   WHAT WAS THERE, measured (Mason's dissect.mjs, the thread at 1440): eight sizes from 9 to 16px a step of 1.08
   apart, so nothing outranked anything (the largest 1.23 times the body); eighteen distinct type voices in one
   window; capitals at 9 and 9.5px in a grey at .66 over a photograph; the job's name in a display face drawn for
   large sizes set at 14px; Hyyryn's own notes in the same roman as the people's words, at 11.5px, where Caslon's
   hairlines go to noise on a dark ground; the homeowner's "Everything here can be evidence" in the dark gold of
   the daytime pages (#83632C on night glass).

   THE SYSTEM, the site's three faces each with one job (no new face: Cinzel stays Records' alone):
     a title     Libre Caslon Display  24px (20 on a phone)  the person you are talking to, the list, the job panel;
                                                              the side panel names its person the same way
     said        Libre Caslon Text     16px / 1.5            what people wrote, and what you are writing
     noted       Libre Caslon Text it. 14px / 1.55           what Hyyryn says about the thread (held at Stripe, how
                                                              long to check, what the record keeps): Hyyryn's
                                                              voice is the italic beside the people's roman
     named       Inter 600             13.5px                a name in the list, a step, a file
     ui          Inter 500             12.5px                the job under a name, a row's label
     label       Inter 600 capitals    10.5px  .12em          dates, states and marks; never under 10px
     meta        Inter 500 figures     11px                  times, counts: tabular, so a column of times aligns
     money       Libre Caslon Text     15px, lining          a figure in a mark, as the masthead's balance is
   Night: light type on a dark ground reads heavier, and a serif's hairlines thin out (type designers on reversed
   type: open the spacing a touch, keep the serif large). So the serif never sets under 14px here, its spacing opens
   by .005em, and muted type sits at .78 and .64 of the cream, never lower for words a person must read.
   KEPT: Sir's sizes in the list's rows (22 Sep, sized to fit the list) and his two body sizes in the job panel
   (22 Sep, 13.5px serif read, 11px sans labelled); the panel's labels in sentence case (12 Sep pass, `n8`).
   Every rule names the shell twice (0,2,x and up) to win over the pages' own layers; two of theirs are !important. */

html body .msg-shell.msg-shell, html body .context-panel.context-panel {
  --mt-ink: #F3EEE3;
  --mt-ink-2: rgba(243,238,227,.78);
  --mt-ink-3: rgba(243,238,227,.64);
  --mt-gold: #E2AC68;
  --mt-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --mt-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --mt-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── a title ─────────────────────────────────────────────────────────── */
html body .msg-shell.msg-shell .conv-head :is(h1, h2),
html body .context-panel.context-panel .ctx-head :is(h2, h3) {
  font-family: var(--mt-display); font-weight: 400; font-size: 24px; line-height: 1.1;
  letter-spacing: 0; text-transform: none; color: var(--mt-ink);
}
html body .msg-shell.msg-shell .thread .thread-head .who .n {
  font-family: var(--mt-display); font-weight: 400; font-size: 24px; line-height: 1.12; letter-spacing: 0; color: var(--mt-ink);
}
html body .msg-shell.msg-shell .thread .thread-head .who .s {
  font-family: var(--mt-sans); font-weight: 500; font-size: 12.5px; line-height: 1.4; letter-spacing: .005em; color: var(--mt-ink-2); margin-top: 3px;
}

/* ── said ────────────────────────────────────────────────────────────── */
html body .msg-shell.msg-shell .thread .bubble:not(.system) {
  font-family: var(--mt-serif); font-size: 16px; line-height: 1.5; letter-spacing: .005em; font-weight: 400;
  font-variant-numeric: lining-nums; text-wrap: pretty;
}
html body .msg-shell.msg-shell .thread .composer input,
html body .msg-shell.msg-shell .thread .composer textarea {
  font-family: var(--mt-serif); font-size: 16px; letter-spacing: .005em;
}
html body .msg-shell.msg-shell .thread .composer :is(input, textarea)::placeholder { color: var(--mt-ink-3); font-style: italic; }

/* ── noted: Hyyryn's voice ───────────────────────────────────────────── */
html body .msg-shell.msg-shell .thread :is(.cs-why, .tn-why, .bubble.system, .typing-name),
html body .context-panel.context-panel :is(.ev-none, .dispute-bar > p, .t-body .t2) {
  font-family: var(--mt-serif); font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.55; letter-spacing: .005em;
  color: var(--mt-ink-2);
}   /* (in the panel the size stays 13.5px, Sir's) */
html body .msg-shell.msg-shell .thread .trust-notice .tn-why { font-size: 13.5px; }
/* an italic paragraph wants a reading measure: the notice's words stop near 100 characters, not 150 */
html body .msg-shell.msg-shell .thread .trust-notice > div { max-width: 860px; }
html body .msg-shell.msg-shell .thread .cs-why :is(b, strong) { font-style: normal; color: var(--mt-ink); font-weight: 400; }

/* ── named ───────────────────────────────────────────────────────────
   The list's rows keep Sir's sizes (22 Sep: "a messaging app's list", a step smaller so the row fits 232px), and the
   job panel keeps his two body sizes (22 Sep: 13.5px serif for anything read, 11px sans for anything labelled):
   this sheet changes their faces' jobs, not their sizes. */
html body .context-panel.context-panel :is(.step-text, .file-info .fn) { font-family: var(--mt-sans); font-weight: 600; color: var(--mt-ink); }
html body .msg-shell.msg-shell .thread .file-info .fn { font-family: var(--mt-sans); font-weight: 600; font-size: 13px; }

/* ── ui ──────────────────────────────────────────────────────────────── */
html body .context-panel.context-panel :is(.ctx-row, .ctx-progress-label span, .file-info .fs) { font-family: var(--mt-sans); font-weight: 500; letter-spacing: 0; color: var(--mt-ink-3); }
html body .context-panel.context-panel .ctx-progress-label strong { font-family: var(--mt-sans); font-weight: 600; color: var(--mt-ink); }
html body .context-panel.context-panel .ctx-row .ctx-val { font-family: var(--mt-serif); font-style: normal; color: var(--mt-ink); }

/* ── label: capitals, never under 10px ───────────────────────────────── */
html body .msg-shell.msg-shell .thread :is(.dd-l, .cs-t, .jm-s, .jm-ev, .tn-more, .job-update span),
html body .context-panel.context-panel :is(.ctx-sub, .ctx-protect-label, .ctx-pill, .t-body .t1) {
  font-family: var(--mt-sans); font-weight: 600; font-size: 10.5px; line-height: 1.3; letter-spacing: .12em;
  text-transform: uppercase; font-style: normal; color: var(--mt-ink-2);
}
html body .msg-shell.msg-shell .thread .job-update span { font-size: 11px; color: var(--mt-ink); }
/* the notice's mark and the panel's sections: the night's gold, on both sides (the homeowner's was the day's #83632C) */
html body .msg-shell.msg-shell .thread .trust-notice strong,
html body .context-panel.context-panel :is(.ctx-card-head h4, .dispute-sum h4) {
  font-family: var(--mt-sans); font-weight: 600; font-size: 10.5px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mt-gold) !important;
}
html body .msg-shell.msg-shell .thread .thread-head .who-rec {
  font-family: var(--mt-sans); font-weight: 600; font-size: 10px; letter-spacing: .12em; line-height: 1.3; color: var(--mt-gold);
}
@media (max-width: 760px) { html body .msg-shell.msg-shell .thread .thread-head .who-rec { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */

/* ── meta: times and counts ──────────────────────────────────────────── */
html body .msg-shell.msg-shell .conv-item .tm { font-variant-numeric: tabular-nums; }
html body .msg-shell.msg-shell .thread :is(.grp-time, .cs-d, .jm-d),
html body .context-panel.context-panel :is(.step-text .dim, .ctx-sum) {   /* the panel's stay 11px by its own rule */
  font-family: var(--mt-sans); font-weight: 500; font-size: 11px; letter-spacing: .01em; text-transform: none;
  font-variant-numeric: tabular-nums; color: var(--mt-ink-3);
}
@media (max-width: 760px) { html body .msg-shell.msg-shell .thread :is(.grp-time, .cs-d, .jm-d), html body .context-panel.context-panel :is(.step-text .dim, .ctx-sum) { font-size: 12px; } }  /* rp200 phone floor, was 11px */
html body .msg-shell.msg-shell .thread .grp-read {
  font-family: var(--mt-sans); font-weight: 600; font-size: 10px; letter-spacing: .12em; color: var(--mt-gold);
}
@media (max-width: 760px) { html body .msg-shell.msg-shell .thread .grp-read { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
html body .context-panel.context-panel .dispute-sum .ctx-sum { color: var(--mt-ink-3) !important; }

/* ── money ───────────────────────────────────────────────────────────── */
html body .msg-shell.msg-shell .thread :is(.cs-f, .jm-money b) {
  font-family: var(--mt-serif); font-weight: 400; font-size: 15px; letter-spacing: 0; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; color: var(--mt-ink);
}

/* ── the job's name in a mark: the reading face, not the display cut at 14px ── */
html body .msg-shell.msg-shell .thread .jm-t {
  font-family: var(--mt-serif); font-weight: 400; font-size: 14.5px; line-height: 1.35; letter-spacing: .005em; color: var(--mt-ink);
}

/* ── on a phone: the title steps down, the words do not ──────────────── */
@media (max-width: 800px) {
  html body .msg-shell.msg-shell .thread .thread-head .who .n { font-size: 20px; }
  html body .msg-shell.msg-shell .conv-head :is(h1, h2) { font-size: 22px; }
  html body .msg-shell.msg-shell .thread .thread-head .who .s { font-size: 12px; margin-top: 2px; }
}