/* ===========================================================================
   Implementation, Monitoring & Evaluation - module styling.

   This replaces style.scoped.css and style.me-theme.css. Those were the old
   dark, full-bleed sheet mechanically scoped and then re-coloured, which is
   why the result read as a dark design wearing white paint: gold text on
   white, 0.82rem tables, opacity-dimmed copy. This sheet is written directly
   in the site's own language instead.

   Everything is confined to .me-scope so it cannot touch the rest of the site;
   the original defined .container, .section and .footer globally.

   The running image strip (.site-images-slider / .slider-track / .site-image)
   and the roadmap figure are carried over unchanged, by request.
   =========================================================================== */

.me-scope {
    --g-deep:   #022822;   /* headings */
    --g:        #04665b;   /* official green, the accent on white */
    --g-soft:   #e7f1ef;   /* green tint fill */
    --g-line:   #cce0d9;
    --gold:     #b18313;   /* used sparingly, never as body text on white */
    --gold-br:  #e7c66a;   /* only on dark */
    --ink:      #3c544e;   /* body copy */
    --ink-soft: #5f736e;   /* secondary copy */
    --line:     #dce7e4;
    --line-lt:  #e6eeec;
    --card:     #ffffff;
    --wash:     #f4f8f6;
	--sand:     #fbf8ef;
	--teal:     #087568;
    --dark:     #022822;   /* was undefined in the original sheet */
    --shadow:   0 12px 32px rgba(2, 40, 34, 0.06);
    --shadow-h: 0 16px 34px rgba(2, 40, 34, 0.12);
    --radius:   14px;

    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink);
    background: transparent;
}
.me-scope *, .me-scope *::before, .me-scope *::after { box-sizing: border-box; }

