/* Margin Lesson Dashboards — scoped to .mld-root. Presentational only (no JS). */

.mld-root{
  font-family:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#242424;
  line-height:1.4;
  text-align:left;
  -webkit-text-size-adjust:100%;
}
.mld-root *,
.mld-root *::before,
.mld-root *::after{box-sizing:border-box;}
.mld-root p,
.mld-root figure,
.mld-root figcaption{margin:0;padding:0;}
.mld-root figure{border:0;background:none;}
.mld-root p,
.mld-root span,
.mld-root strong{color:inherit;}

/* Two-panel grid (stacks below ~420px of available width). */
.mld-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:24px;
}
.mld-fig{margin:0;}

/* Captions */
.mld-cap{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.mld-root .mld-cap-title{color:#242424 !important;}
.mld-root .mld-cap-after .mld-cap-title{color:#A84400 !important;}
.mld-root .mld-tag{color:#5C5852 !important;}

/* Badges (numbered callouts) */
.mld-badge{
  position:absolute;
  width:28px;height:28px;
  background:#FF6A00 !important;
  color:#242424 !important;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13px;font-weight:500;
}
.mld-badge-1{top:-10px;right:-10px;}
.mld-badge-2{top:4px;right:-32px;}
.mld-badge-3{top:-14px;right:-32px;}

/* --- Before panel ------------------------------------------------------- */
.mld-before-card{
  border:1.5px solid #D8D3C6;
  background:#FFFFFF;
  padding:20px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background-clip:padding-box;
}
.mld-cell{padding:16px;background:#F7F5EF;position:relative;}
.mld-root .mld-cell-k{font-size:13px;color:#5C5852 !important;}
.mld-root .mld-cell-v{margin:6px 0 0;color:#242424 !important;font-weight:800;font-size:30px;}
.mld-root .mld-up{font-size:16px;color:#5C5852 !important;}

/* --- After panel -------------------------------------------------------- */
.mld-after-card{
  border:2px solid #242424;
  background:#FFFFFF;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.mld-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #D8D3C6;
  font-size:16px;
}
.mld-root .mld-row-num{font-family:'IBM Plex Mono',ui-monospace,monospace;}
.mld-row-profit{
  padding:14px 0 10px;
  border-bottom:0;
  font-size:18px;
  font-weight:800;
  position:relative;
}
.mld-root .mld-profit-num{color:#A33A00 !important;}
.mld-highlight{
  margin-top:8px;
  padding:12px 14px;
  background:#EFEBE1;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:15px;
  position:relative;
}
.mld-highlight-right{font-weight:700;}

/* --- Footnotes ---------------------------------------------------------- */
.mld-notes-after{margin:14px 0 0;display:flex;flex-direction:column;gap:8px;}
.mld-note{
  margin:14px 0 0;
  display:grid;
  grid-template-columns:28px 1fr;
  color:#242424 !important;
  font-size:15px;
  line-height:1.5;
}
.mld-notes-after .mld-note{margin:0;}
.mld-root .mld-note-n{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  color:#A84400 !important;
  font-weight:500;
}

/* The after-panel badges sit up to 32px right of the card. Reserve that room
   inside the component itself so it never forces the page into horizontal
   scroll, whatever padding the theme gives the container. Desktop keeps the
   exact original badge offsets. */
.mld-root{padding-right:36px;}
@media (max-width:520px){
  /* In the narrower width, stack the before-panel metrics so long numbers
     never clip. Badge offsets stay as the original so they never cover a
     value, and the 36px reserve keeps them off the page edge. */
  .mld-before-card{grid-template-columns:1fr;}
}