/* editing.help site system · components. Builds on tokens.css. Spec: system.md, "Components".
   The chrome (nav, Product menu, phone sheet, footer) stays in site-chrome.css (direction B) plus chrome.css (the fixed
   Product menu, the icon family in the chrome, one contrast fix); this file only aligns the chrome to the grid. */

/* ---------- Chrome: alignment to the 1180 grid (the Product menu's icons, destinations and one contrast fix are in
   chrome.css, which every product page loads with site-chrome.css) ---------- */
.sc-wrap { max-width: calc(var(--sx-content) + 2 * var(--sx-pad)); padding-inline: var(--sx-pad); }

/* ---------- Canvas: one product figure at reading size ---------- */
/* Desktop files from 900 px (stage 1552 x 962, wide 2000 x 1240: one ratio, 1.613); phone files 720 x 1180 below. Phones run it edge to edge. */
.sx-canvas { position: relative; margin: 0; aspect-ratio: 1552 / 962; border-radius: var(--sx-radius); overflow: hidden; background: var(--sx-ground-2); box-shadow: var(--sx-surface); }
.sx-canvas img, .sx-canvas video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-canvas video { opacity: 0; transition: opacity var(--sx-dur-2) var(--sx-ease); }
.sx-canvas.is-live video { opacity: 1; }
@media (max-width: 899px) { .sx-canvas { aspect-ratio: 720 / 1180; } }
@media (min-width: 720px) and (max-width: 899px) { .sx-canvas { max-width: 480px; margin-inline: auto; } }
@media (max-width: 719px) { .sx-canvas { margin-inline: calc(-1 * var(--sx-pad)); border-radius: 0; box-shadow: 0 -1px 0 var(--sx-ring), 0 1px 0 var(--sx-ring); } } /* edge to edge: hairlines, no lift */

/* Elevation (release 6, system.md § 5): a surface whose picture fills it would hide an inset highlight, so its highlight is drawn on
   top, by a pseudo-element (dark only: --sx-highlight is transparent in light). */
:is(.sx-canvas, .sx-stage, .hero-film, .d3-crop, .cap-page .shot)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--sx-highlight); pointer-events: none; }
@media (max-width: 719px) { :is(.sx-canvas, .d3-crop)::after { content: none; } }

/* The whole-app still: desktop only, and only where it renders >= 1024 px wide (its writing is 28.35 file px in 2232) */
.sx-canvas-app { aspect-ratio: 2232 / 1384; }
@media (max-width: 1099px) { .sx-canvas-app { display: none; } }

/* The loop control: every loop can be paused (click or tap anywhere on it, or this button: Enter / Space). */
.sx-loop-btn { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--sx-ground-2) 92%, transparent); color: var(--sx-ink); box-shadow: 0 0 0 1px var(--sx-ui-line); cursor: pointer; opacity: 0.88; transition: opacity var(--sx-dur-1) var(--sx-ease); }
.sx-loop-btn:hover, .sx-loop-btn:focus-visible, .is-paused .sx-loop-btn { opacity: 1; }
.sx-loop-btn .sx-icon { width: 18px; height: 18px; }
.sx-loop-btn .sx-i-play, .is-paused .sx-loop-btn .sx-i-pause { display: none; }
.is-paused .sx-loop-btn .sx-i-play { display: block; }
.sx-loop-btn[hidden] { display: none; }
[data-loop] { cursor: pointer; }

