/* Joint Forest Management (templates/core/designs/sf_jfm/), in the new design: headings, text, tables and the shared pieces
   come from css/designs/tables.css and kit.css; this file draws the agency list and the bar chart in the dashboard card. */
.sfj-page { background: #f9f6ef; }
.sfj-page .st-sec { padding: 84px 0; }
.sfj-page .st-sec + .st-sec, .sfj-page .st-sec + .st-tabblock { padding-top: 0; }
.sfj-page .sfj-ledgers { padding-bottom: 24px; }
.sfj-page .sfj-ledgers + .st-tabblock, .sfj-page .sfj-ledgers + .st-sec { padding-top: 0; }

/* the Overview's opening sentence: regular weight, upright */
html body .sfj-page .dz-statement-lead, html body .sfj-page .dz-statement-lead strong { font-style: normal; font-weight: 400; }

/* the Overview card: deep green, the opening paragraph and the second one in white, one under the other across the card's full width */
.sfj-page .dz-statement { grid-template-columns: minmax(0, 1fr); gap: 0; background: radial-gradient(520px 320px at 100% 0%, rgba(16, 185, 129, .22), transparent 70%), linear-gradient(135deg, #0b3d2c 0%, #042f1a 100%);
    box-shadow: 0 30px 60px -40px rgba(4, 47, 26, .7); }
.sfj-page .dz-statement::before { display: none; }
.sfj-page .dz-statement::after { opacity: .09; filter: invert(1); }
html body .sfj-page .dz-statement-lead { max-width: none; margin: 0 0 14px; color: #fff; font-size: 16.5px; font-weight: 400; line-height: 1.75; letter-spacing: 0; text-align: left; }   /* the same as the paragraphs below it */
html body .sfj-page .sfj-card-title { margin: 0 0 16px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(26px, 2.3vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: #f1c40f; text-align: left; }
html body .sfj-page .dz-statement-rest p { color: #fff; }
html body .sfj-page .dz-statement-rest strong { color: #f1c40f; }

/* the notes at the end (Merger of NAP with GIM): the text runs the card's full width, not 80 characters */
.sfj-page .dz-acc-body { max-width: none; }
/* ...and it stays open as a plain card: no arrow, nothing to click (the script in sf_jfm/intro.html keeps it open from the keyboard too) */
.sfj-page .dz-acc-row summary { pointer-events: none; cursor: default; font-weight: 700; }
.sfj-page .dz-acc-row summary:hover { background: transparent; }
.sfj-page .dz-acc-row summary svg { display: none; }

/* the tables' heading rows: green, with bold yellow text (as on Parks & Gardens) */
html body .dz-page.sfj-page .st-table thead th { background: #0b3d2c !important; color: #f1c40f !important; font-weight: 700 !important; }

/* the agency list */
.sfj-fda-header { padding: 24px 24px 12px; }
.sfj-fda-header h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #0a2e1a; }
.sfj-fda-header span { font-size: 13px; color: #4b5563; }
.sfj-fda-scroll { display: grid; gap: 6px; max-height: 420px; overflow: auto; padding: 8px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(26, 71, 42, .3) transparent; }
.sfj-fda-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer;
    font: inherit; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.sfj-fda-card:hover { background: rgba(255, 255, 255, .7); }
.sfj-fda-card.active { background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .08), 0 10px 24px -18px rgba(10, 46, 26, .5); }
.sfj-fda-card:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; }
.sfj-fda-abbr { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 40px; padding: 0 8px; border-radius: 10px;
    background: #e3ece1; color: #1a472a; font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; }
.sfj-fda-card.active .sfj-fda-abbr { background: #0a2e1a; color: #fff; }
.sfj-fda-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sfj-fda-info strong { font-size: 14px; font-weight: 600; line-height: 1.35; color: #0a2e1a; }
.sfj-fda-info small { font-size: 12.5px; color: #4b5563; }

/* the chart */
.sfj-perf-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(15, 28, 16, .06); }
.sfj-perf-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: #0a2e1a; }
.sfj-perf-total { padding: 6px 12px; border-radius: 999px; background: #e3ece1; font-size: 13px; font-weight: 600; color: #1a472a; }
.sfj-perf-total b { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; }
.sfj-bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 300px; padding-top: 28px; }
.sfj-bar-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.sfj-bar { width: 100%; max-width: 46px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #2d6a4f, #1a472a); transition: height 700ms cubic-bezier(.16, 1, .3, 1), filter 150ms; }
.sfj-bar-wrapper:hover .sfj-bar { filter: brightness(1.15); }
.sfj-bar-val { font: 600 12px 'Roboto', sans-serif; color: #0a2e1a; font-variant-numeric: tabular-nums; }
.sfj-bar-label { font-size: 12px; font-weight: 600; color: #4b5563; }
@media (max-width: 900px) {
    .sfj-page .st-sec { padding: 52px 0; }
    .sfj-fda-scroll { display: flex; max-height: none; overflow-x: auto; padding: 4px 12px 14px; }
    .sfj-fda-card { flex: 0 0 240px; }
    .sfj-bar-chart { height: 220px; gap: 6px; }
    .sfj-bar-val { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sfj-bar { transition: none; } }

/* Merger of NAP with GIM (an Accordion section, wing_design.css): on this page a dark green card, as State Level Policy
   Making on Overview of Wildlife: its heading in gold, its words in white */
.sfj-page .dz-acc-row { background: #0a2e1a; overflow: hidden; }   /* the heading's hover shade keeps the rounded corners */
.sfj-page .dz-acc-row summary { color: #f1c40f; }
.sfj-page .dz-acc-row summary:hover { background: rgba(255, 255, 255, .06); }
.sfj-page .dz-acc-row summary svg { color: #f1c40f; }
.sfj-page .dz-acc-row summary:focus-visible { outline-color: #f1c40f; }
.sfj-page .dz-acc-body p, .sfj-page .dz-acc-body .ps-text-list { color: rgba(255, 255, 255, .9); }
.sfj-page .dz-acc-body .ps-text-list li::marker { color: #f1c40f; }
html body .sfj-page .dz-statement-lead strong { color: #f1c40f; font-weight: 700; }

/* the Before / After picture: smaller, centred */
.sfj-page .k-compare { max-width: 940px; margin-left: auto; margin-right: auto; aspect-ratio: 16 / 9; max-height: 480px; }

/* the Before / After picture: a thin yellow border and a soft shadow so it looks lifted off the page */
.sfj-page .k-compare { position: relative; z-index: 2; border: 1px solid #f1c40f; box-shadow: 0 18px 40px -14px rgba(4, 47, 26, .45), 0 0 0 4px rgba(241, 196, 15, .18); }