: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, and hide it until focus
   lands inside the wrapper so it can't drift over the prose while you're
   only reading. `:focus-within` sits on `.markdown-body` rather than on
   `house-md` because the wrapper is the only ancestor the toolbar and the
   editor share — see Recuerd0 #1318 for why that, `visibility` over
   `display`, and the split transition timing are each load-bearing. */
.markdown-body :where(house-md-toolbar) {
  position: sticky;
  top: 8rem;
  z-index: 5;
  box-shadow: 0 1px 0 var(--border);
  opacity: 0;
  /* `visibility` is discrete — delay it by the fade on the way out, apply it
     instantly on the way in. `pointer-events` isn't animatable, so it flips
     at once and closes the window where a faded pill is still clickable. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s linear 150ms;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.markdown-body:focus-within :where(house-md-toolbar) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 150ms ease, visibility 0s;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

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

/* Turbo Drive navigation progress bar — brand spark instead of the #0076ff
   default. Turbo injects its default stylesheet as the first head child, so
   this app rule (loaded later in <head>) wins without !important. Spark is
   mode-invariant, so one declaration covers light and dark. */
.turbo-progress-bar {
  background-color: var(--spark);
}