/* v265 — Practice Milestones: desktop layout.
   Scope: only the milestone section of the Family Academy (section.fmil236).
   The host [data-family-practice-content] spans the whole viewport, so v236 let the
   section and every level row run edge to edge while the text sat on the left.
   Here the section is centred at a reading width, each level is one compact row
   (number | level + age | status | action), and the status becomes a quiet label
   on the right. Markup, data, API calls and the attestation flow are unchanged:
   .fmil236__text uses display: contents so its three lines can sit in the row grid. */

.fmil236 {
  box-sizing: border-box;
  width: min(1080px, calc(100% - 2 * clamp(12px, 3vw, 32px)));
  margin: clamp(28px, 4vw, 44px) auto 0;
}

.fmil236__list { gap: 6px; margin-top: 16px; }

.fmil236__item {
  grid-template-columns: 2.6rem minmax(0, 1fr) auto auto;
  grid-template-areas:
    "n name  state action"
    "n meta  state action";
  column-gap: 16px;
  row-gap: 1px;
  padding: 10px 18px;
}
.fmil236__n { grid-area: n; align-self: center; }
.fmil236__text { display: contents; }
.fmil236__name { grid-area: name; align-self: end; }
.fmil236__meta { grid-area: meta; align-self: start; margin-top: 0; }
.fmil236__state {
  grid-area: state;
  justify-self: end;
  align-self: center;
  margin: 0;
  max-width: 24rem;
  padding: 3px 10px;
  border: 1px solid rgba(47, 81, 72, .16);
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.35;
  text-align: right;
}
.fmil236__item.is-recorded .fmil236__state {
  border-color: rgba(47, 81, 72, .3);
  background: rgba(47, 81, 72, .07);
}
.fmil236__action { grid-area: action; align-self: center; }
.fmil236__action:empty { display: none; }
.fmil236__attest { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .fmil236 { width: calc(100% - 24px); }
  .fmil236__item {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    grid-template-areas:
      "n name"
      "n meta"
      "n state"
      "action action";
    column-gap: 12px;
    padding: 11px 13px;
  }
  .fmil236__n { align-self: start; padding-top: 1px; }
  .fmil236__state { justify-self: start; margin-top: 6px; text-align: left; max-width: 100%; }
  .fmil236__action { grid-column: auto; grid-area: action; margin-top: 8px; }
}

@media (max-width: 380px) {
  .fmil236 { width: calc(100% - 16px); }
  .fmil236__item { padding: 10px 11px; column-gap: 10px; }
}