/* Dot register in the reader (docs/DESIGN_SYSTEM.md): dot glyphs, sources and dot plates. */

svg.weave-dots { display: block; fill: currentColor; flex: none; }

/* DM review stays with the source marks in the margin, outside the reading flow. */
:is(.world-article, .recap-document) .has-review-notes { position: relative; }
.dm-review-mark { position: absolute; top: .5em; right: calc(100% + var(--weave-space-2)); font: var(--weave-text-xs)/1.5 var(--weave-font-ui); font-style: normal; }
.world-article .dm-review-mark { right: calc(100% + var(--weave-space-1)); }
.has-sources > .dm-review-mark { right: calc(100% + var(--weave-space-2) + 28px); }
.world-article .has-sources > .dm-review-mark { right: calc(100% + var(--weave-space-1) + 28px); }
.dm-review-control { display: grid; place-items: center; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: var(--weave-radius-full); background: transparent; color: var(--weave-color-secondary); font: 16px/1 var(--weave-font-ui); cursor: pointer; }
.dm-review-control:hover, .dm-review-control:focus-visible { background: var(--weave-color-hover); color: var(--weave-color-action); }
.dm-review-control:focus-visible { outline: 2px solid var(--weave-color-action); outline-offset: 2px; }
.dm-review-details { position: absolute; top: 0; left: 100%; z-index: 41; width: max-content; max-width: min(17rem, calc(100vw - 80px)); padding: var(--weave-space-3); border-radius: var(--weave-radius-md); background: var(--weave-color-paper); color: var(--weave-color-ink); box-shadow: var(--weave-shadow-overlay); }
.dm-review-details > span { display: block; }
@media (max-width: 640px) {
  :is(.world-article, .recap-document) .has-review-notes > .dm-review-mark { position: relative; top: auto; right: auto; float: right; margin-left: var(--weave-space-2); }
  .dm-review-details { top: 100%; right: 0; left: auto; }
}

/* The page's one flame divider (opening to story) and the end mark */
.recap-opening-divider { display: flex; justify-content: center; margin: var(--weave-space-5) 0 var(--weave-space-7); color: var(--weave-color-spark); }
.recap-opening-divider svg { max-width: 100%; height: auto; }
.recap-end-mark { display: flex; justify-content: center; margin-top: var(--weave-space-6); color: var(--weave-color-action); }

/* Trust line under the title */
.session-hero-copy .recap-trust-line, .recap-trust-line { display: flex; align-items: center; gap: var(--weave-space-2); margin: var(--weave-space-2) 0 0; color: var(--weave-color-secondary); font: var(--weave-text-xs)/1.4 var(--weave-font-ui); }

/* Source marks: hidden until the paragraph is pointed at or focused, never counted */
.session-summary-full { position: relative; }
.recap-document { --recap-toolbar-height: 0px; }
.recap-document > p.has-sources { position: relative; }
.recap-document .source-mark {
  position: absolute; top: .5em; right: calc(100% + var(--weave-space-2)); display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--weave-radius-full); background: transparent; color: var(--weave-color-secondary); cursor: pointer;
  opacity: 0; transition: opacity var(--weave-duration-fast) ease-out;
}
.recap-document > p.has-sources:hover .source-mark, .recap-document .source-mark:focus-visible, .recap-document .is-cited .source-mark { opacity: 1; }
.recap-document .source-mark:hover, .recap-document .source-mark:focus-visible { background: var(--weave-color-hover); color: var(--weave-color-action); }
.recap-document .is-cited { background: var(--weave-color-tint); box-shadow: -8px 0 0 var(--weave-color-tint), 8px 0 0 var(--weave-color-tint); border-radius: var(--weave-radius-sm); }
.chapter-sources {
  display: inline-flex; align-items: center; gap: var(--weave-space-2); margin: 0 0 var(--weave-space-4); padding: 0; border: 0; background: none;
  color: var(--weave-color-secondary); font: var(--weave-text-xs)/1.4 var(--weave-font-ui); cursor: pointer;
}
.chapter-sources:hover, .chapter-sources:focus-visible { color: var(--weave-color-action); }