/* ---------- M&E page shell ---------- */
.me-section-shell { margin-top:-42px; padding-top:42px; background:linear-gradient(180deg,#edf5f2 0,#f7faf9 260px,#f4f7f6 100%); }
.me-section-shell .sl-layout { grid-template-columns:268px minmax(0,1fr); gap:26px; }
.me-section-shell .sl-nav { padding:12px; border:1px solid rgba(4,102,91,.18); border-radius:18px; box-shadow:0 18px 42px rgba(2,40,34,.09); }
.me-section-shell .sl-nav:before { content:"M&E framework"; display:block; margin:-12px -12px 10px; padding:17px 18px; border-radius:17px 17px 0 0; background:linear-gradient(135deg,#087568,#022822); color:#fff; font-size:14px; font-weight:800; letter-spacing:.04em; }
.me-section-shell .sl-nav-title { color:#9a700e; font-size:10px; }
.me-section-shell .sl-nav a { min-height:42px; padding:10px 11px; border-radius:10px; color:#36564e !important; }
.me-section-shell .sl-nav a>i:first-child { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:7px; background:#edf5f2; color:#087568; font-size:12px; }
.me-section-shell .sl-nav a:hover { background:#edf5f2; }
.me-section-shell .sl-nav a.is-active { background:#087568; box-shadow:0 9px 20px rgba(8,117,104,.23); }
.me-section-shell .sl-nav a.is-active>i:first-child { background:rgba(255,255,255,.16); color:#f0cf72; }
.me-section-shell .sl-nav a.is-active span { color:#fff !important; }

/* Let the IM&E sidebar scroll with the page instead of inside its own panel. */
@media (min-width:992px) {
    .me-section-shell .sl-aside { position:static; }
    .me-section-shell .sl-nav { max-height:none; overflow:visible; overscroll-behavior:auto; }
}

/* ---------- layout ---------- */
.me-scope .section,
.me-scope .section-dark,
.me-scope .section-light,
.me-scope .section-gradient { padding: 8px 0 30px; background: transparent; color: var(--ink); }
.me-scope .section:first-child,
.me-scope .section-dark:first-child { padding-top: 0; }
.me-scope .container { width: auto; max-width: none; margin: 0; padding: 0; }
.me-scope .section-header,
.me-scope .sub-header { max-width:780px; margin-bottom: 22px; }
.me-scope .text-center { text-align: center; }
.me-scope .mb-3 { margin-bottom: 1rem; }

/* ---------- typography ---------- */
.me-scope .section-tag {
    display: inline-block; margin-bottom: 10px; padding: 5px 14px;
    border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-soft);
    color: var(--g); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.me-scope .section-title {
    margin: 0 0 12px; color: var(--g-deep); font-weight: 800; line-height: 1.22;
    font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.45px;
}
.me-scope .section-title::after { content: none; }
.me-scope .sub-title {
    position: relative; margin: 26px 0 14px; padding-left: 14px;
    color: var(--g-deep); font-size: 21px; font-weight: 800; line-height: 1.35;
}
.me-scope .sub-title::before {
    content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
    width: 4px; border-radius: 3px; background: var(--gold);
}
.me-scope .section-desc,
.me-scope .section p, .me-scope .container > p, .me-scope .sub-section > p {
    margin: 0 0 14px; color: var(--ink); font-size: 16.5px; line-height: 1.82; text-align: left;
}
.me-scope h3 { color: var(--g-deep); font-size: 18px; font-weight: 800; line-height: 1.4; }
.me-scope h4 { color: var(--g-deep); font-size: 16.5px; font-weight: 800; line-height: 1.45; }
.me-scope strong { color: var(--g-deep); font-weight: 700; }
.me-scope a { color: var(--g); font-weight: 700; }
.me-scope a:hover { color: var(--g-deep); }
.me-scope .small, .me-scope small { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
/* the old sheet faded text to sit on dark; on white it only costs contrast */
.me-scope p, .me-scope li, .me-scope span, .me-scope h2, .me-scope h3, .me-scope h4, .me-scope strong { opacity: 1; }

/* ---------- cards ---------- */
.me-scope .monitoring-block,
.me-scope .kpi-card,
.me-scope .approach-card,
.me-scope .eval-select-card,
.me-scope .tpv-block,
.me-scope .rbm-item {
    position:relative; overflow:hidden; padding: 22px 23px; border: 1px solid var(--line);
    border-radius: var(--radius); background: linear-gradient(180deg,#fff 0%,#fbfdfc 100%); box-shadow: var(--shadow);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.me-scope .monitoring-block:hover,
.me-scope .kpi-card:hover,
.me-scope .approach-card:hover,
.me-scope .eval-select-card:hover,
.me-scope .tpv-block:hover,
.me-scope .rbm-item:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); border-color: #9dbdb6; }
.me-scope .monitoring-block:before,
.me-scope .kpi-card:before,
.me-scope .approach-card:before,
.me-scope .eval-select-card:before,
.me-scope .tpv-block:before,
.me-scope .rbm-item:before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg,var(--teal),var(--gold)); }
.me-scope .monitoring-block h3,
.me-scope .kpi-card h3,
.me-scope .approach-card h3,
.me-scope .tpv-block h3,
.me-scope .sub-section h3 { margin: 0 0 8px; color: var(--g); font-size: 18px; }
.me-scope .monitoring-block p,
.me-scope .kpi-card p,
.me-scope .approach-card p,
.me-scope .tpv-block p { font-size: 15.5px; line-height: 1.7; color: var(--ink); }

.me-scope .monitoring-grid,
.me-scope .approaches-grid,
.me-scope .eval-select-grid,
.me-scope .kpi-grid,
.me-scope .lifecycle-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.me-scope .monitoring-left-content { min-width: 0; }
.me-scope .sub-section { margin-top: 28px; padding-top:26px; border-top:1px solid var(--line-lt); }
.me-scope .sub-section:first-child { margin-top:0; padding-top:0; border-top:0; }

/* ---------- lists ---------- */
.me-scope .feature-list,
.me-scope .impact-list { margin: 10px 0 0; padding: 0; list-style: none; }
.me-scope .feature-list li,
.me-scope .impact-list li {
    position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line-lt);
    color: var(--ink); font-size: 16px; line-height: 1.7;
}
.me-scope .feature-list li:last-child,
.me-scope .impact-list li:last-child { border-bottom: 0; }
.me-scope .feature-list li::before,
.me-scope .impact-list li::before {
    content: "\f00c"; position: absolute; left: 0; top: .78em;
    width: 17px; height: 17px; border-radius: 50%; background: var(--g-soft); color:var(--g);
	font:normal normal normal 9px/17px FontAwesome; text-align:center;
}

/* ---------- tags & badges ---------- */
.me-scope .kpi-tag,
.me-scope .lifecycle-badge,
.me-scope .download-label {
    display: inline-block; padding: 3px 10px; border: 1px solid var(--g-line);
    border-radius: 999px; background: var(--g-soft); color: var(--g);
    font-size: 12.5px; font-weight: 800;
}
.me-scope .kpi-icon, .me-scope .rbm-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: 10px; border-radius: 12px;
    background: var(--g-soft); color: var(--g); font-size: 20px;
}
.me-scope .kpi-icon img, .me-scope .rbm-icon img { width: 26px; height: 26px; object-fit: contain; }

/* ---------- RBM chain ---------- */
.me-scope .rbm-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: stretch; margin-top: 16px; }
.me-scope .rbm-item { text-align: center; }
.me-scope .rbm-item-highlight { border-top-color: var(--gold); background: #fffdf7; }
.me-scope .rbm-label { color: var(--g); font-size: 15px; font-weight: 800; }
.me-scope .rbm-kpi { color: var(--ink-soft); font-size: 14px; }
.me-scope .rbm-arrow { display: none; }
.me-scope .rbm-table-container { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.me-scope .rbm-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }

/* ---------- org chart ---------- */
.me-scope .org-chart { display: grid; gap: 14px; justify-items: center; margin-top: 20px; }
.me-scope .org-level,
.me-scope .support-row,
.me-scope .pd-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.me-scope .org-level-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; width: 100%; }
.me-scope .org-branch { display: grid; gap: 10px; justify-items: center; }
.me-scope .org-node {
    display: grid; justify-items: center; gap: 4px; min-width: 170px; padding: 16px 14px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
    box-shadow: var(--shadow); text-align: center;
}
.me-scope .org-node:hover { border-color: #9dbdb6; box-shadow: var(--shadow-h); }
.me-scope .node-minister { border-top: 3px solid var(--gold); }
.me-scope .node-member { border-top: 3px solid var(--g); }
.me-scope .node-field {
    min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--g-soft);
    border: 1px solid var(--g-line); color: var(--g); font-size: 13.5px; font-weight: 700; box-shadow: none;
}
.me-scope .org-node-photo { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); background: var(--wash); }
.me-scope .org-node-photo.small { width: 62px; height: 62px; }
.me-scope .org-node-photo.mini { width: 54px; height: 54px; }
.me-scope .org-node-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-scope .org-node-photo--vacant { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--g-line); }
.me-scope .org-node-photo--vacant::after { content: "\f007"; font: normal normal normal 20px/1 FontAwesome; color: #9dbdb6; }
.me-scope .org-node-title { color: var(--g); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.me-scope .org-node-name { color: var(--g-deep); font-size: 15px; font-weight: 800; line-height: 1.35; }
.me-scope .org-connector { width: 2px; height: 20px; background: var(--g-line); }
.me-scope .org-connector.small { height: 12px; }
.me-scope .vertical-main-line { width: 2px; height: 18px; margin: 0 auto; background: var(--g-line); }
.me-scope .horizontal-line { display: none; }
.me-scope .org-staggered-level { display: grid; gap: 14px; justify-items: center; width: 100%; }

/* ---------- empanelled firms table ---------- */
.me-scope .table-wrapper { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.me-scope .firms-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.me-scope .firms-table thead { background: linear-gradient(135deg,var(--teal),var(--g-deep)); }
.me-scope .firms-table th {
    padding: 13px 16px; border: 0; color: #fff; font-size: 13.5px; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap;
}
.me-scope .firms-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-lt); color: var(--ink); vertical-align: top; line-height: 1.6; }
.me-scope .firms-table tbody tr:nth-child(even) { background: var(--wash); }
.me-scope .firms-table tbody tr:hover { background: #eef5f3; }
.me-scope .firms-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- buttons ---------- */
.me-scope .btn,
.me-scope .btn-download,
.me-scope .policy-download,
.me-scope .app-nav-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
    border: 1px solid var(--g); border-radius: 999px; background: var(--g);
    color: #fff !important; font-size: 14px; font-weight: 800; text-decoration: none !important;
    cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.me-scope .btn:hover,
.me-scope .btn-download:hover,
.me-scope .policy-download:hover,
.me-scope .app-nav-btn:hover { background: var(--g-deep); transform: translateY(-1px); }

/* ---------- app screenshots carousel ---------- */
.me-scope .app-carousel-wrapper { position: relative; margin-top: 16px; }
/* .app-screenshots wraps the carousel, it is not the rail itself. Making it a
   flex container collapses the wrapper to its content width, which in turn
   collapses the screenshots inside (they are sized flex: 0 0 100%). */
.me-scope .app-screenshots { display: block; }
.me-scope .screenshots-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.me-scope .screenshot-item { flex: 0 0 auto; scroll-snap-align: start; border-radius: 12px; overflow: hidden; }
.me-scope .screenshot-item img { display: block; max-height: 460px; width: auto; border-radius: 12px; }
.me-scope .carousel-controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.me-scope .prev-btn, .me-scope .next-btn {
    width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%;
    background: #fff; color: var(--g); font-size: 16px; cursor: pointer;
}
.me-scope .prev-btn:hover, .me-scope .next-btn:hover { background: var(--g); color: #fff; }

/* ---------- running image strip: carried over unchanged ---------- */
.me-scope .roadmap-layout { display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; align-items: center; }
.me-scope .roadmap-container { width: 100%; max-width: 1100px; overflow: hidden; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); }
.me-scope .roadmap-image { width: 100%; height: auto; display: block; cursor: zoom-in; transition: transform 0.3s ease; }
.me-scope .roadmap-container:hover .roadmap-image { transform: scale(1.02); }
.me-scope .site-images-slider { max-height: 550px; overflow: hidden; background: var(--dark); position: relative; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.me-scope .site-images-slider::before,
.me-scope .site-images-slider::after { content: ''; position: absolute; left: 0; right: 0; height: 60px; z-index: 10; pointer-events: none; }
.me-scope .site-images-slider::before { top: 0; background: linear-gradient(to bottom, var(--dark) 0%, transparent 100%); }
.me-scope .site-images-slider::after { bottom: 0; background: linear-gradient(to top, var(--dark) 0%, transparent 100%); }
.me-scope .slider-track {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    background: url('images/image19.png') center top / 100% auto repeat-y;
    padding: 4rem 15%; animation: scrollVertical 35s linear infinite;
}
.me-scope .site-images-slider:hover .slider-track { animation-play-state: paused; }
.me-scope .site-image { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; transition: transform 0.3s ease; cursor: zoom-in; }
.me-scope .site-image:hover { transform: scale(1.05); z-index: 5; position: relative; }
@keyframes scrollVertical { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* ---------- the mobile app band, deliberately dark ---------- */
/* Its markup carries inline styles written for the old dark page, including a
   gold-to-black gradient that turned muddy on white and translucent white
   cards that vanished. A real dark band is both better design and what those
   nested cards were built for; the inline styles must be beaten. */
.me-scope #mobile-app {
    margin-top: 32px !important;
    padding: 34px !important;
    border: 1px solid rgba(231,198,106,.32) !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #04665b 0%, #022822 100%) !important;
    box-shadow: 0 20px 44px rgba(2,40,34,.26) !important;
    color: #fff;
}
.me-scope #mobile-app h2, .me-scope #mobile-app h3, .me-scope #mobile-app strong { color: #fff !important; }
.me-scope #mobile-app h4 { color: var(--gold-br) !important; }
.me-scope #mobile-app p, .me-scope #mobile-app li, .me-scope #mobile-app span { color: rgba(255,255,255,.88) !important; }
.me-scope #mobile-app .section-title { color: #fff !important; }
.me-scope #mobile-app .section-tag { background: rgba(231,198,106,.16) !important; border-color: rgba(231,198,106,.38) !important; color: var(--gold-br) !important; }
.me-scope #mobile-app .monitoring-block,
.me-scope #mobile-app .kpi-card {
    background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.16) !important;
    border-top: 3px solid var(--gold-br) !important; box-shadow: none !important;
}
.me-scope #mobile-app .monitoring-block h3, .me-scope #mobile-app .kpi-card h3 { color: var(--gold-br) !important; }
.me-scope #mobile-app .feature-list li { border-bottom-color: rgba(255,255,255,.12); color: rgba(255,255,255,.88); }
.me-scope #mobile-app .feature-list li::before { background: var(--gold-br); }
.me-scope #mobile-app .btn, .me-scope #mobile-app .app-nav-btn,
.me-scope #mobile-app .btn-download { background: var(--gold-br); border-color: var(--gold-br); color: #022822 !important; }

/* The band's inner grid is set inline to 1.2fr / 1fr with 4rem padding and a
   4rem gap, which was sized for a full-width page. In this content column that
   leaves the right track narrower than the 320px phone frame it has to hold,
   so the frame overflowed and its caption wrapped one word per line. The right
   track is given a fixed, sufficient width and the whole thing stacks early. */
.me-scope #mobile-app > div {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 30px !important;
    align-items: start !important;
}
.me-scope #mobile-app .app-carousel-wrapper { max-width: 280px !important; margin: 0 auto !important; }
.me-scope #mobile-app .screenshots-scroll { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.me-scope #mobile-app .screenshots-scroll::-webkit-scrollbar { display: none; }
.me-scope #mobile-app .screenshot-item img { border-color: var(--gold-br) !important; }
/* The caption sits under the frame, at a readable size, and does not wrap per
   word. It follows .app-screenshots, not the wrapper nested inside it. */
.me-scope #mobile-app .app-screenshots + p,
.me-scope #mobile-app .app-carousel-wrapper + p {
    margin: 18px auto 0 !important; max-width: 280px;
    color: var(--gold-br) !important; font-size: 14.5px !important;
    font-weight: 700; line-height: 1.5; text-align: center; white-space: normal;
}
.me-scope #mobile-app .carousel-controls { margin-top: 14px !important; }
.me-scope #mobile-app .app-nav-btn {
    width: 42px; height: 42px; padding: 0; justify-content: center;
    border-radius: 50%; font-size: 17px; line-height: 1;
}

@media (max-width: 1100px) {
    .me-scope #mobile-app > div { grid-template-columns: minmax(0, 1fr) !important; }
    .me-scope #mobile-app .app-carousel-wrapper { margin-top: 8px !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.me-section-shell .sl-layout { grid-template-columns:minmax(0,1fr); }
	.me-section-shell .sl-nav:before { display:none; }
    .me-scope .roadmap-layout { grid-template-columns: 1fr; gap: 2rem; }
    .me-scope .site-images-slider { max-height: 350px; max-width: 450px; margin: 0 auto; }
}
@media (max-width: 767px) {
	.me-section-shell { margin-top:-30px; padding-top:30px; }
	.me-section-shell .sl-nav { border-radius:13px; }
    .me-scope { font-size: 16px; }
    .me-scope .section-desc, .me-scope .section p { font-size: 16px; }
    .me-scope .section-title { font-size: 24px; }
    .me-scope .sub-title { font-size: 18.5px; }
    .me-scope .monitoring-grid, .me-scope .approaches-grid,
    .me-scope .eval-select-grid, .me-scope .kpi-grid,
    .me-scope .lifecycle-cards, .me-scope .org-level-4 { grid-template-columns: 1fr; }
    .me-scope .firms-table, .me-scope .firms-table td { font-size: 14.5px; }
    .me-scope #mobile-app { padding: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .me-scope .slider-track { animation: none; }
    .me-scope .monitoring-block, .me-scope .kpi-card, .me-scope .org-node,
    .me-scope .site-image, .me-scope .roadmap-image { transition: none; }
    .me-scope .monitoring-block:hover, .me-scope .kpi-card:hover { transform: none; }
}