/* ============================================================
 * tiko-mt.css  -  master-trainer dashboards (mt-dashboard.html desktop, mt-dashboard-m.html phone)
 * Layer on top of tiko-ui.css (link tiko-ui.css first). Everything is .mt-* so nothing clashes.
 * Same rules as tiko-ui.css: every var() has a light fallback, no :has(), flex margins instead of gap on phone-visible
 * parts, safe-area insets, 44px targets, reduced-motion respected. Light theme only.
 * ============================================================ */

html.mt-lock, html.mt-lock body { overflow: hidden; }
.mt-m, .mt-d { margin: 0; font-family: var(--tk-font, 'Plus Jakarta Sans', 'Noto Sans Ethiopic', sans-serif); color: var(--tk-ink, #1f2937); background: var(--tk-bg, #faf7fb); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.mt-m *, .mt-d * { box-sizing: border-box; }
.mt-m button, .mt-d button, .mt-m input, .mt-d input, .mt-m select, .mt-d select, .mt-m textarea, .mt-d textarea { font-family: inherit; }
.mt-m [hidden], .mt-d [hidden] { display: none !important; }
.mt-m button:focus, .mt-d button:focus, .mt-m select:focus, .mt-d select:focus, .mt-m input:focus, .mt-d input:focus, .mt-m textarea:focus, .mt-d textarea:focus, .mt-m a:focus, .mt-d a:focus { outline: 3px solid var(--tk-focus, #f5b800); outline-offset: 2px; }
.mt-m button:focus:not(:focus-visible), .mt-d button:focus:not(:focus-visible) { outline: 0; }
.mt-m .tk-btn i, .mt-d .tk-btn i { margin-right: 6px; font-size: 17px; }
.mt-muted { color: var(--tk-ink-2, #4b5563); font-size: 13px; font-weight: 600; margin: 0 0 10px; overflow-wrap: anywhere; }
.mt-x { display: none; }
.no-ph .mt-x { display: inline; }   /* icon font blocked: show a plain x */

/* ---------- banners ---------- */
.mt-offline { position: sticky; top: 0; z-index: 60; background: #92400e; color: #fff; font-size: 12px; font-weight: 800; text-align: center; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.mt-previewbar { position: sticky; top: 0; z-index: 61; background: #2d0c34; color: #fff; font-size: 12px; font-weight: 700; padding: 8px 12px; text-align: center; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.mt-previewbar b { color: #ffd166; }
.mt-previewbar button { margin-left: 10px; min-height: 32px; border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; border-radius: 99px; padding: 0 12px; font-weight: 800; font-size: 12px; cursor: pointer; }

/* ---------- chips / avatars / dots ---------- */
.mt-chip { margin: 0 6px 6px 0; white-space: normal; text-align: left; max-width: 100%; }
.mt-chip i { flex-shrink: 0; }
.mt-av { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0; font-weight: 800; font-size: 14px; color: #fff; background: #702082; background: var(--tk-purple, #702082); }
.mt-av.is-red { background: #dc2626; } .mt-av.is-gold { background: #D97706; } .mt-av.is-green { background: #0f8a65; } .mt-av.is-purple { background: #702082; }
.mt-dots { display: inline-block; line-height: 0; white-space: nowrap; }
.mt-sd { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 3px 0 0; font-size: 0; vertical-align: middle; background: #e5e7eb; border: 2px solid #e5e7eb; box-sizing: border-box; }
.mt-dots.has-num .mt-sd, .mt-srow .mt-sd { width: 22px; height: 22px; line-height: 18px; font-size: 10px; font-weight: 800; text-align: center; color: #6b7280; margin-right: 3px; }
.mt-sd.is-started { background: #fff; border-color: #702082; color: #702082 !important; }
.mt-sd.is-struggled { background: #fee2e2; border-color: #dc2626; color: #991b1b !important; }
.mt-sd.is-done { background: #1D9E75; border-color: #1D9E75; color: #fff !important; }
.mt-sd.is-done_struggled { background: #1D9E75; border-color: #D97706; color: #fff !important; box-shadow: 0 0 0 1.5px #D97706; }
.mt-sd.is-current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #702082; }
.mt-sd.is-done_struggled.is-current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #702082; }
.mt-dots:not(.has-num) .mt-sd.is-current { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #702082; }

/* ---------- skeleton / empty ---------- */
.mt-skel { background: var(--tk-surface, #fff); border: 2px solid var(--tk-line, #ece4f0); border-radius: 22px; padding: 14px; margin: 0 0 12px; overflow: hidden; }
.mt-skel i { display: block; height: 12px; border-radius: 6px; margin: 8px 0; background: #ece4f0; background: linear-gradient(90deg, #ece4f0 25%, #f6f0f9 50%, #ece4f0 75%); background-size: 200% 100%; -webkit-animation: mtShim 1.3s linear infinite; animation: mtShim 1.3s linear infinite; }
.mt-skel i:nth-child(1) { width: 60%; height: 16px; } .mt-skel i:nth-child(2) { width: 90%; } .mt-skel i:nth-child(3) { width: 40%; }
.mt-skel-line { padding: 4px 14px; }
@-webkit-keyframes mtShim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes mtShim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.mt-empty { text-align: center; padding: 28px 16px; color: var(--tk-ink-2, #4b5563); font-size: 14px; font-weight: 600; background: var(--tk-surface, #fff); border: 2px dashed var(--tk-edge, #dcc9e3); border-radius: 22px; margin: 0 0 14px; }
.mt-empty b { display: block; color: var(--tk-ink, #1f2937); font-size: 15px; font-weight: 800; margin: 6px 0 4px; }
.mt-empty span { display: block; overflow-wrap: anywhere; }
.mt-empty .mt-empty-ic { font-size: 38px; color: #a349b8; margin: 0; }
.mt-empty.is-err .mt-empty-ic { color: #dc2626; }
.mt-empty .tk-btn { margin-top: 12px; }

/* ---------- Needs-you card ---------- */
.mt-fcard { position: relative; background: var(--tk-surface, #fff); border: 2px solid var(--tk-line, #ece4f0); border-bottom: 5px solid var(--tk-edge, #dcc9e3); border-left: 6px solid #702082; border-radius: 22px; padding: 12px; margin: 0 0 12px; }
.mt-fcard.is-red { border-left-color: #dc2626; } .mt-fcard.is-gold { border-left-color: #D97706; } .mt-fcard.is-green { border-left-color: #1D9E75; }
.mt-fcard.is-snoozed { opacity: 0.72; }
.mt-fc-main { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; min-height: 48px; padding: 0; margin: 0 0 8px; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; }
.mt-fc-main:active .mt-fc-name { text-decoration: underline; }
.mt-fc-body { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin: 0 8px 0 12px; }
.mt-fc-name { display: block; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.mt-fc-sub { display: block; font-size: 12px; font-weight: 700; color: var(--tk-ink-2, #4b5563); margin-top: 1px; overflow-wrap: anywhere; }
.mt-fc-end { text-align: right; flex-shrink: 0; }
.mt-fc-end b { display: block; font-size: 16px; font-weight: 800; color: var(--tk-purple, #702082); }
.mt-fc-end i { display: block; font-size: 10px; font-style: normal; font-weight: 700; color: var(--tk-ink-3, #6b7280); }
.mt-fc-chips { margin: 0 0 4px; }
.mt-fc-strip { margin: 2px 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 5px 4px 6px; }
.mt-fc-meta { font-size: 11px; font-weight: 700; color: var(--tk-ink-3, #6b7280); margin: 0 0 8px; }
.mt-fc-meta span { display: inline-block; margin-right: 12px; }
.mt-fc-meta i { margin-right: 3px; font-size: 13px; vertical-align: -2px; }
.mt-fc-sug { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; background: #fffbea; border: 1.5px solid #fcd34d; border-radius: 14px; padding: 8px 10px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #78350f; }
.mt-fc-sug i { flex-shrink: 0; font-size: 18px; margin: 1px 8px 0 0; color: #D97706; }
.mt-fc-sug span { min-width: 0; overflow-wrap: anywhere; }
.mt-fc-primary { margin: 0 0 6px; }
.mt-fc-primary .mt-primary { width: 100%; height: auto; min-height: 44px; padding: 8px 14px; border-radius: 14px; white-space: normal; line-height: 1.25; }
.mt-fc-acts { display: -webkit-box; display: -webkit-flex; display: flex; margin: 0 -2px; }
.mt-ab { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; min-height: 50px; margin: 0 2px; padding: 4px 0 3px; border: 1.5px solid var(--tk-line, #ece4f0); border-radius: 12px; background: var(--tk-surface-2, #f6f3f8); color: var(--tk-purple, #702082); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; cursor: pointer; }
.mt-ab i { font-size: 19px; line-height: 1; }
.mt-ab span { display: block; font-size: 10px; font-weight: 800; margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ab:active { background: #F3E8FA; }
.mt-ab[disabled] { opacity: 0.45; cursor: not-allowed; }
.mt-ab.is-done { color: #0f8a65; }
.mt-ab.is-armed, .tk-btn.is-armed, .mt-link.is-armed { background: #D97706 !important; color: #fff !important; border-color: #D97706 !important; box-shadow: none; }

/* ---------- cohort rows ---------- */
.mt-crows { background: var(--tk-surface, #fff); border: 2px solid var(--tk-line, #ece4f0); border-bottom: 5px solid var(--tk-edge, #dcc9e3); border-radius: 22px; overflow: hidden; margin: 0 0 14px; }
.mt-crow { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; width: 100%; padding: 12px 12px; margin: 0; border: 0; border-top: 1px solid var(--tk-line, #ece4f0); background: transparent; text-align: left; cursor: pointer; color: inherit; min-height: 64px; }
.mt-crow:first-child { border-top: 0; }
.mt-crow:active, .mt-crow:hover { background: #faf5fc; }
.mt-rank { width: 20px; flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--tk-ink-3, #6b7280); text-align: center; margin-right: 6px; }
.mt-cr-main { -webkit-box-flex: 1; -webkit-flex: 1 1 140px; flex: 1 1 140px; min-width: 0; margin-left: 10px; }
.mt-cr-name { display: block; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.mt-cr-sub { display: block; font-size: 11px; font-weight: 700; color: var(--tk-ink-2, #4b5563); margin: 1px 0 6px; }
.mt-cr-conf, .mt-cr-pts { flex-shrink: 0; text-align: center; min-width: 64px; }
.mt-cr-conf b, .mt-cr-pts b { display: block; font-size: 14px; font-weight: 800; }
.mt-cr-conf i, .mt-cr-pts i { display: block; font-size: 10px; font-style: normal; font-weight: 700; color: var(--tk-ink-3, #6b7280); }
.mt-cr-state { flex-shrink: 0; text-align: right; margin-left: 6px; }
.mt-cr-state .mt-chip { margin: 0; }
.mt-cr-n { display: block; font-size: 10px; font-weight: 700; color: var(--tk-ink-3, #6b7280); margin-top: 3px; }
.mt-m .mt-cr-main { -webkit-flex: 1 1 100px; flex: 1 1 100px; }
.mt-m .mt-cr-state { order: 3; max-width: 96px; } .mt-m .mt-cr-state .mt-chip { padding: 3px 8px; }
.mt-m .mt-cr-conf, .mt-m .mt-cr-pts { order: 4; display: inline-block; text-align: left; min-width: 0; margin: 6px 10px 0 0; white-space: nowrap; }
.mt-m .mt-cr-conf { margin-left: 66px; }
.mt-m .mt-cr-conf b, .mt-m .mt-cr-pts b { display: inline; font-size: 12px; margin-right: 4px; }
.mt-m .mt-cr-conf i, .mt-m .mt-cr-pts i { display: inline; font-size: 11px; }

/* ---------- topics / panels ---------- */
.mt-panels { margin: 0; }
.mt-panel { background: var(--tk-surface, #fff); border: 2px solid var(--tk-line, #ece4f0); border-bottom: 5px solid var(--tk-edge, #dcc9e3); border-radius: 22px; margin: 0 0 14px; overflow: hidden; }
.mt-panel-h { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--tk-line, #ece4f0); }
.mt-panel-h h3 { margin: 0; font-size: 15px; font-weight: 800; }
.mt-panel-h p { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--tk-ink-2, #4b5563); }
.mt-pi { width: 40px; height: 40px; border-radius: 14px; margin-right: 12px; flex-shrink: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 22px; color: #702082; background: #F3E8FA; }
.mt-panel.is-weak .mt-pi { color: #b45309; background: #fef3c7; } .mt-panel.is-strong .mt-pi { color: #0f8a65; background: #d1fae5; }
.mt-panel-b { padding: 4px 16px 12px; }
.mt-panel-empty { padding: 14px 0; font-size: 13px; font-weight: 600; color: var(--tk-ink-2, #4b5563); }
.mt-trow { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--tk-line, #ece4f0); }
.mt-trow:first-child { border-top: 0; }
.mt-trow-b { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.mt-trow-b b { display: block; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.mt-trow-b span { display: block; font-size: 11px; font-weight: 700; color: var(--tk-ink-3, #6b7280); margin-top: 2px; }
.mt-trow-v { flex-shrink: 0; text-align: right; margin-left: 12px; max-width: 112px; }
.mt-trow-v b { display: block; font-size: 17px; font-weight: 800; color: #dc2626; }
.mt-trow-v.is-ok b { color: #0f8a65; }
.mt-trow-v i { display: block; font-size: 10px; font-style: normal; font-weight: 700; color: var(--tk-ink-3, #6b7280); }
.mt-tp { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--tk-line, #ece4f0); }
.mt-tp:first-child { border-top: 0; }
.mt-tp > i { font-size: 20px; color: #702082; margin: 1px 10px 0 0; flex-shrink: 0; }
.mt-tp b { display: block; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.mt-tp span { display: block; font-size: 12px; font-weight: 600; color: var(--tk-ink-2, #4b5563); margin-top: 2px; overflow-wrap: anywhere; }
.mt-tp div { min-width: 0; }
.mt-talk { border-color: #E4C9F0; }

/* ---------- day plan ---------- */
.mt-plan-hero { color: #fff; border-radius: 22px; padding: 16px; margin: 0 0 14px; background: #702082; background: linear-gradient(135deg, #8a2ca0 0%, #702082 50%, #4A1556 100%); box-shadow: var(--tk-shadow, 0 6px 16px rgba(112, 32, 130, 0.12)); }
.mt-ph-top { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between; }
.mt-ph-top > div:first-child { min-width: 0; margin-right: 8px; }
.mt-ph-k { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ffd166; overflow-wrap: anywhere; }
.mt-plan-hero h3 { margin: 2px 0 0; font-size: 20px; font-weight: 800; }
.mt-plan-hero p { margin: 4px 0 0; font-size: 12px; font-weight: 600; opacity: 0.95; }
.mt-ph-stats { display: -webkit-box; display: -webkit-flex; display: flex; margin: 12px -4px 0; }
.mt-ph-stats > div { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; margin: 0 4px; padding: 8px 4px; text-align: center; border-radius: 14px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); }
.mt-ph-stats b { display: block; font-size: 20px; font-weight: 800; }
.mt-ph-stats span { display: block; font-size: 10px; font-weight: 700; opacity: 0.95; }
.mt-plan-hero .mt-ph-ready { margin-top: 10px; font-weight: 800; }
.mt-plan-hero .mt-ph-ready i { margin-right: 6px; color: #ffd166; }
.mt-seg { display: inline-block; white-space: nowrap; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); margin-top: 6px; }
.mt-seg button { min-height: 36px; border: 0; border-radius: 99px; background: transparent; color: #fff; font-weight: 800; font-size: 12px; padding: 0 12px; cursor: pointer; }
.mt-seg button.is-on { background: #fff; color: #702082; }
.mt-dayh { margin: 16px 2px 8px; font-size: 13px; font-weight: 800; color: var(--tk-purple, #702082); }
.mt-plan { list-style: none; margin: 0 0 14px; padding: 0; background: var(--tk-surface, #fff); border: 2px solid var(--tk-line, #ece4f0); border-bottom: 5px solid var(--tk-edge, #dcc9e3); border-radius: 22px; overflow: hidden; }
.mt-prow { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 12px 14px 12px 12px; border-top: 1px solid var(--tk-line, #ece4f0); }
.mt-prow:first-child { border-top: 0; }
.mt-prow.is-extended { background: #fffbea; } .mt-prow.is-added { background: #f4fbf8; } .mt-prow.is-compressed { background: #faf7fb; }
.mt-prow.is-ticked .mt-pb b { text-decoration: line-through; color: var(--tk-ink-3, #6b7280); }
.mt-prow.is-break { background: #f6f3f8; padding-top: 8px; padding-bottom: 8px; -webkit-align-items: center; align-items: center; }
.mt-pbreak { font-size: 12px; font-weight: 800; color: var(--tk-ink-2, #4b5563); } .mt-pbreak i { margin-right: 6px; }
.mt-pcheck { position: relative; display: block; width: 44px; height: 44px; margin: -6px 0 -6px -8px; flex-shrink: 0; cursor: pointer; }
.mt-pcheck input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.mt-pbox { position: absolute; left: 11px; top: 11px; width: 22px; height: 22px; border-radius: 8px; border: 2px solid #cbb6d4; background: #fff; color: transparent; text-align: center; line-height: 18px; font-size: 14px; }
.mt-pcheck input:checked + .tk-sr-only + .mt-pbox { background: #1D9E75; border-color: #1D9E75; color: #fff; }
.mt-pcheck input:focus + .tk-sr-only + .mt-pbox { outline: 3px solid #f5b800; outline-offset: 2px; }
.mt-pt { width: 48px; flex-shrink: 0; margin: 2px 6px 0 0; font-size: 12px; font-weight: 800; color: var(--tk-purple, #702082); }
.mt-prow.is-break .mt-pt { margin-left: 40px; }
.mt-pb { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; font-size: 13px; }
.mt-pb b { font-weight: 800; overflow-wrap: anywhere; }
.mt-pmin { font-size: 11px; font-weight: 700; color: var(--tk-ink-3, #6b7280); }
.mt-tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 99px; margin-left: 4px; letter-spacing: 0.04em; }
.mt-tag.is-extended { background: #fef3c7; color: #92400e; } .mt-tag.is-compressed { background: #ede9fe; color: #5b21b6; } .mt-tag.is-added { background: #d1fae5; color: #065f46; }
.mt-pchg { display: inline-block; font-size: 11px; font-weight: 700; color: var(--tk-ink-2, #4b5563); margin-left: 6px; }
.mt-pnote { display: block; font-size: 12px; font-weight: 600; color: var(--tk-ink-2, #4b5563); margin-top: 3px; overflow-wrap: anywhere; }
.mt-pdet { margin-top: 4px; } .mt-pdet summary { font-size: 11px; font-weight: 800; color: var(--tk-purple, #702082); cursor: pointer; min-height: 24px; }
.mt-pdet span { display: block; font-size: 12px; font-weight: 600; margin: 3px 0; color: var(--tk-ink-2, #4b5563); }

/* ---------- follow-ups ---------- */
.mt-fus { list-style: none; margin: 0 0 8px; padding: 0; }
.mt-fu { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--tk-line, #ece4f0); }
.mt-fu:first-child { border-top: 0; }
.mt-fu.is-done .mt-fu-b > b { text-decoration: line-through; color: var(--tk-ink-3, #6b7280); }
.mt-fu-ic { width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0; margin-right: 10px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 18px; background: #F3E8FA; color: #702082; }
.mt-fu-b { min-width: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.mt-fu-b > b { display: block; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.mt-fu-b > span { display: block; font-size: 11px; font-weight: 700; color: var(--tk-ink-3, #6b7280); margin-top: 2px; }
.mt-fu-l { display: block; padding: 0; margin: 0 0 2px; border: 0; background: transparent; font-weight: 800; font-size: 12px; color: var(--tk-purple, #702082); text-align: left; cursor: pointer; text-decoration: underline; min-height: 24px; }
.mt-fu-a { margin-top: 2px; }
.mt-link { display: inline-block; min-height: 44px; padding: 0 12px 0 0; margin: 0; border: 0; background: transparent; color: var(--tk-purple, #702082); font-weight: 800; font-size: 12px; cursor: pointer; border-radius: 10px; }
.mt-link i { margin-right: 4px; font-size: 14px; vertical-align: -2px; }
.mt-link.is-danger { color: #b91c1c; }
.mt-link[disabled] { opacity: 0.45; }
.mt-link.is-armed { padding: 0 10px; margin-right: 8px; }

/* ---------- learner view ---------- */
.mt-lstage { margin: 0 0 12px; padding-bottom: 10px; }
.mt-lhero { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 4px 10px; }
.mt-lh-b { margin-left: 14px; min-width: 0; }
.mt-lname { display: block; font-size: 19px; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.mt-lh-b > span { display: block; font-size: 12px; font-weight: 600; color: #fff; opacity: 0.92; overflow-wrap: anywhere; }
.mt-lchips { margin-top: 6px; }
.mt-lglass .tk-glass { min-width: 0; -webkit-flex: 1 1 22%; flex: 1 1 22%; padding: 8px 2px; margin: 4px 3px; }
.mt-lglass .tk-glass-num { font-size: 17px; }
.mt-lglass .mt-small { font-size: 13px; padding-top: 3px; }
.mt-lglass .tk-glass-label { font-size: 10px; }
.mt-sug { display: -webkit-box; display: -webkit-flex; display: flex; background: #fffbea; border: 2px solid #fcd34d; border-radius: 18px; padding: 10px 12px; margin: 0 0 12px; }
.mt-sug-ic { font-size: 24px; color: #D97706; margin-right: 10px; flex-shrink: 0; }
.mt-sug b { display: block; font-size: 12px; font-weight: 800; color: #92400e; text-transform: uppercase; letter-spacing: 0.04em; }
.mt-sug > div > span { display: block; font-size: 13px; font-weight: 700; color: #78350f; margin-top: 2px; overflow-wrap: anywhere; }
.mt-sug-chips { margin-top: 6px; }
.mt-sug > div { min-width: 0; }
.mt-lacts { margin: 0 0 6px; }
.mt-lacts .tk-btn { margin: 0 6px 8px 0; }
.mt-h4 { margin: 16px 0 8px; font-size: 14px; font-weight: 800; }
.mt-priv { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--tk-ink-3, #6b7280); } .mt-priv i { margin-right: 3px; }
.mt-stoplist { list-style: none; margin: 0 0 6px; padding: 0; }
.mt-srow { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--tk-line, #ece4f0); }
.mt-srow:first-child { border-top: 0; }
.mt-srow .mt-sd { flex-shrink: 0; margin: 1px 10px 0 0; width: 26px; height: 26px; line-height: 22px; font-size: 11px; }
.mt-srow-b { min-width: 0; }
.mt-srow-b b { display: block; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.mt-srow-s { display: block; font-size: 11px; font-weight: 700; color: var(--tk-ink-3, #6b7280); margin-top: 1px; }
.mt-srow-n { display: block; font-size: 11px; font-weight: 700; color: #92400e; margin-top: 3px; } .mt-srow-n i { margin-right: 4px; }
.mt-stuck { display: block; font-size: 11px; font-weight: 700; color: #991b1b; background: #fee2e2; border-radius: 10px; padding: 4px 8px; margin-top: 4px; overflow-wrap: anywhere; } .mt-stuck i { margin-right: 4px; }
.mt-tl { list-style: none; margin: 0; padding: 0; }
.mt-tl li { display: -webkit-box; display: -webkit-flex; display: flex; padding: 8px 0; border-top: 1px solid var(--tk-line, #ece4f0); }
.mt-tl li:first-child { border-top: 0; }
.mt-tl-ic { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; margin-right: 10px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; background: #F3E8FA; color: #702082; }
.mt-tl li.is-green .mt-tl-ic { background: #d1fae5; color: #065f46; } .mt-tl li.is-gold .mt-tl-ic { background: #fef3c7; color: #92400e; } .mt-tl li.is-red .mt-tl-ic { background: #fee2e2; color: #991b1b; }
.mt-tl li div { min-width: 0; }
.mt-tl li b { display: block; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.mt-tl li span { display: block; font-size: 12px; font-weight: 600; color: var(--tk-ink-2, #4b5563); overflow-wrap: anywhere; }
.mt-tl li i { display: block; font-size: 10px; font-style: normal; font-weight: 700; color: var(--tk-ink-3, #6b7280); margin-top: 1px; }

/* ---------- forms in sheets ---------- */
.mt-lbl { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 800; color: var(--tk-ink-2, #4b5563); }
.mt-inp { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 2px solid var(--tk-line, #ece4f0); border-radius: 14px; background: var(--tk-surface, #fff); color: var(--tk-ink, #1f2937); font-size: 16px; font-weight: 600; }
textarea.mt-inp { resize: vertical; }
.mt-count { text-align: right; font-size: 11px; font-weight: 700; color: var(--tk-ink-3, #6b7280); margin: 2px 0 8px; }
.mt-err { background: #fee2e2; color: #991b1b; border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 700; margin: 8px 0; }
.mt-lbody .tk-btn--block { margin-top: 10px; }
.mt-kinds { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -3px 4px; }
.mt-kind { -webkit-box-flex: 1; -webkit-flex: 1 1 22%; flex: 1 1 22%; margin: 3px; position: relative; }
.mt-kind input, .mt-pick input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; z-index: 1; }
.mt-kind span, .mt-pick span { display: block; min-height: 44px; padding: 10px 6px; text-align: center; border: 2px solid var(--tk-line, #ece4f0); border-radius: 14px; font-size: 13px; font-weight: 800; color: var(--tk-ink-2, #4b5563); background: var(--tk-surface, #fff); }
.mt-kind span i { display: block; font-size: 18px; margin-bottom: 2px; }
.mt-kind input:checked + span, .mt-pick input:checked + span { border-color: #702082; background: #F3E8FA; color: #4A1556; }
.mt-kind input:focus + span, .mt-pick input:focus + span { outline: 3px solid #f5b800; outline-offset: 1px; }
.mt-stoppick { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -3px; }
.mt-pick { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 45%; flex: 1 1 45%; margin: 3px; min-width: 130px; }
.mt-pick span { text-align: left; padding: 8px 10px; font-size: 12px; }
.mt-pick span b { display: block; font-size: 11px; color: #702082; }
.mt-aud { -webkit-flex-basis: 30%; flex-basis: 30%; min-width: 90px; }
.mt-aud span { text-align: center; } .mt-aud span b { font-size: 20px; }
.mt-optlist { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -3px 6px; }
.mt-opt { -webkit-box-flex: 1; -webkit-flex: 1 1 100%; flex: 1 1 100%; min-height: 48px; margin: 3px; padding: 0 14px; border: 2px solid var(--tk-line, #ece4f0); border-radius: 14px; background: var(--tk-surface, #fff); color: var(--tk-ink, #1f2937); font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
.mt-opt i { margin-right: 8px; color: #702082; }
.mt-optlist .mt-aud { -webkit-flex: 1 1 30%; flex: 1 1 30%; }
.mt-check { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 44px; margin: 8px 0; font-size: 13px; font-weight: 700; }
.mt-check input { width: 22px; height: 22px; margin: 0 10px 0 0; flex-shrink: 0; }
.mt-msg { background: var(--tk-surface-2, #f6f3f8); border: 2px solid var(--tk-line, #ece4f0); border-radius: 14px; padding: 10px 12px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; margin-bottom: 8px; }
.mt-row2 { display: -webkit-box; display: -webkit-flex; display: flex; } .mt-row2 .tk-btn { margin-right: 8px; }
.mt-bc-sum { margin: 12px 0 6px; padding: 10px 12px; border-radius: 14px; background: #F3E8FA; font-size: 14px; font-weight: 700; } .mt-bc-sum.is-ok { background: #d1fae5; color: #065f46; }
.mt-bc-col { margin: 8px 0; } .mt-bc-col h4 { margin: 0 0 4px; font-size: 13px; font-weight: 800; } .mt-bc-col h4 i { margin-right: 6px; }
.mt-bc-col.is-yes h4 { color: #065f46; } .mt-bc-col.is-no h4 { color: #92400e; }
.mt-bc-col ul, .mt-bc-sk { margin: 0; padding: 0; list-style: none; max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mt-bc-col li, .mt-bc-sk li { padding: 6px 0; font-size: 13px; font-weight: 700; border-top: 1px solid var(--tk-line, #ece4f0); overflow-wrap: anywhere; }
.mt-bc-col li i, .mt-bc-sk li i { font-style: normal; font-weight: 600; color: var(--tk-ink-3, #6b7280); margin-left: 6px; font-size: 12px; }

/* ---------- layers: phone sheet extras ---------- */
.mt-sheet { max-height: 90%; }
.mt-sheet-tall { max-height: 94%; height: 94%; }
.mt-sheet .mt-lbody { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; padding-bottom: 24px; }
.mt-sheet .tk-sheet-head { -webkit-flex-shrink: 0; flex-shrink: 0; }
.mt-sheet .tk-sheet-head h3 { min-width: 0; overflow-wrap: anywhere; padding-right: 8px; }

/* ---------- layers: desktop overlay / drawer / dialog ---------- */
.mt-ov { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(45, 12, 52, 0.5); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.25s, visibility 0.25s; transition: opacity 0.25s, visibility 0.25s; }
.mt-ov.is-open { opacity: 1; visibility: visible; }
.mt-drawer, .mt-dialog { position: fixed; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; background: var(--tk-surface, #fff); color: var(--tk-ink, #1f2937); font-family: var(--tk-font, 'Plus Jakarta Sans', sans-serif); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); visibility: hidden; opacity: 0; -webkit-transition: transform 0.28s ease, opacity 0.2s, visibility 0.28s; transition: transform 0.28s ease, opacity 0.2s, visibility 0.28s; }
.mt-drawer { right: 0; top: 0; bottom: 0; width: 540px; max-width: 100%; -webkit-transform: translateX(105%); transform: translateX(105%); border-radius: 22px 0 0 22px; }
.mt-dialog { left: 50%; top: 50%; width: 520px; max-width: calc(100% - 32px); max-height: calc(100% - 48px); -webkit-transform: translate(-50%, -46%); transform: translate(-50%, -46%); border-radius: 22px; }
.mt-dialog.is-wide { width: 620px; }
.mt-drawer.is-open, .mt-dialog.is-open { visibility: visible; opacity: 1; }
.mt-drawer.is-open { -webkit-transform: translateX(0); transform: translateX(0); }
.mt-dialog.is-open { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.mt-drawer .mt-lhead, .mt-dialog .mt-lhead { padding: 14px 20px 10px; border-bottom: 1px solid var(--tk-line, #ece4f0); -webkit-flex-shrink: 0; flex-shrink: 0; }
.mt-drawer .mt-lbody, .mt-dialog .mt-lbody { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 24px; }
.mt-drawer .tk-sheet-head h3, .mt-dialog .tk-sheet-head h3 { font-size: 18px; font-weight: 800; }

/* ---------- bottom nav spacing (phone page) ---------- */
.mt-m .mt-nav-pad { height: calc(96px + env(safe-area-inset-bottom, 0px)); }
.mt-m .tk-bottom-nav { z-index: 50; }

@media (prefers-reduced-motion: reduce) {
    .mt-skel i, .mt-drawer, .mt-dialog, .mt-ov { -webkit-animation: none !important; animation: none !important; -webkit-transition: none !important; transition: none !important; }
}
@media print {
    .mt-d .mt-topbar, .mt-d .mt-tabsrow, .mt-d .mt-stage-wrap, .mt-d .mt-no-print, .mt-d .mt-pcheck { display: none !important; }
    .mt-d .mt-page { padding: 0 !important; }
    .mt-plan, .mt-panel { box-shadow: none; border-width: 1px; }
}

.mt-d .mt-lglass .tk-glass { padding: 10px 4px; text-align: center; border-radius: 16px; }
.mt-d .mt-lglass .tk-glass-num { font-size: 20px; }
.mt-d .mt-lglass .tk-glass-label { font-size: 11px; }
.tk-tab { white-space: nowrap; }

/* worker type chip (HEW / CHP) next to a mobiliser name */
.mt-wt { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 800; line-height: 17px; letter-spacing: .03em; background: #e6f4ee; color: #14634a; vertical-align: middle; }
.mt-wt-chp { background: #fdf0dc; color: #8a5200; }
[dir="rtl"] .mt-wt { margin-left: 0; margin-right: 6px; }

/* ============================================================
 * 2026-10 readability pass (DASHBOARD_UX_AUDIT.md): clear groups, one primary action per card, secondary actions behind "More",
 * type never below 13px (body 15-16px), 44px targets. Plain CSS only (mid-range phones).
 * ============================================================ */
.mt-grp { margin: 0 0 18px; }
.mt-grp > summary { list-style: none; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 52px; padding: 8px 6px; cursor: pointer; }
.mt-grp > summary::-webkit-details-marker { display: none; }
.mt-grp-h > i:first-child { font-size: 24px; margin-right: 10px; }
.mt-grp-t { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.mt-grp-t b { display: block; font-size: 18px; font-weight: 800; }
.mt-grp-t i { display: block; font-style: normal; font-size: 14px; font-weight: 600; color: var(--tk-ink-2, #4b5563); }
.mt-grp-n { font-size: 15px; font-weight: 800; min-width: 32px; padding: 2px 10px; text-align: center; border-radius: 999px; background: #F3E8FA; color: #702082; margin-left: 8px; }
.mt-grp > summary::after { content: ""; width: 9px; height: 9px; margin: 0 8px 4px 10px; border-right: 2.5px solid #64748B; border-bottom: 2.5px solid #64748B; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mt-grp[open] > summary::after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); margin-bottom: -3px; }
.mt-grp.is-red .mt-grp-h > i:first-child, .mt-grp.is-red .mt-grp-n { color: #B42318; } .mt-grp.is-red .mt-grp-n { background: #FDE4E1; }
.mt-grp.is-gold .mt-grp-h > i:first-child, .mt-grp.is-gold .mt-grp-n { color: #8A4B05; } .mt-grp.is-gold .mt-grp-n { background: #FEF0C7; }
.mt-grp.is-green .mt-grp-h > i:first-child, .mt-grp.is-green .mt-grp-n { color: #0F766E; } .mt-grp.is-green .mt-grp-n { background: #E3F5EE; }
.mt-more { margin: 4px 0 0; }
.mt-more > summary { list-style: none; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 44px; padding: 4px 6px; font-size: 15px; font-weight: 800; color: var(--tk-purple, #702082); cursor: pointer; }
.mt-more > summary::-webkit-details-marker { display: none; }
.mt-more > summary i { font-size: 22px; margin-right: 8px; }
.mt-more[open] > summary { margin-bottom: 6px; }
.mt-more .mt-fc-acts { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.mt-more .mt-ab { -webkit-flex: 1 1 28%; flex: 1 1 28%; min-height: 56px; margin: 3px 2px; }
.mt-ab span { font-size: 13px; }
.mt-fc-name { font-size: 17px; }
.mt-fc-sub { font-size: 14px; }
.mt-fc-end i { font-size: 12px; }
.mt-fc-meta { font-size: 13px; }
.mt-fc-sug { font-size: 15px; line-height: 1.4; }
.mt-cr-name { font-size: 16px; }
.mt-cr-sub { font-size: 13px; }
.mt-rank { font-size: 13px; }
.mt-muted { font-size: 14px; }
.mt-empty b { font-size: 18px; } .mt-empty span { font-size: 15px; }