/* Vonk — skill cards (lab/data/skills.js). One look wherever a skill is taught
   or recalled: a lesson bubble, an activity's skill chips, a game's mission. */
.sk-card{font:15px/1.5 var(--font-body, Inter, sans-serif); color:var(--ink, #1D2733); text-align:left;}
.sk-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.sk-name{margin:0; font:700 20px/1.2 var(--font-body, Inter, sans-serif); color:var(--navy, #052950);}
.sk-fam{font:700 11.5px/1 var(--font-body, Inter, sans-serif); letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:999px; color:#fff; background:var(--navy, #052950);}
.sk-fam.f-fn, .sk-chip.f-fn{--skc:#0C818C;} .sk-fam.f-tool, .sk-chip.f-tool{--skc:#2457A6;}
.sk-fam.f-ref, .sk-chip.f-ref{--skc:#8A6400;} .sk-fam.f-vba, .sk-chip.f-vba{--skc:#52306B;}
.sk-fam.f-chart, .sk-chip.f-chart{--skc:#C83B14;} .sk-fam.f-base, .sk-chip.f-base, .sk-fam.f-concept, .sk-chip.f-concept{--skc:#052950;}
.sk-fam.f-op, .sk-chip.f-op, .sk-fam.f-criterion, .sk-chip.f-criterion{--skc:#0A6670;}
.sk-fam{background:var(--skc, #052950);}
.sk-what{margin:0 0 6px; font-weight:600;}
.sk-why, .sk-tip{margin:6px 0 0; font-size:14px;}
.sk-tip{padding:7px 10px; border-radius:8px; background:#FFF6E0; border-left:3px solid #F2AD20;}
.sk-lab{margin:10px 0 4px; font:700 11.5px/1 var(--font-body, Inter, sans-serif); letter-spacing:.05em; text-transform:uppercase; color:var(--muted, #5C6572);}
.sk-steps{margin:8px 0 0; padding-left:22px; font-size:14.5px;} .sk-steps li{margin:3px 0;}
.sk-steps b, .sk-what b{white-space:nowrap;}
.sk-homeline{margin:10px 0 0; font-size:13.5px; color:var(--muted, #5C6572);} .sk-homeline a{font-weight:700; color:var(--navy, #052950);}
/* the little sheet */
.sk-sheet{display:inline-block; max-width:100%; overflow-x:auto; vertical-align:top;}
.sk-fbar{display:flex; align-items:center; gap:8px; margin-bottom:4px; padding:4px 8px; border:1.5px solid #D5DBE3; border-radius:6px; background:#fff; font-size:14px;}
.sk-fx{font:italic 700 13px/1 Georgia, serif; color:var(--muted, #5C6572);}
.sk-fbar code{font:600 14px/1.3 ui-monospace, Menlo, monospace; color:var(--navy, #052950); white-space:nowrap;}
.sk-grid{border-collapse:collapse; font:13.5px/1.2 var(--font-body, Inter, sans-serif); background:#fff;}
.sk-grid th{background:#F1F3F6; color:#5C6572; font-weight:600; font-size:11.5px; padding:3px 6px; border:1px solid #D5DBE3; min-width:18px;}
.sk-grid td{border:1px solid #D5DBE3; padding:4px 8px; min-width:44px; white-space:nowrap; color:#1D2733;}
.sk-grid td.num{text-align:right; font-variant-numeric:tabular-nums;}
.sk-grid td.hd{font-weight:700;}
.sk-grid td.rg{background:#E3F2F3;}
.sk-grid td.mk{background:#FDE7DE;}
.sk-grid td.at{background:#FFF1C9; box-shadow:inset 0 0 0 2px #F2AD20; font-weight:700;}
.sk-note{margin:5px 0 0; font-size:13.5px; color:var(--muted, #5C6572);}
.sk-ba{display:flex; align-items:center; gap:10px;} .sk-ba > div{flex:0 0 auto; max-width:100%;} .sk-arrow{flex:none; font-size:22px; color:var(--muted, #5C6572);}
/* too narrow for side by side: before above after, the arrow pointing down */
.sk-card{container-type:inline-size;}
@container (max-width:440px){ .sk-ba{flex-direction:column; align-items:flex-start;} .sk-arrow{transform:rotate(90deg); margin-left:24px;} }
.sk-code{margin:0; padding:8px 10px; border-radius:8px; background:#1B1430; color:#F3EEFA; font:13px/1.45 ui-monospace, Menlo, monospace; overflow-x:auto; white-space:pre;}
.sk-card.compact .sk-name{font-size:17px;}
.sk-card.compact .sk-ex .sk-lab{display:none;}
/* the dialog */
.sk-dlg{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(5,41,80,.35);}
.sk-box{position:relative; width:min(560px,100%); max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:16px; padding:20px 22px 18px; box-shadow:0 24px 60px rgba(5,41,80,.3);}
.sk-x{position:absolute; top:10px; right:12px; width:34px; height:34px; border:none; border-radius:999px; background:#F1F3F6; color:var(--navy, #052950); font-size:22px; line-height:1; cursor:pointer;}
.sk-x:hover{background:#E3E7EC;}
/* chips */
.sk-chips{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0;}
.sk-chips-l{font:700 12px/1 var(--font-body, Inter, sans-serif); letter-spacing:.04em; text-transform:uppercase; color:var(--muted, #5C6572); margin-right:2px;}
.sk-chip{border:none; cursor:pointer; padding:5px 10px; border-radius:999px; font:600 13.5px/1.1 var(--font-body, Inter, sans-serif);
  color:var(--skc, #052950); background:#fff; box-shadow:inset 0 0 0 1.5px var(--skc, #052950);}
.sk-chip:hover, .sk-chip:focus-visible{background:var(--skc, #052950); color:#fff; outline:none;}
.sk-chips.is-new .sk-chip{background:var(--skc, #052950); color:#fff; box-shadow:0 3px 10px -4px var(--skc, #052950);}
/* inside a lesson bubble */
.tour-bub .sk-card{margin:8px 0 2px; padding:10px 12px; border-radius:10px; background:#F7F9FB;}
/* a game mission's "Before you start" */
.sk-before{display:flex; flex-direction:column; gap:12px; margin:10px 0;}
.sk-before-h{margin:0; font:700 13px/1.2 var(--font-body, Inter, sans-serif); letter-spacing:.04em; text-transform:uppercase; color:var(--navy, #052950);}
.sk-before > .sk-card{padding:14px 16px; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1.5px #D5DBE3;}