/*
 * The Script step as one document (js/script-doc.js, the "ws-doc" slot).
 * Stage tokens only (--s-*, css/look-stage.css), with the same fallbacks as css/shell-ui.css; type roles from styles.css.
 * Wide: section markers in a left gutter, the article at the reading measure, comments in a right margin.
 * Narrow (the editor under 880px): one column; a small label above each section, comments under their paragraph.
 */
.sdoc, .app .card.set-card.script-card.sdoc { display: flex; flex-direction: column; gap: var(--s5, 20px); max-width: none; }
.sdoc-head { display: flex; flex-direction: column; gap: var(--s2, 8px); }
.sdoc-head .step-head { margin: 0; }
.sdoc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s4, 16px); margin: 0; }
.sdoc-len { color: var(--s-ink-2, var(--dk-t-636366, #636366)); font-variant-numeric: tabular-nums; }
.sdoc-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--s-peri-soft, rgba(135, 153, 195, .16)); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); font: var(--type-meta); cursor: pointer;
}
.sdoc-chip:hover { background: var(--s-line, var(--dk-b-1f1f21a10, rgba(31, 31, 33, .10))); }
.sdoc-chip:focus-visible { outline: 2px solid var(--s-peri, #8799C3); outline-offset: 2px; }
.sdoc-tells { color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.sdoc-tellbtn { margin-left: 4px; }

/* ---- the page: gutter | article | margin */
.sdoc-body {
  position: relative; display: grid; align-items: start;
  grid-template-columns: 9.5rem minmax(0, var(--measure, 66ch)) minmax(13rem, 16rem); column-gap: var(--s7, 32px);
}
.sdoc-gutter { grid-column: 1; grid-row: 1; position: relative; align-self: stretch; }
.sdoc-article { grid-column: 2; grid-row: 1; }
.sdoc-under { grid-column: 2; grid-row: 1; position: relative; height: 0; align-self: start; pointer-events: none; z-index: 2; }
.sdoc-margin { grid-column: 3; grid-row: 1; position: relative; align-self: stretch; }

.sdoc-article {
  position: relative; display: flow-root; min-height: 12rem; margin: 0; padding: 0; outline: none;
  font: var(--type-body); line-height: 1.75; color: var(--s-ink, var(--dk-ink, #1F1F21)); caret-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92));
  overflow-wrap: anywhere;
}
.sdoc-article p { margin: 0 0 .7em; padding: 0; border-radius: 4px; transition: background var(--motion, 180ms) var(--ease, ease); }
.sdoc-article p.sdoc-first { margin-top: var(--s6, 24px); }
.sdoc-article p.sdoc-first:first-child { margin-top: 0; }
.sdoc-article[contenteditable="true"]:focus-visible { box-shadow: none; }
.sdoc-article p.is-cta { background: var(--s-peri-soft, rgba(135,153,195,.12)); border-radius: 8px; padding-left: 12px; }
.sdoc-article p.is-check { text-decoration: underline dotted var(--s-ink-2, var(--dk-t-636366, #636366)); text-underline-offset: 4px; }
.sdoc-article p.is-working { opacity: .45; }
.sdoc-article p.sdoc-gone { color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.sdoc-article[contenteditable="false"] { cursor: default; }
.sdoc-article ins { text-decoration: none; background: var(--s-peri-soft, rgba(135, 153, 195, .16)); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); border-radius: 3px; }
.sdoc-article del { color: var(--s-ink-2, var(--dk-t-636366, #636366)); text-decoration-color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.sdoc-article mark { background: none; color: inherit; }
.sdoc-article mark.sdoc-tell { text-decoration: underline wavy var(--s-peri, var(--dk-t-8799c3, #8799C3)); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.sdoc-article mark.sdoc-cmark { background: var(--s-peri-soft, rgba(135, 153, 195, .16)); border-bottom: 2px solid var(--s-peri, #8799C3); }

/* ---- section markers */
.sdoc-mark { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 3px; }
.sdoc-mark-name {
  max-width: 100%; padding: 0; border: 0; background: none; color: var(--s-ink, var(--dk-ink, #1F1F21)); font: var(--type-meta); font-weight: 500;
  text-align: left; cursor: text; overflow-wrap: anywhere;
}
.sdoc-mark-name:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.sdoc-mark-name:focus-visible, .sdoc-tool:focus-visible { outline: 2px solid var(--s-peri, #8799C3); outline-offset: 2px; border-radius: 4px; }
.sdoc-mark-name:disabled { cursor: default; }
.sdoc-mark-meta { color: var(--s-ink-2, var(--dk-t-636366, #636366)); font: var(--type-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sdoc-mark.is-cta .sdoc-mark-name { padding: 0 8px; border-radius: 999px; background: var(--s-peri-soft, rgba(135, 153, 195, .16)); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); }
.sdoc-mark-input { width: 100%; min-height: 30px; padding: 2px 8px; font: var(--type-meta); }
.sdoc-tools {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 4px -8px 0; padding: 2px 8px; border-radius: 10px;
  background: var(--s-card, var(--dk-paper, #fff)); opacity: 0; pointer-events: none; transition: opacity var(--motion, 180ms) var(--ease, ease);
}
.sdoc-mark.is-active, .sdoc-mark:hover, .sdoc-mark:focus-within { z-index: 3; }
.sdoc-mark.is-active .sdoc-tools, .sdoc-mark:hover .sdoc-tools, .sdoc-mark:focus-within .sdoc-tools { box-shadow: var(--s-shadow, 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05)); }
.sdoc-mark.is-active .sdoc-tools, .sdoc-mark:hover .sdoc-tools, .sdoc-mark:focus-within .sdoc-tools { opacity: 1; pointer-events: auto; }
.sdoc-tool {
  padding: 3px 0; border: 0; background: none; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #4C5F92)); font: var(--type-meta); cursor: pointer; text-align: left;
}
.sdoc-tool:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- comments */
.sdoc-cmt {
  position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: var(--s-card, var(--dk-paper, #fff)); border-radius: 14px; box-shadow: var(--s-shadow, 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05));
  border: 1px solid var(--s-hair, var(--dk-l-1f1f21a8, rgba(31, 31, 33, .08))); font: var(--type-meta);
}
.sdoc-cmt p { margin: 0; }
.sdoc-cmt-quote { color: var(--s-ink-2, var(--dk-t-636366, #636366)); border-left: 2px solid var(--s-peri, #8799C3); padding-left: 8px; overflow-wrap: anywhere; }
.sdoc-cmt-text { color: var(--s-ink, var(--dk-ink, #1F1F21)); white-space: pre-wrap; overflow-wrap: anywhere; }
.sdoc-cmt-do { display: flex; flex-wrap: wrap; gap: 6px; }
.sdoc-cmt-input { width: 100%; min-height: 4.5rem; resize: vertical; font: var(--type-meta); }
.sdoc-cmt.is-resolved { padding: 6px 12px; box-shadow: none; background: transparent; }
.sdoc-cmt.is-resolved .link { font: var(--type-meta); color: var(--s-ink-2, var(--dk-t-636366, #636366)); text-align: left; }
.sdoc .btn.sdoc-sm { min-height: 30px; height: auto; padding: 0 12px; font: var(--type-meta); font-weight: 500; }

/* the floating "Comment" over a selection */
.sdoc-selbtn {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border: 0; border-radius: 999px; background: var(--s-ink, var(--dk-inv, #1F1F21)); color: var(--s-card, var(--dk-oninv, #fff)); font: var(--type-meta); cursor: pointer;
  box-shadow: var(--s-pop-shadow, 0 2px 6px rgba(31, 31, 33, .06), 0 12px 32px rgba(31, 31, 33, .12));
}
.sdoc-selbtn[hidden] { display: none; }

/* ---- under a section: Volare working on it, then its before/after */
.sdoc-bar {
  position: absolute; left: 0; right: 0; pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: 14px; background: var(--s-card, var(--dk-paper, #fff)); border: 1px solid var(--s-line, var(--dk-l-1f1f21a10, rgba(31, 31, 33, .10)));
  box-shadow: var(--s-shadow, 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05));
}
.sdoc-bar.is-working { padding: 4px 8px; }
.sdoc-bar.is-working .wstate { margin: 0; }
.sdoc-bar-text { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 16rem; }
.sdoc-bar-text .type-meta { color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.sdoc-bar-do { display: flex; gap: 6px; }

/* ---- footer */
.sdoc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3, 12px);
  padding-top: var(--s4, 16px); border-top: 1px solid var(--s-hair, var(--dk-l-1f1f21a8, rgba(31, 31, 33, .08))); }
.sdoc-save { display: inline-flex; align-items: center; gap: var(--s2, 8px); }
.sdoc-foot-do { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); }

/* ---- narrow: one column; labels above sections, comments under paragraphs */
.sdoc-body.is-narrow { display: block; }
.sdoc-body.is-narrow .sdoc-gutter, .sdoc-body.is-narrow .sdoc-margin, .sdoc-body.is-narrow .sdoc-under {
  position: absolute; top: 0; left: 0; right: 0; height: 0; min-height: 0 !important;
}
.sdoc-body.is-narrow .sdoc-gutter { z-index: 1; }
.sdoc-body.is-narrow .sdoc-margin { z-index: 2; }
.sdoc-body.is-narrow .sdoc-article p.sdoc-first { margin-top: 2.6rem; }
.sdoc-body.is-narrow .sdoc-article p.sdoc-first:first-child { margin-top: 2.1rem; }
.sdoc-body.is-narrow .sdoc-mark { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 8px; padding-top: 0; overflow: hidden; }
.sdoc-body.is-narrow .sdoc-mark-name { flex: none; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdoc-body.is-narrow .sdoc-tools { flex-wrap: nowrap; gap: 10px; margin: 0 0 0 auto; padding: 0; box-shadow: none !important; background: none; display: none; }
.sdoc-body.is-narrow .sdoc-mark.is-active .sdoc-tools { display: flex; opacity: 1; pointer-events: auto; }
.sdoc-body.is-narrow .sdoc-mark.is-active .sdoc-mark-meta { display: none; }

@media (prefers-reduced-motion: reduce) { .sdoc-tools, .sdoc-article p { transition: none; } }
html[data-motion="reduce"] .sdoc-tools, html[data-motion="reduce"] .sdoc-article p { transition: none; }

/* where each figure came from (js/script-doc.js figTitle): sourced figures quietly marked, unsourced ones to check */
.sdoc-article mark.sdoc-fig { background: none; color: inherit; text-decoration: underline solid var(--s-ink-3, #aeaeb2); text-underline-offset: 4px; }
.sdoc-article mark.sdoc-fig.is-unsourced { text-decoration: underline wavy var(--dk-t-c2410c, #c2410c); text-decoration-thickness: 1px; }
.sdoc-figs { margin-left: 12px; }
.sdoc-figs.is-check { color: var(--dk-t-c2410c, #c2410c); }