/* /features/ (step 5c), on the D3 system (/system/tokens.css, components.css). A reference page: one column of copy,
   canvases beneath their copy, always on the same side (no zig-zag), compact sections.
   Canvases: 10 columns from 1200 px (979 at 1440), content width below; two-ups side by side from 1200 (6 + 6 of 12), stacked below.
   Reading size (verify-overhaul): desk files are 900 CSS px wide, half files 560, so writing never drops under 13 px. */

.d3-feat-top { padding-block: clamp(32px, 20.11px + 3.048vw, 64px) var(--sx-s7); }
.d3-feat-top .sx-d1 { margin-bottom: var(--sx-s5); }
.d3-toc ul { list-style: none; margin: var(--sx-s6) 0 0; padding: var(--sx-s5) 0 0; border-top: 1px solid var(--sx-line); display: grid; gap: var(--sx-s2) var(--sx-gutter); }
@media (min-width: 720px) { .d3-toc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .d3-toc ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.d3-toc a { font: 500 15px/1.4 var(--sx-ui); text-decoration: none; }
.d3-toc a:hover { text-decoration: underline; }

/* compact sections: half the homepage's gap between beats, a hairline between features */
.d3-feat { --sx-section: clamp(48px, 36.11px + 3.048vw, 80px); border-top: 1px solid var(--sx-line); }
.sx-section.d3-feat + .sx-section.d3-feat { padding-top: var(--sx-section); }
.d3-feat-head { margin-bottom: var(--sx-s6); align-items: start; }
@media (min-width: 900px) {
  .d3-feat-head > :first-child { grid-column: 1 / span 4; }
  .d3-feat-head > :nth-child(2), .d3-feat-head > div { grid-column: 5 / span 6; }
}
@media (min-width: 900px) and (max-width: 1199px) { .d3-feat-head > :nth-child(2), .d3-feat-head > div { grid-column: 5 / -1; } }
.d3-feat-head .sx-d3 { padding-top: 2px; }
.d3-feat-head .sx-body { margin: 0; max-width: 36em; }
.d3-feat-head .sx-body + .sx-body, .d3-feat-head .sx-body + .sx-small, .d3-feat-head .sx-small + .sx-small { margin-top: var(--sx-s3); }
.d3-feat-head .sx-small { margin: var(--sx-s3) 0 0; }
.d3-feat-head .sx-strong { color: var(--sx-ink); font-weight: 600; }

/* canvases: the system's .sx-canvas (aspect 1.613 from 900, the phone file below); half files are 1120 x 1190 */
@media (min-width: 900px) { .d3-half { aspect-ratio: 1120 / 1190; } }
@media (min-width: 1200px) {
  .d3-feat-fig:not(.d3-feat-app) { width: calc((100% - 11 * var(--sx-gutter)) / 12 * 10 + 9 * var(--sx-gutter)); }
  .d3-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sx-gutter); } /* 6 + 6 columns: 578 px each at 1440, 556 at 1200 */
  .d3-two .d3-feat-fig { width: auto; }
}
@media (max-width: 1199px) { .d3-two { display: grid; gap: var(--sx-s6); } }
.d3-two .sx-canvas { overflow: visible; }
.d3-two .sx-canvas picture { display: block; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.d3-cap { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--sx-s2); white-space: nowrap; }
.d3-two { padding-bottom: 28px; }
@media (max-width: 719px) { .d3-cap { left: var(--sx-pad); } }

/* the app icons: a tile on the canvas ground (no writing in them) */
.d3-tile { margin: 0; } /* release 7, the ornament inventory (Randall): P14, the app icon on its own, no card */
.d3-tile img { width: 128px; height: 128px; display: block; }
@media (min-width: 1100px) { .d3-tile-narrow { display: none; } }

/* the gather figure (live homepage's, unchanged script): shown from 720 px, where its writing (12.5 px in a 583 px file)
   reaches 13 px; 8 columns from 1200, content width below */
.d3-gather { margin: 0; min-width: 0; }
.d3-gather img { display: block; width: 100%; height: auto; }
@media (max-width: 719px) { .d3-gather { display: none; } }
@media (min-width: 1200px) { .d3-gather { width: calc((100% - 11 * var(--sx-gutter)) / 12 * 8 + 7 * var(--sx-gutter)); } }
[data-subtextual-visual] .sv-foot { display: none !important; }
[data-subtextual-visual] .sv-cap, [data-subtextual-visual] .sv-btn { font-family: var(--sx-ui) !important; }
/* tap-to-pause (figure-pause.js): the figure itself pauses and plays; a chip shows the state */
[data-tap-pause] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-tap-pause]:focus { outline: none; }
[data-tap-pause]:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 6px; border-radius: 12px; }
.fig-chip { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(20, 22, 26, 0.55); color: #fff; opacity: 0; pointer-events: none; transition: opacity var(--sx-dur-2) var(--sx-ease); }
.fig-chip svg { display: block; fill: currentColor; }
@media (hover: hover) { [data-tap-pause]:hover .fig-chip { opacity: 0.45; } }
[data-tap-pause]:focus-visible .fig-chip { opacity: 0.85; }
[data-tap-pause].is-paused .fig-chip { opacity: 0.5; }
[data-tap-pause].chip-flash .fig-chip { opacity: 1; }

.d3-capture-11 b { color: var(--sx-ink); }

/* Context notes: the phone still is cropped to the note (720 x 580), so its canvas takes that shape below 900 px (QA 6a, D9) */
@media (max-width: 899px) { .d3-ctx { aspect-ratio: 720 / 580; } }