/* 掌握等級的共用圖形（照 Khan，P1-8）：方格、分段條、圖例。只用設計變數（tokens.css --color-level-*）
 * 方格：未開始 = 虛線空格；已嘗試 = 實線空格；熟悉 = 下半填色；熟練 = 全填；已掌握 = 深色全填加剔號（填色程度 + 形狀，色盲和黑白列印都分得出） */
.lv-tile { --lv-size: 28px; width: var(--lv-size); height: var(--lv-size); border-radius: 6px; box-sizing: border-box; display: inline-grid; place-items: center; flex-shrink: 0; background: var(--color-surface); }
.lv-tile.is-none { border: 1.5px dashed var(--color-level-none-edge); }
.lv-tile.is-attempted { border: 2px solid var(--color-level-edge); }
.lv-tile.is-familiar { border: 2px solid var(--color-level-edge); background: linear-gradient(to top, var(--color-level-familiar) 50%, var(--color-surface) 50%); }
.lv-tile.is-proficient { background: var(--color-level-proficient); }
.lv-tile.is-mastered { background: var(--color-level-mastered); color: var(--color-on-accent); }
.lv-tile.is-mastered .icon { width: 62%; height: 62%; stroke-width: 2.6; }
button.lv-tile, a.lv-tile { cursor: pointer; padding: 0; }
button.lv-tile:focus-visible, a.lv-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lv-tile.is-next { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* 分段條：每級人數按比例 */
.lv-seg { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--color-level-none); box-shadow: inset 0 0 0 1px var(--color-line); min-width: 80px; }
.lv-seg > span { height: 100%; }
.lv-seg .is-mastered { background: var(--color-level-mastered); }
.lv-seg .is-proficient { background: var(--color-level-proficient); }
.lv-seg .is-familiar { background: var(--color-level-familiar); }
.lv-seg .is-attempted { background: var(--color-level-attempted); }
.lv-seg .is-none { background: var(--color-level-none); }

/* 圖例 */
.lv-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: var(--text-caption-size); color: var(--color-text-secondary); align-items: center; }
.lv-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lv-legend .lv-tile { --lv-size: 14px; border-radius: 3px; }
.lv-legend .lv-sw { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--color-line); }