/* ---------- Three-up: three short points in a labelled row ---------- */
.sx-three { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sx-s6) var(--sx-gutter); }
.sx-three > li { padding-top: var(--sx-s5); border-top: 1px solid var(--sx-line-2); }
.sx-three .sx-d4 { margin-bottom: var(--sx-s2); }
.sx-three p { margin: 0; }
@media (min-width: 900px) { .sx-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Trust strip: one row, four facts, each with its one link ---------- */
.sx-trust { list-style: none; margin: 0; padding: var(--sx-s6) 0; display: grid; gap: var(--sx-s5) var(--sx-gutter); } /* release 7, the ornament inventory (Randall): P12, no framing rules */
.sx-trust b { display: block; margin-bottom: var(--sx-s1); color: var(--sx-ink); font: 600 var(--sx-body)/1.35 var(--sx-ui); text-wrap: balance; }
/* release 7, P12: the gold dot before each label is gone */
.sx-trust p { margin: 0; }
@media (min-width: 720px) { .sx-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sx-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Pricing card ---------- */
.sx-plans { display: grid; gap: var(--sx-gutter); }
@media (min-width: 900px) { .sx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sx-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Step B: four plans (Patron added) */
.sx-plan { display: flex; flex-direction: column; gap: var(--sx-s3); padding: var(--sx-s5) 0 0; border-top: 1px solid var(--sx-line-2); } /* release 7, the ornament inventory (Randall): P08, a plain column under one hairline, like a step column; all three equal */
.sx-plan .sx-d4 { margin: 0; }
.sx-price { margin: 0; color: var(--sx-ink); font: 600 30px/1.1 var(--sx-ui); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sx-price small { margin-left: 4px; color: var(--sx-muted); font: 400 var(--sx-small)/1 var(--sx-ui); letter-spacing: 0; }
.sx-plan p:not(.sx-price) { margin: 0; }
.sx-plan .sx-more { margin-top: auto; padding-top: var(--sx-s2); }

/* ---------- FAQ row ---------- */
.sx-faq { max-width: 46rem; border-top: 1px solid var(--sx-line-2); }
.sx-faq details { border-bottom: 1px solid var(--sx-line-2); }
.sx-faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sx-s4); padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--display); color: var(--sx-ink); }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary .sx-icon { color: var(--sx-muted); transition: transform var(--sx-dur-2) var(--sx-ease); align-self: center; }
.sx-faq details[open] summary .sx-icon { transform: rotate(45deg); }
.sx-faq details p { margin: 0 0 20px; max-width: 36em; }
.sx-faq details[open] > :not(summary) { animation: sx-arrive var(--sx-dur-3) var(--sx-ease) both; } /* the answer arrives; no height animation */

/* ---------- The ask row (release 7; ASK-SHEET R1–R12, system/ask.js): one more FAQ row, in the FAQ's own type and size ----------
   "Ask anything about Subtextual." A labelled field; Enter sends; the answer arrives beneath the question on a hollow bullet (the only
   mark: no icon, no colour). Scripts off: not rendered. With scripts, the slot holds the row's resting height before ask.js fills it,
   so nothing below moves when it appears (CLS 0): 18 + 28 (the label line) + 12 + 44 (the field) + 20 + 1 (the hairline) = 123 px. */
.sx-ask { display: none; }
html.sx-js .sx-ask { display: block; min-height: 123px; padding: 18px 0 20px; border-bottom: 1px solid var(--sx-line-2); }
.sx-ask-form { margin: 0; }
.sx-ask-label { display: block; margin: 0 0 12px; font-family: var(--display); font-size: calc(var(--sx-d4) * var(--sx-d-scale)); font-weight: var(--sx-d4-wt); letter-spacing: var(--sx-d4-ls); line-height: 28px; color: var(--sx-ink); }
.sx-ask-field { display: block; width: 100%; max-width: 36em; height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--sx-ui-line); border-radius: var(--sx-radius-s); background: var(--sx-ground-2); color: var(--sx-ink); font: 400 16px/1.4 var(--sx-ui); }
.sx-ask-field::placeholder { color: var(--sx-muted); opacity: 1; }
.sx-ask-field:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
.sx-ask .sx-ask-note { margin: var(--sx-s2) 0 0; max-width: 36em; color: var(--sx-muted); font-size: var(--sx-caption); line-height: 1.45; }
.sx-ask-note[hidden], .sx-ask-out:empty { display: none; }
.sx-ask-out { margin-top: var(--sx-s5); max-width: 36em; }
.sx-ask .sx-ask-asked { margin: 0 0 var(--sx-s2); font-family: var(--display); font-size: calc(var(--sx-d4) * var(--sx-d-scale)); font-weight: var(--sx-d4-wt); letter-spacing: var(--sx-d4-ls); line-height: var(--sx-d4-lh); color: var(--sx-ink); overflow-wrap: anywhere; }
.sx-ask .sx-ask-line { margin: 0; color: var(--sx-soft); font-size: var(--sx-small); line-height: 1.5; }
.sx-ask .sx-ask-wait { margin: 0; color: var(--sx-muted); font-size: var(--sx-small); line-height: 1.5; } /* "Reading the site…": no dots, no animation */
/* the answer's slot (release 7, CLS 0 at any reply speed): reserved on Enter, inside the input window, with R6 in it; the reply then fills
   space that's already there. Four lines of answer and R4's line from 720 px (the dev answers: 2–3 lines), six below (the dev answers: 4).
   A longer answer grows the slot downward; refusals and the limit lines sit inside it. */
