/* dashboard.page.css — restored verbatim from v62 ground-truth stylesheet, plus any post-v62 additions */

:root {
  --green:#274640; --green-dark:#1C3832; --green-light:#E8F0EE;
  --gold:#C9970C; --gold-dark:#A07A08; --gold-light:#FDF6E3;
  --white:#FFFFFF; --off-white:#F8F6F1;
  --gray-light:#EDEBE6; --gray-mid:#B8B4AC; --gray-dark:#6B6660;
  --success:#2D7A4F; --success-light:#EAF5EE;
  --danger:#C0392B; --danger-light:#FEF0EE;
  --text:#1A2E1E; --text-muted:#6B6660;
  --radius:10px; --font:'Nunito',sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font); background:var(--off-white); color:var(--text); }
nav { background:var(--green); padding:0 2rem; height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-brand img { display:block; }
.nav-brand-text .org { font-size:14px; font-weight:600; color:white; letter-spacing:0.5px; }
.nav-brand-text .cic { font-size:10px; font-weight:300; color:rgba(255,255,255,0.5); letter-spacing:3px; }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-user { font-size:13px; color:rgba(255,255,255,0.7); }
.nav-user strong { color:white; }
.btn-nav { background:rgba(255,255,255,0.1); color:white; border:1px solid rgba(255,255,255,0.2); border-radius:6px; padding:0.4rem 1rem; font-size:13px; font-family:var(--font); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; line-height:1.2; }
.btn-nav:hover { background:rgba(255,255,255,0.18); }
.btn-nav-ghost { background:transparent; color:rgba(255,255,255,0.75); border:1px solid rgba(255,255,255,0.25); font-size:12px; padding:0.35rem 0.75rem; border-radius:6px; cursor:pointer; font-family:var(--font); font-weight:600; text-decoration:none; transition:all 0.15s; display:inline-flex; align-items:center; gap:0.3rem; }
.btn-nav-ghost:hover { background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.5); }

main { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
.page-title { font-size:22px; font-weight:600; color:var(--green); margin-bottom:1.75rem; }
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card { background:var(--white); border:1px solid var(--gray-light); border-radius:var(--radius); padding:1.25rem; text-align:center; }
.stat-num { font-size:34px; font-weight:600; color:var(--gold); line-height:1; }
.stat-label { font-size:11px; color:var(--text-muted); margin-top:0.4rem; text-transform:uppercase; letter-spacing:0.06em; }
.tabs { display:flex; margin-bottom:1.25rem; border:1px solid var(--gray-light); border-radius:var(--radius); background:var(--white); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:0.75rem 1rem; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-right:1px solid var(--gray-light); white-space:nowrap; font-family:var(--font); min-height:44px; display:flex; align-items:center; touch-action:manipulation; }
.tab:last-child { border-right:none; }
.tab.active { background:var(--gold-light); color:var(--gold-dark); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.section-title { font-size:17px; font-weight:600; color:var(--green); margin-bottom:1rem; }
p.p1 { margin:0; font:20px 'Helvetica Neue'; }
.dashboard-grid, .journey-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:1rem; }
.panel { background:var(--white); border:1px solid var(--gray-light); border-radius:12px; padding:1.25rem; }
.panel-wide { grid-column:1 / -1; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; margin-bottom:0.9rem; }
.panel-head-space { margin-bottom:1rem; }
.panel-kicker { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; font-weight:700; margin-bottom:0.25rem; }
.panel h3 { font-size:16px; font-weight:700; color:var(--green); }
.module-stack { display:flex; flex-direction:column; gap:0.75rem; }
.assigned-accordion { display:flex; flex-direction:column; gap:.75rem; }
.assigned-group { border:1px solid var(--gray-light); border-radius:16px; background:#fff; box-shadow:0 8px 22px rgba(17,24,39,.04); overflow:hidden; }
.assigned-group summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.1rem; color:var(--green); font-weight:900; }
.assigned-group summary::-webkit-details-marker { display:none; }
.assigned-group summary:after { content:'⌄'; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; background:var(--off-white); border:1px solid var(--gray-light); color:var(--green); transition:transform .15s ease; flex:0 0 auto; }
.assigned-group[open] summary:after { transform:rotate(180deg); }
.assigned-group-count { font-size:12px; font-weight:900; color:var(--green); background:#EEF6F2; border:1px solid #D7E8E0; border-radius:999px; padding:.22rem .6rem; white-space:nowrap; }
.assigned-group-body { padding:0 1rem 1rem; display:flex; flex-direction:column; gap:.65rem; }
.assigned-group-body .module-card.compact { margin:0; }
.assigned-group-empty { padding:1rem; color:var(--text-muted); font-size:13px; }
.summary-stat-grid, .journey-stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.75rem; }
.summary-stat-card, .journey-stat-card { background:var(--off-white); border:1px solid var(--gray-light); border-radius:10px; padding:0.9rem; }
.summary-stat-value, .journey-stat-value { font-size:28px; font-weight:800; color:var(--green); line-height:1; }
.summary-stat-label, .journey-stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.25rem; }
.renewal-list { display:flex; flex-direction:column; gap:0.65rem; }
.renewal-item { background:var(--off-white); border:1px solid var(--gray-light); border-radius:10px; padding:0.8rem; }
.renewal-item strong { display:block; font-size:14px; color:var(--green); margin-bottom:0.2rem; }
.renewal-item span { font-size:12px; color:var(--text-muted); }

