.container {
  position: relative;
}

.sticky {
  background: var(--sticky-bg, #fff8c5);
  border-radius: 6px;
  border: 2px solid color-mix(in srgb, var(--sticky-bg) 80%, rgb(0, 0, 0) 10%);
  box-sizing: border-box;
  min-width: 180px;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.04);
  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

:global([data-sb-canvas-theme^='dark']) .sticky {
  background: color-mix(in srgb, var(--sticky-bg) 30%, #0d1117 70%);
  border-color: color-mix(in srgb, var(--sticky-bg) 55%, #f0f6fc 18%);
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.35);
}

/* Hide own border when parent widget slot is selected (avoid double focus ring) */
:global([data-widget-selected]) .sticky {
  border-color: transparent;
}

.text {
  padding: 16px 20px;
  margin: 0;
  font-size: calc(18px * var(--sticky-text-scale, 1));
  line-height: 1.5;
  /* Defeat the shared markdown-content background (.contentSmall sets
   * --sb--markdown-bg to white) so the sticky's article background shows
   * through. Re-point the foreground/accent vars at the sticky palette
   * too so links, code, etc. blend in. */
  --sb--markdown-bg: transparent;
  --sb--markdown-fg: color-mix(in srgb, var(--sticky-bg), black 70%);
  --sb--markdown-muted: color-mix(in srgb, var(--sticky-bg), black 50%);
  --sb--markdown-accent: color-mix(in srgb, var(--sticky-bg), black 80%);
  background: transparent;
  color: var(--sb--markdown-fg);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  min-height: 60px;
  flex: 1;
  overflow: auto;
}

/* Markdown elements rendered inside the sticky preview keep the sticky
 * color palette and use em-relative sizing so they scale with the
 * parent font-size (driven by --sticky-text-scale when autoScaleText is on). */
.text > :first-child { margin-top: 0; }
.text > :last-child { margin-bottom: 0; }

.text p {
  margin: 0 0 0.4em;
}

.text h1,
.text h2,
.text h3,
.text h4 {
  margin: 0 0 0.4em;
  line-height: 1.3;
  font-weight: 600;
}

.text h1 { font-size: 1.4em; }
.text h2 { font-size: 1.22em; }
.text h3 { font-size: 1.1em; }
.text h4 { font-size: 1em; }

.text ul,
.text ol {
  margin: 0 0 0.4em;
  padding-left: 1.25em;
}

.text ul { list-style: disc; }
.text ol { list-style: decimal; }
.text li { margin: 0 0 0.1em; }

/* CommonMark loose-list compatibility: blank lines between list items
 * cause remark to wrap each item's content in <p>. Without these resets
 * the `.text p` margin pushes the bullet's text down and away from its
 * marker, and adds extra vertical gap between items. Mirror of the
 * shared markdownContent.module.css fix — duplicated here because the
 * sticky's `.text p` rule competes with the shared `.contentSmall p`
 * rule at the same specificity, so we need a local override too. */
.text li > p { margin: 0; }
.text li > p + p { margin-top: 0.25em; }

/* Em-relative <hr> margin so the rule scales with the sticky's
 * autoScaleText (--sticky-text-scale). The shared
 * markdownContent.module.css uses fixed `16px 0`, which produces
 * visually huge gaps once the sticky scales its font-size up. */
.text hr {
  margin: 0.6em 0;
}

.text a {
  color: inherit;
  text-decoration: underline;
}

.text code {
  background: color-mix(in srgb, var(--sticky-bg) 55%, black 12%);
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.text pre {
  background: color-mix(in srgb, var(--sticky-bg) 55%, black 12%);
  padding: 0.5em 0.75em;
  border-radius: 0.3em;
  overflow-x: auto;
  margin: 0 0 0.5em;
}

.text pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
}

.text blockquote {
  border-left: 0.2em solid color-mix(in srgb, var(--sticky-bg) 40%, black 30%);
  margin: 0 0 0.5em;
  padding-left: 0.6em;
  color: color-mix(in srgb, var(--sticky-bg), black 55%);
}

.text del {
  text-decoration: line-through;
}

.text input[type="checkbox"] {
  margin-right: 0.4em;
  accent-color: currentColor;
}

.text li:has(input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.25em;
}

.text hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--sticky-bg) 40%, black 30%);
  margin: 0.6em 0;
}

.text table {
  border-collapse: collapse;
  margin: 0 0 0.5em;
  font-size: 0.95em;
}

.text th,
.text td {
  border: 1px solid color-mix(in srgb, var(--sticky-bg) 40%, black 30%);
  padding: 0.25em 0.5em;
  text-align: left;
}

.text :global(.placeholder) {
  color: color-mix(in srgb, var(--sticky-bg), black 40%);
  font-style: italic;
  margin: 0;
}

:global([data-sb-canvas-theme^='dark']) .text {
  --sb--markdown-fg: color-mix(in srgb, var(--sticky-bg) 30%, #f0f6fc 70%);
  --sb--markdown-muted: color-mix(in srgb, var(--sticky-bg) 30%, #f0f6fc 50%);
  --sb--markdown-accent: color-mix(in srgb, var(--sticky-bg) 30%, #f0f6fc 90%);
}

.textarea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 16px 20px;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: calc(18px * var(--sticky-text-scale, 1));
  line-height: 1.5;
  color: color-mix(in srgb, var(--sticky-bg) 80%, rgb(0, 0, 0) 98%);
  white-space: pre-wrap;
  word-break: break-word;
  resize: none;
}

:global([data-sb-canvas-theme^='dark']) .textarea {
  color: color-mix(in srgb, var(--sticky-bg) 26%, #f0f6fc 74%);
}