.sx-ask-slot { --ask-lines: 4; min-height: calc(var(--ask-lines) * 1.6 * var(--sx-small) + var(--sx-s2) + 1.45 * var(--sx-caption)); }
@media (max-width: 719px) { .sx-ask-slot { --ask-lines: 6; } }
/* the answer: a hollow bullet (the AI's mark, as in the app), the quotes and joins as one paragraph, then R4 with the server's link */
.sx-ask-a { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; animation: sx-arrive var(--sx-dur-3) var(--sx-ease) both; }
.sx-ask-dot { width: 8px; height: 8px; margin-top: 0.55em; border: 1.5px solid var(--sx-soft); border-radius: 50%; justify-self: center; }
.sx-ask .sx-ask-a p { margin: 0; }
.sx-ask .sx-ask-text { color: var(--sx-soft); font-size: var(--sx-small); line-height: 1.6; }
.sx-ask .sx-ask-a .sx-ask-src { margin-top: var(--sx-s2); color: var(--sx-muted); font-size: var(--sx-caption); line-height: 1.45; }
.sx-ask a { color: var(--sx-accent); }
@media (prefers-reduced-motion: reduce) { .sx-ask-a { animation: none; } } /* the answer appears without a reveal */

/* ---------- Callout: one note that qualifies a section, with its link ---------- */
/* .sx-callout: no longer used on the site since release 7 (the ornament inventory); kept only for the app, which syncs from site/system/ */
.sx-callout { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sx-s2) var(--sx-s5); padding: var(--sx-s4) var(--sx-s5); border-radius: var(--sx-radius-s); background: var(--sx-ground-2); box-shadow: inset 3px 0 0 var(--sx-gold), var(--sx-surface-s); }
.sx-callout p { margin: 0; color: var(--sx-ink); }

/* ---------- Close: the last call, on the page's own ground (no dark band) ---------- */
.sx-close { padding-block: var(--sx-section); text-align: center; } /* release 7, the ornament inventory (Randall): P13, no band or rule; the only centred stack on the site */
.sx-close .sx-d1 { margin-bottom: var(--sx-s6); }
.sx-close .sx-practical { margin-top: var(--sx-s3); }

/* ---------- Legal page template (/privacy/, /terms/, /refunds/, /support/) ---------- */
.sx-legal { max-width: 44rem; margin-inline: auto; padding: var(--sx-section) var(--sx-pad); }
.sx-legal h1 { margin-bottom: var(--sx-s3); }
.sx-legal .sx-updated { margin: 0 0 var(--sx-s6); color: var(--sx-muted); font-size: var(--sx-small); }
.sx-legal .sx-summary { margin-bottom: var(--sx-s3); padding: var(--sx-s5); border-radius: var(--sx-radius); background: var(--sx-ground-2); box-shadow: var(--sx-surface-s); }
.sx-legal .sx-summary p { margin: 0; color: var(--sx-ink); }
.sx-legal .sx-summary p + p { margin-top: var(--sx-s3); }
.sx-legal h2 { margin: var(--sx-s8) 0 var(--sx-s3); }
.sx-legal h3 { margin: var(--sx-s6) 0 var(--sx-s2); color: var(--sx-ink); font: 600 var(--sx-body)/1.4 var(--sx-ui); }
.sx-legal p, .sx-legal li { color: var(--sx-soft); }
.sx-legal table { width: 100%; border-collapse: collapse; font-size: var(--sx-small); }
.sx-legal th, .sx-legal td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sx-line-2); }

/* ---------- The sticky canvas, base: every width (the homepage's #how). The window itself is system/sticky-canvas.css, from 1200 px. ---------- */
.sx-sticky { position: relative; }
.sx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sx-s8); }
.sx-step { min-width: 0; }
.sx-step-title { margin: 0 0 var(--sx-s2); }
.sx-step-link { display: inline-flex; align-items: baseline; gap: 12px; color: inherit; text-decoration: none; border-radius: 4px; }
.sx-step-link:hover { color: inherit; }
.sx-step-link .sx-num { flex: none; min-width: 1ch; transform: translateY(-0.12em); }
.sx-step-copy p { margin: 0; max-width: 30em; color: var(--sx-soft); font-size: var(--sx-body); line-height: 1.55; text-wrap: pretty; }
.sx-step-fig { margin-top: var(--sx-s5); }
.sx-window { display: none; }