/* ==========================================================================
   Styleguide — page-specific chrome only

   Loaded automatically by `css("@auto")` in page_header.php for the
   `styleguide` template. Deliberately plain CSS, outside the Sass build: the
   styleguide documents assets/sass, it must not add to it.

   Everything here is namespaced `.sg-*` so nothing can leak into the site.
   ========================================================================== */

/* The article body is normally capped at the 65ch measure. The styleguide
   needs the full article width for tables and photoset grids. */
/* Reverted back to single column width with .no-pad. Use .wide when necessary
.body.sg {
  max-width: none;
}

@media only screen and (min-width: 77rem) {
  .body.sg {
    margin-inline-start: 0;
    padding-block-start: 1rem;
  }
}
*/
/* --------------------------------------------------------------------------
 Overrides
 -------------------------------------------------------------------------- */
.sg-demo {
  --form-border-color: #a7a7a7;
}

.sg code:not(.sg-demo code) {
  font-family: Menlo, monospace;
  background-color: unset;
  padding: unset;
}

.sg code:not(.sg-demo code, .sg-swatch__name, .sg-spacer__name) {
  font-size: 0.875em;
}
@media (min-width: 50rem) {
  .sg-section.wide {
    padding-inline: 1.25rem;
  }
}
@media (min-width: 77rem) {
  .sg-section.wide {
    padding-inline: 0;
  }
}
/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */
.sg-toc {
  background-color: var(--quote-bg-color);
  border-inline-start: 4px solid var(--title-meta-color);
  padding: 1.25rem;
  margin-block: 2rem 3rem;
}

.sg-toc__title {
  margin-block-start: 0;
}

.sg-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Sections and items
   -------------------------------------------------------------------------- */
.sg-section {
  margin-block-start: 4rem;
  scroll-margin-block-start: 2rem;
}

.sg-section__title {
  border-block-end: 2px solid var(--title-meta-color);
  padding-block-end: 0.25rem;
  margin-block-end: 0.5rem;
  text-transform: uppercase;
}

.sg-section__source {
  font-size: 0.8rem;
  margin-block-end: 0.75rem;
  opacity: 0.8;
}

.sg-section__source code {
  background: none;
  padding: 0;
}

.sg-section__intro,
.sg-item__notes {
  max-width: 65ch;
}

.sg-item {
  margin-block-start: 2.5rem;
  scroll-margin-block-start: 2rem;
}

.sg-item__title {
  margin-block-end: 0.25rem;
}

.sg-item__anchor {
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.15s ease-in-out;
}

.sg-item:hover .sg-item__anchor,
.sg-item__anchor:focus-visible {
  opacity: 0.6;
}

.sg-item__notes {
  font-size: 1rem;
  margin-block-end: 1rem;
}

/* The live example, boxed so its bounds are obvious */
.sg-demo {
  border: 1px dashed var(--form-border-color);
  border-radius: 0.375em;
  padding: 1.5rem;
  margin-block-end: 0.5rem;
  //overflow: hidden; /* contains the float demos */
}

.sg-demo > :last-child {
  margin-block-end: 0;
}

.sg-code summary {
  cursor: pointer;
  font-family: "PT Sans Narrow", sans-serif;
  font-size: 0.875rem;
  text-transform: uppercase;
}

.sg-code pre {
  margin-block-start: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Swatches
   -------------------------------------------------------------------------- */
.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-block-end: 2rem;
}

.sg-swatches--compact {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.sg-swatch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sg-swatch__chip {
  background-color: var(--sg-chip, transparent);
  border: 1px solid var(--form-border-color);
  border-radius: 0.375em;
  flex: 0 0 auto;
  height: 2.75rem;
  width: 2.75rem;
  /* checkerboard, so translucent tokens are readable */
  background-image: linear-gradient(45deg, #bbb 25%, transparent 25%),
    linear-gradient(-45deg, #bbb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #bbb 75%),
    linear-gradient(-45deg, transparent 75%, #bbb 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  box-shadow: inset 0 0 0 999px var(--sg-chip, transparent);
}

.sg-swatch__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sg-swatch__name {
  background: none;
  padding: 0;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.sg-swatch__label,
.sg-swatch__value {
  font-size: 0.75rem;
  opacity: 0.75;
}

.sg-swatch__value {
  font-family: Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Spacing bars
   -------------------------------------------------------------------------- */
.sg-spacers {
  margin-block-end: 2rem;
}

.sg-spacer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.5rem;
}

.sg-spacer__bar {
  background-color: var(--title-meta-color);
  block-size: 1rem;
  inline-size: var(--sg-size, 1rem);
  flex: 0 0 auto;
}

.sg-spacer__name {
  background: none;
  padding: 0;
  font-size: 0.8rem;
}

.sg-spacer__value {
  font-family: Menlo, monospace;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Definition lists
   -------------------------------------------------------------------------- */
.sg-defs {
  display: grid;
  grid-template-columns: minmax(12rem, auto) 1fr;
  gap: 0.35rem 1.5rem;
  font-size: 1rem;
  margin-block-end: 2rem;
}

.sg-defs dt {
  font-weight: 500;
}

.sg-defs dd {
  margin: 0;
}

@media only screen and (max-width: 37.5rem) {
  .sg-defs {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sg-defs dd {
    margin-block-end: 0.75rem;
    opacity: 0.85;
  }
}

/* --------------------------------------------------------------------------
   Demo-only props
   -------------------------------------------------------------------------- */
/* Placeholders are stretched to whatever box they land in; cap the height so a
   single demo cannot dominate the page. */
.sg-placeholder,
.sg-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
}

.sg-thumb {
  width: 120px;
  height: 120px;
}

.sg-embed-stub {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  font-family: "PT Sans Narrow", sans-serif;
  justify-content: center;
  text-transform: uppercase;
}

.sg-avatar {
  align-items: center;
  background-color: var(--title-meta-color);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-family: "PT Sans Narrow", sans-serif;
  height: 80px;
  justify-content: center;
  width: 80px;
}

.sg-inline-input {
  display: inline-block;
  width: auto;
}

/* The article header and hero are positioned relative to the article wrapper.
   Reset that inside the demos so they stay inside their box. */
.sg-demo .sg-header-demo {
  display: flex;
  flex-direction: column;
}

.sg-demo .sg-header-demo .article__title,
.sg-demo .sg-header-demo .article__category,
.sg-demo .sg-header-demo .article__meta {
  margin-inline-start: 0;
}

.sg-demo .article__author {
  display: revert !important;
  opacity: 0.6;
}

.sg-hero-frame {
  position: relative;
  overflow: hidden;
  padding: 2rem;
}

.sg-hero-frame .article__hero {
  margin: 0;
  max-width: 100%;
  width: 100%;
  transform: none;
}

.sg-hero-frame .article__hero .format--16by9 {
  height: 200px;
}

/* Keep the polaroid inside the demo box on narrow screens */
.sg-demo .polaroid {
  max-width: 100%;
}