/**
 * Status notices: the components behind layouts/shortcodes/status-badge.html,
 * layouts/shortcodes/roadmap-timeline.html, layouts/partials/alpha-notice.html
 * and the feature shortcodes.
 *
 * These were written against a white page with Material palette colours, so on
 * the dark ground they drew orange banners and white cards that belonged to no
 * other part of the site. They are retokened here rather than replaced: the
 * markup is a published interface that content authors call by name.
 *
 * Status maps onto the semantic tokens: alpha is --ax-warn, planned is quiet,
 * available is --ax-ok. Cyan is not a status colour.
 */

/* ==========================================================================
   Notice callouts. One shape, the accent-edge block used site-wide, with the
   left edge carrying the status.
   ========================================================================== */

.alpha-notice-banner,
.alpha-banner,
.page-alpha-notice,
.alpha-status-section {
  padding: 1.25rem 1.5rem;
  margin-bottom: var(--ax-s-6);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-left: var(--ax-bw-accent) solid var(--ax-warn);
  border-radius: var(--ax-r-lg);
  color: var(--ax-text-body);
  font-size: var(--ax-t-sm);
  line-height: 1.6;
  text-align: left;
}

.alpha-status-section {
  padding: var(--ax-s-6);
  margin: var(--ax-s-8) 0;
}

.alpha-notice-banner strong,
.alpha-banner strong,
.page-alpha-notice strong,
.alpha-status-section h2,
.alpha-status-section h3 {
  color: var(--ax-text);
}

.alpha-status-section h2 { margin-top: 0; font-size: var(--ax-t-h3); }
.alpha-status-section h3 { margin-top: var(--ax-s-5); font-size: var(--ax-t-h4); }
.alpha-status-section p { margin-top: var(--ax-s-3); color: var(--ax-text-muted); }

.alpha-notice-banner a,
.alpha-banner a,
.page-alpha-notice a,
.alpha-status-section a {
  color: var(--ax-warn);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Status badge. Mono caps, the same micro-label voice as every other label on
   the site, tinted by status rather than filled with it.
   ========================================================================== */

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  margin-left: 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--ax-r-xs);
  vertical-align: middle;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-alpha { color: var(--ax-warn); background: rgba(245, 158, 11, 0.1); }
.status-planned { color: var(--ax-text-dim); background: rgba(148, 163, 184, 0.08); }
.status-available { color: var(--ax-ok); background: rgba(16, 185, 129, 0.1); }

/* The release chip. Same shape, carrying a version rather than a state. */
.version-badge-inline {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  margin-left: 0.5rem;
  border: 1px solid var(--ax-accent-line);
  border-radius: var(--ax-r-xs);
  background: var(--ax-accent-soft);
  color: var(--ax-accent);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   Feature status grid. The site card, with the status on the top edge.
   ========================================================================== */

.feature-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--ax-card-gap);
  margin: var(--ax-s-6) 0;
}

.feature-status-grid > * { min-width: 0; }

.feature-status-card {
  background: var(--ax-bg-3);
  border: 1px solid var(--ax-border);
  border-top: 2px solid var(--ax-border-strong);
  border-radius: var(--ax-r-lg);
  padding: var(--ax-s-5);
  box-shadow: var(--ax-e-1);
}

.feature-status-card.available { border-top-color: var(--ax-ok); }
.feature-status-card.planned { border-top-color: var(--ax-text-faint); }
.feature-status-card.alpha { border-top-color: var(--ax-warn); }

.feature-status-card h4 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ax-font-display);
  font-size: var(--ax-t-h3);
  color: var(--ax-text);
}

/* ==========================================================================
   Roadmap timeline. A hairline spine with a node per entry; the node colour is
   the state, and the trailing label repeats it in words.
   ========================================================================== */

.roadmap-timeline {
  position: relative;
  margin: var(--ax-s-6) 0;
  padding-left: var(--ax-s-5);
}

.roadmap-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--ax-hairline);
}

.roadmap-item {
  position: relative;
  margin-bottom: var(--ax-s-6);
  padding-left: var(--ax-s-5);
}

.roadmap-item::before {
  content: "";
  position: absolute;
  left: calc(var(--ax-s-5) * -1 - 5px);
  top: 0.5rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ax-bg-0);
  border: 2px solid currentColor;
}

.roadmap-item.complete { color: var(--ax-ok); }
.roadmap-item.in-progress { color: var(--ax-warn); }
.roadmap-item.planned { color: var(--ax-text-faint); }

.roadmap-item h4 {
  font-family: var(--ax-font-display);
  font-size: var(--ax-t-h3);
  color: var(--ax-text);
}

.roadmap-item ul {
  margin-top: var(--ax-s-3);
  padding-left: 1.1rem;
  color: var(--ax-text-muted);
  font-size: var(--ax-t-sm);
}

.roadmap-item li { margin-top: var(--ax-s-2); }

@media (max-width: 768px) {
  .alpha-notice-banner,
  .alpha-banner,
  .page-alpha-notice { padding: 1rem 1.125rem; }

  .feature-status-grid { grid-template-columns: 1fr; }

  .hidden-mobile { display: none; }
}