/* Milestone 4 public-alpha UX/accessibility polish. */
:root {
  --m4-focus-ring: 0 0 0 3px rgba(255, 226, 122, 0.95);
  --m4-panel-gap: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  box-shadow: var(--m4-focus-ring);
}

.site-header nav {
  gap: .45rem;
  flex-wrap: wrap;
}

.site-header nav a,
.site-header nav button {
  min-height: 2.25rem;
}

.m4-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
}

.m4-hero {
  border-width: 2px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  opacity: .8;
  margin-bottom: .25rem;
}

.m4-flow li,
.m4-page li,
.m4-glossary dd {
  margin-block: .4rem;
}

.m4-glossary {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: .75rem 1rem;
}

.m4-glossary dt {
  font-weight: 700;
}

.m4-glossary dd {
  margin: 0;
}

.callout {
  border-left: .45rem solid currentColor;
}

.callout.info {
  background: rgba(120, 180, 255, .08);
}

.callout.warn {
  background: rgba(255, 210, 80, .08);
}

.m4-footer {
  max-width: 72rem;
  margin: 1rem auto 2rem;
  padding: 1rem;
  opacity: .85;
}

.actions-panel::before {
  content: "Choose a numbered action or type one of the aliases shown below.";
  display: block;
  margin-bottom: .75rem;
  opacity: .85;
}



@media (max-width: 720px) {
  .m4-page {
    padding: .75rem;
  }

  .m4-glossary {
    display: block;
  }

  .m4-glossary dt {
    margin-top: 1rem;
  }

  .site-header {
    align-items: stretch;
  }

  .site-header nav a,
  .site-header nav button {
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* M5D final command-input fix:
   The command helper text is provided by the input placeholder.
   Disable CSS-generated helper text to prevent encoding/mojibake issues. */
.command-form label::after,
.command-form label:after {
  content: "" !important;
  display: none !important;
}