/* Brand palette -- estimated from the "LEARN MORE" pill button reference
   (navy button, lavender-purple accent circle). Adjust these hex values
   if they don't exactly match the real brand colors. */
:root {
  --md-primary-fg-color: #1a1464;
  --md-primary-fg-color--light: #3d3785;
  --md-primary-fg-color--dark: #100d40;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #9b87c4;
  --md-accent-fg-color--transparent: #9b87c41a;
  --md-accent-bg-color: #ffffff;
  --md-typeset-a-color: #1a1464;
}

.pill {
  display: inline-block;
  padding: 0.15em 0.75em;
  margin: 0.15em 0.3em 0.15em 0;
  border-radius: 999px;
  background-color: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-typeset-color);
  text-decoration: none;
  font-size: 0.8em;
  line-height: 1.6;
  white-space: nowrap;
}

.pill:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

.pill--in-review {
  border-color: var(--md-accent-fg-color);
  font-weight: 600;
}

.in-review-toggle {
  margin: 1em 0;
  padding: 0.5em 1em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3em;
  background-color: var(--md-code-bg-color);
  display: inline-block;
}

.in-review-toggle label {
  cursor: pointer;
  user-select: none;
}

/* When toggled on: hide rows with no in-review content, and hide
   non-flagged pills within the rows that remain visible. */
body.filter-in-review tr[data-in-review="false"] {
  display: none;
}

body.filter-in-review .pill:not(.pill--in-review) {
  display: none;
}

/* Roadmap grid (docs/roadmap.md, generated by scripts/roadmap.py) */
.roadmap-totals {
  color: var(--md-default-fg-color--light);
  font-size: 0.9em;
}

.roadmap-updated {
  color: var(--md-default-fg-color--light);
  font-size: 0.8em;
  font-style: italic;
  margin-top: -0.5em;
}

.roadmap-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75em;
  margin: 1em 0 1.5em;
}

.roadmap-stat {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4em;
  padding: 0.75em 1em;
  background-color: var(--md-code-bg-color);
}

.roadmap-stat--stretch {
  border-style: dashed;
  background-color: transparent;
}

.roadmap-stat-label {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
  text-transform: uppercase;
}

.roadmap-stat-value {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.4;
}

.roadmap-stat-sub {
  font-size: 0.8em;
  color: var(--md-default-fg-color--light);
}

.roadmap-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.roadmap-grid th {
  text-align: left;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  background-color: var(--md-code-bg-color);
  padding: 0.5em 0.75em;
}

.roadmap-grid td {
  vertical-align: top;
  padding: 0.5em 0.75em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  overflow-wrap: anywhere;
}

.roadmap-area-row td {
  background-color: var(--md-code-bg-color);
  padding: 0.6em 0.75em;
}

.roadmap-area-subtitle {
  color: var(--md-default-fg-color--light);
  font-size: 0.85em;
  font-weight: 400;
}

.roadmap-fs-title {
  font-weight: 600;
}

.roadmap-fs-subtitle {
  font-size: 0.8em;
  color: var(--md-default-fg-color--light);
}

/* Roadmap items -- packed into a small grid per column (roadmap-cards)
   rather than stacked one-per-line, so several short-titled cards sit
   side by side and use the column's space instead of each claiming a
   full line. Reverted from an earlier pill-based treatment (2026-08-12):
   pills read poorly once a column had several items -- boxed cards that
   can sit two-up use the space better. */
.roadmap-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.4em;
}

.roadmap-card {
  position: relative;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.35em;
  padding: 0.4em 1.6em 0.4em 0.6em;
  font-size: 0.8em;
  line-height: 1.4;
}

.roadmap-card-title {
  display: block;
  color: var(--md-typeset-color);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.roadmap-card-title:hover {
  color: var(--md-typeset-a-color);
}

.roadmap-card-status {
  display: block;
  margin-top: 0.2em;
  color: var(--md-default-fg-color--light);
}

.roadmap-card-gh {
  position: absolute;
  bottom: 0.4em;
  right: 0.5em;
  display: inline-flex;
  color: var(--md-default-fg-color--light);
}

.roadmap-card-gh:hover {
  color: var(--md-typeset-a-color);
}

.roadmap-card-gh svg {
  fill: currentColor;
}

/* Committed (Project "Committed: Yes" field) vs. merely forecasted (has
   a month milestone but Committed isn't set) -- bold + solid darker
   outline marks the former; forecasted-only cards stay in the plain
   style above. */
.roadmap-card--committed {
  border-color: var(--md-default-fg-color--light);
  border-width: 2px;
  padding: calc(0.4em - 1px) 1.6em calc(0.4em - 1px) calc(0.6em - 1px);
  font-weight: 600;
}

.roadmap-card--at-risk {
  border-color: #c62828;
}

:root:not([data-theme="light"]) .roadmap-card--at-risk {
  border-color: #ef5350;
}

:root[data-theme="dark"] .roadmap-card--at-risk {
  border-color: #ef5350;
}

.roadmap-toggle {
  margin: 1em 0;
  padding: 0.5em 1em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3em;
  background-color: var(--md-code-bg-color);
  display: inline-block;
}

.roadmap-toggle label {
  cursor: pointer;
  user-select: none;
}

body.filter-committed-only .roadmap-card[data-committed="false"] {
  display: none;
}

/* Roadmap pages opt into the full content width (see roadmap-page-marker
   in roadmap.py) -- the grid is packed with per-month columns and wastes
   a lot of horizontal space at Material's default ~61rem content width. */
.md-main__inner.md-grid:has(.roadmap-page-marker) {
  max-width: 100%;
}