// spec.sr.ht stylesheet.
//
// Mirrors the SourceHut service pattern (see paste.sr.ht/scss/main.scss and
// compare.sr.ht/scss/main.scss): pull in the shared `base` partial (Bootstrap 4
// plus the SourceHut chrome — contrast, variables, nav, events, highlight,
// dark) and then add only what is unique to the document views.
//
// Build: `make css`, which is `sassc -I /usr/share/sourcehut/scss scss/main.scss`
// plus minify plus a content-hashed filename. The shared partials come from
// core.sr.ht's `make install`; dart-sass works too for a local build.
//
// The output is EMBEDDED INTO THE BINARY (web/templates.go's //go:embed static),
// so `make css` alone does not restyle a running daemon: build the CSS, then
// `go build`, then restart.

@import "base";

// Let scheme-aware widgets follow prefers-color-scheme, as compare.sr.ht does.
:root {
  color-scheme: light dark;
}

// ---- Rendered document ----------------------------------------------------

.spec-doc {
  // Prose, not code: a comfortable measure matters more than filling the
  // column. The sidebar already takes a quarter of the width, so this only
  // bites on very wide screens.
  max-width: 46rem;

  h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5rem;
  }

  // The first heading sits directly under the page title; the extra top margin
  // reads as a gap rather than as structure.
  > :first-child {
    margin-top: 0;
  }

  blockquote {
    padding-left: 0.75rem;
    border-left: 3px solid $gray-400;
    color: $gray-700;

    @media (prefers-color-scheme: dark) {
      border-left-color: $gray-700;
      color: $gray-300;
    }
  }

  table {
    @extend .table;
    width: auto;
  }

  img {
    max-width: 100%;
  }
}

// A wikilink that resolved to nothing. The renderer emits it as a span rather
// than dropping it, so the read plane doubles as a link checker — which only
// works if it is visibly different from a link that resolved.
.wikilink-missing {
  color: $danger;
  text-decoration: line-through dotted;
}

// ---- Search ---------------------------------------------------------------

.search-hit {
  margin-bottom: 0.75rem;
}

.search-snippet {
  color: $gray-700;

  // bleve wraps matched terms in <mark>; the browser default is a yellow that
  // is unreadable on the dark chrome.
  mark {
    padding: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
  }

  @media (prefers-color-scheme: dark) {
    color: $gray-300;
  }
}