/* ============================================================================
   Family Math Mission: the six-stage path (Connect, Explore, Practice, Talk Together, Apply,
   Reflect), the Explore more sheet, the caregiver co-pilot, the interactive model host and the
   Reflect summary. One @layer patterns sheet on the design-system tokens; no raw colors, logical
   properties only, no ID selectors. Gate: npm run validate:family-design-tokens.
   ============================================================================ */
@layer patterns {
  /* !important (documented [hidden]): a problem the mission does not show has no dot and no rail button; a component display rule must not bring it back. */
  .hw-stepper-dot[hidden],
  .hw-sub-btn[hidden] {
    display: none !important;
  }

  /* One mission, one rail: the optional stops exist for the Explore more sheet only. */
  .hw-optional-stops {
    display: none;
  }

  /* Hero: one primary action, one quiet secondary. */
  .hw-mission-start {
    display: grid;
    gap: var(--fm-space-3);
    align-content: start;
  }
  .hw-mission-lead {
    margin: 0;
    max-inline-size: var(--fm-measure);
  }
  .hw-explore-more-btn {
    min-block-size: var(--fm-target-min);
  }

  /* Stage blocks: spacing and a calm card, one idea each. */
  .mission-block {
    background: var(--fm-surface);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-lg);
    padding: var(--fm-space-5);
    margin-block-end: var(--fm-space-4);
  }
  .mission-block > :first-child {
    margin-block-start: 0;
  }
  .mission-block > :last-child {
    margin-block-end: 0;
  }

  /* Connect: notice and wonder */
  .hw-nw-field {
    display: grid;
    gap: var(--fm-space-2);
    margin-block-start: var(--fm-space-3);
  }
  .hw-nw-label {
    font-weight: var(--fm-fw-semibold);
  }
  .hw-nw-field textarea {
    inline-size: 100%;
    min-block-size: calc(var(--fm-target-min) * 1.5);
    padding: var(--fm-space-3);
    font: inherit;
    color: var(--fm-text);
    background: var(--fm-sunken);
    border: 1px solid var(--fm-border-strong);
    border-radius: var(--fm-radius-md);
    resize: vertical;
  }

  /* Explore: the model host */
  .hw-mission-model {
    background: var(--fm-surface);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-lg);
    padding: var(--fm-space-4);
    margin-block-end: var(--fm-space-4);
  }
  .hw-mm-title {
    font-size: var(--fm-fs-xl);
    margin-block: 0 var(--fm-space-2);
  }
  .hw-mm-lead {
    margin-block: 0 var(--fm-space-3);
  }
  .hw-mm-stage {
    min-block-size: calc(var(--fm-target-min) * 4);
    max-inline-size: 100%;
    overflow-x: clip;
  }
  .hw-mm-status {
    margin-block: var(--fm-space-2) 0;
    color: var(--fm-text-muted);
    font-size: var(--fm-fs-sm);
  }

  /* Talk Together */
  .hw-talk-title {
    font-size: var(--fm-fs-xl);
    margin-block: 0 var(--fm-space-3);
  }
  .hw-talk-q {
    font-size: var(--fm-fs-xl);
    font-weight: var(--fm-fw-semibold);
    margin-block: 0 var(--fm-space-3);
  }
  .hw-talk-frame,
  .hw-talk-strong,
  .hw-talk-solo {
    margin-block: var(--fm-space-3) 0;
    font-size: var(--fm-fs-md);
    line-height: var(--fm-lh-body);
  }
  .hw-talk-solo {
    color: var(--fm-text-muted);
  }

  /* Caregiver co-pilot: a drawer of short answers, two open */
  .hw-copilot {
    background: var(--fm-info-tint);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-lg);
    padding: var(--fm-space-4);
    margin-block-end: var(--fm-space-4);
  }
  .hw-copilot-title {
    font-size: var(--fm-fs-lg);
    margin-block: 0 var(--fm-space-3);
  }
  .hw-copilot-item {
    border-block-start: 1px solid var(--fm-border);
  }
  .hw-copilot-item summary {
    cursor: pointer;
    min-block-size: var(--fm-target-min);
    display: flex;
    align-items: center;
    font-weight: var(--fm-fw-semibold);
  }
  .hw-copilot-body {
    padding-block-end: var(--fm-space-3);
  }
  .hw-copilot-body ul {
    margin: 0;
    padding-inline-start: var(--fm-space-5);
  }

  /* Practice: a fresh try after a supported correction */
  .hw-fresh-try {
    display: grid;
    gap: var(--fm-space-2);
    justify-items: start;
    margin-block-start: var(--fm-space-3);
    padding: var(--fm-space-3) var(--fm-space-4);
    background: var(--fm-success-tint);
    color: var(--fm-success-ink);
    border: 1px solid var(--fm-success);
    border-radius: var(--fm-radius-md);
  }
  .hw-fresh-try p {
    margin: 0;
  }

  /* Reflect: evidence and what next */
  .hw-evidence-list {
    margin: 0 0 var(--fm-space-3);
    padding-inline-start: var(--fm-space-5);
  }
  .hw-evidence-next {
    margin-block: 0 var(--fm-space-3);
  }
  .hw-saved-note {
    color: var(--fm-text-muted);
    font-size: var(--fm-fs-sm);
  }
  .hw-next-actions {
    display: grid;
    gap: var(--fm-space-2);
  }
  .hw-next-link {
    justify-content: flex-start;
    text-align: start;
    min-block-size: var(--fm-target-min);
  }
  .hw-finish {
    margin-block: var(--fm-space-3) 0;
    color: var(--fm-text-muted);
  }

  /* Explore more sheet */
  .hw-explore-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--fm-space-2);
  }
  .hw-explore-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--fm-space-3);
    align-items: center;
    text-align: start;
    min-block-size: calc(var(--fm-target-min) * 1.4);
  }
  .hw-explore-copy {
    display: grid;
    gap: var(--fm-space-1);
  }
  .hw-explore-copy small {
    color: var(--fm-text-muted);
    font-size: var(--fm-fs-sm);
  }
  .hw-explore-lead {
    margin-block: 0 var(--fm-space-3);
  }

  /* The six-stage rail: on a phone only the current stage keeps its words. */
  @media (max-width: 640px) {
    .homework-tab-bar .homework-tab-btn:not(.is-active) .tab-label {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hw-mission-model * {
      transition: none;
      animation: none;
    }
  }

  .hw-levelstrip {
    display: grid;
    gap: var(--fm-space-2);
    margin-block: var(--fm-space-2);
  }
  .hw-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fm-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .hw-level {
    background: var(--fm-surface);
    border: var(--fm-line) solid var(--fm-border);
    border-radius: var(--fm-radius-md);
    color: var(--fm-text-muted);
  }
  .hw-level-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--fm-space-1);
    inline-size: 100%;
    min-block-size: var(--fm-target);
    padding: var(--fm-space-1) var(--fm-space-2);
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .hw-level.is-current {
    background: var(--fm-highlight-tint);
    border-color: var(--fm-highlight);
    color: var(--fm-text);
  }
  .hw-level.is-done {
    background: var(--fm-success-tint);
    border-color: var(--fm-success);
    color: var(--fm-success-ink);
  }
  .hw-level-ico {
    font-size: var(--fm-fs-md);
    line-height: 1;
  }
  .hw-level-copy {
    display: grid;
    min-inline-size: 0;
  }
  .hw-level-copy strong {
    font-size: var(--fm-fs-sm);
  }
  .hw-level-copy small {
    font-size: var(--fm-fs-xs);
  }
  .hw-level-bar {
    grid-column: 1 / -1;
    block-size: 0.25rem;
    background: var(--fm-border);
    border-radius: var(--fm-radius-pill);
    overflow: hidden;
  }
  .hw-level-bar i {
    display: block;
    block-size: 100%;
    background: var(--fm-success);
  }
  .hw-level-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--fm-space-1);
    margin: 0 0 var(--fm-space-2);
    padding: var(--fm-space-1) var(--fm-space-3);
    background: var(--fm-highlight-tint);
    color: var(--fm-highlight-ink);
    border-radius: var(--fm-radius-pill);
    font-size: var(--fm-fs-sm);
    font-weight: var(--fm-fw-bold);
  }
  .hw-level-chip--boss {
    background: var(--fm-accent-tint);
    color: var(--fm-accent-ink);
  }
  .hw-levelup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fm-space-3);
    padding: var(--fm-space-3) var(--fm-space-4);
    background: var(--fm-success-tint);
    color: var(--fm-success-ink);
    border: var(--fm-line) solid var(--fm-success);
    border-radius: var(--fm-radius-md);
  }
  .hw-levelup p {
    margin: 0;
    flex: 1 1 12rem;
  }
  .hw-levelup-ico {
    font-size: var(--fm-fs-3xl);
    line-height: 1;
  }

  .fp-review--clean .fp-review-stem,
  .fp-review--clean .fp-review-why,
  .fp-review--clean .fp-review-note {
    display: none;
  }

  .hw-fun-zone {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fm-space-2);
    margin-block: var(--fm-space-2);
  }
  .hw-fun-zone .homework-tab-extra {
    flex: 1 1 8rem;
    flex-direction: row;
    gap: var(--fm-space-2);
    min-block-size: var(--fm-target);
    margin: 0;
    padding: var(--fm-space-1) var(--fm-space-3);
    border-style: solid;
    border-radius: var(--fm-radius-pill);
    font-size: var(--fm-fs-sm);
    cursor: pointer;
  }
  .hw-fun-zone .homework-tab-extra::before {
    content: none;
  }
}