/* ---------- 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); }

/* ---------- chrome-extension: the intro drawing (an article page with the side panel open) ---------- */
.ce-hero { container-type: inline-size; max-width: 34rem; margin-top: 0.5rem; }
.ce-hero__in { position: relative; font-family: var(--font-body); font-size: 2.15cqw; line-height: 1.35; color: var(--ink-2); padding: 0.4em 0.4em 1.4em; }
.ce-hero__in * { box-sizing: border-box; }
.ce-win { position: relative; }
.ce-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
.ce-page { display: flex; flex-direction: column; align-items: flex-start; padding: 1.1em 1.2em 1em; min-width: 0; }
.ce-page .sk-ln { align-self: stretch; margin: 0.55em 0; }
.ce-src { font-size: 0.82em; color: var(--ink-3); }
.ce-title { font-family: var(--font-display); font-weight: 700; font-size: 1.45em; line-height: 1.15; color: var(--blue-800); margin: 0.3em 0 0.35em; }
.ce-auth { font-size: 0.9em; color: var(--blue-500); }
.ce-add { margin: 0.9em 0 1em 0.25em; font-size: 0.85em; }
.ce-abs { margin-top: 0.2em; }
.ce-panel { font-size: 1em; gap: 0.5em; padding: 0.8em 0.9em 0.9em; }
.ce-step { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05em; }
.ce-ref { font-family: var(--font-paper); color: #000; font-size: 0.95em; line-height: 1.45; padding: 0.5em 0.6em 0.5em 1.7em; text-indent: -1.1em; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 0.3em; overflow-wrap: anywhere; }
.ce-file { display: flex; align-items: center; gap: 0.55em; border: 1px solid var(--gray-300); border-radius: 0.35em; padding: 0.45em 0.6em; min-width: 0; }
.ce-file > span { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15em; min-width: 0; }
.ce-file b { color: var(--ink); font-weight: 600; font-size: 0.92em; line-height: 1.25; }
.ce-file .sk-mark { font-size: 0.88em; }
.ce-globe { flex: none; width: 1.5em; height: 1.5em; color: var(--ink-3); }
.ce-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin-top: 0.2em; }
@container (max-width: 440px) {
  .ce-hero__in { font-size: 3.5cqw; }
  .ce-body { grid-template-columns: minmax(0, 1fr); }
  .ce-panel { border-left: 0; border-top: 1px solid var(--gray-300); }
  .ce-page { padding-bottom: 0.4em; }
  .ce-page .sk-ln, .ce-abs { display: none; }
}

/* ---------- chrome-extension: the four step sketches ---------- */
.ce-tbicon { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.4em; border-radius: 0.3em; background: #fff; }
.ce-web { flex: 1; min-width: 0; background: #fff; padding: 0.7em 0.8em; overflow: hidden; }
.ce-results { display: flex; flex-direction: column; gap: 0.6em; }
.ce-q { font-size: 0.82em; border-radius: 1em; padding-inline: 0.8em; }
.ce-res { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6em; align-items: start; font-size: 0.82em; }
.ce-res > span:first-child { min-width: 0; }
.ce-res b { display: block; color: var(--blue-500); font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ce-res .sk-ln { margin: 0.4em 0 0; }
.ce-res .sk-btn { font-size: 0.8em; margin-top: 0.15em; }
.ce-form { gap: 0.3em; }
.ce-row { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.ce-row .sk-lab { font-size: 0.68em; }
.ce-row .sk-field { padding-block: 0.08em; }
.ce-sheet { left: 14%; right: 14%; top: 9%; bottom: -12%; padding: 1em 1.1em; font-size: 0.9em; line-height: 1.75; }
.ce-sheet .sk-ln { margin: 0.75em 0; }
.ce-para { text-indent: 1.2em; }
.ce-h { text-align: center; font-weight: 700; margin-top: 0.3em; }
.ce-refp { padding-left: 1.2em; text-indent: -1.2em; font-size: 0.92em; overflow-wrap: anywhere; }