/* Course columns (shared/course.js) — loaded only by the add-on pages.
   A course column sits on its language's side (WK = JP-side, Pandanese = CN-side);
   shape-mnemonic (red, caution) vs real-meaning (green, transfers). */
.lg-wk-m { background: rgba(44, 107, 62, 0.18); border: 1.5px solid var(--green); }
.lg-wk { background: repeating-linear-gradient(45deg, var(--red), var(--red) 3px, transparent 3px, transparent 6px); border: 1px dashed var(--red); }

.wk-mnemonic, .pd-mnemonic {
  border: 1.5px dashed var(--red);
  background: rgba(196, 30, 58, 0.05);
}
.wk-meaning, .pd-meaning {
  border: 1.5px solid var(--green);
  background: rgba(44, 107, 62, 0.06);
}
.v-wk.empty, .v-pd.empty { border: 1.5px dashed var(--border); }

/* stacked column: radical item + single-glyph item (WK kanji / PD character),
   each self-coloured. Same layout both sides — WK on jp, Pandanese on cn. */
.v-wk-stack, .v-pd-stack { border-left-color: var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.sc-wk-item, .sc-pd-item { border-radius: 6px; padding: 0.45rem 0.55rem; }
.sc-wk-item.wk-mnemonic, .sc-pd-item.pd-mnemonic { border: 1.5px dashed var(--red); background: rgba(196, 30, 58, 0.05); }
.sc-wk-item.wk-meaning, .sc-pd-item.pd-meaning { border: 1.5px solid var(--green); background: rgba(44, 107, 62, 0.06); }
.sc-wk-item .sc-mnemonic, .sc-pd-item .sc-mnemonic { width: 30px; height: 30px; margin: 0.1rem 0 0.3rem; }
.sc-wk-item .sc-only, .sc-pd-item .sc-only { margin-top: 0.25rem; }
.sc-wk-head { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.sc-wk-tag { font-size: 0.6rem; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.sc-wk-item.wk-meaning .sc-lvl, .sc-pd-item.pd-meaning .sc-lvl { color: var(--green); }
.sc-wk-item.wk-mnemonic .sc-lvl, .sc-pd-item.pd-mnemonic .sc-lvl { color: var(--red); }
.sc-wk-item .sc-lvl, .sc-pd-item .sc-lvl { margin-left: auto; font-weight: 700; font-size: 0.7rem; }
.sc-wk-item .sc-reading { color: var(--navy2); }

.wk-mnemonic .sc-lvl, .pd-mnemonic .sc-lvl { color: var(--red); font-weight: 700; }
.wk-meaning .sc-lvl, .pd-meaning .sc-lvl { color: var(--green); font-weight: 700; }

.sc-mnemonic { width: 48px; height: 48px; display: block; margin: 0.1rem 0 0.45rem; }
.sc-mnemonic path, .sc-mnemonic circle, .sc-mnemonic ellipse { fill: none; stroke: #b0535d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-check { font-size: 1.9rem; line-height: 1; color: var(--green); margin: 0.1rem 0 0.35rem; }
.sc-only { margin-top: 0.4rem; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--red); font-weight: 600; opacity: 0.85; }
.sc-only.sc-true { color: var(--green); }

.sc-empty { color: var(--muted); font-size: 0.9rem; }