/* "From the table": beside the cited paragraph in the reading margin */
.table-note {
  position: absolute; left: calc(100% + var(--weave-space-6)); width: 17rem; z-index: 40;
  padding: var(--weave-space-4); border-radius: var(--weave-radius-md); background: var(--weave-color-paper); box-shadow: var(--weave-shadow-overlay);
  font: var(--weave-text-sm)/1.5 var(--weave-font-ui);
}
.table-note-head { display: flex; align-items: center; justify-content: space-between; }
.table-note-head .eyebrow { margin: 0; }
.table-note-close { display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: var(--weave-radius-full); background: transparent; color: var(--weave-color-secondary); font: var(--weave-text-xl)/1 var(--weave-font-ui); cursor: pointer; }
.table-note-entry { margin-top: var(--weave-space-3); }
.table-note-entry.compact + .table-note-entry.compact { padding-top: var(--weave-space-3); border-top: 1px solid var(--weave-color-rule); }
.table-note-speaker { display: block; font: var(--weave-weight-medium) var(--weave-text-md)/1.3 var(--weave-font-display); }
.table-note-meta { display: flex; flex-wrap: wrap; gap: 2px var(--weave-space-3); margin: 2px 0 var(--weave-space-2); color: var(--weave-color-secondary); font-size: var(--weave-text-xs); }
.table-note-time { font-family: var(--weave-font-mono); }
.table-note-entry blockquote { margin: 0; padding: 0; border: 0; color: var(--weave-color-ink); font: var(--weave-text-sm)/1.55 var(--weave-font-reading); }
.table-note-link { display: inline-block; margin-top: var(--weave-space-3); font-size: var(--weave-text-xs); }
/* The margin belongs to the chapter panel, so the one-time hint sits above the story. */
.table-hint { display: flex; align-items: center; justify-content: space-between; gap: var(--weave-space-4); max-width: var(--weave-measure-prose); margin: 0 0 var(--weave-space-5); padding: var(--weave-space-3) var(--weave-space-4); border: 1px dashed var(--weave-color-rule-strong); border-radius: var(--weave-radius-md); color: var(--weave-color-secondary); font: var(--weave-text-xs)/1.5 var(--weave-font-ui); }
.table-hint p { margin: 0; }
.table-hint strong { display: block; margin-bottom: 2px; color: var(--weave-color-ink); }
.table-hint svg.weave-dots { display: inline-block; vertical-align: -1px; margin: 0 2px; color: var(--weave-color-ink); }

/* Without room in the margin, the note rises as a sheet and marks give way to chapter lines. */
@media (max-width: 1180px) {
  .table-note { position: fixed; top: auto; right: var(--weave-space-3); bottom: calc(var(--weave-space-3) + env(safe-area-inset-bottom)); left: var(--weave-space-3); width: auto; max-width: 36rem; margin: 0 auto; }
}
@media (max-width: 640px) {
  .recap-document .source-mark { display: none; }
  .table-note { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Develop: a dot plate stands in for loading art, then crossfades into it once. */
.weave-develop { position: relative; }
.weave-develop.is-developing > img { opacity: 0; }
.weave-develop > canvas.weave-plate { position: absolute; max-width: 100%; object-fit: cover; color: var(--weave-color-ink); transition: opacity 900ms var(--weave-ease); pointer-events: none; }
.weave-develop > canvas.weave-plate.developed { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .recap-document .source-mark, .weave-develop > canvas.weave-plate { transition: none; } }

/* Published documents share the reader's type and layout with legacy recaps. */
:is(#sessionWikiArticle,.recap-review-reader) .published-recap-title { margin: 0 0 var(--weave-space-4); color: var(--weave-color-ink); font: var(--weave-weight-semibold) var(--weave-text-3xl) / var(--weave-leading-tight) var(--weave-font-display); }
:is(#sessionWikiArticle,.recap-review-reader) .recap-document h2 { margin: var(--weave-space-7) 0 var(--weave-space-4); font: var(--weave-weight-medium) var(--weave-text-2xl) / var(--weave-leading-snug) var(--weave-font-display); scroll-margin-top: calc(var(--shell-header-height) + var(--recap-toolbar-height, 0px) + var(--weave-space-5)); }
:is(#sessionWikiArticle,.recap-review-reader) .recap-pullquote blockquote { margin: 0; padding: 0; border: 0; font: inherit; }
:is(#sessionWikiArticle,.recap-review-reader) .recap-pullquote figcaption { margin-top: var(--weave-space-1); color: var(--weave-color-secondary); font: var(--weave-text-sm) / var(--weave-leading-ui) var(--weave-font-ui); }
.recap-neighbors { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--weave-space-5); margin-top: var(--weave-space-7); font: var(--weave-text-sm) / var(--weave-leading-ui) var(--weave-font-ui); }
.recap-document .has-sources { position: relative; }
.recap-document .has-sources:focus-within .source-mark, .recap-document .has-sources:hover .source-mark { opacity: 1; }
.table-note { max-height: 70dvh; overflow-y: auto; }
@media (max-width: 640px) {
  .recap-document .source-mark { display: grid; position: static; float: right; opacity: 1; margin-left: var(--weave-space-2); }
}

:is(#sessionWikiArticle,.recap-review-reader) .session-hero-copy .session-detail-count { color: var(--weave-color-secondary); font: var(--weave-text-xs) / var(--weave-leading-ui) var(--weave-font-ui); }
:is(#sessionWikiArticle,.recap-review-reader) .recap-document { color: var(--weave-color-ink); font: var(--weave-text-lg) / var(--weave-leading-reading) var(--weave-font-reading); }
:is(#sessionWikiArticle,.recap-review-reader) .recap-document h2 { color: var(--weave-color-ink); }

.transcript-passage-target { background: var(--weave-color-tint); scroll-margin-top: calc(var(--shell-header-height) + var(--weave-space-5)); }