/* studio-blocks.css — the blocks in a Studio post (https://studio.saras.market/docs/blocks).
   Put contentHtml inside <div class="studio-body">…</div>. Only block rules live here; your site's
   typography (fonts, sizes, paragraph spacing) stays yours. Override the colours on .studio-body. */
.studio-body {
  --studio-ink: #1c1c1a;
  --studio-ink-dim: #55534e;
  --studio-ink-mute: #77746d;
  --studio-line: #e4e1da;
  --studio-surface: #faf9f6;
  --studio-surface-deep: #f1efe9;
  --studio-accent: #2d6cdf;
  --studio-warn: #b7791f;
  --studio-paper: #ffffff;
  overflow-wrap: anywhere;
}

/* Pictures and their captions. */
.studio-body img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.studio-body figure { margin: 1.9em 0; }
.studio-body figure img { margin: 0; width: 100%; border: 1px solid var(--studio-line); }
.studio-body figcaption { font-size: 0.82rem; line-height: 1.45; color: var(--studio-ink-mute); margin-top: 0.65em; text-align: center; }
.studio-body figcaption a { color: var(--studio-ink-dim); }

/* Video and map: a picture until a tap (studio-blocks.js swaps in the player or the live map). */
.studio-body figure[data-embed] { position: relative; }
.studio-body figure[data-embed="youtube"] img, .studio-body figure[data-embed="vimeo"] img { aspect-ratio: 16 / 9; object-fit: cover; }
.studio-body figure[data-embed="map"] img { aspect-ratio: 16 / 10; object-fit: cover; }
.studio-body figure[data-tap] { cursor: pointer; }
.studio-body figure[data-tap]:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 4px; border-radius: 4px; }
.studio-body figure[data-embed] iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; background: var(--studio-surface-deep); }
.studio-body figure[data-embed="map"] iframe { aspect-ratio: 16 / 10; }
.studio-body figure[data-embed="youtube"]:not([data-live])::after, .studio-body figure[data-embed="vimeo"]:not([data-live])::after {
  content: ''; position: absolute; left: 50%; top: calc(50% - 1.2rem); width: 3.4rem; height: 3.4rem;
  transform: translate(-50%, -50%); border-radius: 9999px; background: rgba(20, 20, 20, 0.86);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); pointer-events: none;
}
.studio-body figure[data-embed="youtube"]:not([data-live])::before, .studio-body figure[data-embed="vimeo"]:not([data-live])::before {
  content: ''; position: absolute; left: calc(50% + 0.15rem); top: calc(50% - 1.2rem); transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.55rem 0 0.55rem 0.95rem; border-color: transparent transparent transparent #fff; z-index: 1; pointer-events: none;
}
.studio-body figure[data-embed="map"][data-tap]:not([data-live])::after {
  content: attr(data-tap); position: absolute; right: 0.6rem; top: 0.6rem; padding: 0.28rem 0.6rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92); color: var(--studio-ink-dim); font: 0.68rem/1.2 ui-monospace, monospace;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); pointer-events: none;
}
.studio-body figure[data-live]::after, .studio-body figure[data-live]::before { display: none; }

/* A quoted post from X: a plain quote, the author and the link under it. No widget. */
.studio-body figure[data-embed="post"] blockquote {
  margin: 0; padding: 1rem 1.2rem; border: 1px solid var(--studio-line); border-left: 3px solid var(--studio-ink);
  border-radius: 6px; background: var(--studio-surface); font-style: normal;
}
.studio-body figure[data-embed="post"] blockquote p { margin: 0 0 0.6em; }
.studio-body figure[data-embed="post"] blockquote p:last-child { margin-bottom: 0; }

