/* ---------- Step sketches (the same kit on google-docs, chrome-extension and discussion-posts) ----------
   A small drawn scene above each step: a window, a PERRLA panel, a mini page. Drawn in HTML and CSS,
   never a screenshot. Every sketch is the same 4:3 box and scales as a unit: sizes inside are in em,
   and the em is a share of the box's width (container query units), so a sketch reads the same at
   1440px and on a phone. One thing per sketch carries the highlighter: the thing you click or get. */
ol.c-where.steps-sk > li { border-top: 0; padding-top: 0; display: flex; flex-direction: column; }
.steps-sk > li > h3 { border-top: 2px solid var(--ink); padding-top: 1rem; }
@media (max-width: 1180px) and (min-width: 601px) { .c-where--4.steps-sk { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }
.sk { container-type: inline-size; position: relative; aspect-ratio: 4 / 3; margin: 0 0 1.25rem; background: var(--gray-50); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.section--ground-2 .sk { background: #fff; }
.sk__in { position: absolute; inset: 0; font-family: var(--font-body); font-size: 4.1cqw; line-height: 1.3; color: var(--ink-2); }
.sk__in * { box-sizing: border-box; }

/* a window: browser or Doc */
.sk-win { position: absolute; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-300); border-radius: 0.55em; overflow: hidden; box-shadow: 0 1px 2px rgba(33,37,41,0.06), 0 1em 1.8em -1.2em rgba(10,40,81,0.4); }
.sk-bar { flex: none; display: flex; align-items: center; gap: 0.45em; height: 2.1em; padding: 0 0.7em; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); font-size: 0.82em; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.sk-bar > b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sk-dots { display: flex; gap: 0.3em; flex: none; }
.sk-dots i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--gray-300); }
.sk-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; background: #fff; border: 1px solid var(--gray-200); border-radius: 1em; padding: 0.12em 0.75em; font-family: var(--font-mono); font-size: 0.88em; color: var(--ink-3); }
.sk-doc { flex: none; width: 0.85em; height: 1.1em; border-radius: 0.12em; background: var(--blue-500); position: relative; }
.sk-doc::after { content: ""; position: absolute; left: 0.2em; right: 0.2em; top: 0.35em; height: 0.36em; border-block: 0.09em solid #fff; }
.sk-menubar { flex: none; display: flex; gap: 0.15em; padding: 0.2em 0.45em; font-size: 0.8em; color: var(--ink-2); border-bottom: 1px solid var(--gray-200); white-space: nowrap; overflow: hidden; }
.sk-menubar > span { padding: 0.08em 0.4em; border-radius: 0.25em; }
.sk-menubar > .on { background: var(--gray-200); color: var(--ink); }
.sk-body { flex: 1; min-height: 0; display: flex; }
.sk-desk { flex: 1; min-width: 0; background: var(--gray-100); position: relative; overflow: hidden; }
.sk-mark-icon { flex: none; width: 1.35em; height: auto; display: block; }
.sk-tool { flex: none; width: 1.15em; height: 1.15em; border-radius: 0.25em; border: 0.12em solid var(--gray-400); }

/* the PERRLA panel */
.sk-panel { flex: none; display: flex; flex-direction: column; gap: 0.42em; background: #fff; border-left: 1px solid var(--gray-300); padding: 0.55em 0.65em; font-size: 0.86em; min-width: 0; overflow: hidden; }
.sk-panel__hd { display: flex; align-items: center; gap: 0.4em; padding-bottom: 0.4em; border-bottom: 1px solid var(--gray-200); font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.sk-lab { font-family: var(--font-mono); font-size: 0.74em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.2; }
.sk-field { display: block; border: 1px solid var(--gray-300); border-radius: 0.3em; padding: 0.18em 0.45em; background: #fff; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-field--fill { background: var(--yellow-100); border-color: #f1d98a; }
.sk-sel { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; }
.sk-sel::after { content: ""; width: 0.4em; height: 0.4em; border-right: 0.12em solid var(--ink-2); border-bottom: 0.12em solid var(--ink-2); transform: translateY(-0.12em) rotate(45deg); flex: none; }
.sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; border-radius: 0.3em; padding: 0.22em 0.65em; background: var(--blue-500); color: #fff; font-weight: 600; font-size: 0.9em; line-height: 1.3; white-space: nowrap; border: 1px solid var(--blue-500); }
.sk-btn--line { background: #fff; color: var(--blue-500); border-color: var(--blue-300); }
.sk-btn--open { background: #fff; color: var(--green-500); border-color: var(--green-300); }
.sk-btn--mono { font-family: var(--font-mono); font-weight: 400; font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1em 0.45em; }
.sk-hl { box-shadow: 0 0 0 0.28em var(--highlight); }
.sk-mark { background: var(--highlight); border-radius: 0.15em; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* menus */
.sk-menu { position: absolute; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-300); border-radius: 0.35em; padding: 0.3em 0; font-size: 0.82em; color: var(--ink); white-space: nowrap; box-shadow: 0 0.6em 1.3em -0.6em rgba(10,40,81,0.45); z-index: 2; }
.sk-menu > span { display: flex; justify-content: space-between; gap: 1.4em; padding: 0.22em 0.85em; }
.sk-menu > span i { font-style: normal; color: var(--ink-3); }
.sk-menu .on { background: var(--gray-100); }
.sk-menu .pick { background: var(--highlight); }

/* placeholder lines, and a mini page in Times */
.sk-ln { display: block; height: 0.42em; border-radius: 0.21em; background: var(--gray-300); margin: 0.62em 0; }
.sk-ln--dk { background: var(--gray-500); }
.sk-ln--c { margin-inline: auto; }
.sk-ln--blue { background: var(--blue-100); }
.sk-sheet { position: absolute; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 1px 2px rgba(33,37,41,0.1), 0 0.8em 1.4em -1em rgba(33,37,41,0.35); font-family: var(--font-paper); color: #000; overflow: hidden; }
.sk-sheet .sk-txt { display: block; }
.sk-caret { display: inline-block; width: 0.08em; height: 1.05em; background: #000; vertical-align: -0.18em; margin-left: 0.05em; }
.sk-cur { position: absolute; width: 1.15em; height: auto; z-index: 3; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }

/* a window whose menus hang outside it (an open menu) */
.sk-win--open { overflow: visible; }
.sk-win--open > .sk-bar { border-radius: 0.55em 0.55em 0 0; }
.sk-win--open > .sk-menubar { overflow: visible; }
.sk-anchor { position: relative; }
.sk-anchor > .sk-menu { font-size: 1em; top: calc(100% + 0.3em); left: 0; }
.sk-menu .sk-anchor > .sk-menu { top: -0.3em; left: calc(100% + 0.15em); }

/* ---------- discussion-posts: the four step sketches ---------- */
.dp-dialog { inset: 8% 9% -6% 9%; }
.dp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.4em; padding: 0.7em 0.8em; font-size: 0.86em; }
.dp-seg { display: flex; border: 1px solid var(--gray-300); border-radius: 0.35em; overflow: hidden; margin-bottom: 0.25em; }
.dp-seg > span { flex: 1; text-align: center; padding: 0.15em 0.3em; font-size: 0.9em; color: var(--ink-2); white-space: nowrap; }
.dp-seg > span + span { border-left: 1px solid var(--gray-300); }
.dp-seg .on { background: var(--blue-500); color: #fff; font-weight: 600; }
.dp-type { display: flex; align-items: center; gap: 0.55em; padding: 0.22em 0.45em; border-bottom: 1px solid var(--gray-200); color: var(--ink); white-space: nowrap; }
.dp-type i { flex: none; width: 0.8em; height: 0.8em; border-radius: 50%; border: 0.12em solid var(--gray-500); background: #fff; }
.dp-type--pick { background: var(--highlight); border-radius: 0.25em; border-bottom-color: transparent; font-weight: 600; }
.dp-type--pick i { border-color: var(--blue-500); box-shadow: inset 0 0 0 0.15em #fff; background: var(--blue-500); }
.dp-look { display: flex; gap: 0.4em; align-items: center; }
.dp-doi { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.86em; }
.dp-ref { margin-top: 0.4em; font-family: var(--font-paper); color: #000; font-size: 1em; line-height: 1.5; padding-left: 1.4em; text-indent: -1.4em; }
.dp-sheet { left: 9%; right: 9%; top: 10%; bottom: -12%; padding: 0.9em 1em; font-size: 0.92em; line-height: 1.7; }
.dp-line { display: block; text-indent: 1.4em; }
.dp-pick { left: 30%; right: 9%; top: 44%; padding: 0.5em 0; }
.dp-pick > .sk-lab { padding: 0 1em 0.2em; }
.dp-page { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 0.6em !important; border-top: 1px solid var(--gray-200); margin-top: 0.25em; padding-top: 0.4em !important; }
.dp-page .sk-field { width: 4em; font-family: var(--font-mono); }
.dp-copy { position: absolute; left: 6%; top: 6%; z-index: 2; font-size: 0.78em; margin: 0; }
.dp-arrow { position: absolute; left: 9%; top: 18%; width: 2.2em; height: 2.2em; color: var(--ink-3); z-index: 2; }
.dp-board { left: 20%; right: 6%; top: 22%; bottom: -6%; }
.dp-reply { display: flex; flex-direction: column; border: 1px solid var(--gray-300); border-radius: 0.3em; padding: 0.35em 0.55em; gap: 0.1em; font-family: var(--font-paper); color: #000; }
.dp-reply .sk-ln { margin: 0.45em 0; }
.dp-txt { font-size: 0.95em; line-height: 1.45; }
.dp-txt--h { font-weight: 700; text-align: center; margin-top: 0.3em; }

/* When it's done: the real I'm Finished capture gets the wider column so its text stays readable (Graysen, Oct 4) */
@media (min-width: 900px) { .dp-paste { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }