/* css styles */

/* Timer countdown — brand-aligned circular timer */
.base-timer {
    width: 120px;
    height: 120px;
    margin-left: auto;
    margin-right: 0;
    margin-top: 0.5rem;
}

.base-timer__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    fill: #1A1714;
}

.base-timer__path-elapsed {
    stroke: #E8E2D8;
    stroke-width: 6px;
}

.base-timer__path-remaining {
    color: #A63D2F;
    stroke-width: 6px;
}

.base-timer__path-remaining.lvl0 {
    color: #B8821A;
}

.base-timer__path-remaining.lvl1 {
    color: #8B2E20;
}

/* =============================================================================
   CALLOUTS: three-color editorial system
   - Terracotta #A63D2F — action callouts (do something)
   - Navy       #1E3A5F — insight callouts (think, reflect, read)
   - Gold       #B8821A — warning / work-in-progress
   - Warm grey  #6E6560 — facilitator / process / case study
   Keep colors in sync with _brand.yml, custom.scss, _quarto.yml.
   ============================================================================= */

/* --- Terracotta: action --- */
.callout.callout-active-processing .callout-icon,
.callout.callout-individual .callout-icon,
.callout.callout-pair .callout-icon,
.callout.callout-group .callout-icon,
.callout.callout-screens-down .callout-icon,
.callout.callout-screens-up .callout-icon,
.callout.callout-try .callout-icon,
.callout.callout-testing .callout-icon,
.callout.callout-prompt-example .callout-icon,
.callout.callout-tutor-example .callout-icon,
.callout.callout-export .callout-icon {
    background-color: rgba(166, 61, 47, 0.10);
    color: #A63D2F;
}

.callout.callout-active-processing > .callout-body,
.callout.callout-individual > .callout-body,
.callout.callout-pair > .callout-body,
.callout.callout-group > .callout-body,
.callout.callout-screens-down > .callout-body,
.callout.callout-screens-up > .callout-body,
.callout.callout-try > .callout-body,
.callout.callout-testing > .callout-body,
.callout.callout-prompt-example > .callout-body,
.callout.callout-tutor-example > .callout-body,
.callout.callout-export > .callout-body {
    background-color: rgba(166, 61, 47, 0.04);
}

/* --- Navy: insight --- */
.callout.callout-reflect .callout-icon,
.callout.callout-pro-tip .callout-icon,
.callout.callout-nachlesen .callout-icon,
.callout.callout-feedback .callout-icon,
.callout.callout-prompt-template .callout-icon,
.callout.callout-checkpoint .callout-icon {
    background-color: rgba(30, 58, 95, 0.10);
    color: #1E3A5F;
}

.callout.callout-reflect > .callout-body,
.callout.callout-pro-tip > .callout-body,
.callout.callout-nachlesen > .callout-body,
.callout.callout-feedback > .callout-body,
.callout.callout-prompt-template > .callout-body,
.callout.callout-checkpoint > .callout-body {
    background-color: rgba(30, 58, 95, 0.05);
}

/* --- Gold: warning / work-in-progress --- */
.callout.callout-caution .callout-icon,
.callout.callout-work-in-progress .callout-icon {
    background-color: rgba(184, 130, 26, 0.12);
    color: #B8821A;
}

.callout.callout-caution > .callout-body,
.callout.callout-work-in-progress > .callout-body {
    background-color: rgba(184, 130, 26, 0.05);
}

/* --- Warm grey: facilitator / process / case study --- */
.callout.callout-facilitator .callout-icon,
.callout.callout-fallstudie .callout-icon,
.callout.callout-setup .callout-icon,
.callout.callout-timing .callout-icon,
.callout.callout-break .callout-icon,
.callout.callout-schedule .callout-icon {
    background-color: rgba(110, 101, 96, 0.10);
    color: #6E6560;
}

.callout.callout-facilitator > .callout-body,
.callout.callout-fallstudie > .callout-body,
.callout.callout-setup > .callout-body,
.callout.callout-timing > .callout-body,
.callout.callout-break > .callout-body,
.callout.callout-schedule > .callout-body {
    background-color: rgba(110, 101, 96, 0.03);
}

/* Table styling is consolidated in custom.scss */