/* میوو‌نامه block inside the web app (#learn). Markup is generated by tools/meeow-nameh/build.mjs
   between the meeow-nameh:start/end markers in index.html. Same calm-card recipe as nameh-v2.css. */
.mn2 { --mn-hair: rgba(34, 48, 74, .09); --mn-shadow: 0 1px 2px rgba(34, 48, 74, .04), 0 14px 34px -20px rgba(34, 48, 74, .24); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mn2 :focus-visible { outline: 3px solid var(--b-mint, #20c9b5); outline-offset: 2px; box-shadow: 0 0 0 2px var(--b-mint-ink, #0a7166); }

.mn2-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: center; padding: clamp(20px, 3.5vw, 36px); border-radius: 28px; background: linear-gradient(120deg, #fffaf4 0%, #fff1e8 100%); box-shadow: 0 0 0 1px var(--mn-hair); overflow: hidden; }
.mn2-copy .eyebrow { color: var(--b-sky-ink, #1f5f99); }
.mn2-copy h1 { margin: 6px 0 6px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.4; font-weight: 750; letter-spacing: -.02em; color: var(--b-ink, #22304a); text-wrap: balance; }
.mn2-copy > p { margin: 0; max-width: 34rem; color: var(--b-muted, #646c7e); line-height: 1.9; }
.mn2-art { width: 220px; height: auto; justify-self: center; filter: drop-shadow(0 16px 20px rgba(34, 48, 74, .12)); }
.mn2-search { display: flex; align-items: center; gap: 8px; max-width: 34rem; margin-top: 16px; padding: 5px; padding-inline-start: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 48, 74, .15), var(--mn-shadow); }
.mn2-search:focus-within { box-shadow: 0 0 0 3px var(--b-mint, #20c9b5), 0 0 0 5px var(--b-mint-ink, #0a7166); }
.mn2-search svg { width: 18px; height: 18px; flex: none; color: var(--b-muted, #646c7e); }
.mn2-search input { flex: 1; min-width: 0; min-height: 42px; border: 0; background: transparent; font: inherit; color: var(--b-ink, #22304a); outline: none; }
.mn2 .mn2-search input:focus-visible { outline: none; box-shadow: none; }
.mn2-search button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--b-cta, #d2402f); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mn2-search button:hover { background: var(--b-cta-hover, #b93424); }
.mn2-status { display: inline-flex; margin: 12px 0 0 !important; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.mn2-status.is-draft { background: var(--b-sun-soft, #fff1c9); color: #7a4f00; }
.mn2-status.is-reviewed { background: var(--b-mint-soft, #ddf7f2); color: var(--b-mint-ink, #0a7166); }

.mn2-topics { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.mn2-topics::-webkit-scrollbar { display: none; }
.mn2-topic { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 4px 12px; padding-inline-start: 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(34, 48, 74, .15); color: var(--b-ink-2, #4b556a); font-weight: 700; font-size: .88rem; text-decoration: none; }
.mn2-topic:hover { box-shadow: inset 0 0 0 1px rgba(10, 113, 102, .45); color: var(--b-ink, #22304a); }
.mn2-topic:first-child { background: var(--b-mint-soft, #ddf7f2); color: var(--b-mint-ink, #0a7166); box-shadow: inset 0 0 0 1px rgba(10, 113, 102, .3); }
.mn2-topic img { width: 26px; height: 26px; }
.mn2-topic small { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #f8f5f1; color: var(--b-muted, #646c7e); font-size: .74rem; font-weight: 750; }

.mn2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.mn2-featured { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--mn-hair), var(--mn-shadow); color: inherit; text-decoration: none; }
.mn2-featured img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #f3ede4; }
.mn2-featured-body { display: grid; gap: 6px; padding: 16px 18px 18px; justify-items: start; }
.mn2-tag { padding: 2px 10px; border-radius: 999px; background: var(--b-mint-soft, #ddf7f2); color: var(--b-mint-ink, #0a7166); font-size: .76rem; font-weight: 750; }
.mn2-featured strong { color: var(--b-ink, #22304a); font-family: var(--font-display, Estedad, Vazirmatn, sans-serif); font-size: 1.15rem; line-height: 1.6; }
.mn2-featured small, .mn2-item small { color: var(--b-muted, #646c7e); font-size: .78rem; }
.mn2-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mn2-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--mn-hair), var(--mn-shadow); color: inherit; text-decoration: none; }
.mn2-item img { width: 120px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: #f3ede4; }
.mn2-item > span { display: grid; gap: 3px; }
.mn2-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--b-mint-ink, #0a7166); font-size: .74rem; font-weight: 750; }
.mn2-flag { padding: 0 8px; border-radius: 999px; background: #fff4f2; color: #b42318; box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .22); }
.mn2-item strong { color: var(--b-ink, #22304a); font-size: .95rem; line-height: 1.65; }
.mn2-featured:hover, .mn2-item:hover { box-shadow: 0 0 0 1px rgba(34, 48, 74, .16), 0 22px 40px -22px rgba(34, 48, 74, .32); }

.mn2-urgent { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 18px; background: #fff4f2; box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .22); border-inline-start: 4px solid #b42318; color: #5c1720; text-decoration: none; }
.mn2-urgent-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; }
.mn2-urgent strong { display: block; color: #b42318; font-size: .98rem; }
.mn2-urgent small { color: #6d3a36; font-size: .8rem; }
.mn2-urgent > svg { width: 18px; height: 18px; color: #b42318; }
.mn2 .medical-disclaimer { margin: 0; }

@media (max-width: 760px) {
  .mn2-hero { display: block; padding: 18px 16px 16px; }
  .mn2-art { position: absolute; top: 8px; inset-inline-end: 4px; width: 112px; }
  .mn2-copy .eyebrow, .mn2-copy h1 { padding-inline-end: 104px; }
  .mn2-copy h1 { font-size: 1.5rem; min-height: 4.2rem; }
  .mn2-grid { grid-template-columns: 1fr; }
  .mn2-item { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .mn2-item img { width: 104px; }
  .mn2-item strong { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .mn2 * { transition: none !important; } }