/* ================================================================
   Nouns overview — styles for the three blocks noun-overview.js mounts
   on grammar-nouns.html. Generated from noun-sample.css; the class
   names are the same so the two pages stay identical.
   ================================================================ */
.nsm-overview { padding-bottom: 0; }
.nsm-overview .nsm-panel + .nsm-panel { margin-top: 14px; }
/* ============================================================================
   Noun Sample — a compact, dashboard-style layout for the Nouns lesson.
   Same tokens as every other lesson (lq-core.css: --module, --bg-soft,
   --surface, --border, Inter), only the layout, card design and hierarchy
   differ. grammar-nouns.html is untouched; this page is for comparison.
   ========================================================================== */
.nsm-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.nsm-page { padding-bottom: 60px; line-height: 1.6; }   /* the lesson body rhythm */
.nsm-page b { font-weight: 600; }

/* ---------- panels (cards) ---------- */
.nsm-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px;
            box-shadow: 0 6px 20px -14px rgba(124,58,237,.25); }
.nsm-panel + .nsm-panel, .nsm-row + .nsm-panel, .nsm-panel + .nsm-row, .nsm-row + .nsm-row { margin-top: 14px; }
.nsm-row { display: grid; gap: 14px; }
.nsm-row.c2 { grid-template-columns: 1.55fr 1fr; }
.nsm-row.c2b { grid-template-columns: 1fr 1fr; }
.nsm-row.c3 { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
.nsm-row.c3 > .nsm-panel { display: flex; flex-direction: column; }
@media (max-width: 860px) { .nsm-row.c2, .nsm-row.c2b, .nsm-row.c3 { grid-template-columns: 1fr; } }

.nsm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nsm-head .l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.nsm-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; font-weight: 700; flex: none;
         color: var(--module); background: color-mix(in srgb, var(--module) 12%, transparent); }
.nsm-head h2 { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.33; }
.nsm-head p { margin: 2px 0 0; font-size: .9375rem; color: var(--text-muted); }
.nsm-head .step { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--module); background: color-mix(in srgb, var(--module) 10%, transparent);
                 border-radius: 999px; padding: 2px 9px; margin-bottom: 4px; }
