/* clb-shared.css
 * Shared styling for the per-skill language block used by the province PNP
 * calculators. Reuses each page's own --navy/--gold/--teal/--line/etc custom
 * properties, so it inherits each calculator's existing palette automatically.
 */
.test-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.ttab { padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--slate); background: var(--white); user-select: none; transition: all .15s; }
.ttab:hover { border-color: var(--gold); }
.ttab.on { border-color: var(--gold); background: var(--goldbg); color: var(--navy); }

.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.skill-box { border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; transition: all .15s; }
.skill-box.limiting { border-color: var(--gold); background: var(--goldbg); }
.skill-box label { display: block; font-size: 11px; font-weight: 700; color: var(--slate); margin-bottom: 6px; }
.skill-box select { width: 100%; padding: 7px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 13px; background: var(--white); color: var(--navy); font-family: inherit; }
.skill-clb { margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--slate); }
.skill-clb.filled { color: var(--teal); }

.clb-result { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; background: var(--mist); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.clb-result.filled { background: var(--goldbg); border-color: var(--gold); }
.cr-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.cr-val { font-size: 18px; font-weight: 800; color: var(--navy); }
.cr-val.below-min { color: var(--red); }
.cr-pts { font-size: 20px; font-weight: 800; color: var(--teal); text-align: right; }
.clb-min-warn { font-size: 11px; font-weight: 600; color: var(--red); margin-top: 6px; }
.ref-table-title { font-size: 11px; font-weight: 700; color: var(--slate); margin-bottom: 6px; }