prosemirror.css

/*
 * Body typography lives here. For the canonical type system + decisions +
 * rationale, see `docs/typography.md`. Per-rule comments below explain the
 * "why" for each element; the doc is the broader picture.
 */

/* Editor-mode top padding clears the floating bubble toolbar. Read-only
 * surfaces (article-prose on /posts/[id]) have no toolbar and shouldn't carry
 * the 48px gap — scoping via [contenteditable="true"] keeps it where it's
 * earned. */
.ProseMirror[contenteditable="true"] {
  @apply pt-12;
}

.ProseMirror .is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  height: 0;
}
.ProseMirror .is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  height: 0;
}

/* Custom image styles */

.ProseMirror img {
  transition: filter 0.1s ease-in-out;

  &:hover {
    cursor: pointer;
    filter: brightness(90%);
  }

  &.ProseMirror-selectednode {
    outline: 3px solid #5abbf7;
    filter: brightness(90%);
  }
}

.img-placeholder {
  position: relative;

  &:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--novel-stone-200);
    border-top-color: var(--novel-stone-800);
    animation: spinning 0.6s linear infinite;
  }
}

@keyframes spinning {
  to {
    transform: rotate(360deg);
  }
}

/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */

ul[data-type="taskList"] li > label {
  margin-right: 0.2rem;
  user-select: none;
}

@media screen and (max-width: 768px) {
  ul[data-type="taskList"] li > label {
    margin-right: 0.5rem;
  }
}

ul[data-type="taskList"] li > label input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: hsl(var(--background));
  margin: 0;
  cursor: pointer;
  width: 1.2em;
  height: 1.2em;
  position: relative;
  top: 5px;
  border: 2px solid hsl(var(--border));
  margin-right: 0.3rem;
  display: grid;
  place-content: center;

  &:hover {
    background-color: hsl(var(--accent));
  }

  &:active {
    background-color: hsl(var(--accent));
  }

  &::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

  &:checked::before {
    transform: scale(1);
  }
}