@media (max-width: 960px) { .nsm-hero { grid-template-columns: 1fr 1fr; } .nsm-quote { grid-column: 1 / -1; } }
@media (max-width: 600px) { .nsm-hero { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .nsm-hero { grid-template-columns: 1fr; } .nsm-mascot { height: 230px; min-width: 0; } .nsm-mascot img.cat { height: 150px; } }

/* ---------- category strip (step 1) ---------- */
.nsm-cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.nsm-cat { border-radius: 16px; padding: 12px 10px 11px; text-align: center; background: var(--tint, var(--bg-soft)); border: 1px solid transparent; }
.nsm-cat .em { font-size: 1.9rem; line-height: 1; margin-bottom: 7px; display: block; }
.nsm-cat b { display: block; font-size: 1.0625rem; }
.nsm-cat span { display: block; font-size: .8125rem; color: var(--text-muted); margin-top: 3px; line-height: 1.3; }
.nsm-formula { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
              padding: 10px 14px; border-radius: 14px; background: var(--module-grad); color: #fff; font-weight: 700; }
.nsm-formula span { font-weight: 500; opacity: .9; }
@media (max-width: 960px) { .nsm-cats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .nsm-cats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- type families (step 2) ---------- */
/* two per row, paired so both cards carry a similar number of types; rows
   stretch so every card in a row is the same height, "Learn more" pinned */
.nsm-fams { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 640px) { .nsm-fams { grid-template-columns: 1fr; } }
.nsm-fam { border-radius: 18px; padding: 0; background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); overflow: hidden; display: flex; flex-direction: column; }
.nsm-fam .top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.nsm-fam .top img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; box-shadow: 0 4px 10px -6px rgba(0,0,0,.3); }
.nsm-fam .top small { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.nsm-fam .top b { display: block; font-size: 1.0625rem; line-height: 1.2; }
.nsm-fam .types { padding: 0 14px 10px; display: grid; grid-auto-rows: 1fr; gap: 6px; flex: 1; }   /* four equal rows in every card */
.nsm-type { display: grid; grid-template-columns: 150px 1fr; gap: 2px 10px; align-items: baseline; align-content: center; padding: 7px 10px; border-radius: 10px; background: var(--surface); font-size: .9375rem; line-height: 1.35; }
@media (max-width: 480px) { .nsm-type { grid-template-columns: 1fr; } .nsm-type i { grid-column: 1; } }
.nsm-type b { color: var(--text); font-size: .9375rem; }
.nsm-type span { color: var(--text-muted); }
.nsm-type i { grid-column: 2; font-style: normal; color: var(--c); font-weight: 600; font-size: .875rem; }
.nsm-type.nsm-note { background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.nsm-type.nsm-note b { color: var(--c); font-size: .9375rem; }
.nsm-type.nsm-note span b { color: var(--text); }
.nsm-hint { margin-top: auto; padding: 7px 10px; border-radius: 10px; font-size: .9375rem; line-height: 1.4; color: var(--text-muted);
            background: color-mix(in srgb, var(--c) 9%, transparent); }
.nsm-hint b { color: var(--text); }
.nsm-fam details { border-top: 1px dashed color-mix(in srgb, var(--c) 30%, transparent); margin-top: auto; }
.nsm-fam summary { list-style: none; cursor: pointer; padding: 9px 14px; font-size: .9375rem; font-weight: 700; color: var(--c); display: flex; justify-content: space-between; align-items: center; }
.nsm-fam summary::-webkit-details-marker { display: none; }
.nsm-fam summary::after { content: "▾"; transition: transform .18s; }
.nsm-fam details[open] summary::after { transform: rotate(180deg); }
.nsm-fam .more { padding: 0 14px 14px; font-size: .9375rem; line-height: 1.5; display: grid; gap: 8px; }
.nsm-fam .more .g-tbl { font-size: .9375rem; }
.nsm-fam .more .g-tbl th, .nsm-fam .more .g-tbl td { padding: .35rem .6rem; }
.nsm-fam .more .g-tip { margin: 0; padding: .65rem .8rem; }
.nsm-fam .more .err-box { margin: 0; }
.nsm-fam .more .subcard { margin: 0; }
.nsm-fam .more .note { margin: 0; }

/* the shared lesson pieces, re-styled for the tighter cards */
.g-tblwrap { overflow-x: auto; }
.g-tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.g-tbl th { background: color-mix(in srgb, var(--c, var(--module)) 10%, transparent); color: var(--c, var(--module)); font-weight: 700; text-align: left; }
.g-tbl th, .g-tbl td { padding: .4rem .7rem; border-bottom: 1px solid var(--border); }
.g-tbl tbody tr:last-child td { border-bottom: none; }
.g-tip { border: 1px dashed color-mix(in srgb, var(--c, var(--module)) 45%, var(--border)); border-radius: 12px; padding: .7rem .85rem;
         background: color-mix(in srgb, var(--c, var(--module)) 6%, transparent); }
.g-tip-h { font-weight: 700; margin-bottom: .25rem; }
.g-tip p { margin: .2rem 0; }
.g-tip-f { color: var(--text-muted); font-size: .9375rem; margin-top: .3rem; }
.g-ex { display: block; margin-top: .2rem; color: var(--text-muted); font-size: .9375rem; }
.nsm-fam .subcard { background: var(--surface); border-radius: 10px; padding: .55rem .75rem; }
.nsm-fam .subcard-label { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); margin-bottom: .2rem; }
.nsm-fam .note { background: var(--surface); border-left: 3px solid var(--c); border-radius: 8px; padding: .5rem .7rem; }
.nsm-fam .err-box { background: var(--surface); border-radius: 10px; padding: .55rem .75rem; }
.err-wrong { color: #dc2626; font-weight: 600; } .err-right { color: #059669; font-weight: 600; } .err-why { color: var(--text-muted); font-size: .9375rem; margin-top: .2rem; }
.tp-line { display: block; margin: .15rem 0; }

/* ---------- examples + rules ---------- */
.nsm-exs { display: grid; gap: 8px; }
.nsm-exs.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .nsm-exs.two { grid-template-columns: 1fr; } }
.nsm-ex { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--tint, var(--bg-soft)); font-size: 1.0625rem; }
.nsm-ex .em { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.75); display: grid; place-items: center; font-size: 1.0625rem; flex: none; }
.nsm-ex mark { background: none; color: var(--hl, var(--module)); font-weight: 600; }
.nsm-ex small { margin-left: auto; color: var(--text-muted); font-size: .8125rem; white-space: nowrap; }
@media (max-width: 960px) { .nsm-know { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .nsm-tips { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .nsm-pcards { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .nsm-next { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .nsm-next { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .nsm-w { grid-template-columns: 1fr; gap: 4px; } }   /* six equal rows, as tall as the side column */
@media (max-width: 860px) { .nsm-remember { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .nsm-game-slot .ns-card { display: block; }
  .nsm-game-slot .ns-pic { width: 80%; max-width: 420px; }
}
.nsm-arrive { animation: nsmArrive .9s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  .nsm-pcard, .nsm-pcard button, .nsm-qpanel, .nsm-arrive { transition: none !important; animation: none !important; }
  .nsm-pcard:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nsm-page *, .nsm-page *::before, .nsm-page *::after { transition: none !important; animation: none !important; }
  .nsm-cat:hover, .nsm-stat:hover, .nsm-bub:hover, .nsm-flow a:hover, .nsm-nx:hover, .nsm-back:hover, .nsm-play:hover { transform: none; }
}