/* Custom Fonts */
.font-playfair { font-family: 'Fraunces', serif; }
.font-inter    { font-family: 'DM Sans', sans-serif; }
.font-mono     { font-family: 'DM Mono', monospace; }

/* Base */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

mark {
  background-color: #fef0c7;
  color: inherit;
  padding: 0 0.25em;
  border-radius: 0.25em;
}

/* ── Accordion ── */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content.open  { grid-template-rows: 1fr; }
.accordion-inner         { overflow: hidden; }
.accordion-header .chevron { transition: transform 0.3s ease; }
.accordion-header.open .chevron { transform: rotate(180deg); }

/* ── Custom Scrollbar ── */
.custom-scrollbar::-webkit-scrollbar       { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 20px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }

/* ── Modal Animations ── */
#answer-modal:not(.hidden) { display: flex !important; }
#answer-modal.open { opacity: 1; }
#answer-modal.open > div:last-child { transform: translateY(0); }
@media (min-width: 768px) {
  #answer-modal.open > div:last-child { transform: translateY(-50%) translateX(-50%); }
}

/* ══════════════════════════════
   MODAL CONTENT COMPONENTS
   ══════════════════════════════ */

/* Paragraph */
.m-para {
  font-size: 14px;
  color: #1a1814;
  line-height: 1.75;
  margin-bottom: 14px;
  font-weight: 300;
  font-family: 'DM Sans', sans-serif;
}
.m-para strong { font-weight: 500; }
.m-para code {
  font-family: 'DM Mono', monospace;
  font-size: 12.5px;
  background: #f0ede8;
  border: 1px solid #e8e4de;
  padding: 1px 6px;
  border-radius: 4px;
  color: #b84a1e;
}
.m-para a { color: #2d4a8a; text-decoration: underline; }

/* Section heading with trailing rule */
.m-head {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a756c;
  margin: 22px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8e4de;
}

/* Diagram box */
.m-diagram {
  background: #f8f5f1;
  border: 1px solid #e8e4de;
  border-radius: 10px;
  padding: 18px;
  margin: 14px 0;
  overflow-x: auto;
}
.m-diagram svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Dark code block */
.m-code {
  background: #1e1c18;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
  overflow-x: auto;
  position: relative;
}
.m-code pre {
  font-family: 'DM Mono', monospace;
  font-size: 12.5px;
  color: #e8e4d8;
  line-height: 1.7;
  white-space: pre;
  margin: 0;
}
/* Syntax highlight spans */
.m-code .kw { color: #c7a0f8; }   /* keywords */
.m-code .fn { color: #7dd3fc; }   /* functions */
.m-code .st { color: #86efac; }   /* strings */
.m-code .cm { color: #6b7280; font-style: italic; } /* comments */
.m-code .nm { color: #fbbf24; }   /* numbers / constants */
.m-code .op { color: #f9a8d4; }   /* operators / decorators */
.m-code .cls{ color: #fde68a; }   /* class names */
.m-code .tp { color: #5eead4; }   /* types / builtins */
/* Language label */
.m-code::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4b5563;
}

/* Callout boxes */
.m-callout {
  border-left: 3px solid #2d4a8a;
  background: #f0f2fa;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #2d4a8a;
  margin: 12px 0;
  line-height: 1.65;
  font-family: 'DM Sans', sans-serif;
}
.m-callout.warn { border-left-color: #b84a1e; background: #fdf3ef; color: #b84a1e; }
.m-callout.ok   { border-left-color: #1f7a58; background: #f0faf6; color: #1f7a58; }

/* Numbered step list */
.m-steps { list-style: none; margin: 12px 0; padding: 0; }
.m-steps li {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13.5px;
  color: #1a1814;
  line-height: 1.55;
  font-family: 'DM Sans', sans-serif;
  align-items: flex-start;
}
.m-step-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  background: #1a1814;
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Comparison table */
.m-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 14px 0;
  font-family: 'DM Sans', sans-serif;
}
.m-table th {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7a756c;
  padding: 8px 12px;
  border-bottom: 1px solid #e8e4de;
  text-align: left;
  font-weight: 400;
}
.m-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #e8e4de;
  color: #1a1814;
  vertical-align: top;
  line-height: 1.55;
}
.m-table tr:last-child td { border-bottom: none; }
.m-table tr:hover td { background: #f8f5f1; }

/* Bullet list inside modal */
.m-list { list-style: disc; padding-left: 18px; margin: 10px 0; }
.m-list li {
  font-size: 13.5px;
  color: #1a1814;
  margin-bottom: 6px;
  line-height: 1.6;
  font-family: 'DM Sans', sans-serif;
}