/**
 * root Design System - documentation styles: maturity
 *
 * Linked by `scripts/_docs-shell.mjs` on the maturity page and nowhere else. Split out of
 * `page-roadmap.css`, along with the page itself, when the assessment stopped being a
 * section of the roadmap: the radar, the baseline figures, the dimension cards. There used
 * to be more here - a form's own grid, a `radar-you`/`radar-panel` pair of polygons, a
 * readings table - all of it styling the reader-facing scoring apparatus that is gone with
 * the page it was on. Same constraints as the rest of the shell: zero CSS classes -
 * element, `[data-part]` and attribute selectors only - zero inline styles, and every
 * value a root foundation token.
 */

[data-part="maturity"] {
  margin-block-start: var(--root-t--gap);
}

[data-part="baseline-meta"],
[data-part="attribution"] {
  font-size: var(--root-t--font-size--sm);
  color: var(--docs-muted);
}

/* The date is the base step, which is what it measured while every descendant was being
   reset to base. The line around it steps down; the date does not. */
[data-part="baseline-meta"] time {
  font-size: var(--root-t--font-size--base);
  line-height: var(--root-t--line-height--base);
}

/* The chart and the two figures beside it. `auto-fit` rather than a breakpoint: at a
   narrow measure the radar drops above the figures on its own, and the page has three
   possible widths already - the reading column, the full width, and whatever the window
   is. */
[data-part="maturity-shape"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: var(--root-s--xl);
  align-items: center;
  margin-block: var(--root-s--xl);
}

[data-part="maturity-figures"] {
  display: grid;
  gap: var(--root-s--md);
}

/* A `<figure>`, which the user agent gives a 40px inline margin: the chart is a grid
   cell here, so that margin was inset on both sides of a column already positioned by
   the grid's own gap. The grid places it; the element brings nothing of its own. */
[data-part="radar-frame"] {
  margin: 0;
}

[data-part="radar"] {
  width: 100%;
  max-width: 46rem;
  height: auto;
  justify-self: center;
}

/* The grid is furniture: it says where the rings are and must not compete with the shape
   drawn on it. One ramp step, the same one the site's own borders take. */
[data-part="radar-ring"],
[data-part="radar-axis"] {
  fill: none;
  stroke: var(--docs-border);
  stroke-width: 1;
}

[data-part="radar-baseline"] {
  fill: color-mix(
    in srgb,
    light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark)) 18%,
    transparent
  );
  stroke: light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));
  stroke-width: 2;
}

/* SVG text is sized in the viewBox's own units, not in rem: the chart scales with its
   box, and a label in rem would grow out of it at a small width and shrink into it at a
   large one. */
[data-part="radar-label"] {
  font-family: inherit;
  font-size: 15px;
  fill: var(--docs-muted);
  dominant-baseline: middle;

  &[data-side="middle"] {
    text-anchor: middle;
  }

  &[data-side="start"] {
    text-anchor: start;
  }

  &[data-side="end"] {
    text-anchor: end;
  }
}

[data-part="radar-key"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--root-s--2xs) var(--root-s--lg);
  justify-content: center;
  padding: 0;
  margin: 0;
  color: var(--docs-muted);
  list-style: none;

  /* The swatch is drawn on the entry rather than marked up as an element of its own: it
     carries no meaning the text does not already carry, so it has nothing to be. */
  li::before {
    display: inline-block;
    inline-size: 1.6rem;
    block-size: 0.3rem;
    margin-inline-end: var(--root-s--2xs);
    vertical-align: middle;
    content: "";
  }

  li[data-key="baseline"]::before {
    background: light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));
  }
}

[data-part="dimensions"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: var(--root-s--md);
}

/* The same three values the home page's figures hand to Card: this site's ground is
   deliberately unmixed, and Card's own default surface is a full-strength ramp step. */
[data-part="dimension"],
[data-part="result"] {
  --root-card--background-color: var(--docs-surface);
  --root-card--border-color: var(--docs-border);
}

/* The score sits at the end of the row the name opens, and stays on the first line when
   the name wraps to a second. */
[data-part="dimension"] header {
  display: flex;
  gap: var(--root-s--sm);
  align-items: flex-start;
  justify-content: space-between;
}

[data-part="dimension"] h3 {
  margin: 0;
  font-size: var(--root-t--font-size--lg);
}

[data-part="dimension"] p,
[data-part="result"] p {
  margin: 0;
}

[data-part="evidence"] {
  font-size: var(--root-t--font-size--sm);
  color: var(--docs-muted);
}

[data-part="levels"] {
  padding-inline-start: var(--root-s--lg);
  margin: 0;

  li + li {
    margin-block-start: var(--root-s--3xs);
  }
}

[data-part="result"] header {
  font-size: var(--root-t--font-size--xs);
  color: var(--docs-muted);
}

[data-part="result"] [data-part="figure"] {
  font-size: var(--root-t--font-size--5xl);
  font-weight: 600;
  line-height: var(--root-t--line-height--base);
}