/* ============================================================================
   course-widgets.css -- shared styles for the course widget library.

   every widget is theme-token based: colors come from the design tokens in
   variables.css (--color-surface / --color-muted / --color-bg / --color-text)
   plus the library accent --cw-accent (defaults to meadow-500). a course can
   override --cw-accent on the mount to recolor a widget; never hard-code hex
   in a widget (Check J). this file ships via the learn bundle.
   ============================================================================ */

:root {
    --cw-accent: var(--meadow-500, #10b981);
    --cw-accent-soft: rgba(16, 185, 129, 0.14);
    --cw-surface: var(--color-surface, #18181c);
    --cw-bg: var(--color-bg, #111114);
    --cw-text: var(--color-text, #e8eef2);
    --cw-muted: var(--color-muted, #9ca3af);
    --cw-border: rgba(255, 255, 255, 0.08);
    --cw-radius: 14px;
    --cw-gap: 12px;
}

[data-theme="light"] {
    --cw-surface: var(--color-surface, #ffffff);
    --cw-text: var(--color-text, #1a2b22);
    --cw-muted: var(--color-muted, #5b6b63);
    --cw-border: rgba(0, 0, 0, 0.08);
    --cw-accent-soft: rgba(16, 185, 129, 0.10);
}

/* --- shared item-grid scaffold (click -> detail) ------------------------- */

.cw-itemgrid { display: block; }

.cw-grid {
    display: grid;
    grid-template-columns: repeat(var(--cw-cols, auto-fit), minmax(170px, 1fr));
    gap: var(--cw-gap);
    align-items: stretch;
}

.cw-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    padding: 14px 16px;
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    color: var(--cw-text);
    cursor: pointer;
    font: inherit;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.cw-anim-on .cw-item:hover { transform: translateY(-2px); border-color: var(--cw-accent); }
.cw-item:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; }
.cw-item--selected { border-color: var(--cw-accent); background: var(--cw-accent-soft); }

.cw-detail {
    margin-top: var(--cw-gap);
    padding: 16px 18px;
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-left: 3px solid var(--cw-accent);
    border-radius: var(--cw-radius);
    color: var(--cw-text);
}
.cw-detail-hint { color: var(--cw-muted); margin: 0; }
.cw-detail-head { font-weight: 600; font-size: 1.02rem; margin-bottom: 6px; }
.cw-detail-body { margin: 0 0 10px; color: var(--cw-text); line-height: 1.7; }
.cw-detail-list { margin: 0 0 10px; padding-left: 18px; color: var(--cw-text); }
.cw-detail-list li { margin-bottom: 4px; }
.cw-detail-takeaway {
    margin-top: 6px; padding: 8px 12px;
    background: var(--cw-accent-soft); border-radius: 8px;
    font-weight: 600; color: var(--cw-text);
}

/* --- #1 stat-grid -------------------------------------------------------- */

.cw-stat-grid {
    display: grid;
    grid-template-columns: repeat(var(--cw-cols, auto-fit), minmax(150px, 1fr));
    gap: var(--cw-gap);
}
.cw-stat-card {
    padding: 18px 16px;
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    text-align: center;
}
.cw-stat-value { font-size: 1.7rem; font-weight: 700; color: var(--cw-accent); line-height: 1.1; }
.cw-stat-label { margin-top: 6px; font-size: 0.82rem; color: var(--cw-muted); }
.cw-stat-note { margin-top: 4px; font-size: 0.72rem; color: var(--cw-muted); opacity: .85; }

/* --- #18 comparison-matrix (item-grid specifics) ------------------------- */

.cw-cm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-cm-label { font-weight: 600; font-size: 0.96rem; }
.cw-cm-tag {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 999px;
    background: var(--cw-accent-soft); color: var(--cw-accent);
}
.cw-cm-metrics { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.cw-cm-metric { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; }
.cw-cm-metric-k { color: var(--cw-muted); }
.cw-cm-metric-v { color: var(--cw-text); font-weight: 600; }
.cw-cm-cue { margin-top: 4px; font-size: 0.7rem; color: var(--cw-muted); }

/* --- #21 timeline -------------------------------------------------------- */

.cw-timeline { display: block; }
.cw-tl-rail {
    display: flex; gap: 0; align-items: flex-start;
    overflow-x: auto; padding: 8px 2px 14px; scrollbar-width: thin;
}
.cw-tl-node {
    position: relative; flex: 1 0 120px; min-width: 120px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: none; border: 0; cursor: pointer; color: var(--cw-text); font: inherit;
    padding: 0 6px;
}
.cw-tl-node::before {
    content: ""; position: absolute; top: 9px; left: 50%; right: -50%;
    height: 2px; background: var(--cw-border);
}
.cw-tl-node:last-child::before { display: none; }
.cw-tl-dot {
    position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%;
    background: var(--cw-surface); border: 2px solid var(--cw-accent);
    transition: transform .15s ease, background .15s ease;
}
.cw-tl-node--selected .cw-tl-dot { background: var(--cw-accent); transform: scale(1.25); }
.cw-tl-node:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 3px; border-radius: 6px; }
.cw-tl-year { font-weight: 700; font-size: 0.9rem; color: var(--cw-accent); }
.cw-tl-title { font-size: 0.74rem; color: var(--cw-muted); text-align: center; line-height: 1.3; max-width: 130px; }
.cw-tl-detail {
    margin-top: 4px; padding: 16px 18px;
    background: var(--cw-surface); border: 1px solid var(--cw-border);
    border-left: 3px solid var(--cw-accent); border-radius: var(--cw-radius);
}
.cw-tl-detail-year { color: var(--cw-accent); font-weight: 700; }
.cw-tl-detail-title { font-weight: 600; margin: 2px 0 6px; }
.cw-tl-detail-body { margin: 0; color: var(--cw-text); line-height: 1.7; }

/* --- structural blocks (the generator's page-block scaffolding) ----------- */
/* short connective prose, subheads, small lists, and the canonical advanced
   dropdown that sit BETWEEN widgets to give a page GHK-Cu's mixed rhythm. */

/* widgets + blocks author proper sentence case, so opt the whole widget subtree
   out of the site-wide `body { text-transform: none }` (base.css). every
   widget mount carries .cw-block (both the gate's renderBlocks and the
   generator's mounts), so this covers all widget internals; the few semantic
   status pills (.cw-cm-tag, .cw-rm-pill, .cw-et-pill, .cw-term-monogram) set
   their own text-transform and win over this inherited value. text-transform is
   inherited, so setting it on the .cw-block wrapper propagates to all widget
   internals without a universal selector (which would clobber those pills). */
.cw-block, .cw-advanced-summary { text-transform: none; }

/* vertical rhythm: give every widget real breathing room so prose, a subhead, or
   a callout that follows it is never crammed right under the widget. */
.cw-block { margin: 18px 0 28px; }
.cw-block:last-child { margin-bottom: 4px; }

.cw-subhead {
    font-size: 0.95rem; text-transform: none; letter-spacing: 0;
    color: var(--cw-accent); font-weight: 700;
    margin: 22px 0 10px;
}
.cw-prose { color: var(--cw-text); line-height: 1.75; margin: 0 0 14px; }
.cw-list { margin: 0 0 14px; padding-left: 18px; color: var(--cw-text); }
.cw-list li { margin-bottom: 5px; line-height: 1.6; }
ul.cw-list { list-style: disc; }
ol.cw-list--ordered { list-style: decimal; }

/* canonical advanced dropdown -- amber, "ADVANCED" badge, visually distinct
   from the green key-terms card. the deeper version of what's shown above it. */
.cw-advanced {
    margin: 14px 0; border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--cw-radius); background: rgba(245, 158, 11, 0.06);
    overflow: hidden;
}
.cw-advanced-summary {
    cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--cw-text);
    display: flex; align-items: center; gap: 10px; list-style: none;
}
.cw-advanced-summary::-webkit-details-marker { display: none; }
.cw-advanced-badge {
    font-size: 0.68rem; text-transform: none; letter-spacing: 0;
    padding: 2px 8px; border-radius: 999px; font-weight: 700;
    background: #f59e0b; color: #1a1206;
}
.cw-advanced[open] .cw-advanced-summary { border-bottom: 1px solid rgba(245, 158, 11, 0.25); }
.cw-advanced > .cw-prose, .cw-advanced > div { padding: 14px 16px; margin: 0; }

/* --- callout card (Option A: accent insight card, drewbo 2026-06-24) -------- */
/* sits below a widget with real breathing room: an icon chip + a bold label +
   a short 2-3 sentence body. tinted by type. body is author html (allows
   <strong>), capped so it never becomes a wall of text. */
.cw-callout {
    margin: 28px 0 14px; display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 22px; border-radius: var(--cw-radius);
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.09);
    border: 1px solid rgba(var(--meadow-400-rgb, 52, 211, 158), 0.20);
    border-left: 4px solid var(--cw-accent, #10b981);
}
.cw-callout-icon {
    flex-shrink: 0; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(var(--meadow-400-rgb, 52, 211, 158), 0.16);
    color: var(--cw-accent, #10b981);
}
.cw-callout-icon i, .cw-callout-icon svg { width: 18px; height: 18px; }
.cw-callout-label {
    font-size: 0.82rem; font-weight: 700; text-transform: none; letter-spacing: 0;
    color: var(--cw-accent, #10b981); margin: 0 0 4px;
}
.cw-callout-body { font-size: 0.95rem; line-height: 1.65; color: var(--cw-text); margin: 0; }
.cw-callout-body strong { color: var(--cw-text); font-weight: 700; }

/* warning + danger encode meaning -> hard amber / red */
.cw-callout--warning {
    background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.24);
    border-left-color: #f59e0b;
}
.cw-callout--warning .cw-callout-icon { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.cw-callout--warning .cw-callout-label { color: #f59e0b; }
.cw-callout--danger {
    background: rgba(248, 113, 113, 0.09); border-color: rgba(248, 113, 113, 0.22);
    border-left-color: #f87171;
}
.cw-callout--danger .cw-callout-icon { background: rgba(248, 113, 113, 0.16); color: #f87171; }
.cw-callout--danger .cw-callout-label { color: #f87171; }

/* info -> neutral sky tint, so it reads distinctly from the green "study /
   key takeaway" card (study intentionally keeps the base meadow look). */
.cw-callout--info {
    background: rgba(56, 189, 248, 0.08); border-color: rgba(56, 189, 248, 0.20);
    border-left-color: #38bdf8;
}
.cw-callout--info .cw-callout-icon { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
.cw-callout--info .cw-callout-label { color: #38bdf8; }