/* Vertical run of panels. */
.sm-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-3);
    color: var(--sm-color-text);
}

/* Bordered card. Distinct from .sm-profile-section, which is the Mud-elevation
   card used for top-level User Profile sections; this one nests inside them. */
.sm-panel {
    background-color: var(--sm-color-surface);
    border: 1px solid var(--sm-color-border);
    border-radius: var(--sm-radius-lg);
    padding: var(--sm-space-4);
}

.sm-panel__header {
    display: flex;
    align-items: center;
    gap: var(--sm-space-2);
    margin-bottom: var(--sm-space-3);
}

.sm-panel__title {
    font-size: var(--sm-font-size-base);
    font-weight: var(--sm-font-weight-600);
    color: var(--sm-color-text);
}

/* Muted secondary text: status lines, counts, labels. */
.sm-hint {
    margin: 0;
    color: var(--sm-color-text-muted);
    font-size: var(--sm-font-size-sm);
}

.sm-hint--error {
    color: var(--sm-color-error);
}

/* For a hint on a <span> that must occupy its own line. */
.sm-hint--block {
    display: block;
}

/* Bullet-less list of muted detail lines. */
.sm-detail-list {
    margin: var(--sm-space-1) 0 0;
    padding: 0;
    list-style: none;
    color: var(--sm-color-text-muted);
    font-size: var(--sm-font-size-sm);
    line-height: 1.6;
}

.sm-detail-list--indent {
    padding-left: var(--sm-space-3);
}

/* Inline pill for a value read against a target (progress, thresholds). */
.sm-status-pill {
    padding: var(--sm-space-0) var(--sm-space-2);
    border-radius: var(--sm-radius-rounded);
    font-size: var(--sm-font-size-sm);
    font-weight: var(--sm-font-weight-600);
    white-space: nowrap;
}

.sm-status-pill--positive {
    background-color: var(--sm-badge-active-bg);
    color: var(--sm-badge-active-text);
}

.sm-status-pill--negative {
    background-color: var(--sm-badge-stopped-bg);
    color: var(--sm-badge-stopped-text);
}

/* Round done/not-done marker sitting beside a line of text. The transparent border keeps
   both states the same box under either box-sizing; margin-top nudges it onto the text
   baseline. An SmIcon inside strokes with currentColor, so `color` draws the tick. */
.sm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: var(--sm-space-0);
}

.sm-check--on {
    background-color: var(--sm-badge-active-bg);
    color: var(--sm-badge-active-text);
}

.sm-check--off {
    border-color: var(--sm-color-border);
}