/* ============================================================================
   course-widgets/decision-tree.css -- widget #20 (decision)
   interactive branching question -> answer walker. breadcrumb path, option
   cards, accent-led result leaf. theme-token styled.
   ============================================================================ */

.cw-dt { display: flex; flex-direction: column; gap: 12px; }

/* --- breadcrumbs --------------------------------------------------------- */
.cw-dt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cw-dt-crumb {
    font: inherit; font-size: 0.74rem; cursor: pointer; color: var(--cw-accent);
    background: var(--cw-accent-soft); border: 1px solid var(--cw-border);
    border-radius: 999px; padding: 3px 10px; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: border-color .15s ease;
}
.cw-dt-crumb:hover { border-color: var(--cw-accent); }
.cw-dt-crumb:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; }
.cw-dt-crumb--root { color: var(--cw-muted); background: var(--cw-surface); }
.cw-dt-crumb-sep { color: var(--cw-muted); font-size: 0.8rem; }

/* --- panel --------------------------------------------------------------- */
.cw-dt-panel {
    padding: 16px 18px; border-radius: var(--cw-radius);
    background: var(--cw-surface); border: 1px solid var(--cw-border);
    border-left: 3px solid var(--cw-accent);
}
.cw-dt-q { font-size: 1rem; font-weight: 700; color: var(--cw-text); line-height: 1.4; }
.cw-dt-note { margin: 4px 0 0; font-size: 0.78rem; color: var(--cw-muted); }

.cw-dt-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cw-dt-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    text-align: left; font: inherit; cursor: pointer; color: var(--cw-text);
    padding: 12px 14px; border-radius: 10px;
    background: var(--cw-bg); border: 1px solid var(--cw-border);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cw-anim-on .cw-dt-option:hover { border-color: var(--cw-accent); background: var(--cw-accent-soft); transform: translateX(2px); }
.cw-dt-option:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; }
.cw-dt-option-label { font-size: 0.88rem; font-weight: 600; }
.cw-dt-option-cue { color: var(--cw-accent); font-size: 1rem; flex-shrink: 0; }

/* --- result leaf --------------------------------------------------------- */
.cw-dt-result {
    padding: 14px 16px; border-radius: 10px;
    background: var(--cw-accent-soft); border: 1px solid var(--cw-accent);
}
.cw-dt-result-head { font-size: 1rem; font-weight: 700; color: var(--cw-accent); }
.cw-dt-result-body { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.7; color: var(--cw-text); }
.cw-dt-result-list { margin: 8px 0 0; padding-left: 18px; color: var(--cw-text); }
.cw-dt-result-list li { margin-bottom: 4px; font-size: 0.86rem; line-height: 1.6; }
.cw-dt-restart {
    margin-top: 12px; align-self: flex-start; font: inherit; font-size: 0.78rem;
    cursor: pointer; color: var(--cw-muted); padding: 7px 14px; border-radius: 999px;
    background: var(--cw-surface); border: 1px solid var(--cw-border);
    transition: border-color .15s ease, color .15s ease;
}
.cw-dt-restart:hover { border-color: var(--cw-accent); color: var(--cw-accent); }
.cw-dt-restart:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; }