/* Renewal system */
.renewal-alert { background:linear-gradient(135deg,#F5FBFF,#EFF6FF); border:1px solid #BFD8FF; border-radius:18px; padding:1.1rem 1.2rem; margin:0 0 1rem; box-shadow:0 14px 35px rgba(31,78,121,.06); }
.renewal-alert.expired { background:linear-gradient(135deg,#FFF7F4,#FFF1EE); border-color:#F4C7BE; }
.renewal-alert-top { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.renewal-alert-kicker { color:#315f9e; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; margin-bottom:.25rem; }
.renewal-alert.expired .renewal-alert-kicker { color:var(--danger); }
.renewal-alert-title { color:var(--green); font-size:18px; font-weight:900; margin-bottom:.25rem; }
.renewal-alert-text { color:var(--text); font-size:14px; line-height:1.55; }
.renewal-alert-actions { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:.85rem; }
.renewal-btn { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; background:var(--green); color:#fff; border-radius:999px; padding:.55rem .85rem; text-decoration:none; font-size:12px; font-weight:900; }
.renewal-btn.secondary { background:#fff; color:var(--green); border:1px solid var(--gray-light); }
.badge-due_soon { background:#EAF2FF; color:#315f9e; }
.status-due_soon { border-left-color:#5B8DEF; }
.status-expired { border-left-color:var(--danger); }
.status-due_soon .progress-fill { background:#5B8DEF; }
.renewal-item { display:block; text-decoration:none; transition:transform .12s, box-shadow .12s; }
.renewal-item:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(17,24,39,.06); }
.renewal-item small { display:block; margin-top:.2rem; color:var(--text-muted); font-size:11px; }
.renewal-history-note { background:#FFF9EA; border:1px solid #E8CF82; border-radius:14px; padding:1rem; color:#5D4707; font-size:13px; line-height:1.55; margin-bottom:1rem; }

.lib-tabs { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.lib-tab { background:var(--off-white); border:1px solid var(--gray-light); color:var(--text-muted); border-radius:999px; padding:0.45rem 1rem; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font); transition:all 0.15s; }
.lib-tab.active { background:var(--green); color:#fff; border-color:var(--green); }
/* Compact module cards for library view */
.module-card-compact { padding:0.7rem 0.9rem; display:block; background:var(--white); border:1px solid var(--gray-light); border-radius:10px; text-decoration:none; transition:box-shadow 0.15s,transform 0.1s; border-left:4px solid var(--gray-light); }
.module-card-compact:hover { box-shadow:0 3px 12px rgba(30,77,59,0.09); transform:translateY(-1px); }
.module-card-compact.status-completed { border-left-color:var(--success); }
.module-card-compact.status-in_progress { border-left-color:#3B5ECC; }
.module-card-compact.status-retry { border-left-color:var(--gold); }
.mcc-top { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; margin-bottom:0.3rem; }
.mcc-title { font-size:13px; font-weight:700; color:var(--green); flex:1; line-height:1.3; }
.mcc-badge { font-size:10px; white-space:nowrap; flex-shrink:0; }
.mcc-meta { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--text-muted); }
.mcc-cat { font-weight:600; text-transform:uppercase; letter-spacing:0.06em; font-size:10px; }
.mcc-right { display:flex; gap:0.6rem; }
/* Library collapsible groups */
.lib-group { margin-bottom:0.75rem; border:1px solid var(--gray-light); border-radius:12px; overflow:hidden; }
.lib-group-header { width:100%; display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; background:var(--off-white); border:none; cursor:pointer; font-family:var(--font); font-size:14px; font-weight:700; color:var(--green); text-align:left; }
.lib-group-header:hover { background:#EEF4EE; }
.lib-group-label { flex:1; }
.lib-group-chevron { font-size:14px; color:var(--text-muted); transition:transform 0.15s; }
.lib-group-body { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0.6rem; padding:0.75rem; background:var(--white); }
/* Retake button in completed table */
.cert-btn-retake { background:var(--gold-light); color:var(--gold-dark); border:1px solid #E8C86A; }
.cert-btn-retake:hover { background:#E8C86A; }
.library-controls { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:0.75rem; margin-bottom:1rem; }
.library-search, .library-filter { width:100%; background:var(--white); border:1px solid var(--gray-light); border-radius:10px; padding:0.7rem 0.85rem; font-family:var(--font); font-size:14px; color:var(--text); }
.library-category-strip { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.library-pill { background:var(--off-white); border:1px solid var(--gray-light); color:var(--text-muted); border-radius:999px; padding:0.45rem 0.75rem; font-size:12px; font-weight:700; cursor:pointer; }
.library-pill.active { background:var(--gold-light); color:var(--gold-dark); border-color:#E8C86A; }
.library-section { margin-bottom:1.5rem; }
.library-section-title { font-size:14px; font-weight:800; color:var(--green); margin-bottom:0.75rem; }
.modules-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin-bottom:0; }
.module-card { background:var(--white); border:1px solid var(--gray-light); border-radius:12px; padding:1.5rem; text-decoration:none; display:block; transition:box-shadow 0.15s,transform 0.1s; border-left:4px solid var(--gray-light); height:100%; }
.module-card.compact { padding:0.85rem 1rem; }
.module-card.compact .module-desc { display:none; }
.module-card.compact .module-title { font-size:13px; margin-bottom:0.2rem; }
.module-card.compact .module-card-top { margin-bottom:0.3rem; }
.module-card.compact .module-meta { margin-top:0.3rem; }
.module-card.compact .progress-wrap { margin-top:0.5rem; }
.module-card:hover { box-shadow:0 4px 20px rgba(30,77,59,0.1); transform:translateY(-2px); text-decoration:none; }
.module-card.status-overdue { border-left-color:var(--danger); }
.module-card.status-in_progress { border-left-color:#3B5ECC; }
.module-card.status-retry { border-left-color:var(--gold); }
.module-card.status-completed { border-left-color:var(--success); }
.module-card.status-not_started { border-left-color:var(--gray-mid); }
.module-card.compact { padding:0.85rem 1rem; }
.module-card.compact .module-desc { display:none; }
.module-card.compact .module-title { font-size:13px; margin-bottom:0.2rem; }
.module-card.compact .module-card-top { margin-bottom:0.3rem; }
.module-card.compact .module-meta { margin-top:0.3rem; }
.module-card.compact .progress-wrap { margin-top:0.5rem; }
.module-card:hover { box-shadow:0 4px 20px rgba(30,77,59,0.1); transform:translateY(-2px); text-decoration:none; }
.module-card.status-overdue { border-left-color:var(--danger); }
.module-card.status-in_progress { border-left-color:#3B5ECC; }
.module-card.status-retry { border-left-color:var(--gold); }
.module-card.status-completed { border-left-color:var(--success); }
.module-card.status-not_started { border-left-color:var(--gray-mid); }
.module-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.6rem; }
.module-cat { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.badge { font-size:10px; font-weight:600; padding:0.2rem 0.6rem; border-radius:20px; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; }
.badge-overdue { background:var(--danger-light); color:var(--danger); }
.badge-expired { background:var(--danger-light); color:var(--danger); }
.badge-in_progress { background:#EEF4FF; color:#3B5ECC; }
.badge-retry { background:var(--gold-light); color:var(--gold-dark); }
.badge-completed, .badge-passed { background:var(--success-light); color:var(--success); }
.badge-not_started { background:var(--gray-light); color:var(--gray-dark); }
.progress-wrap { margin-top:0.9rem; }
.progress-label { display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-bottom:0.25rem; }
.progress-bar { width:100%; height:7px; background:var(--gray-light); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background:var(--gold); border-radius:999px; }
.status-in_progress .progress-fill { background:#3B5ECC; }
.status-retry .progress-fill { background:var(--gold); }
.status-completed .progress-fill { background:var(--success); }
.status-overdue .progress-fill { background:var(--danger); }
.module-title { font-size:15px; font-weight:600; color:var(--green); margin-bottom:0.4rem; }
.module-desc { font-size:13px; color:var(--text-muted); line-height:1.5; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.module-meta { display:flex; gap:1rem; font-size:12px; color:var(--text-muted); }
.completed-table { width:100%; background:var(--white); border:1px solid var(--gray-light); border-radius:var(--radius); border-collapse:collapse; overflow:hidden; }
.completed-table th { background:var(--gray-light); padding:0.75rem 1rem; text-align:left; font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.completed-table td { padding:0.9rem 1rem; font-size:14px; border-top:1px solid var(--gray-light); }
.score-pass { color:var(--success); font-weight:600; }
.cert-btn { background:var(--gold-light); color:var(--gold-dark); border:1px solid #E8C86A; border-radius:6px; padding:0.3rem 0.8rem; font-size:12px; font-weight:600; font-family:var(--font); cursor:pointer; text-decoration:none; }
.empty-state { text-align:center; padding:3rem; color:var(--text-muted); }
.empty-icon { font-size:40px; margin-bottom:1rem; }
.empty-state p { font-size:14px; }
.loading { text-align:center; padding:3rem; color:var(--text-muted); }
.loading-brand { display:inline-flex; flex-direction:column; align-items:center; gap:0.8rem; color:var(--green); font-size:13px; font-weight:800; letter-spacing:.02em; }
.loading-dragonfly-logo { width:92px; height:auto; object-fit:contain; animation:dragonflyPulse 1.55s ease-in-out infinite; filter:drop-shadow(0 10px 28px rgba(28,56,50,.16)); }
.spinner { display:inline-block; width:24px; height:24px; border:2px solid var(--gray-mid); border-top-color:var(--gold); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes dragonflyPulse { 0%,100% { transform:scale(0.96); opacity:.68; } 50% { transform:scale(1.08); opacity:1; } }

.achievement-layout { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:2.5rem; }
.achievement-panel { background:var(--white); border:1px solid var(--gray-light); border-radius:12px; padding:1.25rem; }
.achievement-panel h3 { font-size:16px; font-weight:600; color:var(--green); margin-bottom:0.75rem; }
.achievement-sub { font-size:13px; color:var(--text-muted); margin-bottom:1rem; }
.achievement-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:0.5rem; }
.badge-tile { border:1px solid var(--gray-light); border-radius:10px; padding:0.6rem 0.5rem; background:var(--off-white); opacity:0.55; text-align:center; }
.badge-tile.unlocked { background:var(--gold-light); border-color:#E8C86A; opacity:1; }
.badge-icon { font-size:20px; line-height:1; margin-bottom:0.3rem; }
.badge-title { font-size:11px; font-weight:700; color:var(--green); margin-bottom:0.15rem; }
.badge-desc { font-size:10px; color:var(--text-muted); line-height:1.3; display:none; }
.badge-status { margin-top:0.3rem; font-size:10px; font-weight:700; color:var(--gray-dark); }
.badge-tile.unlocked .badge-status { color:var(--success); }
.pathway-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0.9rem; }
.pathway-card { border:1px solid var(--gray-light); border-radius:12px; padding:1rem; background:var(--off-white); }
.pathway-card.complete { border-color:#A8D5B8; background:var(--success-light); }
.pathway-top { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:0.75rem; }
.pathway-title { font-size:14px; font-weight:700; color:var(--green); }
.pathway-pill { font-size:11px; font-weight:700; color:var(--green); background:white; border:1px solid var(--gray-light); border-radius:999px; padding:0.2rem 0.55rem; white-space:nowrap; }
.pathway-list { font-size:12px; color:var(--text-muted); line-height:1.6; margin-top:0.6rem; }
.cpd-ring-wrap { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; }
.cpd-ring {
  width:120px; height:120px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--gold) calc(var(--cpd-pct)*1%), var(--gray-light) 0);
  position:relative; flex-shrink:0;
}
.cpd-ring:after { content:''; position:absolute; inset:12px; border-radius:50%; background:var(--white); }
.cpd-ring-inner { position:relative; z-index:1; text-align:center; }
.cpd-ring-num { font-size:24px; font-weight:800; color:var(--green); line-height:1; }
.cpd-ring-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.2rem; }
.level-card { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.level-title { font-size:20px; font-weight:800; color:var(--green); }
.level-desc { font-size:13px; color:var(--text-muted); margin-top:0.25rem; }
.impact-score { text-align:center; min-width:120px; padding:0.8rem 1rem; border-radius:12px; background:var(--green); color:white; }
.impact-score .num { font-size:34px; font-weight:800; line-height:1; }
.impact-score .label { font-size:10px; opacity:0.8; text-transform:uppercase; letter-spacing:0.08em; margin-top:0.25rem; }
.upgrade-card { background:linear-gradient(135deg,var(--green),var(--green-dark)); color:white; border-radius:12px; padding:1rem; margin-top:0.85rem; }
.upgrade-card h3 { color:white; margin-bottom:0.25rem; font-size:14px; }
.upgrade-card p { color:rgba(255,255,255,0.8); font-size:12px; line-height:1.5; }
.upgrade-card a { display:inline-block; margin-top:0.65rem; background:var(--gold); color:white; text-decoration:none; border-radius:8px; padding:0.5rem 0.85rem; font-size:12px; font-weight:800; }

.profile-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1rem; margin-bottom:2rem; }
.profile-card { background:var(--white); border:1px solid var(--gray-light); border-radius:12px; padding:1.25rem; }
.profile-card h3 { font-size:16px; color:var(--green); margin-bottom:0.75rem; }
.profile-name { font-size:22px; font-weight:800; color:var(--green); margin-bottom:0.35rem; }
.profile-line { font-size:13px; color:var(--text-muted); line-height:1.7; }
.strength-list { display:flex; flex-direction:column; gap:0.45rem; }
.strength-item { display:flex; justify-content:space-between; gap:1rem; font-size:13px; padding:0.45rem 0.55rem; border-radius:8px; background:var(--off-white); }
.strength-item strong { color:var(--green); }
.competency-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0.8rem; margin-bottom:2rem; }
.competency-card { background:var(--white); border:1px solid var(--gray-light); border-radius:12px; padding:1rem; }
.competency-title { font-size:13px; font-weight:800; color:var(--green); margin-bottom:0.5rem; }
.competency-score { font-size:26px; font-weight:800; color:var(--gold); margin-bottom:0.5rem; }
.transcript-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:0.75rem; flex-wrap:wrap; }
@media (max-width:900px){ .dashboard-grid, .journey-grid { grid-template-columns:1fr; } .library-controls { grid-template-columns:1fr; } }
@media (max-width:850px){ .profile-grid{grid-template-columns:1fr;} }

/* ── Hero welcome bar ── */
.hero { background:linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, #2D6B58 100%); padding:1.75rem 2rem; }
.hero-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.hero-greeting { color:rgba(255,255,255,0.7); font-size:13px; font-weight:500; letter-spacing:0.03em; margin-bottom:0.25rem; }
.hero-name { color:white; font-size:26px; font-weight:800; line-height:1.1; }
.hero-sub { color:rgba(255,255,255,0.65); font-size:13px; margin-top:0.4rem; }
.hero-progress { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:14px; padding:1rem 1.25rem; min-width:200px; text-align:center; }
.hero-progress-num { font-size:36px; font-weight:800; color:var(--gold); line-height:1; }
.hero-progress-label { font-size:11px; color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.3rem; }
.hero-progress-bar { margin-top:0.65rem; height:6px; background:rgba(255,255,255,0.2); border-radius:999px; overflow:hidden; }
.hero-progress-fill { height:100%; background:var(--gold); border-radius:999px; transition:width 0.6s ease; }

/* ── Continue card ── */
.continue-card { background:linear-gradient(135deg, #2B4B9E 0%, #3B5ECC 100%); border-radius:14px; padding:1.25rem 1.5rem; margin-bottom:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-decoration:none; transition:transform 0.15s, box-shadow 0.15s; flex-wrap:wrap; }
.continue-card:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(59,94,204,0.3); }
.continue-label { font-size:11px; font-weight:700; color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem; }
.continue-title { font-size:17px; font-weight:700; color:white; margin-bottom:0.25rem; }
.continue-meta { font-size:12px; color:rgba(255,255,255,0.65); }
.continue-btn { background:white; color:#2B4B9E; border-radius:8px; padding:0.65rem 1.25rem; font-size:13px; font-weight:700; white-space:nowrap; flex-shrink:0; }

/* ── Collapsible sections ── */
.collapsible-header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; margin-bottom:1rem; }
.collapsible-header .section-title { margin-bottom:0; }
.collapsible-toggle { font-size:12px; color:var(--text-muted); background:var(--gray-light); border:none; border-radius:6px; padding:0.3rem 0.65rem; cursor:pointer; font-family:var(--font); flex-shrink:0; }
.collapsible-body { }
.collapsible-body.collapsed { display:none; }

/* ── Domain group sections in Explore ── */
.domain-group { margin-bottom:1.5rem; }
.domain-group-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.75rem 1rem; border-radius:10px; cursor:pointer;
  user-select:none; margin-bottom:0.75rem; border:1px solid transparent;
  transition:background 0.15s;
}
.domain-group-header:hover { filter:brightness(0.97); }
.domain-group-left { display:flex; align-items:center; gap:0.65rem; }
.domain-group-icon { font-size:20px; flex-shrink:0; }
.domain-group-name { font-size:15px; font-weight:700; }
.domain-group-sub { font-size:12px; margin-top:0.1rem; opacity:0.75; }
.domain-group-right { display:flex; align-items:center; gap:0.6rem; }
.domain-count { font-size:11px; font-weight:700; padding:0.2rem 0.6rem; border-radius:20px; text-align:center; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.domain-toggle { font-size:11px; background:rgba(255,255,255,0.35); border:none;
  border-radius:6px; padding:0.25rem 0.55rem; cursor:pointer; font-family:var(--font); }
.domain-body.collapsed { display:none; }

@media (max-width:640px) {
  /* Hero */
  .hero { padding:1.25rem 1rem; }
  .hero-name { font-size:20px; }
  .hero-inner { flex-direction:column; align-items:flex-start; gap:1rem; }
  .hero-progress { width:100%; }

  /* Continue card */
  .continue-card { flex-direction:column; align-items:flex-start; padding:1rem; }
  .continue-btn { width:100%; text-align:center; margin-top:0.5rem; padding:0.6rem 1rem; border-radius:8px; }

  /* Nav */
  nav { padding:0 1rem; height:56px; }
  .nav-user { display:none; }
  .nav-brand img { height:36px !important; }

  /* Main layout */
  main { padding:1rem 0.875rem; }
  .page-title { font-size:18px; margin-bottom:1.25rem; }

  /* Profile grid - already 1 col at 850px, just tighten */
  .profile-grid { gap:0.75rem; margin-bottom:1.25rem; }
  .profile-card { padding:1rem; }
  .profile-name { font-size:18px; }

  /* Stats row */
  .stats-row { grid-template-columns:repeat(3,1fr); gap:0.6rem; }
  .stat-num { font-size:26px; }
  .stat-card { padding:0.9rem 0.6rem; }

  /* Competency grid */
  .competency-grid { grid-template-columns:repeat(2,1fr); gap:0.6rem; }
  .competency-score { font-size:22px; }

  /* Module cards */
  .modules-grid { grid-template-columns:1fr; }
  .module-card { padding:1.125rem; }

  /* Completed table - horizontal scroll */
  .completed-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; }
  .completed-table { min-width:560px; }

  /* Achievement / badge tiles */
  .achievement-grid { grid-template-columns:repeat(4,1fr); gap:0.4rem; }
  .pathway-grid { grid-template-columns:1fr; }

  /* Level card */
  .level-card { flex-direction:column; align-items:flex-start; }
  .impact-score { align-self:stretch; text-align:center; }

  /* CPD ring */
  .cpd-ring-wrap { flex-direction:column; align-items:flex-start; }

  /* Transcript actions */
  .transcript-actions { flex-direction:column; align-items:stretch; }
  .transcript-actions button, .transcript-actions select { width:100%; }

  /* Section titles */
  .section-title { font-size:15px; }

  /* Achievement panels */
  .achievement-panel { padding:1rem; }
}

@media (max-width:400px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .competency-grid { grid-template-columns:1fr; }
  .achievement-grid { grid-template-columns:repeat(3,1fr); }
}

/* ── Global mobile touch optimisation ── */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
button, .btn-primary, .btn-secondary, .opt-btn, .tab, .btn-nav, .btn-sm {
  min-height: 44px;
  touch-action: manipulation;
}
input, select, textarea {
  font-size: 16px !important; /* Prevents iOS zoom on focus */
  touch-action: manipulation;
}

/* === Global mobile/accessibility optimisation === */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{min-height:100svh;overflow-x:hidden;}
img{max-width:100%;height:auto;}
button,.btn,.btn-primary,.btn-secondary,.btn-nav,.btn-sm,.tab,a[role="button"]{min-height:44px;touch-action:manipulation;}
input,select,textarea{font-size:16px!important;max-width:100%;}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:720px;}
@media (max-width:700px){
  body{font-size:16px;}
  main,.container,.wrap,.page{width:100%;max-width:100%;}
  nav{height:auto;min-height:56px;padding:0.65rem 0.85rem;gap:0.75rem;}
  .nav-brand img{height:34px!important;max-width:190px;object-fit:contain;}
  .nav-right{gap:0.5rem;}
  .nav-user{display:none!important;}
  .btn-nav{padding:0.55rem 0.75rem;font-size:13px;}
  .card,.stat-card,.module-card,.org-card,.profile-card{border-radius:14px;}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
  .tab{white-space:nowrap;flex:0 0 auto;scroll-snap-align:start;}
  .form-row-2,.form-row-3,.form-row-4,.profile-grid,.competency-grid{grid-template-columns:1fr!important;}
  .btn-row,.action-row,.transcript-actions{flex-direction:column!important;align-items:stretch!important;}
  .btn-row button,.action-row button,.transcript-actions button{width:100%;}
  h1{line-height:1.12;}
}
@media (max-width:420px){
  .card{padding:1rem!important;}
  .logo-wrap{margin-bottom:1rem!important;}
  .steps{font-size:11px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0.01ms!important;}
}


/* Dragonfly UX upgrade: learner next-action focus */
.next-action-panel{background:linear-gradient(135deg,var(--green-dark),var(--green));color:white;border-radius:20px;padding:1.15rem;margin:0 0 1.25rem;box-shadow:var(--shadow);}
.next-action-panel h2{font-size:21px;color:white;margin:0 0 .25rem}.next-action-panel p{font-size:13px;color:rgba(255,255,255,.78);margin:0 0 .9rem;line-height:1.5}.next-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}.next-action-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:.9rem;transition:background .15s ease}.next-action-card:hover{background:rgba(255,255,255,.16)}.nac-icon{display:block;font-size:1rem;margin-bottom:.3rem;opacity:.85}.next-action-card strong{display:block;font-size:24px;color:var(--gold);line-height:1;margin-bottom:.35rem}.next-action-card span{font-size:12px;color:rgba(255,255,255,.78)}.next-action-panel button{margin-top:.9rem;background:white;color:var(--green);border:none;border-radius:999px;padding:.55rem .9rem;font-size:12px;font-weight:900;font-family:var(--font);cursor:pointer;}


/* ── PlayStation-style badge notification ── */
#badge-toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:0.6rem; pointer-events:none; }
.badge-toast { width:320px; background:linear-gradient(135deg,#1C3832 0%,#2A4F45 100%); border:1px solid rgba(245,166,35,0.35); border-radius:14px; padding:0.85rem 1rem; display:flex; gap:0.85rem; align-items:center; box-shadow:0 8px 32px rgba(0,0,0,0.35); pointer-events:all; transform:translateX(calc(100% + 2rem)); opacity:0; transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease; will-change:transform; }
.badge-toast.show { transform:translateX(0); opacity:1; }
.badge-toast.hide { transform:translateX(calc(100% + 2rem)); opacity:0; }
.bt-icon { font-size:2rem; flex-shrink:0; line-height:1; }
.bt-body { flex:1; min-width:0; }
.bt-kicker { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:0.15rem; }
.bt-title { font-size:14px; font-weight:800; color:#fff; margin-bottom:0.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-desc { font-size:11px; color:rgba(255,255,255,0.6); line-height:1.35; }
.bt-link { display:inline-block; margin-top:0.4rem; font-size:11px; font-weight:700; color:var(--gold); text-decoration:none; }
.bt-link:hover { text-decoration:underline; }
.bt-pts { font-size:11px; font-weight:700; color:var(--gold); margin-left:auto; flex-shrink:0; align-self:flex-start; white-space:nowrap; }

.in-progress-panel { margin: 0 0 1.25rem; border:1px solid var(--gray-light); border-radius:16px; background:var(--white); overflow:hidden; }
.in-progress-panel summary { cursor:pointer; list-style:none; padding:1rem 1.1rem; font-weight:800; color:var(--green); display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.in-progress-panel summary::-webkit-details-marker { display:none; }
.in-progress-panel summary::after { content:'Show'; color:var(--gold-dark); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.in-progress-panel[open] summary::after { content:'Hide'; }
.in-progress-list { padding:0 1rem 1rem; display:grid; gap:.8rem; }
.in-progress-note { font-size:13px; color:var(--text-muted); font-weight:500; }
@media(max-width:700px){ .in-progress-panel summary{padding:.9rem 1rem;} .in-progress-list{padding:0 .85rem .85rem;} }

/* Confetti canvas */
#confetti-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9998; }



/* Dashboard toolbox quick access */
.toolbox-quick-panel { margin-bottom: 1rem; }
.toolbox-quick-intro { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 13px; max-width: 680px; }
.toolbox-quick-panel .modules-grid { margin-top: 0.75rem; }
.toolbox-drawer-card { border:1px solid var(--gray-light); border-radius:16px; background:#fff; box-shadow:0 2px 10px rgba(39,70,64,.05); padding:1rem; }
.toolbox-drawer-main { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; border:0; background:transparent; text-align:left; padding:0; cursor:pointer; font-family:var(--font); }
.toolbox-drawer-title { display:flex; gap:.8rem; align-items:flex-start; }
.toolbox-drawer-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--gold-light); color:var(--gold-dark); font-size:21px; flex:0 0 auto; }
.toolbox-drawer-title strong { display:block; color:var(--green-dark); font-size:17px; margin-bottom:.2rem; }
.toolbox-drawer-title span { display:block; color:var(--text-muted); font-size:13px; line-height:1.35; }
.toolbox-drawer-cta { display:flex; align-items:center; gap:.6rem; color:var(--green); font-weight:900; white-space:nowrap; }
.toolbox-drawer-arrow { width:32px; height:32px; border-radius:999px; background:var(--off-white); border:1px solid var(--gray-light); display:grid; place-items:center; transition:.18s ease; }
.toolbox-drawer-card.open .toolbox-drawer-arrow { transform:rotate(180deg); background:var(--gold-light); border-color:var(--gold); }
.toolbox-drawer-list { display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--gray-light); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.65rem; }
.toolbox-drawer-card.open .toolbox-drawer-list { display:grid; }
.toolbox-drawer-link { display:flex; align-items:center; justify-content:space-between; gap:.65rem; text-decoration:none; color:var(--green-dark); border:1px solid var(--gray-light); border-radius:13px; padding:.72rem .8rem; background:var(--off-white); font-weight:850; }
.toolbox-drawer-link:hover { border-color:var(--gold); background:var(--gold-light); }
.toolbox-drawer-link small { display:block; color:var(--text-muted); font-weight:700; margin-top:.12rem; }
.toolbox-drawer-actions { display:flex; justify-content:flex-end; margin-top:.85rem; }
@media (max-width: 640px) {
  .toolbox-quick-panel .panel-head-space { gap: 0.75rem; align-items: stretch; }
  .toolbox-quick-panel .panel-head-space .cert-btn { width: 100%; justify-content: center; }
  .toolbox-drawer-main { align-items:flex-start; }
  .toolbox-drawer-title strong { font-size:15px; }
  .toolbox-drawer-title span { font-size:12.5px; }
  .toolbox-drawer-cta { font-size:12px; }
  .toolbox-drawer-icon { width:38px; height:38px; border-radius:12px; }
  .toolbox-drawer-list { grid-template-columns:1fr; }
}


/* v14: practical library and cleaner learning filters */
.practice-card { background:linear-gradient(135deg, #7A5418 0%, #B98324 100%) !important; box-shadow:0 6px 24px rgba(185,131,36,0.22); }
.practice-card:hover { box-shadow:0 8px 28px rgba(185,131,36,0.32); }
.practice-card .continue-btn { color:#7A5418; }
.library-title-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.library-title-row h3 { margin:0; }
.library-search-toggle { width:42px; height:42px; border-radius:999px; border:1px solid var(--gray-light); background:var(--off-white); color:var(--green); cursor:pointer; font-size:18px; display:grid; place-items:center; }
.library-search-toggle:hover { background:var(--gold-light); border-color:var(--gold); }
.library-search-row { display:none; margin:.75rem 0 1rem; }
.library-search-row.open { display:block; }
.library-search-row .library-search { max-width:520px; }
.library-status-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:#fff; border:1px solid var(--gray-light); border-radius:14px; padding:.28rem; gap:.25rem; box-shadow:0 1px 7px rgba(39,70,64,.04); margin:0 0 .85rem; }
.library-status-tab { border:0; background:transparent; color:var(--text-muted); font-size:13px; font-weight:900; border-radius:10px; padding:.62rem .4rem; cursor:pointer; min-height:42px; font-family:var(--font); }
.library-status-tab.active { background:var(--green); color:#fff; box-shadow:0 2px 8px rgba(39,70,64,.18); }
.library-category-strip { margin-bottom:1rem; overflow:visible !important; }
.practice-library-note { color:var(--text-muted); font-size:13px; margin:.15rem 0 1rem; max-width:740px; line-height:1.5; }
@media(max-width:640px){.library-status-tab{font-size:11.5px;padding:.55rem .15rem}.library-title-row{justify-content:space-between}.library-search-row .library-search{max-width:none;width:100%;}.practice-card{padding:1rem!important}}



/* v17 practical-library polish: four visible mobile tabs and per-toolbox accordion cards */
@media(max-width:720px){
  #learner-primary-tabs.learner-primary-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
    gap:.35rem!important;
    padding:.35rem!important;
    border-radius:16px!important;
  }
  #learner-primary-tabs.learner-primary-tabs .tab{
    flex:1 1 auto!important;
    min-width:0!important;
    white-space:normal!important;
    justify-content:center!important;
    text-align:center!important;
    border-right:0!important;
    border-radius:12px!important;
    line-height:1.15!important;
    padding:.72rem .35rem!important;
    font-size:12px!important;
  }
}
.toolbox-accordion-list{display:grid;grid-template-columns:1fr;gap:.75rem;}
.toolbox-accordion-card{border:1px solid var(--gray-light);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 2px 10px rgba(39,70,64,.045);}
.toolbox-accordion-head{width:100%;border:0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:.85rem;padding:.9rem 1rem;text-align:left;cursor:pointer;font-family:var(--font);}
.toolbox-accordion-head:hover{background:#FFFBED;}
.toolbox-accordion-title{display:flex;gap:.75rem;align-items:flex-start;min-width:0;}
.toolbox-accordion-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#FDF6E3;color:#7A5418;font-size:20px;flex:0 0 auto;}
.toolbox-accordion-title strong{display:block;color:var(--green-dark);font-size:15px;margin-bottom:.15rem;overflow-wrap:anywhere;}
.toolbox-accordion-title span{display:block;color:var(--text-muted);font-size:12.5px;line-height:1.35;}
.toolbox-accordion-side{display:flex;align-items:center;gap:.65rem;flex:0 0 auto;}
.toolbox-module-star{border:0;background:transparent;color:#B88A00;font-size:22px;line-height:1;cursor:pointer;padding:.25rem;border-radius:999px;display:grid;place-items:center;min-width:32px;min-height:32px;}
.toolbox-module-star:hover{background:#FFF7D6;}
.toolbox-module-star[aria-pressed="true"]{color:#C9970C;text-shadow:0 1px 0 rgba(255,255,255,.8);}
.toolbox-module-star:focus-visible{outline:3px solid rgba(201,151,12,.35);outline-offset:2px;}
.toolbox-fav-empty{border:1px dashed #E8C86A;background:#FFFBED;color:#7A5418;border-radius:16px;padding:1rem;font-size:13px;line-height:1.45;}
.toolbox-fav-badge{font-size:11px;font-weight:850;border:1px solid #E8C86A;background:#fff9db;color:#7A5418;border-radius:999px;padding:.22rem .55rem;white-space:nowrap;}
.toolbox-accordion-chevron{width:31px;height:31px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--gray-light);background:var(--off-white);color:#7A5418;font-weight:900;}
.toolbox-accordion-card.open .toolbox-accordion-chevron{background:#FDF6E3;border-color:#E8C86A;}
.toolbox-accordion-body{display:none;padding:0 1rem 1rem;border-top:1px solid var(--gray-light);background:#fff;}
.toolbox-accordion-card.open .toolbox-accordion-body{display:block;}
.toolbox-accordion-body p{margin:.8rem 0;color:var(--text-muted);font-size:13px;line-height:1.45;}
.toolbox-accordion-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;}
.toolbox-open-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;text-decoration:none;border-radius:999px;background:var(--gold);color:#274640;font-weight:900;padding:.62rem .95rem;font-size:13px;}
.toolbox-open-btn:hover{filter:brightness(.98);}
@media(max-width:560px){
  .toolbox-accordion-head{padding:.78rem .75rem;align-items:flex-start;}
  .toolbox-accordion-icon{width:35px;height:35px;border-radius:12px;font-size:18px;}
  .toolbox-accordion-side{flex-direction:column;gap:.35rem;align-items:flex-end;}
  .toolbox-fav-badge{font-size:10px;padding:.18rem .42rem;}
  .toolbox-module-star{font-size:20px;min-width:30px;min-height:30px;padding:.15rem;}
  .toolbox-accordion-body{padding:0 .75rem .85rem;}
  .toolbox-open-btn{width:100%;}
}



/* v38 learner library polish: stable, elegant library layouts */
.library-title-row{display:flex;align-items:center;gap:.65rem;}
.library-title-row h3{font-size:24px;letter-spacing:-.02em;margin:0;}
.library-search-toggle{width:42px;height:42px;border-radius:999px;border:1px solid #E3DED2;background:#F8F6EF;display:grid;place-items:center;font-size:18px;box-shadow:0 2px 8px rgba(39,70,64,.06);}
.library-search-toggle:hover{background:#FFFBED;border-color:#E8C86A;}
.library-search-row{display:none;margin:.35rem 0 1rem;}
.library-search-row.open{display:block;}
.library-search{width:100%;border-radius:14px;border:1px solid #d9d6cd;padding:.85rem 1rem;background:#fff;box-shadow:0 1px 0 rgba(39,70,64,.03);}
.library-count-line{font-size:13px;color:var(--text-muted);margin:.4rem 0 1rem;line-height:1.45;}
.library-count-line strong{color:var(--green-dark);font-weight:900;}
.library-category-strip{display:flex;flex-wrap:wrap;gap:.55rem !important;margin:.35rem 0 1rem !important;}
.library-pill{display:inline-flex;align-items:center;gap:.45rem;border:1px solid #E3DED2;background:#fff;color:#24493F;border-radius:999px;padding:.56rem .8rem;font-weight:850;font-size:12px;box-shadow:0 1px 6px rgba(39,70,64,.04);}
.library-pill .pill-ico{font-size:14px;line-height:1;}
.library-pill em{font-style:normal;background:#F4F1E8;color:#756D60;border-radius:999px;padding:.08rem .42rem;font-size:10px;font-weight:900;}
.library-pill.active{background:#24493F;color:#fff;border-color:#24493F;box-shadow:0 6px 16px rgba(36,73,63,.15);}
.library-pill.active em{background:rgba(255,255,255,.16);color:#fff;}
.library-status-tabs{border-radius:18px;padding:.32rem;background:#fff;box-shadow:0 7px 24px rgba(39,70,64,.07);}
.library-status-tab{border-radius:14px;font-weight:900;color:#5d675f;}
.library-status-tab.active{background:#24493F;color:#fff;box-shadow:0 4px 12px rgba(36,73,63,.16);}

.learning-section-list{display:flex;flex-direction:column;gap:1rem;width:100%;}
.learn-section{border:1px solid #E4DED2;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(39,70,64,.055);}
.learn-section-head{width:100%;border:0;background:linear-gradient(135deg,#fff 0%,#FFFCF4 100%);display:flex;align-items:center;gap:.9rem;text-align:left;padding:1rem 1.1rem;cursor:pointer;font-family:var(--font);border-bottom:1px solid #EFE7DA;}
.learn-section-head:hover{background:#FFFBED;}
.learn-section-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:#FDF6E3;color:#7A5418;font-size:21px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(232,200,106,.25);}
.learn-section-copy{min-width:0;flex:1;}
.learn-section-title{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:#24493F;font-size:17px;font-weight:950;line-height:1.15;}
.learn-section-count{font-size:11px;font-weight:950;background:#EAF1EE;color:#24493F;border-radius:999px;padding:.18rem .55rem;}
.learn-section-desc{display:block;margin-top:.22rem;color:#6a675f;font-size:13px;font-weight:650;line-height:1.35;}
.learn-section-progress{font-size:11px;color:#8a7d64;font-weight:950;text-transform:uppercase;letter-spacing:.04em;margin-top:.28rem;}
.learn-section-chevron{width:34px;height:34px;border-radius:999px;border:1px solid #E3DED2;background:#fff;display:grid;place-items:center;color:#8a7d64;font-weight:900;flex:0 0 auto;}
.learn-section-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.85rem;padding:1rem;background:#FDFBF7;}
/* Same soft gradient + shadow language as the Library's pathway tiles (.learn-section), so a
   single module card looks like part of the same family whether it's shown standalone
   (Assigned Learning), inside an opened pathway, or in Practical Library. */
.library-module-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:linear-gradient(160deg,#fff 0%,#FFFDF6 100%);border:1px solid #E4DED2;border-radius:20px;padding:1.1rem;box-shadow:0 8px 20px rgba(39,70,64,.055);transition:transform .12s, box-shadow .15s;min-width:0;}
.library-module-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(39,70,64,.11);text-decoration:none;}
.library-module-card.status-locked{opacity:.72;}
.library-module-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#FDF6E3;color:#7A5418;font-size:20px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(232,200,106,.25);}
.library-module-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.7rem;}
.library-module-title{font-size:15px;line-height:1.28;color:#193D33;font-weight:950;overflow-wrap:anywhere;margin-top:.65rem;}
/* Status pill colours match the same green/blue/gold/red/grey key used for staff status right
   across the platform (manager team list, compliance grid) — completed=green, in
   progress=blue, retry=gold, overdue=red, not started/locked=grey. */
.library-module-status{font-size:10px;font-weight:950;border-radius:999px;padding:.28rem .6rem;background:#F4F1E8;color:#665f55;white-space:nowrap;}
.library-module-card.status-completed .library-module-status{background:#E3EEE9;color:#2F6B4F;}
.library-module-card.status-completed .library-module-icon{background:#E3EEE9;color:#2F6B4F;}
.library-module-card.status-in_progress .library-module-status{background:#EAF1FC;color:#2C4E9A;}
.library-module-card.status-in_progress .library-module-icon{background:#EAF1FC;color:#2C4E9A;}
.library-module-card.status-retry .library-module-status{background:#FFF3D6;color:#8A5A00;}
.library-module-card.status-retry .library-module-icon{background:#FFF3D6;color:#8A5A00;}
.library-module-card.status-overdue .library-module-status{background:#F7E5E0;color:#B84A3A;}
.library-module-card.status-overdue .library-module-icon{background:#F7E5E0;color:#B84A3A;}
.library-module-card.status-locked .library-module-status,.library-module-card.status-not_started .library-module-status{background:#F1EFEA;color:#8a8378;}
.library-module-desc{font-size:12.8px;color:#6b655d;line-height:1.4;margin:.25rem 0 .75rem;}
.library-module-meta{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin-top:auto;}
.library-module-pill{font-size:10.5px;letter-spacing:.035em;text-transform:uppercase;background:#F4F1E8;color:#746c61;border-radius:999px;padding:.25rem .55rem;font-weight:950;}
.library-module-pill.gold{background:#FFF8DF;color:#7A5418;border:1px solid #F1D685;}

/* Assigned Learning reuses the same premium library-module-card tiles as the Library tab —
   grid it the same way instead of the older single-column stack so both tabs feel like one
   consistent, premium product rather than two different designs. */
/* Fixed 2 columns — same layout rule as .learning-section-list on the Library tab (not an
   auto-fit/auto-fill grid, which was packing 3 across on wider screens and reading as a
   different layout to the Library). */
.assigned-premium-grid{display:grid !important;flex-direction:unset;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
.assigned-premium-grid .empty-state{grid-column:1/-1;}
@media(max-width:640px){.assigned-premium-grid{grid-template-columns:1fr;}}



/* v50 learner learning-library polish: make it feel like a guided pathway, not a squeezed database list */
#library-grid.modules-grid{display:block !important;width:100%;}
/* Assigned now renders pathway-cards (from the shared learning-groups.js) rather than a flat
   list of module cards, so it needs the same "let the child manage its own grid" treatment
   as #library-grid above — otherwise the old fixed 2-column .modules-grid rule would fight
   the single .pathway-card-grid child for column control. */
#assigned-grid.modules-grid{display:block !important;width:100%;}
#library-grid .learning-section-list{width:100%;max-width:none;}
.learner-library-hero{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(120px,.7fr));gap:.85rem;align-items:stretch;border:1px solid #BFD8FF;background:linear-gradient(135deg,#F4F9FF 0%,#FCFEFF 62%,#FFFDF6 100%);border-radius:24px;padding:1rem;margin:.35rem 0 1rem;box-shadow:0 12px 30px rgba(39,70,64,.06);}
.learner-library-hero-main{padding:.15rem .25rem;}
.learner-library-eyebrow{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#2F5EAB;font-weight:950;margin-bottom:.35rem;}
.learner-library-hero h4{font-size:22px;color:#173D32;margin:.1rem 0 .35rem;letter-spacing:-.025em;line-height:1.1;}
.learner-library-hero p{font-size:13.5px;color:#5f675f;line-height:1.5;margin:0;max-width:700px;}
.learner-library-stat{border:1px solid rgba(36,73,63,.08);background:rgba(255,255,255,.72);border-radius:18px;padding:.85rem .9rem;display:flex;flex-direction:column;justify-content:center;min-height:78px;box-shadow:0 2px 10px rgba(39,70,64,.035);}
.learner-library-stat strong{font-size:24px;line-height:1;color:#A77B00;font-weight:950;letter-spacing:-.03em;}
.learner-library-stat span{margin-top:.3rem;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#6d675b;font-weight:950;}
.library-category-strip{padding:.2rem 0 .1rem;}
.library-count-line{background:#FFFCF4;border:1px solid #EEE5D5;border-radius:16px;padding:.7rem .85rem;margin:.3rem 0 1rem!important;}
.learning-section-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:100%;}
.learn-section{min-width:0;border-radius:24px;background:linear-gradient(135deg,#fff 0%,#FFFCF6 100%);}
.learn-section-head{min-height:150px;align-items:flex-start;border-bottom:0!important;border-radius:24px;background:linear-gradient(135deg,#fff 0%,#FFFBED 100%);}
.learn-section.open .learn-section-head{border-bottom:1px solid #EFE7DA!important;border-radius:24px 24px 0 0;}
.learn-section-icon{width:52px;height:52px;border-radius:18px;font-size:24px;}
.learn-section-title{font-size:18px;}
.learn-section-desc{font-size:13px;max-width:440px;}
.learn-section-body{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));background:#fffdf8;border-top:1px solid #F0E8D9;}
.library-module-card{border-radius:18px;min-height:156px;}
.library-module-title{font-size:16px;}
.library-module-desc{font-size:13px;}
/* Status pill colours for cards inside an opened pathway group are set once, above, so they
   match Assigned Learning and Practical Library exactly — not redefined here. */
@media(max-width:1050px){.learner-library-hero{grid-template-columns:1fr 1fr 1fr}.learner-library-hero-main{grid-column:1/-1}}
@media(max-width:680px){.learner-library-hero{grid-template-columns:1fr}.learner-library-hero h4{font-size:20px}.learn-section-head{min-height:auto}.learning-section-list{gap:.85rem}.library-count-line{font-size:12.5px}.learner-library-stat{min-height:68px}.learner-library-stat strong{font-size:22px}}

/* v51 practical library polish: match the learner library quality and stop toolbox cards being squeezed */
/* v240 (superseding the previous v240 note): the actual mismatch was the card design itself
   (renderModuleCard's stacked .library-module-card vs the Library's .pathway-card), not this
   wrapper's width — see renderToolboxAccordionCard. Toolbox cards now render as .pathway-card
   inside a .pathway-card-grid, same as #library-grid below, so this wrapper goes back to full
   width/no cap to match #library-grid.modules-grid exactly. */
#toolbox-grid.modules-grid{display:block !important;width:100%;}
.practical-library-section{background:transparent;border:0;padding:0;margin-top:.4rem;}
.practical-library-hero{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(120px,.7fr));gap:.85rem;align-items:stretch;border:1px solid #BFD8FF;background:linear-gradient(135deg,#F4F9FF 0%,#FCFEFF 62%,#FFFDF6 100%);border-radius:24px;padding:1rem;margin:.35rem 0 1rem;box-shadow:0 12px 30px rgba(39,70,64,.06);}
.practical-library-hero-main{padding:.15rem .25rem;}
.practical-library-eyebrow{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#2F5EAB;font-weight:950;margin-bottom:.35rem;}
.practical-library-hero h4{font-size:22px;color:#173D32;margin:.1rem 0 .35rem;letter-spacing:-.025em;line-height:1.1;}
.practical-library-hero p{font-size:13.5px;color:#5f675f;line-height:1.5;margin:0;max-width:720px;}
.practical-library-stat{border:1px solid rgba(36,73,63,.08);background:rgba(255,255,255,.76);border-radius:18px;padding:.85rem .9rem;display:flex;flex-direction:column;justify-content:center;min-height:78px;box-shadow:0 2px 10px rgba(39,70,64,.035);}
.practical-library-stat strong{font-size:24px;line-height:1;color:#A77B00;font-weight:950;letter-spacing:-.03em;}
.practical-library-stat span{margin-top:.3rem;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#6d675b;font-weight:950;}
.practice-library-note{max-width:860px;}
.toolbox-library-hero{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid #D8E7DE;background:linear-gradient(135deg,#F5FBF7 0%,#FFFCF4 100%);border-radius:22px;padding:1rem 1.1rem;margin-bottom:1rem;color:#24493F;box-shadow:0 9px 24px rgba(39,70,64,.055);}
.toolbox-library-hero strong{font-size:18px;}
.toolbox-library-hero span{font-size:13.5px;}
.toolbox-hero-stat{background:#fff;border-color:#D8E7DE;color:#24493F;}
.toolbox-card-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:100%;align-items:stretch;}
.practical-toolbox-card{position:relative;width:100%;border:0;border-radius:24px;background:linear-gradient(135deg,#fff 0%,#FFFBED 100%);display:flex;align-items:flex-start;gap:.9rem;text-align:left;padding:1rem 1.1rem;cursor:pointer;font-family:var(--font);min-height:150px;text-decoration:none;color:inherit;box-shadow:0 8px 24px rgba(39,70,64,.055);transition:box-shadow .15s,transform .15s;}
.practical-toolbox-card:hover{box-shadow:0 14px 32px rgba(39,70,64,.11);transform:translateY(-2px);text-decoration:none;}
.practical-toolbox-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:#FDF6E3;color:#7A5418;font-size:24px;box-shadow:inset 0 0 0 1px rgba(232,200,106,.30);flex:0 0 auto;}
.practical-toolbox-copy{min-width:0;flex:1;}
.practical-toolbox-title{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:#24493F;font-size:18px;font-weight:950;line-height:1.15;}
.practical-toolbox-fav-mark{color:#C9970C;font-size:14px;}
.practical-toolbox-desc{display:block;margin-top:.22rem;color:#6a675f;font-size:13px;font-weight:650;line-height:1.35;max-width:440px;}
.practical-toolbox-sub{font-size:11px;color:#8a7d64;font-weight:950;text-transform:uppercase;letter-spacing:.04em;margin-top:.28rem;}
.practical-toolbox-star{border:1px solid #E3DED2;background:#fff;color:#C9970C;border-radius:999px;width:34px;height:34px;display:grid;place-items:center;font-size:17px;line-height:1;cursor:pointer;flex:0 0 auto;position:relative;z-index:2;}
.practical-toolbox-star:hover{background:#FFFBED;border-color:#E8C86A;}
.practical-toolbox-star[aria-pressed="true"]{background:#FFF4C7;color:#9A681C;border-color:#E8C86A;}
.practical-toolbox-chevron{width:34px;height:34px;border-radius:999px;border:1px solid #E3DED2;background:#fff;display:grid;place-items:center;color:#8a7d64;font-weight:900;flex:0 0 auto;pointer-events:none;}
@media(max-width:700px){.toolbox-card-grid{grid-template-columns:1fr}.practical-library-hero{grid-template-columns:1fr}.practical-toolbox-card{min-height:auto}.practical-library-hero h4{font-size:20px}}

.toolbox-library-hero{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid #E8C86A;background:linear-gradient(135deg,#FFFBED 0%,#fff 100%);border-radius:18px;padding:1rem 1.1rem;margin-bottom:1rem;color:#24493F;box-shadow:0 6px 18px rgba(122,84,24,.06);}
.toolbox-library-hero strong{display:block;font-size:17px;font-weight:950;margin-bottom:.18rem;}
.toolbox-library-hero span{display:block;color:#6a675f;font-size:13px;line-height:1.35;}
.toolbox-hero-stat{white-space:nowrap;background:#fff;border:1px solid #E8C86A;color:#7A5418;border-radius:999px;padding:.42rem .75rem;font-weight:950;font-size:12px;}

@media(max-width:980px){.toolbox-library-hero{align-items:flex-start;flex-direction:column;}.library-status-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}.learn-section-body,.toolbox-card-grid,.learning-section-list{grid-template-columns:1fr;}.library-module-top{flex-direction:column;}.library-module-status{white-space:normal;}}
@media(max-width:640px){.learn-section-head{padding:.9rem;}.learn-section-icon,.practical-toolbox-icon{width:36px;height:36px;border-radius:13px;font-size:18px;}.library-pill{padding:.5rem .65rem;font-size:11.5px;}.library-title-row h3{font-size:21px;}}



  @page { size: A4; margin: 18mm; }
  *{box-sizing:border-box}
  body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#f7f8fb;color:#122033;line-height:1.45}
  .page{max-width:960px;margin:0 auto;background:#fff;min-height:100vh;padding:38px 44px;border-top:12px solid #7C94CB;position:relative}
  .brand-row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:3px solid #FBBB62;padding-bottom:22px;margin-bottom:24px}
  .brand h1{margin:0;color:#7C94CB;font-size:34px;letter-spacing:-0.03em}
  .brand p{margin:6px 0 0;color:#122033;font-size:15px;font-weight:700}
  .doc-meta{text-align:right;color:#667085;font-size:12px}
  h2{margin:0 0 6px;color:#122033;font-size:28px}
  .learner{font-size:18px;font-weight:800;color:#7C94CB;margin-bottom:22px}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 28px}
  .stat{border:1px solid #e6e8ee;border-radius:14px;padding:14px;background:#fbfcff;min-height:86px}
  .stat strong{display:block;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
  .stat span{font-size:24px;font-weight:800;color:#122033}
  .stat.accent{background:#FFF7E7;border-color:#FBBB62}
  .stat.accent span{color:#9A681C}
  .section-title{margin:26px 0 10px;font-size:16px;font-weight:900;color:#122033;border-left:5px solid #FBBB62;padding-left:10px}
  .competency-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}
  .competency{border:1px solid #e6e8ee;border-radius:12px;padding:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff}
  .competency span{display:block;color:#667085;font-size:12px;margin-top:3px}
  .competency-score{font-size:22px;font-weight:900;color:#7C94CB;white-space:nowrap}
  table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
  th{background:#7C94CB;color:#fff;text-align:left;padding:11px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
  td{border-bottom:1px solid #e6e8ee;padding:11px 10px;vertical-align:top}
  tr:nth-child(even) td{background:#fbfcff}
  .pill{display:inline-block;background:#eaf7f4;color:#167c6b;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800}
  .muted{color:#667085}
  .note{margin-top:18px;border-radius:12px;background:#f6f8ff;border:1px solid #dfe5ff;padding:13px;color:#43506a;font-size:13px}
  .footer{margin-top:28px;padding-top:14px;border-top:1px solid #e6e8ee;color:#667085;font-size:12px;display:flex;justify-content:space-between;gap:12px}
  @media print{body{background:#fff}.page{padding:0;border-top:10px solid #7C94CB}.no-print{display:none}.stats{break-inside:avoid}.competency-grid{break-inside:avoid}}
  

/* ═══════════════════════════════════════════════
   DRAGONFLY MOBILE OPTIMISATION v8 — app/platform
   Targets learner, manager, admin, builder, module and demo pages.
   ═══════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, a, input, select, textarea { font-family: inherit; }
button, .btn-primary, .btn-secondary, .btn-nav, .btn-nav-ghost, .btn-sm, .tab, .lib-tab, .opt-btn, .continue-btn, .cert-btn, .btn-gold, .btn-outline { min-height: 44px; touch-action: manipulation; }
input, select, textarea { font-size: 16px !important; max-width: 100%; }
.table-scroll-wrap, .completed-table-wrap, .demo-table, .transcript-card { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll-wrap table, .completed-table-wrap table, .demo-table table, .transcript-card table, table.data-table { min-width: 680px; }

@media (max-width: 900px) {
  main, .page, .container, .builder-wrap { width: 100%; max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  .dashboard-grid, .journey-grid, .profile-grid, .learning-journey-grid, .demo-grid, .drill-grid, .tower-grid, .org-summary-main, .form-row-4, .form-row-3, .form-row-2, .assign-mode { grid-template-columns: 1fr !important; }
  .stats-row, .summary-stat-grid, .journey-stats-grid, .competency-grid, .attention-grid, .demo-compliance-grid, .manager-library-grid, .modules-grid, .module-stack, .locked-grid, .pathway-grid, .next-action-grid, .achievement-grid, .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-inner, .hero > div:first-child, .panel-head, .panel-head-space, .transcript-actions, .level-card, .code-banner, .seat-status-card, .demo-module, .demo-card { flex-wrap: wrap; }
  .hero-org { width: 100%; margin-top: 1rem; }
  .library-controls, .list-toolbar, .rankings-toolbar { grid-template-columns: 1fr !important; }
  .list-toolbar .form-group, .library-search, .library-filter { min-width: 0; width: 100%; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  nav { height: auto !important; min-height: 58px; padding: .65rem .85rem !important; gap: .6rem; align-items: center; }
  .nav-brand { min-width: 0; }
  .nav-brand img { max-width: 160px; height: auto !important; object-fit: contain; }
  .nav-right { margin-left: auto; gap: .45rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .nav-user { display: none !important; }
  .btn-nav, .btn-nav-ghost { white-space: nowrap; padding: .55rem .7rem; font-size: 12px; flex: 0 0 auto; }
  main, .page, .container { padding: 1rem .9rem !important; }
  .page-title { font-size: 22px; margin-bottom: 1rem; }
  .hero, .next-action-panel, .attention-panel { border-radius: 18px !important; padding: 1rem !important; margin-bottom: 1rem !important; }
  .hero-greeting, .attention-title, .next-action-panel h2, .hero h1 { font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.12; }
  .hero-sub, .attention-sub, .demo-mode-banner, .example-banner, .manager-example-banner { font-size: 14px; line-height: 1.5; }
  .tabs, .lib-tabs, .review-tabs, .stage-nav, .step-nav, .library-category-strip, .library-filters { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .35rem; padding-bottom: .15rem; scroll-snap-type: x mandatory; }
  .tab, .lib-tab, .review-tab, .stage-btn, .step, .library-pill, .filter-chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .stats-row, .summary-stat-grid, .journey-stats-grid, .competency-grid, .attention-grid, .demo-compliance-grid, .manager-library-grid, .modules-grid, .module-stack, .pathway-grid, .next-action-grid, .achievement-grid, .badge-grid { grid-template-columns: 1fr !important; gap: .85rem !important; }
  .module-card, .manager-module-card, .learning-badge-card, .profile-card, .card, .panel, .achievement-panel, .pathway-card, .stat-card, .summary-stat-card, .journey-stat-card, .competency-card, .demo-preview, .demo-mini-card, .upgrade-card { padding: 1rem !important; border-radius: 14px !important; }
  .module-card-top, .module-top, .mcc-top, .pathway-top, .demo-preview-head, .seat-status-card { flex-direction: column; align-items: flex-start !important; gap: .55rem !important; }
  .module-title, .mcc-title, .manager-module-card h3, .pathway-title { font-size: 16px !important; line-height: 1.25; }
  .module-desc, .manager-module-meta, .module-meta, .pathway-list { font-size: 13px; line-height: 1.5; }
  .module-footer, .module-actions, .manager-module-actions, .attention-actions, .result-actions, .btn-row, .editor-actions, .tower-actions, .org-actions, .demo-modal-head { display: flex; flex-direction: column !important; align-items: stretch !important; gap: .65rem !important; }
  .module-footer a, .module-footer button, .module-actions a, .module-actions button, .manager-module-actions a, .manager-module-actions button, .attention-actions button, .result-actions a, .result-actions button, .btn-row button, .btn-row a, .editor-actions button, .tower-actions button, .org-actions button { width: 100% !important; text-align: center; justify-content: center; }
  .badge, .module-badge, .demo-pill, .pathway-pill { white-space: normal; text-align: center; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .badge-tile { min-width: 0; padding: .75rem .55rem !important; }
  .badge-title { overflow-wrap: anywhere; }
  .heatmap-wrap, .heatmap, .hm-name { min-width: 0; }
  .hm-name { font-size: 12px; }
  .progress-mini, .progress-wrap, .hero-progress { width: 100%; }
  .demo-modal-backdrop { padding: 4rem .75rem .75rem !important; }
  .demo-modal { width: min(100%, 96vw); max-height: 88svh; overflow: auto; }
}

@media (max-width: 420px) {
  main, .page, .container { padding-left: .75rem !important; padding-right: .75rem !important; }
  .nav-brand img { max-width: 135px; }
  .btn-nav, .btn-nav-ghost { padding: .5rem .6rem; font-size: 11px; }
  .stat-num, .summary-stat-value, .journey-stat-value, .competency-score, .impact-score .num { font-size: 28px !important; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .badge-icon { font-size: 19px !important; }
  .badge-title { font-size: 10px !important; }
  .module-meta, .module-footer { flex-direction: column; gap: .35rem; align-items: flex-start; }
  .cpd-ring { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Dashboard toolbox quick access */
.toolbox-quick-panel { margin-bottom: 1rem; }
.toolbox-quick-intro { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 13px; max-width: 680px; }
.toolbox-quick-panel .modules-grid { margin-top: 0.75rem; }
@media (max-width: 640px) {
  .toolbox-quick-panel .panel-head-space { gap: 0.75rem; align-items: stretch; }
  .toolbox-quick-panel .panel-head-space .cert-btn { width: 100%; justify-content: center; }
}



/* v16 polish: practical library status tabs, collapsed toolbox groups, mobile nav all visible */
.practical-status-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:420px; }
.toolbox-lib-group .lib-group-header { background:#FDF6E3; color:#7A5418; }
.toolbox-lib-group .lib-group-header:hover { background:#F7E8BE; }
.toolbox-lib-group .lib-group-body { display:none; }
.toolbox-lib-group.open .lib-group-body { display:grid; }
.toolbox-lib-group .module-card { border-left-color:#C9970C; }
@media(max-width:640px){
  .tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;gap:.25rem;padding:.25rem;border-radius:14px;}
  .tab{justify-content:center;text-align:center;border-right:0!important;border-radius:10px;white-space:normal!important;line-height:1.15;padding:.7rem .35rem;font-size:12px;min-width:0!important;}
  .tab.active{box-shadow:0 2px 8px rgba(201,151,12,.16);}
  .practical-status-tabs{max-width:none;}
}

/* v14 late mobile override: category pills wrap, never horizontal-scroll */
@media (max-width: 760px) {
  .library-category-strip { display:flex !important; flex-wrap:wrap !important; overflow:visible !important; scroll-snap-type:none !important; gap:.45rem !important; }
  .library-category-strip .library-pill { flex:0 1 auto !important; white-space:normal !important; }
}
/* -- badge tier system: bronze/silver/gold/platinum, PlayStation-trophy inspired -- */
.badge-tile{position:relative;overflow:hidden}
.badge-tile.tier-bronze.unlocked{background:linear-gradient(155deg,#EDD9C4 0%,#D3AD86 45%,#B98F65 100%);border-color:#C0996D}
.badge-tile.tier-silver.unlocked{background:linear-gradient(155deg,#F2F4F6 0%,#C7CDD4 45%,#8E9BA8 100%);border-color:#A7B1BC}
.badge-tile.tier-gold.unlocked{background:linear-gradient(155deg,#FCE9AE 0%,#E8B93C 45%,#A67C00 100%);border-color:#C9970C}
.badge-tile.tier-platinum.unlocked{background:linear-gradient(155deg,#FFFFFF 0%,#DCE6F5 35%,#A9BEDE 70%,#7C93BE 100%);border-color:#8FA3C7;box-shadow:0 4px 18px rgba(124,147,190,.35)}
.badge-tile.tier-bronze.unlocked .badge-title,.badge-tile.tier-bronze.unlocked .badge-status{color:#4A3421}
.badge-tile.tier-silver.unlocked .badge-title,.badge-tile.tier-silver.unlocked .badge-status{color:#2E3438}
.badge-tile.tier-gold.unlocked .badge-title,.badge-tile.tier-gold.unlocked .badge-status{color:#3E2E00}
.badge-tile.tier-platinum.unlocked .badge-title,.badge-tile.tier-platinum.unlocked .badge-status{color:#1E2A42}
.badge-tile.unlocked::after{content:'';position:absolute;top:-60%;left:-20%;width:60%;height:220%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);transform:rotate(20deg);pointer-events:none}
.badge-tier-pill{display:inline-block;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;margin-top:.3rem}
.badge-tile.tier-bronze .badge-tier-pill{background:rgba(74,52,33,.14);color:#4A3421}
.badge-tile.tier-silver .badge-tier-pill{background:rgba(46,52,56,.14);color:#2E3438}
.badge-tile.tier-gold .badge-tier-pill{background:rgba(62,46,0,.16);color:#3E2E00}
.badge-tile.tier-platinum .badge-tier-pill{background:rgba(30,42,66,.14);color:#1E2A42}

/* Badge Collection overlay — icon-forward, minimal text on the tile face, click to reveal
   what a badge means and how it's earned (showBadgeDetail). Previously every tile showed its
   full description up front, which turned a "collection to explore" into a wall of paragraphs;
   this keeps the tile itself inviting and pushes the reading into the click-through. */
.badge-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;gap:.9rem!important;}
.badge-gallery-grid .badge-tile{cursor:pointer;appearance:none;font-family:var(--font);border-radius:16px;padding:1.1rem .75rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:transform .14s ease,box-shadow .14s ease;}
.badge-gallery-grid .badge-tile:not(.badge-tile-mystery):hover{transform:translateY(-3px) scale(1.015);box-shadow:0 12px 26px rgba(28,56,50,.16);}
.badge-gallery-grid .badge-icon{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;background:#FFFFFF;font-size:24px;margin:0 0 .5rem;box-shadow:0 3px 10px rgba(28,56,50,.16),inset 0 0 0 1.5px rgba(28,56,50,.06);}
.badge-gallery-grid .badge-tile:not(.unlocked) .badge-icon{background:var(--gray-light);box-shadow:none;}
.badge-gallery-grid .badge-title{font-size:12px;line-height:1.25;min-height:2.3em;display:flex;align-items:center;justify-content:center;}
.badge-gallery-grid .badge-status{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;opacity:.85;}
.badge-gallery-grid .badge-tile:not(.unlocked):not(.badge-tile-mystery){background:var(--off-white);}
.badge-gallery-grid .badge-tile:not(.unlocked):not(.badge-tile-mystery) .badge-title{color:var(--text);}
.badge-tile-mystery{cursor:default;background:linear-gradient(155deg,#EFEAE0 0%,#E4DCCC 100%)!important;border:1px dashed #C9BFA8!important;opacity:1!important;}
.badge-tile-mystery .badge-icon{background:#FFFFFF!important;}
.badge-tile-mystery .badge-title,.badge-tile-mystery .badge-status{color:#7A7364!important;}
@media(max-width:640px){.badge-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.6rem!important;}.badge-gallery-grid .badge-icon{width:44px;height:44px;font-size:20px;}}

/* The compact "Recognition" badge strip on the Journey tab gets the same icon-forward
   treatment on larger screens. Deliberately without !important so the existing, carefully
   tuned mobile rules further down (which shrink this into a dense icon-only scroll strip)
   still win at small widths — this only refines the desktop/tablet view. */
#journey-badge-wall.achievement-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:.7rem;}
#journey-badge-wall .badge-tile{cursor:pointer;border-radius:16px;padding:.9rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:transform .14s ease,box-shadow .14s ease;}
#journey-badge-wall .badge-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(28,56,50,.14);}
#journey-badge-wall .badge-icon{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:#FFFFFF;margin:0 0 .35rem;font-size:19px;box-shadow:0 2px 8px rgba(28,56,50,.14);}
#journey-badge-wall .badge-tile:not(.unlocked) .badge-icon{background:var(--gray-light);box-shadow:none;}
/* most-recent-badge trophy widget */
.recent-badge-card{display:flex;align-items:center;gap:1.1rem;border-radius:var(--radius-lg);padding:1.25rem 1.4rem;margin-bottom:1rem}
.recent-badge-card.tier-bronze{background:linear-gradient(135deg,#EDD9C4,#B98F65)}
.recent-badge-card.tier-silver{background:linear-gradient(135deg,#F2F4F6,#8E9BA8)}
.recent-badge-card.tier-gold{background:linear-gradient(135deg,#FCE9AE,#A67C00)}
.recent-badge-card.tier-platinum{background:linear-gradient(135deg,#FFFFFF,#7C93BE);box-shadow:0 6px 22px rgba(124,147,190,.4)}
.recent-badge-trophy{width:56px;height:56px;border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.16);border:0;cursor:pointer}
.recent-badge-info{flex:1;min-width:0;text-align:left;background:transparent;border:0;padding:0;cursor:pointer;color:inherit;font-family:var(--font)}
.recent-badge-label{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:.2rem}
.recent-badge-title{font-size:1.05rem;font-weight:900;line-height:1.25}
.recent-badge-empty{background:var(--off-white);border:1.5px dashed var(--gray-mid);color:var(--text-muted);text-align:center;padding:1.5rem;border-radius:var(--radius-lg);font-size:.88rem;margin-bottom:1rem}
/* v229 fix: "See all badges" / "View badge collection" was inheriting the generic
   flat .btn-outline treatment (white fill, thin gray border) shared by every plain
   secondary button on the site, so it read as an afterthought rather than a way in
   to the badge collection. Given its own gold-gradient pill so it feels premium,
   using the same accent gradient as the badge/pathway popup top strip elsewhere
   on this page for visual consistency. */
.recent-badge-link{background:linear-gradient(135deg,#C89B5C,#E8C86A)!important;color:#3E2712!important;border:0!important;font-weight:900!important;box-shadow:0 4px 14px rgba(184,130,71,.35)!important;transition:transform .14s ease,box-shadow .14s ease!important;}
.recent-badge-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(184,130,71,.45)!important;background:linear-gradient(135deg,#E8C86A,#C89B5C)!important;text-decoration:none!important;}
/* -- ported from demo-learner.page.css: profile/strengths/CPD summary cards + CPD hours ring, for visual parity with the demo -- */
.profile-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem;margin-bottom:1.5rem;}
.profile-card{background:var(--white);border:1px solid var(--gray-light);border-radius:12px;padding:1.25rem;}
.profile-name{font-size:22px;font-weight:800;color:var(--green);margin-bottom:.35rem;}
.profile-line{font-size:13px;color:var(--text-muted);line-height:1.7;}
.strength-list{display:flex;flex-direction:column;gap:.45rem;}
.strength-item{display:flex;justify-content:space-between;gap:1rem;font-size:13px;padding:.45rem .55rem;border-radius:8px;background:var(--off-white);}
.strength-item strong{color:var(--green);}
.cpd-ring-wrap{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;margin-top:1rem;}
.cpd-ring{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--gold) calc(var(--pct)*1%),var(--gray-light) 0);position:relative;flex-shrink:0;}
.cpd-ring-inner{position:relative;z-index:1;text-align:center;}
.journey-cpd-ring-inner{position:relative;z-index:1;text-align:center;}
.journey-cpd-ring-label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem;}
.cpd-prestige-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.cpd-prestige-badge{display:inline-flex;align-items:center;gap:.3rem;background:linear-gradient(135deg,#FCE9AE,#A67C00);color:#3E2E00;font-weight:900;font-size:12px;padding:.3rem .65rem;border-radius:999px;box-shadow:0 2px 6px rgba(166,124,0,.3)}
.cpd-prestige-none{font-size:12.5px;color:var(--text-muted)}
.cpd-ring-num{font-size:22px;font-weight:800;color:var(--green);line-height:1;}
.cpd-ring-label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem;}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr;}}


/* v144 — Premium learner record action controls */
.completed-table-wrap {
  border-radius: 18px;
  border: 1px solid rgba(38,69,64,.12);
  box-shadow: 0 18px 44px rgba(31,54,49,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,238,.84));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.completed-table {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  min-width: 960px;
}
.completed-table th {
  background: linear-gradient(135deg, #F7F4EA, #EEF8F5);
  color: rgba(38,69,64,.72);
  border-bottom: 1px solid rgba(38,69,64,.10);
  font-weight: 900;
}
.completed-table td {
  vertical-align: middle;
  border-top: 1px solid rgba(38,69,64,.08);
}
.completed-table tbody tr {
  transition: background .16s ease, box-shadow .16s ease;
}
.completed-table tbody tr:hover {
  background: rgba(86,169,162,.065);
}
.learner-record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .42rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.cert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .34rem;
  border-radius: 999px;
  padding: .46rem .72rem;
  min-height: 34px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
  font-family: var(--font);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(50,117,111,.22);
  background: linear-gradient(135deg, #F7FFFF, #E7F6F3);
  color: #245E58;
  box-shadow: 0 8px 18px rgba(35,94,88,.08);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.cert-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(35,94,88,.14);
  border-color: rgba(50,117,111,.38);
  background: linear-gradient(135deg, #FFFFFF, #DDF2EF);
}
.cert-btn:focus-visible {
  outline: 3px solid rgba(86,169,162,.28);
  outline-offset: 2px;
}
.cert-btn-certificate {
  background: linear-gradient(135deg, #FFF8DE, #F0D987);
  border-color: rgba(189,149,36,.38);
  color: #5D4707;
  box-shadow: 0 10px 22px rgba(189,149,36,.12);
}
.cert-btn-certificate:hover {
  background: linear-gradient(135deg, #FFFBEA, #E8C86A);
  box-shadow: 0 14px 28px rgba(189,149,36,.18);
}
.cert-btn-review {
  background: linear-gradient(135deg, #F7FFFF, #E2F5F2);
  border-color: rgba(86,169,162,.36);
  color: #246862;
}
.cert-btn-retake {
  background: #FFFFFF;
  color: var(--green);
  border: 1px solid rgba(38,69,64,.18);
  box-shadow: 0 7px 16px rgba(31,54,49,.06);
}
.cert-btn-retake:hover {
  background: #F8FAF7;
  border-color: rgba(38,69,64,.32);
}
@media (max-width: 760px) {
  .completed-table { min-width: 820px; }
  .learner-record-actions { justify-content: flex-start; gap: .35rem; }
  .cert-btn { padding: .44rem .62rem; font-size: 10.5px; }
}

.learner-record-cell{ text-align:right; }

/* Feedback panel + modal (v152) */
.feedback-panel{background:linear-gradient(135deg,#8a6508,var(--gold-dark));color:white;border-radius:20px;padding:1.15rem 1.35rem;margin:0 0 1.25rem;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.feedback-panel-text h2{font-size:19px;color:white;margin:0 0 .25rem}
.feedback-panel-text p{font-size:13px;color:rgba(255,255,255,.85);margin:0;line-height:1.5;max-width:520px}
.feedback-panel button{flex-shrink:0;background:white;color:var(--gold-dark);border:none;border-radius:999px;padding:.65rem 1.1rem;font-size:13px;font-weight:900;font-family:var(--font);cursor:pointer}
.feedback-panel.submitted{background:linear-gradient(135deg,var(--green-dark),var(--green))}
.feedback-panel.submitted button{color:var(--green-dark)}
.feedback-modal-overlay .star-row button.active{background:var(--gold);color:white}
@media (max-width:640px){.feedback-panel{flex-direction:column;align-items:flex-start}.feedback-panel button{width:100%;text-align:center}}

/* ═══════════════════════════════════════════════
   v179 — Premium mobile learner experience pass
   Aim: app-like mobile layouts; compact dashboards; no clunky admin-table feel.
   Desktop stays largely unchanged.
   ═══════════════════════════════════════════════ */
@media (max-width: 760px) {
  body { background: linear-gradient(180deg,#F8F4EA 0%,#F3ECDE 100%); }
  nav {
    min-height: 58px !important;
    height: auto !important;
    padding: .58rem .78rem !important;
    gap: .55rem !important;
  }
  .nav-brand { flex: 1 1 auto; min-width: 0; }
  .nav-brand img { height: 32px !important; max-width: 155px !important; object-fit: contain !important; }
  .nav-right { flex: 0 0 auto; gap: .38rem !important; flex-wrap: nowrap !important; }
  .btn-nav, .btn-nav-ghost {
    min-height: 38px !important;
    border-radius: 999px !important;
    padding: .45rem .58rem !important;
    font-size: 0 !important;
    width: 39px !important;
    height: 39px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: none !important;
  }
  .btn-nav-ghost::before { content: '🌐'; font-size: 17px; line-height: 1; }
  button.btn-nav::before { content: '⎋'; font-size: 17px; line-height: 1; font-weight: 900; }
  main { padding: .8rem .76rem 3rem !important; width: 100% !important; max-width: 100% !important; }

  .tabs.learner-primary-tabs, .learner-primary-tabs {
    position: sticky;
    top: 58px;
    z-index: 35;
    margin: -.1rem -.1rem .75rem !important;
    border-radius: 17px !important;
    padding: .28rem !important;
    background: rgba(255,255,255,.86) !important;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(39,70,64,.10) !important;
    box-shadow: 0 10px 26px rgba(39,70,64,.08) !important;
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    overflow: visible !important;
    gap: .2rem !important;
  }
  .learner-primary-tabs .tab {
    min-height: 42px !important;
    padding: .52rem .22rem !important;
    border: 0 !important;
    border-radius: 13px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-align: center !important;
    font-weight: 900 !important;
  }
  .learner-primary-tabs .tab.active { background: var(--green) !important; color: white !important; box-shadow: 0 7px 16px rgba(39,70,64,.18) !important; }

  #continue-wrap .continue-card { margin-bottom: .75rem !important; border-radius: 20px !important; padding: .95rem !important; }
  .continue-title { font-size: 15px !important; line-height: 1.25 !important; }
  .continue-meta { font-size: 11.5px !important; }

  .next-action-panel {
    border-radius: 22px !important;
    padding: 1rem !important;
    margin-bottom: .85rem !important;
    box-shadow: 0 14px 34px rgba(28,56,50,.16) !important;
  }
  .next-action-panel h2 { font-size: 22px !important; letter-spacing: -.02em; margin-bottom: .25rem !important; }
  .next-action-panel p { font-size: 13px !important; line-height: 1.35 !important; margin-bottom: .75rem !important; max-width: 100%; }
  .next-action-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: .45rem !important;
  }
  .next-action-card {
    min-height: 78px !important;
    padding: .62rem .45rem !important;
    border-radius: 16px !important;
    text-align: left !important;
  }
  .next-action-card .nac-icon { font-size: 13px !important; margin-bottom: .2rem !important; opacity: .75; }
  .next-action-card strong { font-size: 24px !important; margin-bottom: .25rem !important; }
  .next-action-card span:not(.nac-icon) { font-size: 10.5px !important; line-height: 1.15 !important; display:block; }
  .next-action-panel button {
    min-height: 43px !important;
    margin-top: .72rem !important;
    padding: .52rem .85rem !important;
    font-size: 12px !important;
    width: auto !important;
    max-width: 100%;
  }

  .feedback-panel {
    border-radius: 20px !important;
    padding: .95rem !important;
    margin-bottom: .85rem !important;
  }
  .feedback-panel-text h2 { font-size: 18px !important; letter-spacing: -.01em; }
  .feedback-panel-text p { font-size: 12.5px !important; line-height: 1.38 !important; }

  .dashboard-grid { display: flex !important; flex-direction: column !important; gap: .85rem !important; }
  .panel {
    border-radius: 22px !important;
    padding: 1rem !important;
    box-shadow: 0 10px 28px rgba(39,70,64,.055) !important;
    border-color: rgba(39,70,64,.10) !important;
  }
  .panel-head { margin-bottom: .68rem !important; }
  .panel-kicker { font-size: 10px !important; letter-spacing: .09em !important; }
  .panel h3 { font-size: 18px !important; letter-spacing: -.015em !important; }

  .summary-stat-grid, .journey-stats-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: .52rem !important;
  }
  .summary-stat-card, .journey-stat-card {
    padding: .7rem .64rem !important;
    border-radius: 16px !important;
    min-height: 75px !important;
    background: linear-gradient(135deg,#fff,#FFFCF5) !important;
  }
  .summary-stat-value, .journey-stat-value { font-size: 22px !important; }
  .summary-stat-label, .journey-stat-label { font-size: 9.5px !important; line-height: 1.15 !important; }

  .assigned-group { border-radius: 18px !important; box-shadow: 0 10px 24px rgba(39,70,64,.055) !important; }
  .assigned-group summary { padding: .85rem .9rem !important; font-size: 14px !important; }
  .assigned-group-body { padding: 0 .75rem .8rem !important; gap: .55rem !important; }
  .module-card {
    border-radius: 18px !important;
    padding: .88rem !important;
    margin-bottom: .62rem !important;
    box-shadow: 0 6px 18px rgba(39,70,64,.045) !important;
  }
  .module-card-top { gap: .4rem !important; margin-bottom: .45rem !important; }
  .module-title { font-size: 14.5px !important; line-height: 1.24 !important; margin-bottom: .35rem !important; }
  .module-desc { font-size: 12px !important; line-height: 1.35 !important; margin-bottom: .55rem !important; -webkit-line-clamp: 2 !important; }
  .module-meta { gap: .35rem !important; flex-wrap: wrap !important; font-size: 10.8px !important; }
  .badge { font-size: 10px !important; padding: .22rem .5rem !important; }

  .level-card { gap: .7rem !important; }
  .level-title { font-size: 17px !important; }
  .level-desc { font-size: 12px !important; line-height: 1.35 !important; }
  .impact-score { min-width: 0 !important; padding: .65rem .7rem !important; border-radius: 16px !important; }
  .impact-score .num { font-size: 26px !important; }

  /* Learning Journey: compact recognition and no endless badge wall */
  .profile-grid { gap: .65rem !important; margin-bottom: .8rem !important; }
  .profile-card { padding: .85rem !important; border-radius: 18px !important; }
  .profile-card h3 { font-size: 15px !important; }
  .profile-name { font-size: 18px !important; }
  .journey-grid { display: flex !important; flex-direction: column !important; gap: .85rem !important; }
  #journey-badge-wall.achievement-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: .42rem !important;
    max-height: 268px !important;
    overflow: auto !important;
    padding-right: .15rem !important;
    -webkit-overflow-scrolling: touch;
  }
  #journey-badge-wall::after { content:''; display:block; height:1px; }
  .achievement-panel, #tab-journey .panel { border-radius: 22px !important; }
  .badge-tile {
    min-height: 70px !important;
    border-radius: 15px !important;
    padding: .42rem .25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .badge-icon { font-size: 18px !important; margin-bottom: .18rem !important; }
  .badge-title { font-size: 9.5px !important; line-height: 1.05 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .badge-status, .badge-tier-pill { display: none !important; }
  .recent-badge-card { border-radius: 18px !important; padding: .82rem !important; margin-bottom: .65rem !important; gap: .75rem !important; }
  .recent-badge-trophy { width: 44px !important; height: 44px !important; font-size: 22px !important; }
  .recent-badge-title { font-size: 14px !important; }

  /* Learning record: mobile cards replace wide tables */
  .desktop-record-table { display: none !important; }
  .learning-record-mobile-list { display: grid !important; gap: .65rem !important; }
  .record-card {
    border: 1px solid rgba(39,70,64,.10);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(39,70,64,.045);
  }
  .record-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .86rem .92rem;
  }
  .record-card summary::-webkit-details-marker { display: none; }
  .record-card-main { min-width: 0; display: grid; gap: .12rem; }
  .record-card-main strong { color: var(--green); font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
  .record-card-main em { color: var(--text-muted); font-size: 11px; font-style: normal; font-weight: 800; }
  .record-score { flex: 0 0 auto; border-radius: 999px; background: var(--success-light); color: var(--success); padding: .35rem .55rem; font-weight: 950; font-size: 12px; }
  .record-card-body { border-top: 1px solid rgba(39,70,64,.08); padding: .78rem .88rem .88rem; background: #FFFCF7; }
  .record-meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; margin-bottom:.65rem; }
  .record-meta-grid div { background:#fff; border:1px solid rgba(39,70,64,.08); border-radius:13px; padding:.55rem; }
  .record-meta-grid span, .record-reflection span { display:block; color:var(--text-muted); font-size:9px; font-weight:950; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.12rem; }
  .record-meta-grid strong { color:var(--green); font-size:12px; }
  .record-reflection { background:#fff; border:1px solid rgba(39,70,64,.08); border-radius:13px; padding:.62rem; margin-bottom:.65rem; }
  .record-reflection p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.35; }
  .record-card .learner-record-actions { display:grid !important; grid-template-columns:1fr !important; gap:.45rem !important; justify-content:stretch !important; }
  .record-card .cert-btn { width:100% !important; min-height:42px !important; border-radius:13px !important; font-size:12px !important; padding:.55rem .65rem !important; }

  #yoy-wrap { border: 1px solid rgba(39,70,64,.10); border-radius: 18px; background:#fff; padding:.82rem; }
  #yoy-wrap .table-scroll-wrap { border-radius: 14px; }
}
@media (min-width: 761px) { .learning-record-mobile-list { display:none !important; } }
@media (max-width: 380px) {
  .learner-primary-tabs .tab { font-size: 10.4px !important; }
  .next-action-grid { gap: .35rem !important; }
  .next-action-card { padding: .55rem .35rem !important; }
  #journey-badge-wall.achievement-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}

/* ═══════════════════════════════════════════════
   v181 — Learning Journey badge redesign for mobile
   Turns the badge area from a giant wall into compact recognition tiles.
   ═══════════════════════════════════════════════ */
@media (max-width:760px){
  #tab-journey .achievement-panel,
  #tab-journey .panel:has(#journey-badge-wall){
    overflow:hidden !important;
  }
  #recent-badge-wrap{margin-top:.3rem !important;}
  .recent-badge-card{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    align-items:center !important;
    gap:.72rem !important;
    padding:.82rem !important;
    border-radius:18px !important;
    margin-bottom:.7rem !important;
  }
  .recent-badge-trophy{width:44px !important;height:44px !important;font-size:22px !important;grid-row:1 / span 2;}
  .recent-badge-info{min-width:0 !important;}
  .recent-badge-label{font-size:9px !important;letter-spacing:.08em !important;line-height:1.15 !important;margin-bottom:.16rem !important;}
  .recent-badge-title{font-size:14px !important;line-height:1.18 !important;white-space:normal !important;overflow-wrap:normal !important;}
  .recent-badge-card .btn-sm,
  .recent-badge-card .btn-outline,
  .recent-badge-link{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-height:42px !important;
    border-radius:14px !important;
    padding:.58rem .7rem !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:13px !important;
    background:rgba(255,255,255,.58) !important;
  }
  #journey-badge-wall.achievement-grid{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:.42rem !important;
    max-height:210px !important;
    overflow:auto !important;
    padding:.1rem .08rem .2rem !important;
    -webkit-overflow-scrolling:touch;
  }
  #journey-badge-wall .badge-tile{
    min-height:62px !important;
    aspect-ratio:1 / 1.08 !important;
    border-radius:14px !important;
    padding:.34rem .18rem !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #journey-badge-wall .badge-icon{font-size:19px !important;line-height:1 !important;margin:0 0 .14rem !important;}
  #journey-badge-wall .badge-title{
    font-size:8.8px !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
    max-width:100% !important;
    text-align:center !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  #journey-badge-wall .badge-desc,
  #journey-badge-wall .badge-status,
  #journey-badge-wall .badge-tier-pill{display:none !important;}
  #journey-badge-wall .badge-tile:not(.unlocked){opacity:.5 !important;background:#fff !important;filter:saturate(.75);}
  #journey-badge-wall .badge-tile:not(.unlocked) .badge-title{color:#7a756f !important;}
  #badge-gallery-overlay{padding:.85rem !important;}
  #badge-gallery-overlay > div:last-child{border-radius:22px !important;padding:1rem !important;}
  #badge-gallery-overlay .achievement-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:.5rem !important;}
  #badge-gallery-overlay .badge-tile{min-height:98px !important;padding:.52rem .28rem !important;}
  #badge-gallery-overlay .badge-desc{display:none !important;}
}
@media (max-width:390px){
  #journey-badge-wall.achievement-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}

/* ═══════════════════════════════════════════════
   v181 — Final mobile nav + badge correction
   Loaded after earlier dashboard mobile rules so it wins.
   ═══════════════════════════════════════════════ */
@media (max-width:760px){
  nav{min-height:62px!important;padding:.58rem .78rem!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:.55rem!important;overflow:visible!important;}
  nav .nav-brand{flex:1 1 auto!important;justify-content:center!important;min-width:0!important;}
  nav .nav-brand img{height:32px!important;max-width:176px!important;object-fit:contain!important;}
  nav .nav-menu-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;min-width:44px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.10)!important;color:#FFFDF7!important;font-size:0!important;line-height:1!important;font-weight:950!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;}
  nav .nav-menu-toggle::before{content:'☰';font-size:24px;line-height:1;}
  nav.menu-open .nav-menu-toggle::before{content:'×';font-size:28px;}
  nav .nav-right{display:none!important;position:absolute!important;top:calc(100% + .45rem)!important;left:.72rem!important;right:.72rem!important;width:auto!important;z-index:1000!important;padding:.62rem!important;border-radius:20px!important;background:rgba(28,56,50,.98)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 18px 44px rgba(0,0,0,.28)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:.44rem!important;}
  nav.menu-open .nav-right{display:flex!important;}
  nav .nav-user{display:block!important;order:-1;width:100%!important;padding:.55rem .65rem .7rem!important;margin:0 0 .12rem!important;border-bottom:1px solid rgba(255,255,255,.10)!important;color:rgba(255,253,247,.72)!important;font-size:12px!important;line-height:1.25!important;}
  nav .nav-user strong{display:block!important;color:#FFFDF7!important;font-size:13px!important;margin-top:.12rem!important;}
  nav .btn-nav,nav .btn-nav-ghost,nav .nav-back{width:100%!important;height:auto!important;min-height:46px!important;font-size:14px!important;border-radius:14px!important;padding:.72rem .85rem!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.13)!important;color:#FFFDF7!important;box-shadow:none!important;}
  nav .btn-nav-ghost::before,nav button.btn-nav::before{content:none!important;}

  /* badges: make recognition feel like a compact app section, not a wall */
  #tab-journey .panel:has(#journey-badge-wall){padding:.95rem!important;}
  #recent-badge-wrap{margin:.15rem 0 .55rem!important;}
  .recent-badge-card{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center!important;gap:.58rem!important;padding:.62rem!important;border-radius:16px!important;margin-bottom:.55rem!important;min-height:58px!important;}
  .recent-badge-trophy{width:38px!important;height:38px!important;font-size:20px!important;grid-row:auto!important;}
  .recent-badge-label{font-size:8px!important;letter-spacing:.08em!important;margin:0 0 .05rem!important;line-height:1.05!important;}
  .recent-badge-title{font-size:12.5px!important;line-height:1.1!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .recent-badge-link{grid-column:auto!important;width:auto!important;min-height:38px!important;white-space:nowrap!important;padding:.48rem .62rem!important;border-radius:999px!important;font-size:0!important;background:linear-gradient(135deg,#C89B5C,#E8C86A)!important;color:#3E2712!important;}
  .recent-badge-link::after{content:'All →';font-size:12px;font-weight:950;color:#3E2712;}
  #journey-badge-wall.achievement-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:.34rem!important;max-height:154px!important;overflow:auto!important;padding:.05rem .02rem .18rem!important;-webkit-overflow-scrolling:touch;}
  #journey-badge-wall .badge-tile{min-height:50px!important;aspect-ratio:1/1!important;border-radius:12px!important;padding:.24rem .12rem!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  #journey-badge-wall .badge-icon{font-size:19px!important;margin:0!important;}
  #journey-badge-wall .badge-title,#journey-badge-wall .badge-desc,#journey-badge-wall .badge-status,#journey-badge-wall .badge-tier-pill{display:none!important;}
  #journey-badge-wall .badge-tile:not(.unlocked){opacity:.38!important;background:#fff!important;filter:grayscale(.25) saturate(.55)!important;}
  #badge-gallery-overlay .achievement-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.42rem!important;}
  #badge-gallery-overlay .badge-tile{min-height:78px!important;border-radius:14px!important;padding:.42rem .2rem!important;}
  #badge-gallery-overlay .badge-icon{font-size:20px!important;}
  #badge-gallery-overlay .badge-title{font-size:8.8px!important;}
  #badge-gallery-overlay .badge-desc,#badge-gallery-overlay .badge-status{display:none!important;}
}
@media (max-width:390px){#journey-badge-wall.achievement-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;}}

/* ═══════════════════════════════════════════════
   v228 fix: the badge detail popup (.badge-detail-overlay and friends) was accidentally
   declared only inside the @media(max-width:760px) mobile block below, so on any desktop-width
   screen none of this CSS ever applied — clicking a badge opened the popup's real content with
   zero styling, appended in plain document flow (hence it appearing as unstyled text stuck at
   the bottom-left of the page instead of a centred modal). Moved out here so it always applies,
   matching manager.page.css's equivalent (which was never scoped to mobile and always worked).
   ═══════════════════════════════════════════════ */
.badge-detail-overlay{position:fixed;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center;padding:1rem;}
.badge-detail-backdrop{position:absolute;inset:0;background:rgba(10,28,24,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.badge-detail-card{position:relative;width:min(92vw,390px);background:#FFFDF7;border:1px solid rgba(255,255,255,.65);border-radius:24px;padding:1.25rem;box-shadow:0 26px 80px rgba(0,0,0,.34);text-align:center;overflow:hidden;}
.badge-detail-card::before{content:'';position:absolute;inset:0 0 auto 0;height:9px;background:linear-gradient(90deg,#B98247,#E8C86A,#A7B1BC);}
.badge-detail-close{position:absolute;top:.7rem;right:.75rem;border:none;background:rgba(28,56,50,.06);color:var(--green);width:34px;height:34px;border-radius:999px;font-size:22px;line-height:1;cursor:pointer;}
.badge-detail-icon{width:68px;height:68px;margin:.35rem auto .7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFFFFF;box-shadow:0 4px 14px rgba(28,56,50,.12),inset 0 0 0 1px rgba(28,56,50,.08);font-size:34px;}
.badge-detail-tier{font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.11em;color:var(--gold-dark);margin-bottom:.45rem;}
.badge-detail-card h2{font-size:22px!important;line-height:1.12!important;margin:.15rem 0 .65rem!important;color:var(--green-dark)!important;}
.badge-detail-card p{font-size:14px!important;line-height:1.45!important;color:var(--text-muted)!important;margin:0 0 .9rem!important;}
.badge-detail-meta{display:grid;grid-template-columns:1fr;gap:.45rem;margin-top:.85rem;}
.badge-detail-meta span{border:1px solid rgba(28,56,50,.09);background:#fff;border-radius:999px;padding:.55rem .7rem;font-size:12px;font-weight:900;color:var(--green);}

@media (max-width:760px){
  nav .nav-menu-toggle{width:42px!important;height:42px!important;min-width:42px!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:10px!important;padding:0!important;}
  nav .nav-menu-toggle:active{background:rgba(255,255,255,.08)!important;}
  #journey-badge-wall .badge-tile,
  #badge-gallery-overlay .badge-tile{appearance:none;-webkit-appearance:none;border:1px solid rgba(28,56,50,.10);font-family:var(--font);cursor:pointer;text-align:center;}
  #badge-gallery-overlay .badge-tile:not([onclick]){cursor:default;}
  #badge-gallery-overlay .badge-status{display:block!important;font-size:8px!important;line-height:1.05!important;margin-top:.15rem!important;opacity:.75!important;}
  #badge-gallery-overlay .badge-desc{display:none!important;}

  /* Put renewal comparison at the bottom and remove its mobile sideways table. */
  .renewal-record-panel{border:1px solid rgba(39,70,64,.10);border-radius:20px;background:#fff;padding:.9rem!important;box-shadow:0 8px 22px rgba(39,70,64,.045);}
  .renewal-record-head{display:grid;gap:.25rem;margin-bottom:.7rem;}
  .renewal-record-head h3{font-size:18px!important;margin:0!important;color:var(--green)!important;}
  .renewal-record-head p{font-size:12px!important;line-height:1.35!important;color:var(--text-muted)!important;margin:0!important;}
  #yoy-wrap .yoy-table-wrap{display:none!important;}
  .yoy-mobile-list{display:grid!important;gap:.55rem!important;}
  .renewal-card{border:1px solid rgba(39,70,64,.10);border-radius:16px;background:#FFFCF7;overflow:hidden;}
  .renewal-card summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.65rem;padding:.75rem .82rem;cursor:pointer;}
  .renewal-card summary::-webkit-details-marker{display:none;}
  .renewal-card summary span{font-size:13px;font-weight:900;color:var(--green);line-height:1.18;overflow-wrap:anywhere;}
  .renewal-card summary strong{flex:0 0 auto;background:var(--success-light);color:var(--success);border-radius:999px;padding:.32rem .55rem;font-size:12px;}
  .renewal-card-body{border-top:1px solid rgba(39,70,64,.08);display:grid;grid-template-columns:1fr 1fr;gap:.45rem;padding:.65rem;background:#fff;}
  .renewal-card-body div{border:1px solid rgba(39,70,64,.08);border-radius:12px;padding:.55rem;background:#FFFCF7;}
  .renewal-card-body small{display:block;font-size:8.5px;font-weight:950;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:.14rem;}
  .renewal-card-body strong{font-size:11.5px;color:var(--green);line-height:1.25;}
  .renewal-status{display:inline-flex;align-items:center;border-radius:999px;padding:.2rem .45rem;font-size:10px!important;font-weight:950!important;margin-right:.25rem;}
  .renewal-status.locked{background:var(--success-light);color:var(--success);}
  .renewal-status.pending{background:var(--gold-light);color:var(--gold-dark);}
}
@media (min-width:761px){.yoy-mobile-list{display:none!important;}.renewal-record-panel{border:1px solid rgba(39,70,64,.10);border-radius:18px;background:#fff;padding:1rem;}.renewal-record-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.8rem}.renewal-record-head p{max-width:430px;font-size:13px;color:var(--text-muted);margin:0;text-align:right}}

/* v183 — compact assigned learning accordion and mobile hero spacing */
.assigned-group summary{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:.55rem !important;
}
.assigned-group summary > span:first-child{min-width:0;}
.assigned-group-count{
  justify-self:end !important;
  margin-left:auto !important;
}
.assigned-group summary:after{
  margin-left:0 !important;
}
@media (max-width:760px){
  .assigned-group summary{
    padding:.78rem .8rem !important;
    gap:.48rem !important;
  }
  .assigned-group-count{
    font-size:11px !important;
    padding:.18rem .48rem !important;
  }
}


/* ═══════════════════════════════════════════════
   v184 — Learner mobile compact practical library + final menu override
   ═══════════════════════════════════════════════ */
@media (max-width:760px){
  /* beat earlier dashboard.page.css dropdown menu rules */
  nav .nav-menu-toggle{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:10px!important;width:42px!important;height:42px!important;min-width:42px!important;font-size:0!important;position:relative!important;z-index:1201!important;}
  nav .nav-menu-toggle::before{content:'☰'!important;font-size:29px!important;line-height:1!important;}
  nav.menu-open .nav-menu-toggle::before{content:'×'!important;font-size:34px!important;}
  nav .nav-right{display:none!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1200!important;padding:calc(env(safe-area-inset-top,0px) + 72px) 18px calc(env(safe-area-inset-bottom,0px) + 22px)!important;margin:0!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,#17362F 0%,#102E29 100%)!important;box-shadow:none!important;overflow-y:auto!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:10px!important;}
  nav.menu-open .nav-right{display:flex!important;}
  nav .nav-right::before{content:'Dragonfly menu'!important;position:static!important;display:block!important;margin:0 0 2px!important;color:rgba(255,253,247,.86)!important;font-size:12px!important;letter-spacing:.17em!important;text-transform:uppercase!important;font-weight:950!important;}
  nav .app-menu-links{display:flex!important;flex-direction:column!important;gap:8px!important;order:1!important;width:100%!important;}
  nav .app-menu-link{min-height:50px!important;border-radius:15px!important;font-size:15.5px!important;padding:0 14px!important;background:rgba(255,255,255,.065)!important;border:1px solid rgba(255,255,255,.12)!important;}
  nav .nav-user{order:0!important;padding:0 0 12px!important;margin:0 0 8px!important;border-bottom:1px solid rgba(255,255,255,.12)!important;}
  nav .nav-signout{order:2!important;margin-top:6px!important;background:#FFFDF7!important;color:#17362F!important;border-color:#FFFDF7!important;justify-content:center!important;}

  /* Practical Library: keep content, but stop wasting a whole phone screen */
  #tab-practical .panel.panel-wide{padding:1rem!important;border-radius:22px!important;}
  #tab-practical .panel-head{margin-bottom:.7rem!important;}
  #tab-practical .panel-kicker{font-size:10px!important;letter-spacing:.15em!important;margin-bottom:.28rem!important;}
  #tab-practical .library-title-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.65rem!important;}
  #tab-practical .library-title-row h3{font-size:27px!important;line-height:1.08!important;margin:0!important;letter-spacing:-.035em!important;}
  #tab-practical .library-search-toggle{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important;font-size:19px!important;background:#FFFCF4!important;}
  #tab-practical .practice-library-note{font-size:15.5px!important;line-height:1.42!important;margin:.55rem 0 0!important;color:#5f675f!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  #tab-practical .library-search-row{margin:.55rem 0!important;}
  #tab-practical .practical-library-hero{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.5rem!important;border-radius:18px!important;padding:.72rem!important;margin:.65rem 0 .75rem!important;box-shadow:0 8px 20px rgba(39,70,64,.045)!important;}
  #tab-practical .practical-library-hero-main{grid-column:1/-1!important;padding:0!important;}
  #tab-practical .practical-library-eyebrow{font-size:10px!important;letter-spacing:.12em!important;margin-bottom:.2rem!important;}
  #tab-practical .practical-library-hero h4{font-size:19px!important;line-height:1.12!important;margin:0!important;}
  #tab-practical .practical-library-hero p{display:none!important;}
  #tab-practical .practical-library-stat{min-height:58px!important;border-radius:14px!important;padding:.58rem .52rem!important;box-shadow:none!important;}
  #tab-practical .practical-library-stat strong{font-size:24px!important;line-height:.95!important;}
  #tab-practical .practical-library-stat span{font-size:8.7px!important;letter-spacing:.07em!important;margin-top:.28rem!important;line-height:1.05!important;}
  #tab-practical .practical-status-tabs{margin:.65rem 0 .5rem!important;border-radius:18px!important;padding:.18rem!important;}
  #tab-practical .library-status-tab{min-height:45px!important;border-radius:15px!important;font-size:14px!important;}
}
@media (max-width:390px){
  #tab-practical .library-title-row h3{font-size:24px!important;}
  #tab-practical .practice-library-note{font-size:14.5px!important;-webkit-line-clamp:2!important;}
  #tab-practical .practical-library-stat strong{font-size:21px!important;}
  #tab-practical .practical-library-stat span{font-size:7.8px!important;}
}

/* v221: Applied modules are visible but locked until the matching Foundation is complete */
.library-module-card.status-locked,
.module-card.status-locked {
  border-style: dashed !important;
  border-color: rgba(28,56,50,.28) !important;
  background: linear-gradient(180deg, rgba(248,246,241,.92), rgba(255,255,255,.96)) !important;
  cursor: not-allowed !important;
}
.library-module-card.status-locked:hover,
.module-card.status-locked:hover {
  transform: none !important;
  box-shadow: none !important;
}
.badge-locked,
.library-module-status:has(+ .unused-selector) {
  background: #F8F6F1;
  color: #274640;
  border: 1px solid #D8D2C5;
}
.library-lock-note {
  margin: .65rem 0 .25rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  background: #F8F6F1;
  border: 1px solid #E8E1D3;
  color: #274640;
  font-size: 12.5px;
  line-height: 1.35;
}
/* v231: the old .library-lock-note sentence sat permanently in the card, reading as
   "cumbersome" and made the whole card look like a plain clickable link on hover (see the
   text-decoration:none hover fixes above). Replaced with a small padlock badge that reveals
   the same explanation as a tooltip on hover/focus — nothing shows until you interact with it. */
.library-lock-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#F1EFEA;color:#5C5548;font-size:13px;cursor:default;}
.library-lock-tip{position:absolute;top:calc(100% + 9px);right:0;min-width:190px;max-width:230px;background:#1C3832;color:#FFFDF7;font-size:11.5px;font-weight:750;line-height:1.4;padding:.6rem .75rem;border-radius:11px;box-shadow:0 12px 28px rgba(0,0,0,.24);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease,visibility .14s;z-index:6;pointer-events:none;text-align:left;}
.library-lock-tip strong{color:#F8EBC6;}
.library-module-card.status-locked:hover .library-lock-tip,
.library-module-card.status-locked:focus .library-lock-tip,
.library-module-card.status-locked:focus-within .library-lock-tip,
.module-card.status-locked:hover .library-lock-tip,
.module-card.status-locked:focus-within .library-lock-tip,
.library-lock-badge:hover .library-lock-tip,
.library-lock-badge:focus .library-lock-tip{
  opacity:1;visibility:visible;transform:translateY(0);
}
.module-card-top{position:relative;}
.library-module-card.status-locked .library-module-status {
  background: #F8F6F1;
  color: #274640;
  border: 1px solid #D8D2C5;
}
/* v233: toolbox favouriting, now on the same shared card every other module uses (see
   renderModuleCard) instead of a separate .practical-toolbox-card component — sits in the
   same top-row corner a locked module's padlock badge does. */
.library-fav-star{position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:0;background:#F1EFEA;color:#8a8378;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,background .12s ease,color .12s ease;}
.library-fav-star:hover{transform:scale(1.08);background:#FDF3DA;color:#B98247;}
.library-fav-star.is-fav{background:#FDF3DA;color:#B98247;box-shadow:inset 0 0 0 1px rgba(185,130,71,.35);}