:root {
  --house-border-radius: 0.5em;

  --color-bg: var(--background);
  --color-link: var(--ember);
  --color-negative: var(--destructive);
  --color-positive: var(--success);
  --color-subtle: var(--muted);
  --color-selected-dark: color-mix(in oklch, var(--ember) 15%, var(--background));
  --color-ink-reversed: var(--destructive-foreground);
}

:where(house-md) {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  &:invalid {
    border: var(--color-negative) 2px solid;
  }
}

/* When the toolbar lives inside a `.markdown-body` review surface, pin it
   below the sticky page header (top-32 ≈ 8rem in the product brief layout)
   so it stays reachable while scrolling the editor. */
.markdown-body :where(house-md-toolbar) {
  position: sticky;
  top: 8rem;
  z-index: 5;
  box-shadow: 0 1px 0 var(--border);
}

/* Toolbar — pill container with soft background; matches the brief's review surface. */
:where(house-md-toolbar) {
  --hover-size: 0;

  align-items: center;
  background-color: var(--muted);
  border-radius: 9999px;
  display: flex;
  gap: 0.125rem;
  margin: 0 auto 0.75rem;
  padding: 0.25rem 0.5rem;
  width: fit-content;

  :is(button, label) {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 9999px;
    color: var(--muted-foreground);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 1.75rem;
    justify-content: center;
    margin: 0;
    padding: 0;
    transition: background-color 150ms ease, color 150ms ease;
    width: 1.75rem;

    :is(img, svg) {
      -webkit-touch-callout: none;
      block-size: 1rem;
      inline-size: 1rem;
      user-select: none;
    }

    &:where(:focus-visible) {
      background-color: var(--background);
      color: var(--foreground);
      outline: none;
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--background);
        color: var(--foreground);
      }
    }

    &:where(:active) {
      background-color: var(--color-selected-dark);
      color: var(--foreground);
    }
  }
}

/* Markdown Content */
:where(.house-md-content) {
  caret-color: var(--color-link);
  flex-grow: 1;
  min-block-size: 50dvh;
  text-align: start;
  white-space: break-spaces;

  &:focus,
  &:active {
    border: none;
    outline: none;
  }

  /* Housemd's parser wraps block-level markdown in <span class="..."> sentinels.
     Style each so the editor reflects markdown semantics live. */
  .h1 {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
    margin-block: 0.4em 0.2em;
  }
  .h2 {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-block: 0.4em 0.2em;
  }
  .h3 {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-block: 0.35em 0.15em;
  }
  .h4, .h5, .h6 {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    margin-block: 0.3em 0.1em;
  }
  .hr {
    color: var(--muted-foreground);
    letter-spacing: 0.5em;
  }
  .quote {
    color: var(--muted-foreground);
    font-style: italic;
  }
  .link {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .code {
    background-color: var(--muted);
    border-radius: 0.25rem;
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 1px 4px;
  }

  /* Fenced code blocks (```…```) — render as a continuous block with
     padding around the whole thing. Without `display: block` an inline
     .code span only paints the background where text sits, so multi-line
     code reads as separate inline runs instead of one unified box. */
  .code[data-fence] {
    display: block;
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  .img {
    color: var(--muted-foreground);
    font-style: italic;
  }
  .comment {
    color: var(--muted-foreground);
    font-style: italic;
    opacity: 0.7;
  }
}

/* Uploads */
:where(house-md-upload) {
  border-radius: var(--house-border-radius);
  margin-block: 0.5ex;
  position: relative;

  &[status="failed"] {
    background-color: var(--color-negative);
    color: var(--color-ink-reversed);
    font-weight: bold;
    padding: 0.5em;
  }
}

:where(.md-close) {
  appearance: none;
  background-color: transparent;
  block-size: 1em;
  border: none;
  cursor: pointer;
  display: none;
  inset: 0.5em 0.5em auto auto;
  inline-size: 1em;
  outline: none;
  position: absolute;

  house-md-upload[status="failed"] & {
    color: var(--color-ink-reversed);
    display: inline-block;
  }

  &::before {
    color: var(--color-ink-reversed);
    content: '×';
    font-size: 24px;
    font-weight: bold;
    inset: 50% auto auto 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
}

:where(.md-file) {
  font-weight: normal;

  house-md-upload[status="complete"] & {
    color: var(--color-positive);
  }
}

:where(.md-progress-bar) {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-subtle);
  block-size: 1ex;
  border-radius: var(--house-border-radius);
  display: block;
  inline-size: 100%;
  line-height: inherit;
  margin: 0;

  house-md-upload[status="failed"] & ,
  house-md-upload[status="complete"] & {
    display: none;
  }

  &::-webkit-progress-bar {
    background-color: var(--color-subtle);
    border-radius: var(--house-border-radius);
  }

  &::-webkit-progress-inner-element {
    border-radius: var(--house-border-radius);
  }

  &::-webkit-progress-value {
    background-color: var(--color-positive);
    border-radius: var(--house-border-radius);
  }

  &::-moz-progress-bar {
    background-color: var(--color-positive);
    border-radius: var(--house-border-radius);
  }
}