/* ================================================================
   Nouns lesson — final polish. Loaded last on grammar-nouns.html.
   One spacing / radius / shadow system for every card on the page,
   so cards never touch, never merge with their section, and line up
   at every width. No colours or fonts are introduced here.
   ================================================================ */
:root {
  --np-gap: 14px;            /* space between sibling cards */
  --np-radius: 22px;         /* outer cards */
  --np-radius-sm: 14px;      /* cards inside cards */
  --np-shadow: 0 8px 24px -18px rgba(124, 58, 237, .45);
}

/* ---- section rhythm: every top-level block breathes the same amount ---- */
main > section, body > section { margin-bottom: 2.25rem !important; }
body > section.max-w-6xl:last-of-type { margin-bottom: 3.5rem !important; }
/* the wizard's Back / Next row sits close to its stage */
.wz-nav { margin-top: .8rem !important; }
/* section headers (icon + title) sit a little closer to their cards */
section > .flex.items-center.gap-3.mb-6, section > .flex.items-center.gap-3.mb-8 { margin-bottom: 1.1rem !important; }

/* ---- outer cards share one radius, border and shadow ---- */
.nsm-panel, .nt-detail, .wz-stage, .glass.rounded-3xl {
  border-radius: var(--np-radius) !important;
  box-shadow: var(--np-shadow) !important;
}
.nsm-panel { padding: 22px 24px; }
.nsm-practice > .nsm-panel + .nsm-panel, .nsm-practice > .nsm-row + .nsm-panel { margin-top: var(--np-gap); }
.nsm-row { gap: var(--np-gap); }
@media (max-width: 640px) { .nsm-panel { padding: 18px 16px; } }

/* ---- theory stage: even gaps between the formula, the category cards and the examples ---- */
.wz-stage { padding: 1.5rem 1.6rem; }
.wz-ex { margin-bottom: var(--np-gap); }
.wz-ex:last-child { margin-bottom: 0; }
.wz-stage .nsm-cats { margin: 0; }
.wz-stage .nsm-exs { margin-top: 8px; }
.wz-stage .subcard-label { margin-top: 2px; }
.nsm-cat { border-radius: var(--np-radius-sm); }
.nsm-ex { border-radius: 12px; }

/* ---- Types of Nouns: the list gets its own card, level with the picture card ---- */
.nt-listwrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--np-radius);
               box-shadow: var(--np-shadow); padding: 14px 8px 14px 14px; }
.nt-list { inset: 14px 8px 14px 14px; }
.nt-list .nt-glabel { margin-top: 2px; }
/* a soft fade at the foot of the list hints that it scrolls */
.nt-listwrap::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 34px; pointer-events: none;
                      border-radius: 0 0 var(--np-radius) var(--np-radius);
                      background: linear-gradient(180deg, transparent, var(--surface)); }
@media (max-width: 860px) { .nt-listwrap::after { display: none; } }
.nt-detail { padding: 20px; }
.nt-ex { gap: var(--np-gap); }
.nt-rail { margin-bottom: 2px; }
/* rules under the picture: cards keep their own height, no stretched blanks */
.nt-rules .nsm-fam { align-items: start; gap: 12px; }
.nt-rules .subcard, .nt-rules .note, .nt-rules .g-tip, .nt-rules .g-tblwrap, .nt-rules .nsm-type.nsm-note { border-radius: var(--np-radius-sm); }
@media (max-width: 860px) {
  .nt-listwrap { padding: 12px; }
  .nt-list { inset: auto; }
}

/* ---- practice row: cards inside the panels ---- */
.nsm-pcard { border-radius: var(--np-radius-sm); }
.nsm-pcards { gap: 12px; }
.nsm-stat, .nsm-mini { border-radius: 12px; }
.nsm-qpanel { border-radius: var(--np-radius-sm); padding: 18px 20px; }
.nsm-tabs { margin-bottom: var(--np-gap); }

/* ---- picture game: one card, not a card inside a card ---- */
.nsm-game-slot .ns-card { border: 0; box-shadow: none; padding: 8px 0 0; background: transparent; }
.nsm-game-slot .ns-pic { border-radius: var(--np-radius-sm); }
.nsm-game-slot .ns-opt { border-radius: 12px; }
.nsm-game-slot .nsm-backrow { margin-top: 16px; }

/* ---- what's next ---- */
.nsm-nx { border-radius: var(--np-radius-sm); }
.nsm-next { gap: 10px; }

/* ---- keep everything inside its parent, at every width ---- */
.nsm-panel, .nt-detail, .wz-stage { min-width: 0; overflow-wrap: anywhere; }
.nsm-panel img, .nt-detail img { max-width: 100%; }   /* theory images keep their own page sizing */