ul[data-type="taskList"] li[data-checked="true"] > div > p {
  color: var(--muted-foreground);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Overwrite tippy-box original max-width */

.tippy-box {
  max-width: 400px !important;
}

.ProseMirror:not(.dragging) .ProseMirror-selectednode {
  outline: none !important;
  background-color: var(--novel-highlight-blue);
  transition: background-color 0.2s;
  box-shadow: none;
}

.drag-handle {
  position: fixed;
  opacity: 1;
  transition: opacity ease-in 0.2s;
  border-radius: 0.25rem;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(0, 0, 0, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
  background-repeat: no-repeat;
  background-position: center;
  width: 1.2rem;
  height: 1.5rem;
  z-index: 50;
  cursor: grab;

  &:hover {
    background-color: var(--novel-stone-100);
    transition: background-color 0.2s;
  }

  &:active {
    background-color: var(--novel-stone-200);
    transition: background-color 0.2s;
    cursor: grabbing;
  }

  &.hide {
    opacity: 0;
    pointer-events: none;
  }

  @media screen and (max-width: 600px) {
    display: none;
    pointer-events: none;
  }
}

.dark .drag-handle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(255, 255, 255, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
}

/* Custom Youtube Video CSS */
iframe {
  border: 8px solid #ffd00027;
  border-radius: 4px;
  min-width: 200px;
  min-height: 200px;
  display: block;
  outline: 0px solid transparent;
}

div[data-youtube-video] > iframe {
  cursor: move;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.ProseMirror-selectednode iframe {
  transition: outline 0.15s;
  outline: 6px solid #fbbf24;
}

@media only screen and (max-width: 480px) {
  div[data-youtube-video] > iframe {
    max-height: 50px;
  }
}

@media only screen and (max-width: 720px) {
  div[data-youtube-video] > iframe {
    max-height: 100px;
  }
}

/* CSS for bold coloring and highlighting issue*/
span[style] > strong {
  color: inherit;
}

mark[style] > strong {
  color: inherit;
}

/* Remove extra quotation marks from blockquotes added by @tailwindcss/typography */
.prose blockquote p:first-of-type::before {
  content: none;
}

.prose blockquote p:last-of-type::after {
  content: none;
}

/*
 * Body H2 — print-magazine section break. Inter SemiBold; the editorial
 * register comes from the navy-frame hairline + generous top spacing, NOT
 * from a serif type swap. Per the "Lora is rare" rule (docs/design-system.md
 * type allocation), Lora is reserved for the page H1 and the blockquote
 * pull-out. Hierarchy below the H1 is carried by sans weight + size + the
 * structural rule above the heading.
 *
 * Body H1 piggybacks on the H2 rule. The page H1 lives in PostHero, not
 * inside .article-prose — so any H1 inside the prose is an author mistake
 * (Carlos occasionally types `# Heading` instead of `## Heading`). Rather
 * than letting @tailwindcss/typography render it at 48px ExtraBold gray-900
 * (which collides visually with the PostHero title), we degrade it
 * gracefully to look exactly like an H2. The mistake doesn't blow up the
 * page, and it doesn't get rewarded with a bigger size either.
 *
 * `:first-child` exception keeps the hairline from doubling up if an article
 * happens to open with an H1/H2 (rare — current corpus all open with paragraphs).
 */
.article-prose h1,
.article-prose h2 {
	font-family: var(--font-inter);
	font-weight: 700;
	font-size: 1.5rem; /* 24px */
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: rgb(16, 67, 87); /* navy */
	border-top: 1px solid rgb(232, 240, 244); /* navy-frame */
	padding-top: 2rem;
	margin-top: 3rem;
	margin-bottom: 1rem;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.article-prose h1,
	.article-prose h2 {
		font-size: 1.75rem; /* 28px */
		padding-top: 2.5rem;
		margin-top: 3.5rem;
	}
}

.article-prose > h1:first-child,
.article-prose > h2:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/*
 * Body H3 — sub-section within an H2 block. Same family, smaller, no rule.
 * Slightly tighter top margin so it sits in clear relation to the H2 above
 * it (not orphaned).
 *
 * Sized at 19/20px so the modular scale stays clean after the H2 bump to
 * 24/28px: H2 → H3 ratio is now ~1.4×, H3 → body is ~1.1× — both inside
 * editorial-norm territory. Weight stays 600 (subordinate to H2's 700)
 * so size and weight both reinforce hierarchy.
 */
.article-prose h3 {
	font-family: var(--font-inter);
	font-weight: 600;
	font-size: 1.1875rem; /* 19px */
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: rgb(16, 67, 87); /* navy */
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.article-prose h3 {
		font-size: 1.25rem; /* 20px */
	}
}

/* Dark mode counterparts — navy-lifted (#CFE4EF) carries dark-mode headings,
 * the design system's navy dark-anchor (2026-05-31, off the cyan anchor). */
.dark .article-prose h1,
.dark .article-prose h2,
.dark .article-prose h3 {
	color: rgb(207, 228, 239); /* navy-lifted */
}

.dark .article-prose h1,
.dark .article-prose h2 {
	border-top-color: rgb(44, 79, 94); /* navy-edge (solid) */
}

/*
 * Body prose color. @tailwindcss/typography drives body color via CSS
 * variables; setting them on .article-prose shifts paragraphs, lists, and
 * `<strong>` from the default gray-900 to navy.shade — the typography anchor
 * per the design system. Headings/blockquotes/links already have explicit
 * navy color set in their own rules; these vars cover everything else (p,
 * li, strong, em, etc.) so the body reads as one navy register.
 */
.article-prose {
  --tw-prose-body: rgb(16, 67, 87); /* navy */
  --tw-prose-bold: rgb(16, 67, 87); /* navy */
  --tw-prose-counters: rgb(77, 118, 137); /* navy-tone */
  --tw-prose-bullets: rgb(167, 225, 252); /* navy-tint */
  --tw-prose-captions: rgb(77, 118, 137); /* navy-tone */
  --tw-prose-code: rgb(16, 67, 87);
  --tw-prose-pre-code: rgb(207, 228, 239); /* navy-lifted */

  /* Inline link palette — mirrors `navy.bright` / `navy.bright-deep` in
   * tailwind.config.ts. Defined here (scoped to .article-prose) because
   * prose is the only consumer; promote to :root if a non-prose surface
   * ever needs them. */
  --prose-link: #1C6EB4;       /* navy.bright */
  --prose-link-hover: #0F5091; /* navy.bright-deep */
}

/* Mobile body text -1px from prose-lg's 18px baseline. Tighter on small
 * screens; reverts to prose-lg's natural 18px at md+ where line lengths
 * support it. */
@media (max-width: 767px) {
  .article-prose {
    font-size: 1.0625rem; /* 17px */
  }
}

/*
 * Inline bold emphasis. @tailwindcss/typography ships `prose strong` at
 * weight 600, which collides visually with the body H2 (also 600 before
 * we bumped it to 700). Even after the H2 bump, 600 strong creates a
 * dense per-line texture when Carlos uses bold lead-ins for news items
 * — every line ends up bold-heavy and the page reads as a wall of
 * emphasis. Inter Medium (500) keeps the "this is important" scan cue
 * without dominating the line, and opens a clear 300-weight gap to H2.
 *
 * If 500 reads too quiet for the editorial register (vs NYT/Guardian's
 * 700 strong), escalate to 550 or 600 — both are valid; this is the
 * "publication voice" knob.
 */
.article-prose strong {
  font-weight: 575;
}

/*
 * Inline italic emphasis. Stays in the body family (Inter) deliberately —
 * a serif italic (Lora) mid-paragraph would introduce a visible
 * cross-family texture switch that reads as ornament rather than
 * emphasis. At body 18px on modern screens with anti-aliasing, Inter
 * italic's slant is plenty visible; the "italic sans barely stands out"
 * rule (Butterick) is a print-era observation that doesn't carry to web.
 *
 * The weight bump from 400 → 450 lifts the italic just enough to read
 * as deliberate, without crowding toward strong (still a 125-weight
 * gap). Sits in the "edge of still a tint" zone — present, not loud.
 * Inter loads as a variable font (see styles/fonts.ts), so 450 is on
 * the axis at zero extra cost.
 */
.article-prose em {
  font-weight: 450;
}

/*
 * Strong nested inside a heading must NEVER downshift the heading's
 * weight — emphasis inside a heading is structurally redundant (the
 * heading IS the emphasis) and visually destructive (creates "lighter
 * island inside heavier word" artifacts when editors accidentally bold
 * a single letter via TipTap). Inherit forces the heading's weight
 * through, regardless of what `.article-prose strong` declares.
 */
.article-prose h1 strong,
.article-prose h2 strong,
.article-prose h3 strong {
  font-weight: inherit;
}

.dark .article-prose {
  --tw-prose-body: rgb(207, 228, 239); /* navy-lifted */
  --tw-prose-bold: rgb(207, 228, 239);
  --tw-prose-counters: rgb(143, 179, 194); /* navy-dim */
  --tw-prose-bullets: rgb(167, 225, 252); /* navy-tint */
  --tw-prose-captions: rgb(143, 179, 194);
}

/*
 * List item rhythm — tighter than body paragraphs.
 *
 * Per Butterick (Practical Typography): list items are a coordinated set, not
 * a sequence of standalone paragraphs. If item spacing matches body paragraph
 * spacing, the visual signal "this is a list" collapses and items read as
 * separate thoughts. The remedy is to set li spacing TIGHTER than p spacing.
 *
 * Our body paragraphs sit at ~18-22px gaps (prose-lg's 1.25em default at the
 * 18px desktop body size). List items target ~11px (0.6em at 18px), which
 * keeps the items breathing but visibly more coordinated than paragraph-to-
 * paragraph rhythm.
 *
 * The `> p` reset zeroes the inner-paragraph margins TipTap inserts when each
 * list-item content is wrapped in <p>. Without this, p's own 24px top/bottom
 * margins stack on top of the li's margins and the list reads as 24px+ gaps
 * (what the screenshot caught).
 */
.article-prose :where(ul, ol) > li {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

.article-prose :where(ul, ol) > li > p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Multi-paragraph list items (rare): restore margin between paragraphs inside
 * the same li. The first/last paragraph keeps the reset above; only middle
 * paragraphs get spacing back. */
.article-prose :where(ul, ol) > li > p + p {
  margin-top: 0.75em;
}

/*
 * Emoji-led lists — Adamastor Weekly pattern.
 *
 * The Weekly historically uses emoji-prefixed paragraphs (🔷 Highlights, 👏
 * Congrats, 📚🎧🎥 Read/Listen/Watch, 💡 Events) as visual lists. The
 * render-time transform in lib/posts/normalize-emoji-lists.ts coerces those
 * paragraph runs into a `<ul class="emoji-list">` so they pick up real list
 * typography (item rhythm, hanging indent, semantic markup) — but the
 * emoji stays in place as the visible bullet, since the icon is a stronger
 * pre-attentive scan marker than a generic disc.
 *
 * Rules:
 *   - Suppress the default disc bullet (the emoji IS the bullet).
 *   - text-indent + padding-left = hanging indent. First line (emoji + text)
 *     starts at the column edge; wrap lines align to padding-left, which must
 *     equal the rendered width of "emoji + space" for the wrap to sit flush
 *     under the first-line text.
 *
 * 1.3em = emoji advance (~1em) + a single trailing space (~0.3em). Emoji render
 * at a fixed em-square advance regardless of which glyph, so this is measured,
 * not eyeballed: every emoji measures 1.28em (21.8px on a 17px body). An em
 * value is therefore reliable across emoji and scales with body size — the
 * earlier 1.75em over-indented wrap lines by ~0.47em.
 *
 * The "single space" matters: ProseMirror renders this read-only view with
 * white-space: pre-wrap, so multiple spaces an author types after the emoji do
 * NOT collapse the way normal HTML would. collapseEmojiPrefixWhitespace() in
 * lib/posts/normalize-emoji-lists.ts normalises the prefix to exactly one space
 * at render time, so this fixed indent stays correct for every item. (A
 * multi-emoji prefix like 📚🎧🎥 would still be wider, but those are short,
 * non-wrapping section labels, so the hanging indent never shows on them.)
 */
.article-prose ul.emoji-list {
  list-style: none;
  padding-left: 0;
}

.article-prose ul.emoji-list > li {
  padding-left: 1.3em;
  text-indent: -1.3em;
}

/*
 * Editorial blockquote — Guardian-style indent margin with navy-tint hairline.
 *
 * Single styling serves both uses: occasional inline citations inside Carlos's
 * essay prose, AND the recurring "Quote of the Week" block in the Weekly
 * digest. If/when those diverge structurally (e.g. a custom TipTap pull-quote
 * node for the Weekly block), they can get separate treatments.
 *
 * Design: Lora italic at variable-axis weight 475 (slightly heavier than the
 * default 400, more refined than 500), navy color. A 4px navy-tint vertical
 * rule at the left edge spans the full height of the citation (including the
 * attribution line) — the rule brackets the quote+attribution as one unit.
 * No quote glyph, no panel. The rule IS the affordance.
 *
 * Resets @tailwindcss/typography's defaults (left border, quotes, italic) so
 * this design has a clean canvas. The hairline stays flush with the prose
 * column edge at every viewport — no gutter escape (the gutter contains the
 * TOC on Weekly posts).
 *
 * Attribution paragraph (last child of a multi-paragraph blockquote): source
 * content carries its own leading em-dash (Carlos's convention); we don't
 * inject one via ::before, otherwise it doubles. Rendered as small-caps
 * Inter SemiBold at 11px in navy-tone.
 *
 * Chosen 2026-05-28 after picker exploration through 6 directions; see git
 * history if revisiting.
 */
.article-prose blockquote {
  position: relative;
  margin: 3.5rem 0;
  padding-left: 1.5rem;
  border-left: none; /* override prose-lg's left rule */
  quotes: none;
  color: rgb(16, 67, 87); /* navy */
  font-family: var(--font-lora-italic);
  font-style: italic;
  font-weight: 475;
  font-size: 1.375rem; /* 22px */
  line-height: 1.45;
  letter-spacing: -0.005em;
}

@media (min-width: 1024px) {
  .article-prose blockquote {
    font-size: 1.5rem; /* 24px — slight elevation for Quote-of-the-Week use */
  }
}

.article-prose blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px; /* matches optical weight of the Lora italic strokes */
  background-color: rgb(167, 225, 252); /* navy-tint */
}

.article-prose blockquote p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.article-prose blockquote p:last-child:not(:only-child) {
  margin-top: 1rem;
  margin-bottom: 0;
  font-family: var(--font-inter);
  font-style: normal;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em; /* unified publication kicker tracking */
  color: rgb(77, 118, 137); /* navy-tone */
}

/*
 * Inline prose link — pillar-coloured (Guardian-true approach).
 *
 * The link colour itself is the primary affordance. A distinct saturated
 * mid-blue (candidate name "navy.bright") shifts the link out of the body
 * navy register, so the colour reads as "interactive" without relying on
 * underline weight alone. Border-bottom is secondary.
 *
 * Earlier explorations of subtle line-only treatments (1px navy-tint border,
 * background highlight) failed the "doesn't look like a clickable URL" test
 * because they kept link colour = body colour. The Guardian doc is explicit:
 * "Link colour is pillar-coloured" — that principle applies here too.
 *
 * Hover: colour deepens to a darker shade AND border thickens 1.6px → 2px
 * (two-axis change per Guardian principle).
 *
 * Colour is driven by the `--prose-link` / `--prose-link-hover` custom
 * properties defined on `.article-prose` above. They mirror the
 * `navy.bright` / `navy.bright-deep` palette tokens in tailwind.config.ts.
 *
 * Chosen 2026-05-28 after picker exploration through multiple directions;
 * see git history if revisiting.
 */
.article-prose a {
  color: var(--prose-link);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.6px solid var(--prose-link);
  overflow-wrap: anywhere; /* raw URLs wrap inside the 60ch column */
  transition: color 180ms ease-out, border-bottom-color 180ms ease-out, border-bottom-width 180ms ease-out;
}

.article-prose a:hover,
.article-prose a:focus-visible {
  color: var(--prose-link-hover);
  border-bottom-color: var(--prose-link-hover);
  border-bottom-width: 2px;
}

.article-prose a:focus-visible {
  outline: 2px solid rgb(167, 225, 252); /* navy-tint */
  outline-offset: 4px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .article-prose a {
    transition: none;
  }
}

/* Dark-mode counterpart. navy.bright-dark (#6DB7EA) is the dark analogue of
 * navy.bright — a lifted blue that reads as "interactive" against the dark
 * background the same way navy.bright reads as a link against white. */
.dark .article-prose a {
  color: rgb(109, 183, 234); /* navy-bright-dark */
  border-bottom-color: rgb(109, 183, 234);
}

.dark .article-prose a:hover,
.dark .article-prose a:focus-visible {
  color: rgb(143, 203, 242); /* navy bright-deep, lifted */
  border-bottom-color: rgb(143, 203, 242);
}

.dark .article-prose blockquote {
  color: rgb(207, 228, 239); /* navy-lifted */
}

.dark .article-prose blockquote::before {
  background-color: rgb(167, 225, 252); /* navy-tint */
}