/* ============================================================
   military.css: shared styles for "military" course chapters (rule P1 "Styling").

   A chapter links this sheet and its own course sheet, and wraps its content in
       <div class="military-lesson <course>">
   where <course> is the course's slug (styles/courses/<course>.css sets that course's colours).
   Every rule is scoped under .military-lesson, so nothing leaks into the site.

   The colours that differ between courses are CSS variables; the value after the
   comma in var(--cN, value) is the default (the first course's colour). To start a
   new course in this genre, copy a sibling's styles/courses/<course>.css, rename its
   class and change the values.

   Variables:
     --c1             default #10192a    e.g. 
     --c2             default #dde3ef    e.g. 
     --c3             default #a6192e    e.g. .concept-card h4, .course-name, .quick-ref h3
     --c4             default #8695b0    e.g. .chapter-sub
     --c5             default #b8935a    e.g. .concept-card, .echo-box, .section-intro
     --c6             default #223050    e.g. .compare-table td, .compare-table th, .concept-card
     --c7             default #b7c1d6    e.g. .section-intro
     --c8             default #1c2540    e.g. .concept-card, .quick-ref, .reflect-card
     --c9             default #ccd5e6    e.g. .concept-card p
     --c10            default #19213a    e.g. .compare-table tr:nth-child(
     --c11            default #16281f    e.g. .tip-box
     --c12            default #332617    e.g. .warn-box
     --c13            default #1a2440    e.g. .echo-box
     --c14            default #d4b384    e.g. .echo-box strong
   ============================================================ */
.military-lesson {
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: var(--c1, #10192a);
  color: var(--c2, #dde3ef);
  padding: 2rem;
  border-radius: 10px;
  line-height: 1.7;
}

.military-lesson .course-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c3, #a6192e);
  margin: 0 0 0.25rem 0;
}

.military-lesson .chapter-sub {
  font-size: 0.95rem;
  color: var(--c4, #8695b0);
  margin: 0 0 1.75rem 0;
  font-family: system-ui, sans-serif;
}

.military-lesson h2 {
  color: var(--c5, #b8935a);
  border-bottom: 2px solid var(--c6, #223050);
  padding-bottom: 0.4rem;
  margin-top: 2.25rem;
  font-size: 1.35rem;
}

.military-lesson h3 {
  color: var(--c3, #a6192e);
  font-size: 1.05rem;
  margin-top: 1.5rem;
}

.military-lesson .section-intro {
  font-style: italic;
  color: var(--c7, #b7c1d6);
  font-size: 1.05rem;
  border-left: 3px solid var(--c5, #b8935a);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

.military-lesson .concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.military-lesson .concept-card {
  background: var(--c8, #1c2540);
  border: 1px solid var(--c6, #223050);
  border-left: 4px solid var(--c5, #b8935a);
  border-radius: 6px;
  padding: 1rem 1.1rem;
}

.military-lesson .concept-card h4 {
  margin: 0 0 0.4rem 0;
  color: var(--c3, #a6192e);
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.military-lesson .concept-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--c9, #ccd5e6);
}

.military-lesson .work-card {
  background: var(--c8, #1c2540);
  border: 1px solid var(--c6, #223050);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  margin: 1.25rem 0;
}

.military-lesson .work-label {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c3, #a6192e);
  margin-bottom: 0.5rem;
}

.military-lesson .timeline {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  border-left: 3px solid var(--c5, #b8935a);
}

.military-lesson .timeline li {
  position: relative;
  padding: 0 0 1.1rem 1.5rem;
  font-size: 0.96rem;
}

.military-lesson .timeline li::before {
  content: '';
  position: absolute;
  left: -7.5px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c3, #a6192e);
}

.military-lesson .timeline .tdate {
  display: block;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  color: var(--c3, #a6192e);
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}

.military-lesson .compare-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
}

.military-lesson .compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.military-lesson .compare-table th {
  background: var(--c6, #223050);
  color: #f0f4fb;
  text-align: left;
  padding: 0.55rem 0.75rem;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
}

.military-lesson .compare-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--c6, #223050);
  vertical-align: top;
}

.military-lesson .compare-table tr:nth-child(even) td {
  background: var(--c10, #19213a);
}

.military-lesson .tip-box, .military-lesson .warn-box, .military-lesson .echo-box {
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}

.military-lesson .tip-box {
  background: var(--c11, #16281f);
  border-left: 4px solid #4caf7d;
}

.military-lesson .warn-box {
  background: var(--c12, #332617);
  border-left: 4px solid #d4a24a;
}

.military-lesson .echo-box {
  background: var(--c13, #1a2440);
  border-left: 4px solid var(--c5, #b8935a);
}

.military-lesson .tip-box strong, .military-lesson .warn-box strong, .military-lesson .echo-box strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.military-lesson .tip-box strong {
  color: #7fd8a8;
}

.military-lesson .warn-box strong {
  color: #e0b878;
}

.military-lesson .echo-box strong {
  color: var(--c14, #d4b384);
}

.military-lesson .reflect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.military-lesson .reflect-card {
  background: var(--c8, #1c2540);
  border: 1px solid var(--c6, #223050);
  border-left: 4px solid var(--c3, #a6192e);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
}

.military-lesson .quick-ref {
  background: var(--c8, #1c2540);
  border: 1px solid var(--c6, #223050);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  margin: 1.75rem 0;
}

.military-lesson .quick-ref h3 {
  margin-top: 0;
  color: var(--c3, #a6192e);
}

.military-lesson .quick-ref ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.25rem;
}

.military-lesson .quick-ref li {
  margin-bottom: 0.4rem;
  font-size: 0.94rem;
}