/* ============================================================
   Exercise & Contrast Block Styling
   ============================================================
   Provides visual distinction for interactive workbook exercises
   and before/after contrast blocks in the experimentation section.

   Uses mdBook's built-in theme variables so styles auto-adapt
   to all themes: light, rust, coal, navy, ayu.

   Visual distinction comes from the left border, subtle shadow,
   and table cell treatment, not a heavy background fill.
   ============================================================ */

/* ============================================================
   Exercise Blocks
   ============================================================ */
.exercise {
    border-left: 4px solid var(--links);
    background: color-mix(in srgb, var(--fg) 4%, var(--bg));
    border-radius: 0 6px 6px 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

.exercise > p:first-child {
    margin-top: 0;
}

.exercise > p:last-child,
.exercise > .table-wrapper:last-child {
    margin-bottom: 0;
}

/* Exercise heading style - uses the theme's link color */
.exercise strong:first-child {
    color: var(--links);
}

/* Tables inside exercises: fill-in field styling */
.exercise table {
    border: 1px solid var(--table-border-color);
}

.exercise table td:empty,
.exercise table td:has(br:only-child) {
    min-height: 2.5rem;
    height: 2.5rem;
    border-bottom: 1px dashed var(--table-border-color);
    background: var(--table-alternate-bg);
}

.exercise table td {
    min-height: 2.5rem;
    height: 2.5rem;
}

.exercise table thead th {
    background: var(--table-alternate-bg);
    font-size: 0.9em;
}

/* ============================================================
   Contrast Blocks (Before / After)
   ============================================================ */
.contrast {
    border-left: 4px solid var(--sidebar-active);
    background: color-mix(in srgb, var(--fg) 4%, var(--bg));
    border-radius: 0 6px 6px 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

.contrast > p:first-child {
    margin-top: 0;
}

.contrast > p:last-child {
    margin-bottom: 0;
}