/* rich-text.css — the rich-text field mounted by js/rich-text.js (#313).
   A shared component, not a page: any page that mounts the field links this
   sheet. Uses the styles.css design tokens throughout, so it tracks the
   light/dark theme for free.

   The one rule that IS the feature: .rt-body has a min-height and no
   max-height. A contenteditable box has no intrinsic height, so its height is
   its content — the box grows as the note is written and never traps text
   behind an inner scrollbar the way the `rows="2"` textarea it replaced did. */

.rt {
  border: 1px solid var(--line-dk);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
  overflow: hidden;
}
/* The field is one control, so the ring goes round the whole thing — toolbar
   included — rather than round the text area inside it. */
.rt:focus-within {
  border-color: var(--accent-solid);
  outline: 1px solid var(--accent-solid);
}

/* ---- formatting bar ---- */
.rt-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 4px 5px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.rt-btn {
  /* inline-flex so the letter buttons and the icon buttons centre on the same
     baseline-free grid; the SVGs come from js/icons.js at 15px. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.rt-btn .ico {
  vertical-align: 0;
}
.rt-btn:hover {
  color: var(--heading);
  background: var(--tint);
  border-color: var(--line-dk);
}
.rt-btn b,
.rt-btn i,
.rt-btn u,
.rt-btn s {
  font-size: 12.5px;
}

/* ---- the editable area ---- */
.rt-body {
  position: relative;
  min-height: 4.4em;
  padding: 7px 9px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  /* pre-wrap keeps the spacing a reviewer types (indented sub-points, aligned
     figures); anywhere stops a pasted URL from widening the whole card. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rt-body:focus {
  outline: none; /* the :focus-within ring on .rt is the visible focus state */
}
/* Absolutely positioned, so the caret sits at the start of the empty box
   instead of after the hint text. Inset matches .rt-body's own padding. */
.rt-body.empty::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 7px;
  left: 9px;
  color: var(--muted);
  pointer-events: none;
}

/* ---- .rt-read — the same value, rendered rather than edited (#292) ----------
   A stored rich-text value has to be readable by someone who cannot edit it, and
   on a page that shows many of them at once (a meeting's agenda) by the person
   who can. That is not a field: no border, no toolbar, no min-height floor, no
   caret. It IS the same content, so it shares every content rule below — which
   is the point of putting it here instead of restyling the markup per page.

   Only ever assign sanitizer output into it (toRichText / sanitizeRichText in
   js/rich-text.js). It is an innerHTML sink by construction; the allowlist is
   what makes that safe, and backend/rich_text.py is what makes the allowlist
   true of stored values. */
.rt-read {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---- what the field can contain (mirrors the allowlist in js/rich-text.js) ---- */
.rt-body > :first-child,
.rt-read > :first-child {
  margin-top: 0;
}
.rt-body > :last-child,
.rt-read > :last-child {
  margin-bottom: 0;
}
.rt-body p,
.rt-body div,
.rt-read p,
.rt-read div {
  margin: 0 0 6px;
}
.rt-body ul,
.rt-body ol,
.rt-read ul,
.rt-read ol {
  margin: 4px 0 6px;
  padding-left: 20px;
}
.rt-body li,
.rt-read li {
  margin: 2px 0;
}
.rt-body h3,
.rt-body h4,
.rt-read h3,
.rt-read h4 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--heading);
  margin: 8px 0 4px;
}
.rt-body a,
.rt-read a {
  color: var(--link);
  text-decoration: underline;
}
.rt-body code,
.rt-read code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 4px;
}
.rt-body pre,
.rt-read pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 9px;
  margin: 6px 0;
  overflow-x: auto;
}
.rt-body blockquote,
.rt-read blockquote {
  margin: 6px 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--line-dk);
  color: var(--muted);
}

/* iOS Safari zooms the page when focusing any editable under 16px — the same
   rule the insurance page applies to its inputs. */
@media (max-width: 640px) {
  .rt-body {
    font-size: 16px;
  }
  .rt-btn {
    min-width: 34px;
    height: 32px;
  }
}