/* ============================================================
   LMS Technology Solution Map — zoomable treemap styles
   Shared by the desktop full site and the mobile build.
   ============================================================ */
.tm-wrap { width: 100%; }
.tm-cap { text-align: center; font-size: .9rem; color: var(--subtle); margin: 0 0 1.4rem; transition: color var(--dur-base); }
.tm-canvas { position: relative; width: 100%; background: var(--navy-deeper); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--elev-3); padding: 0; }

/* category region (border + label) */
.tm-region { position: absolute; border-radius: var(--r-md); overflow: hidden; margin: 0; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: left .55s var(--ease-out), top .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out), opacity .4s var(--ease-std); }
.tm-region.is-sel { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.tm-region-head { position: absolute; inset: 0 0 auto 0; z-index: 4; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; font-family: inherit; padding: 9px 14px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; pointer-events: auto; }
.tm-region-name { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-region.is-sel .tm-region-name { font-size: .82rem; }
.tm-region-meta { font-size: .62rem; font-weight: 600; color: rgba(255,255,255,.55); white-space: nowrap; flex-shrink: 0; }
.tm-back { color: var(--orange); }

/* leaf tiles */
.tm-leaf { position: absolute; border: none; border-radius: 5px; cursor: pointer; font-family: inherit; padding: 4px; display: grid; place-items: center; overflow: hidden; outline-offset: -2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: left .55s var(--ease-out), top .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out), opacity .4s var(--ease-std), box-shadow .2s var(--ease-std), filter .2s var(--ease-std); }
.tm-leaf:hover { filter: brightness(1.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); z-index: 6; }
.tm-leaf:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tm-leaf-label { font-size: clamp(.6rem, .82vw, .82rem); font-weight: 600; color: #fff; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.35); pointer-events: none; }

/* detail panel */
.tm-panel { position: absolute; z-index: 7; background: rgba(23,35,47,.97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: auto; animation: tmPanelIn .45s var(--ease-out) both; }
@keyframes tmPanelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.tm-panel-in { padding: 26px 28px; }
.tm-panel-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.tm-panel-title { font-size: 1.3rem; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 12px; }
.tm-panel-why { font-size: .9rem; line-height: 1.7; color: var(--on-dark-2); margin: 0 0 20px; }
.tm-panel-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); margin: 0 0 10px; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.tm-chip { font-size: .76rem; font-weight: 500; color: var(--on-dark-2); background: rgba(255,255,255,.08); border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); padding: .3rem .7rem; }
.tm-prov { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.tm-prov span { font-size: .78rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-line); border-radius: var(--r-sm); padding: .35rem .6rem; }
.tm-cta { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #fff; background: var(--accent); padding: .7rem 1.2rem; border-radius: var(--r-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.tm-cta:hover { transform: translateY(-2px); box-shadow: var(--elev-btn); }
.tm-cta svg { width: 16px; height: 16px; }

/* mobile / narrow tuning — larger labels, panel slides up from bottom */
@media (max-width: 720px) {
  .tm-cap { font-size: .82rem; margin-bottom: 1rem; }
  .tm-region-name { font-size: .6rem; letter-spacing: .08em; }
  .tm-region.is-sel .tm-region-name { font-size: .74rem; }
  .tm-region-head { padding: 7px 11px 0; }
  .tm-leaf-label { font-size: clamp(.58rem, 2.6vw, .8rem); }
  .tm-panel { animation-name: tmPanelUp; box-shadow: 0 -14px 30px rgba(0,0,0,.35); border-top: 1px solid var(--on-dark-line); }
  .tm-panel-in { padding: 20px 20px 24px; }
  .tm-panel-title { font-size: 1.15rem; }
  .tm-panel-why { font-size: .86rem; margin-bottom: 16px; }
}
@keyframes tmPanelUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tm-region, .tm-leaf, .tm-panel { transition: none; animation: none; } }

/* ---------- mobile: full-width stacked category cards ---------- */
.tm-stack { display: flex; flex-direction: column; gap: 10px; }
.tm-scard { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--elev-2); }
.tm-scard-head { width: 100%; border: none; cursor: pointer; font-family: inherit; padding: 17px 18px; display: flex; align-items: center; gap: 12px; text-align: left; color: #fff; }
.tm-scard-name { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; flex: 1; }
.tm-scard-count { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.82); white-space: nowrap; flex-shrink: 0; }
.tm-scard-chev { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; flex-shrink: 0; transition: transform .35s var(--ease-out); }
.tm-scard-chev svg { width: 14px; height: 14px; color: #fff; }
.tm-scard-chev.open { transform: rotate(135deg); }
.tm-scard-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease-out); background: var(--navy-deeper); }
.tm-scard.open .tm-scard-panel { grid-template-rows: 1fr; }
.tm-scard-inner { overflow: hidden; min-height: 0; padding: 0 16px; }
.tm-scard.open .tm-scard-inner { padding: 18px 16px 22px; }
.tm-sleaves { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-sleaf { font-size: .82rem; font-weight: 600; color: #fff; padding: .55rem .85rem; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.tm-scard-title { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -.01em; line-height: 1.3; margin: 18px 0 0; }
.tm-scard-why { font-size: .9rem; line-height: 1.7; color: var(--on-dark-2); margin: 10px 0 0; }
.tm-scard-plabel { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); margin: 20px 0 10px; }
.tm-scard .tm-prov { margin-bottom: 22px; }
@media (prefers-reduced-motion: reduce) { .tm-scard-panel, .tm-scard-chev { transition: none; } }