/* The Develop page (hooks/develop.py writes it from develop.yml; docs/javascripts/develop.js filters it).
   House rule: blue, the link colour, navigates; green and amber are status only. The status colours are the docs
   theme's green and amber and the brand's Dusty Purple, each in a text shade that reads on its own tint. A group's
   tone is one of the brand's dark secondaries, with Ghost Gray on it. */

[data-md-color-scheme="default"] {
  --dev-official-fg: #0b7a4b; --dev-official-bg: rgba(25, 195, 125, 0.14);
  --dev-beta-fg: #8a5a00;     --dev-beta-bg: rgba(232, 163, 61, 0.22);
  --dev-community-fg: #55467f; --dev-community-bg: rgba(110, 94, 155, 0.16);
  --dev-line: rgba(0, 0, 0, 0.12);
  --dev-soft: rgba(0, 0, 0, 0.035);
}
[data-md-color-scheme="slate"] {
  --dev-official-fg: #4fdc9f; --dev-official-bg: rgba(25, 195, 125, 0.16);
  --dev-beta-fg: #f2bd6b;     --dev-beta-bg: rgba(232, 163, 61, 0.16);
  --dev-community-fg: #b9addf; --dev-community-bg: rgba(110, 94, 155, 0.3);
  --dev-line: rgba(255, 255, 255, 0.13);
  --dev-soft: rgba(255, 255, 255, 0.04);
}
.dev-tone--core-blue { --dev-tone: #143952; }
.dev-tone--deep-teal { --dev-tone: #183641; }
.dev-tone--indigo { --dev-tone: #2c2f5a; }
.dev-tone--dusty-purple { --dev-tone: #6e5e9b; }
.dev-tone--dark-gray { --dev-tone: #292b37; }
[data-md-color-scheme="slate"] .dev-tone--dark-gray { --dev-tone: #3a3d4d; }      /* Dark Gray is the page's own colour there */

/* ---------------------------------------------------------------- the filter, the legend, pills, chips */
.md-typeset .dev-top { margin: 1.4em 0 0.4em; }
.md-typeset .dev-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.md-typeset .dev-filter[hidden], .md-typeset .dev-count[hidden], .md-typeset [data-dev-off] { display: none !important; }
.md-typeset .dev-filter__label { margin-right: 0.3rem; font-weight: 700; color: var(--md-default-fg-color--light); }
.md-typeset .dev-filter__btn { font: inherit; font-size: 0.7rem; font-weight: 500; line-height: 1; cursor: pointer;
  padding: 0.5em 0.95em; border-radius: 2em; border: 1px solid var(--dev-line); background: none;
  color: var(--md-default-fg-color); transition: border-color 125ms, background-color 125ms; }
.md-typeset .dev-filter__btn:hover, .md-typeset .dev-filter__btn:focus-visible { border-color: var(--md-default-fg-color--light); }
.md-typeset .dev-filter__btn[aria-pressed="true"] { background: var(--md-default-fg-color); color: var(--md-default-bg-color);
  border-color: transparent; font-weight: 700; }
.md-typeset .dev-count { margin: 0.7em 0 0; font-size: 0.7rem; color: var(--md-default-fg-color--light); }
.md-typeset .dev-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.9em 0 0; padding: 0.55rem 0.75rem;
  border-radius: 0.3rem; background: var(--dev-soft); font-size: 0.66rem; color: var(--md-default-fg-color--light); }
.md-typeset .dev-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }

.md-typeset .dev-pill { display: inline-block; padding: 0.22em 0.65em; border-radius: 2em; font-size: 0.6rem; font-weight: 700;
  line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle; }
.md-typeset .dev-pill--official { color: var(--dev-official-fg); background: var(--dev-official-bg); }
.md-typeset .dev-pill--beta { color: var(--dev-beta-fg); background: var(--dev-beta-bg); }
.md-typeset .dev-pill--community { color: var(--dev-community-fg); background: var(--dev-community-bg); }
.md-typeset .dev-pill--planned { color: var(--md-default-fg-color--light); box-shadow: inset 0 0 0 1px var(--dev-line); }
.md-typeset .dev-chip { display: inline-block; padding: 0.1em 0.5em; border-radius: 0.25em; font-size: 0.6rem; line-height: 1.5;
  white-space: nowrap; color: var(--md-default-fg-color--light); box-shadow: inset 0 0 0 1px var(--dev-line); }
.md-typeset .dev-none { font-size: 0.66rem; font-weight: 400; color: var(--md-default-fg-color--light); white-space: nowrap; }

/* ---------------------------------------------------------------- a group: its panel on the left, its cards beside it */
.md-typeset .dev-group { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1rem; align-items: start;
  margin: 1.6rem 0; }
.md-typeset .dev-group__side { position: sticky; top: 4.4rem; padding: 1rem 1rem 1.1rem; border-radius: 0.4rem;
  background: var(--dev-tone); color: #f5f5f5; }
.md-typeset .dev-group__icon svg { display: block; width: 1.9rem; height: 1.9rem; fill: currentColor; }
.md-typeset .dev-group__side h2 { margin: 0.7rem 0 0.35rem; font-size: 1.1rem; font-weight: 500; line-height: 1.25; color: inherit; }
.md-typeset .dev-group__side p { margin: 0; font-size: 0.7rem; line-height: 1.5; color: rgba(245, 245, 245, 0.82); }
.md-typeset .dev-group__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.7rem; }

.md-typeset .dev-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0.85rem;
  border: 1px solid var(--dev-line); border-radius: 0.4rem; background: var(--md-default-bg-color);
  transition: border-color 250ms, box-shadow 250ms; }
.md-typeset .dev-card:hover { border-color: transparent; box-shadow: var(--md-shadow-z2); }
.md-typeset .dev-card p { margin: 0; }
.md-typeset .dev-card__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.35rem;
  background: var(--dev-tone); color: #f5f5f5; }
.md-typeset .dev-card__icon svg { display: block; width: 1.15rem; height: 1.15rem; fill: currentColor; }
.md-typeset .dev-card__main { display: flex; flex-direction: column; min-width: 0; }
.md-typeset .dev-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; font-size: 0.8rem; line-height: 1.3; }
.md-typeset .dev-card p.dev-card__text { flex: 1; margin: 0.25rem 0 0.4rem; font-size: 0.72rem; }
.md-typeset .dev-card p.dev-card__meta { margin: 0 0 0.4rem; font-size: 0.62rem; color: var(--md-default-fg-color--light); }
.md-typeset .dev-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem; }
.md-typeset .dev-card__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.md-typeset .dev-card__links { display: flex; gap: 0.85rem; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
/* a planned entry: dashed, its name and icon quieter */
.md-typeset .dev-card[data-status="planned"] { border-style: dashed; background: none; }
.md-typeset .dev-card[data-status="planned"] strong { color: var(--md-default-fg-color--light); }
.md-typeset .dev-card[data-status="planned"] .dev-card__icon { background: none; color: var(--md-default-fg-color--light);
  box-shadow: inset 0 0 0 1px var(--dev-line); }

@media screen and (max-width: 59.9375em) {
  .md-typeset .dev-group { grid-template-columns: minmax(0, 1fr); }
  .md-typeset .dev-group__side { position: static; }
}
@media print { .dev-filter, .dev-count { display: none !important; } }