/* ===========================================================================
   Lesson content components  ·  v2
   ---------------------------------------------------------------------------
   Presentation layer for authored course pages (apps/content Page.body).

   Page bodies are cleaned by apps/content/utils.sanitize_html, which keeps
   `class` but strips layout CSS from inline `style` (no position/display/grid).
   Every lesson component therefore lives here as a class and the seeders only
   ever emit semantic markup + `nms-*` class names.

   v2: neutrals moved from Tailwind's cool grey onto the brand's warm ramp,
   status tints onto the token status colours, and the eyebrows onto the arrow
   badge. Colour reads the shared tokens with fallbacks that mirror them.

   Loaded by templates/base.html and templates/base_player.html — bump the ?v=
   in BOTH when this file changes (static assets are cached hard).
   =========================================================================== */

.content-body { color: var(--brown-900, #391e1a); }
.content-body > *:first-child { margin-top: 0; }

/* ── page opener ─────────────────────────────────────────────────────────── */
.nms-hero {
    background: linear-gradient(135deg, var(--orange-50, #f7e9df) 0%, #fff 60%);
    border: 1px solid var(--orange-200, #ffc3b0);
    border-radius: 16px;
    padding: 20px 22px;
    margin: 0 0 22px;
}
/* Eyebrows are arrow badges — the mark's shape, from the shared geometry tokens.
   Both are emitted as <p>, so they shrink-wrap rather than clip the full column.
   The opener's is the brand tint; the section rule is the quiet neutral. Text is
   orange-700 / brown-600 — the greys these replaced were 2.5:1. */
.nms-hero__eyebrow, .nms-eyebrow {
    display: block; width: fit-content; padding: 3px 24px 3px 10px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.5;
    text-transform: uppercase;
    clip-path: var(--arrow-clip, polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%));
    border-radius: var(--arrow-radius, 10px) 0 0 var(--arrow-radius, 10px);
}
.nms-hero__eyebrow { color: var(--c-700, #ac3e33); background: var(--c-100, #faddd0); margin: 0 0 10px; }
.nms-hero__title { font-size: 1.35rem; font-weight: 700; color: var(--brown-900, #391e1a); margin: 0 0 8px; line-height: 1.3; }
.nms-hero p { margin: 6px 0 0; color: var(--brown-600, #5f4742); }
.nms-hero .nms-chips { margin-top: 14px; }

.nms-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.nms-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--greige-400, #e3ddd2); border-radius: 999px;
    padding: 4px 12px; font-size: 0.78rem; color: var(--brown-700, #4f3631); font-weight: 500;
}
.nms-chip b { font-weight: 700; color: var(--brown-900, #391e1a); }

/* ── callouts ────────────────────────────────────────────────────────────── */
/* The bar and the tint carry the status; titles stay ink. A status colour on its
   own tint is under 4.5:1 for every one of the token pairs at this size. */
.nms-callout {
    border-radius: 12px; padding: 14px 18px; margin: 20px 0;
    border: 1px solid var(--greige-400, #e3ddd2); border-left: 5px solid var(--brown-300, #b5a7a1);
    background: var(--cream-100, #f9f7f1);
}
.nms-callout__title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; margin: 0 0 6px; color: var(--brown-700, #4f3631);
}
.nms-callout p:last-child, .nms-callout ul:last-child, .nms-callout ol:last-child { margin-bottom: 0; }
.nms-callout p:first-of-type { margin-top: 0; }

.nms-callout.is-key      { background: var(--blue-100, #dcebfb);   border-color: var(--blue-100, #dcebfb);   border-left-color: var(--blue-500, #2e73c7); }
.nms-callout.is-safety   { background: var(--red-100, #f8ddd9);    border-color: var(--red-100, #f8ddd9);    border-left-color: var(--red-500, #c4342a); }
.nms-callout.is-practice { background: var(--orange-50, #f7e9df);  border-color: var(--orange-200, #ffc3b0); border-left-color: var(--orange-500, #ff5122); }
.nms-callout.is-good     { background: var(--green-100, #d9f1e5);  border-color: var(--green-100, #d9f1e5);  border-left-color: var(--green-500, #1f8a5b); }
/* Gulf-context notes were violet, a colour the guide does not have. Maroon is its
   colour for depth. */
.nms-callout.is-gcc      { background: var(--maroon-100, #f0dcdc); border-color: var(--maroon-100, #f0dcdc); border-left-color: var(--maroon-500, #7c3134); }

/* ── card grid ───────────────────────────────────────────────────────────── */
.nms-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin: 20px 0; }
.nms-card {
    background: #fff; border: 1px solid var(--greige-400, #e3ddd2); border-radius: 12px;
    padding: 14px 16px; box-shadow: 0 1px 2px rgba(57, 30, 26, 0.05);
}
.nms-card__label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--c-700, #ac3e33); margin: 0 0 6px;
}
.nms-card__value { font-size: 1.05rem; font-weight: 700; color: var(--brown-900, #391e1a); margin: 0 0 4px; }
.nms-card p { margin: 4px 0 0; font-size: 0.9rem; color: var(--brown-600, #5f4742); line-height: 1.55; }
.nms-card ul { margin: 6px 0 0; }

/* ── numbered steps ──────────────────────────────────────────────────────── */
.nms-steps { list-style: none; padding: 0; margin: 20px 0; counter-reset: nms-step; }
.nms-steps > li {
    position: relative; counter-increment: nms-step;
    background: #fff; border: 1px solid var(--greige-400, #e3ddd2); border-radius: 12px;
    padding: 12px 16px 12px 56px; margin: 0 0 10px; line-height: 1.6;
}
.nms-steps > li::before {
    content: counter(nms-step);
    position: absolute; left: 14px; top: 12px;
    width: 28px; height: 28px; border-radius: 9px;
    background: var(--c-600, #d1472f); color: #fff;
    font-size: 0.85rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.nms-steps > li b, .nms-steps > li strong { color: var(--brown-900, #391e1a); }

/* ── learning outcomes ───────────────────────────────────────────────────── */
.nms-lo { list-style: none; padding: 0; margin: 18px 0; }
.nms-lo > li {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border: 1px solid var(--greige-400, #e3ddd2); border-radius: 12px;
    padding: 12px 16px; margin: 0 0 10px; line-height: 1.6;
}
.nms-lo__code {
    flex: none; background: var(--c-600, #d1472f); color: #fff;
    border-radius: 8px; padding: 3px 10px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em; margin-top: 2px;
}

/* ── slides ──────────────────────────────────────────────────────────────── */
.nms-slide {
    margin: 22px 0; border: 1px solid var(--greige-400, #e3ddd2); border-radius: 14px;
    overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(57, 30, 26, 0.06);
    text-align: left;   /* .content-body figure centres its children */
}
.nms-slide img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
.nms-slide figcaption {
    padding: 10px 16px; font-size: 0.8rem; color: var(--brown-500, #755f59);
    background: var(--cream-100, #f9f7f1); border-top: 1px solid var(--greige-300, #efe9e0); text-align: left; margin: 0;
}
.nms-slide details { border-top: 1px solid var(--greige-300, #efe9e0); background: var(--cream-50, #fffdf9); }
.nms-slide summary {
    cursor: pointer; padding: 10px 16px; font-size: 0.8rem; font-weight: 600;
    color: var(--c-700, #ac3e33); list-style: none;
}
.nms-slide summary::-webkit-details-marker { display: none; }
.nms-slide summary::before { content: '▸ '; }
.nms-slide details[open] summary::before { content: '▾ '; }
.nms-slide details p { margin: 0; padding: 0 16px 14px; font-size: 0.88rem; color: var(--brown-600, #5f4742); line-height: 1.65; }

/* ── tables that hold prose ──────────────────────────────────────────────── */
.content-body .nms-table { display: block; overflow-x: auto; border: 1px solid var(--greige-400, #e3ddd2); border-radius: 12px; }
.content-body .nms-table td, .content-body .nms-table th { white-space: normal; border: none; border-bottom: 1px solid var(--greige-300, #efe9e0); vertical-align: top; padding: 10px 14px; }
.content-body .nms-table thead th { background: var(--cream-100, #f9f7f1); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brown-500, #755f59); border-bottom: 1px solid var(--greige-400, #e3ddd2); }
.content-body .nms-table tbody tr:last-child td { border-bottom: none; }
.content-body .nms-table tbody tr:hover { background: var(--cream-50, #fffdf9); }
.content-body .nms-table td:first-child { font-weight: 600; color: var(--brown-900, #391e1a); }

/* ── flashcards ──────────────────────────────────────────────────────────── */
.nms-flash { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 20px 0; }
.nms-flash > details {
    background: #fff; border: 1px solid var(--greige-400, #e3ddd2); border-radius: 12px; padding: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.nms-flash > details[open] { border-color: var(--orange-200, #ffc3b0); box-shadow: 0 2px 8px rgba(255, 81, 34, 0.10); }
.nms-flash summary {
    cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--brown-900, #391e1a);
    font-size: 0.92rem; line-height: 1.5; list-style: none;
}
.nms-flash summary::-webkit-details-marker { display: none; }
.nms-flash summary::after { content: 'Reveal'; float: right; font-size: 0.7rem; font-weight: 700; color: var(--c-700, #ac3e33); text-transform: uppercase; letter-spacing: 0.06em; }
.nms-flash details[open] summary::after { content: ''; }
.nms-flash details > p { margin: 0; padding: 0 16px 14px; color: var(--brown-600, #5f4742); font-size: 0.9rem; line-height: 1.6; }

/* ── branching scenario ──────────────────────────────────────────────────── */
.nms-branch { list-style: none; padding: 0; margin: 18px 0; }
.nms-branch > li {
    border: 1px solid var(--greige-400, #e3ddd2); border-left-width: 5px; border-radius: 12px;
    padding: 12px 16px; margin: 0 0 10px; background: #fff; line-height: 1.6;
}
.nms-branch > li.is-safe { border-left-color: var(--green-500, #1f8a5b); background: var(--green-100, #d9f1e5); }
.nms-branch > li.is-unsafe { border-left-color: var(--red-500, #c4342a); background: var(--red-100, #f8ddd9); }
.nms-branch__label { font-weight: 700; color: var(--brown-900, #391e1a); margin-right: 4px; }
.nms-branch__feedback { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--brown-600, #5f4742); }

/* ── debrief question / answer ───────────────────────────────────────────── */
.nms-qa { margin: 18px 0; }
.nms-qa > details {
    border: 1px solid var(--greige-400, #e3ddd2); border-radius: 12px; margin: 0 0 10px; background: #fff;
}
.nms-qa summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--brown-900, #391e1a); list-style: none; }
.nms-qa summary::-webkit-details-marker { display: none; }
.nms-qa summary::before { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--c-100, #faddd0); color: var(--c-700, #ac3e33); font-size: 0.75rem; font-weight: 700; margin-right: 10px; }
.nms-qa details > p { margin: 0; padding: 0 16px 14px 46px; color: var(--brown-600, #5f4742); line-height: 1.6; }

/* ── terminology (bilingual) ─────────────────────────────────────────────── */
.nms-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 20px 0; }
.nms-term { background: #fff; border: 1px solid var(--greige-400, #e3ddd2); border-radius: 12px; padding: 12px 16px; }
.nms-term__en { font-weight: 600; color: var(--brown-900, #391e1a); font-size: 0.92rem; }
.nms-term__ar { font-size: 1.15rem; color: var(--c-700, #ac3e33); margin: 4px 0 2px; direction: rtl; }
.nms-term__tr { font-size: 0.8rem; color: var(--brown-500, #755f59); font-style: italic; }

/* ── checklist ───────────────────────────────────────────────────────────── */
.nms-check { list-style: none; padding: 0; margin: 18px 0; }
.nms-check > li { position: relative; padding: 6px 0 6px 30px; line-height: 1.6; }
.nms-check > li::before {
    content: ''; position: absolute; left: 4px; top: 12px;
    width: 8px; height: 14px; border: solid var(--c-600, #d1472f);
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* ── section rule ────────────────────────────────────────────────────────── */
/* Shape and type are shared with .nms-hero__eyebrow above. */
.nms-eyebrow { color: var(--brown-600, #5f4742); background: var(--greige-300, #efe9e0); margin: 26px 0 -8px; }

@media (max-width: 640px) {
    .nms-hero { padding: 16px; }
    .nms-hero__title { font-size: 1.15rem; }
    .nms-cards, .nms-flash, .nms-terms { grid-template-columns: 1fr; }
    .nms-steps > li { padding-left: 50px; }
}