/* Tables: a header row, hairlines, a zebra. A wide one scrolls inside the column on a phone. */
.studio-body table { border-collapse: collapse; width: 100%; margin: 1.6em 0; font-size: 0.92em; line-height: 1.45; }
.studio-body th, .studio-body td { border: 1px solid var(--studio-line); padding: 0.55em 0.75em; text-align: left; vertical-align: top; }
.studio-body th { background: var(--studio-surface-deep); font-weight: 650; font-size: 0.9em; }
.studio-body tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.018); }

/* A computed fact table (sunrise and sunset): the caption says what was computed, for where. */
.studio-body table[data-block="fact"] caption { caption-side: top; text-align: left; padding: 0 0 0.5em; font-size: 0.86em; color: var(--studio-ink-dim); }
.studio-body table[data-block="fact"] td:not(:first-child), .studio-body table[data-block="fact"] th:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Callouts: the short answer (primary), an aside (accent), and the sources box that closes a post. */
.studio-body aside[data-callout] { border-left: 3px solid var(--studio-accent); border-radius: 6px; background: var(--studio-surface-deep); padding: 1em 1.2em; margin: 1.6em 0; font-size: 0.95em; }
.studio-body aside[data-callout] > :last-child { margin-bottom: 0; }
.studio-body aside[data-callout="accent"] { border-left-color: var(--studio-warn); }
.studio-body aside[data-callout="sources"] { border-left-color: var(--studio-line); font-size: 0.88em; color: var(--studio-ink-dim); }

/* The FAQ block, and its accordion once studio-blocks.js runs (without the script every answer shows). */
.studio-body section[data-block="faq"] { margin: 2.4em 0; padding-top: 1.4em; border-top: 1px solid var(--studio-line); }
.studio-body section[data-block="faq"] > h2 { margin-top: 0; }
.studio-body section[data-block="faq"] h3 { font-size: 1.02rem; font-weight: 650; margin: 1.5em 0 0.4em; }
.studio-body section[data-block="faq"] h3[data-faq-toggle] { cursor: pointer; user-select: none; display: flex; align-items: baseline; gap: 0.6em; margin: 0; padding: 0.85em 0; border-top: 1px solid var(--studio-line); }
.studio-body section[data-block="faq"] h3[data-faq-toggle]:first-of-type { border-top: 0; }
.studio-body section[data-block="faq"] h3[data-faq-toggle]::before {
  content: ''; flex: none; width: 0.5em; height: 0.5em; margin-top: 0.05em;
  border-right: 1.5px solid var(--studio-ink-mute); border-bottom: 1.5px solid var(--studio-ink-mute);
  transform: rotate(-45deg); transition: transform 150ms ease;
}
.studio-body section[data-block="faq"] h3[data-faq-toggle][aria-expanded="true"]::before { transform: rotate(45deg); }
.studio-body section[data-block="faq"] h3[data-faq-toggle]:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }

/* The table of contents, when you render the payload's toc as <nav data-toc> (the guide shows the markup). */
.studio-toc { margin: 0 0 2em; padding: 0.9rem 1.1rem; border: 1px solid var(--studio-line, #e4e1da); border-radius: 8px; background: var(--studio-surface, #faf9f6); font-size: 0.92em; }
.studio-toc summary { cursor: pointer; font-weight: 650; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--studio-ink-dim, #55534e); list-style: none; }
.studio-toc summary::-webkit-details-marker { display: none; }
.studio-toc ol { margin: 0.7em 0 0; padding-left: 1.2em; }
.studio-toc li { margin: 0.25em 0; }
.studio-toc li[data-level="3"] { margin-left: 1em; font-size: 0.94em; }

@media (max-width: 40rem) {
  .studio-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .studio-body th, .studio-body td { overflow-wrap: normal; min-width: 5.5em; }
  .studio-body th { white-space: nowrap; }
  .studio-body table[data-block="fact"] { display: table; }
  .studio-body table[data-block="fact"] th, .studio-body table[data-block="fact"] td { min-width: 0; }
  .studio-body figure[data-embed="map"][data-tap]:not([data-live])::after { font-size: 0.62rem; }
}