/* 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: Terracotta for actions, Navy for insights
   NOTE: Keep colors in sync with _brand.yml and custom.scss
   - Terracotta: #A63D2F (action callouts)
   - Navy: #1E3A5F (insight callouts)
*/

/* Terracotta callouts (active-processing, individual, pair, group, agent-potential) */
.callout.callout-active-processing .callout-icon,
.callout.callout-individual .callout-icon,
.callout.callout-pair .callout-icon,
.callout.callout-group .callout-icon,
.callout.callout-agent-potential .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-agent-potential > .callout-body {
    background-color: rgba(166, 61, 47, 0.04);
}

/* Navy callouts (reflect, pro-tip, nachlesen) */
.callout.callout-reflect .callout-icon,
.callout.callout-pro-tip .callout-icon,
.callout.callout-nachlesen .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 {
    background-color: rgba(30, 58, 95, 0.05);
}

/* Neutral callouts (facilitator) */
.callout.callout-facilitator .callout-icon {
    background-color: rgba(110, 101, 96, 0.10);
    color: #6E6560;
}

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

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