:root {
  --green:#034C43; --green-deep:#023b34; --mint:#EEF7F2; --mint-2:#e3f3ea;
  --active:#148A3B; --gold:#FFC107; --gold-tint:#fff6da; --green-tint:#e7f3ec;
  --hero-a:#064B2A; --hero-b:#208C2F;
  --ink:#1c2e29; --ink-soft:#3c4a4f; --muted:#6B7280;
  --line:#dfeae5; --line-soft:#eef4f1; --bg:#f4f9f6; --white:#fff;
  --shadow-sm:0 1px 2px rgba(3,76,67,.05);
  --shadow:0 8px 26px -12px rgba(3,76,67,.18);
  --shadow-lg:0 22px 50px -24px rgba(3,76,67,.28);
  --r-sm:10px; --r:16px; --r-lg:22px;
  --serif:Georgia,"Times New Roman","Iowan Old Style",serif;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --maxw:1280px;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); font-family:var(--sans); color:var(--ink); }
a { color:inherit; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Header ---------- */
.site-header { background:var(--white); border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand span { font-family:var(--mono); font-weight:700; letter-spacing:1.5px; font-size:15px; color:var(--green); }
.site-header nav a { font-size:14px; color:var(--ink-soft); text-decoration:none; margin-left:26px; }
.site-header nav a:hover { color:var(--green); }

/* ---------- Hero (directory) ---------- */
.hero { padding:56px 0 40px; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:2.2px; color:var(--active); font-weight:700; margin:0 0 12px; text-transform:uppercase; }
h1 { font-family:var(--serif); font-size:42px; line-height:1.15; color:var(--green); margin:0 0 14px; }
.hero p { font-size:16px; color:var(--ink-soft); max-width:640px; line-height:1.55; margin:0 0 6px; }
.hero .note { font-size:13.5px; color:var(--muted); }

/* ---------- Filter card ---------- */
.toolbar { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:28px 30px; margin:28px 0 34px; }
.toolbar-label { font-family:var(--mono); font-size:11px; letter-spacing:1.6px; color:var(--muted); text-transform:uppercase; margin:0 0 8px; }
.search-input { width:100%; padding:14px 20px; border:1px solid var(--line); border-radius:999px; font-size:15px; font-family:var(--sans); color:var(--ink); background:var(--white); }
.search-input:focus { outline:2px solid var(--active); outline-offset:1px; }
.filter-row { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:22px; }
.filter-field select { width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:999px; background:var(--white); font-size:14px; color:var(--ink); font-family:var(--sans); appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236B7280'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; }
.filter-field select:focus { outline:2px solid var(--active); outline-offset:1px; }
.toolbar-meta { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft); }
.toolbar-meta .count { font-size:14px; color:var(--ink-soft); }
.toolbar-meta .count b { color:var(--green); }
.reset-link { font-size:14px; font-weight:600; color:var(--green); text-decoration:underline; background:none; border:none; cursor:pointer; padding:0; }

/* ---------- Grid & cards ---------- */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-bottom:70px; }
@media (max-width:980px) { .grid { grid-template-columns:repeat(2,1fr);} .filter-row {grid-template-columns:repeat(3,1fr);} .tiles {grid-template-columns:repeat(2,1fr) !important;} }
@media (max-width:680px) { .grid { grid-template-columns:1fr;} .filter-row {grid-template-columns:repeat(2,1fr);} h1{font-size:30px;} .tiles{grid-template-columns:1fr !important;} }

.card { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:26px 26px 22px; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease; text-decoration:none; }
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.badge { display:inline-block; font-size:12px; font-weight:700; padding:5px 13px; border-radius:999px; margin-bottom:14px; width:fit-content; }
.badge.full { background:var(--green-tint); color:var(--green); }
.badge.pending { background:var(--gold-tint); color:#8a6d00; }
.badge.other { background:var(--mint-2); color:var(--ink-soft); }
.card h3 { font-family:var(--serif); font-size:19px; line-height:1.3; margin:0 0 8px; color:var(--ink); }
.card .subtitle { font-size:13.5px; color:var(--muted); line-height:1.5; margin:0 0 16px; min-height:20px; }
.divider { border-top:1px solid var(--line-soft); margin:0 0 16px; }
.facts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.facts span { font-size:12.5px; background:var(--mint-2); color:var(--green-deep); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.themes-label { font-family:var(--mono); font-size:10.5px; letter-spacing:1.4px; color:var(--muted); text-transform:uppercase; margin:0 0 6px; }
.themes-text { font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 18px; flex-grow:1; }
.card-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); }
.card-foot a, .card-foot-link { font-size:14px; font-weight:700; color:var(--green); text-decoration:none; }
.card-foot a:hover { color:var(--active); }

.empty { text-align:center; padding:60px 20px; color:var(--muted); font-size:15px; display:none; }

/* ---------- Profile page ---------- */
.breadcrumb { font-size:13.5px; color:var(--muted); padding:22px 0 0; }
.breadcrumb a { color:var(--green); text-decoration:none; font-weight:600; }
.breadcrumb a:hover { text-decoration:underline; }

.profile-header { padding:22px 0 36px; border-bottom:1px solid var(--line); margin-bottom:36px; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.chip { font-size:12.5px; font-weight:700; padding:5px 13px; border-radius:999px; }
.chip.member.full { background:var(--green-tint); color:var(--green); }
.chip.member.pending { background:var(--gold-tint); color:#8a6d00; }
.chip.member.other { background:var(--mint-2); color:var(--ink-soft); }
.chip.type { background:var(--white); color:var(--ink-soft); border:1px solid var(--line); }
.profile-header h1 { font-size:36px; margin:0 0 8px; }
.profile-header .full-name { font-size:15.5px; color:var(--muted); margin:0 0 20px; font-style:italic; }
.profile-header .lede { font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:760px; }

.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:48px; }
.tile { background:var(--white); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:18px 20px; }
.tile .tile-label { font-family:var(--mono); font-size:10.5px; letter-spacing:1.3px; color:var(--muted); text-transform:uppercase; margin:0 0 8px; }
.tile .tile-value { font-family:var(--serif); font-size:19px; color:var(--green); line-height:1.3; }
.tile .tile-value.tbc { font-family:var(--sans); font-style:italic; font-size:14px; color:var(--muted); }

.section { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:28px 32px; margin-bottom:22px; }
.section .sec-label { font-family:var(--mono); font-size:11px; letter-spacing:1.6px; color:var(--active); text-transform:uppercase; margin:0 0 10px; font-weight:700; }
.section h2 { font-family:var(--serif); font-size:22px; color:var(--green); margin:0 0 16px; }
.section .body-text { font-size:14.5px; line-height:1.75; color:var(--ink-soft); max-width:780px; }
.section .body-text + .body-text { margin-top:14px; }
.tbc { font-style:italic; color:var(--muted); font-size:14.5px; }

.theme-chips { display:flex; flex-wrap:wrap; gap:9px; }
.theme-chips span { background:var(--mint-2); color:var(--green-deep); border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:13.5px; }

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:820px; }
.info-block h4 { font-family:var(--mono); font-size:11px; letter-spacing:1.2px; color:var(--muted); text-transform:uppercase; margin:0 0 8px; }
.info-block ul { margin:0; padding-left:18px; font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.info-block .none { font-style:italic; color:var(--muted); font-size:14px; }

.data-links { display:flex; flex-direction:column; gap:12px; max-width:600px; }
.data-link-card { display:flex; align-items:center; justify-content:space-between; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; }
.data-link-card .label { font-size:14px; color:var(--ink-soft); }
.data-link-card a.go { font-size:13.5px; font-weight:700; color:var(--green); text-decoration:none; }
.data-link-card a.go:hover { color:var(--active); }
.data-link-card .tbc-inline { font-size:13.5px; }

.location-card { display:flex; align-items:center; gap:18px; background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:22px 26px; max-width:560px; }
.location-pin { width:46px; height:46px; border-radius:50%; background:var(--green-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; }
.location-card .coords { font-family:var(--mono); font-size:14px; color:var(--green); }
.location-card .place { font-size:13.5px; color:var(--muted); margin-top:3px; }

.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.related-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; font-size:14px; font-weight:600; color:var(--green); text-decoration:none; }
.related-card:hover { border-color:var(--active); color:var(--active); }
.related-card.plain { color:var(--ink-soft); font-weight:500; cursor:default; }

.validation-banner { background:var(--gold-tint); border:1px solid #f3dd8f; border-radius:var(--r); padding:16px 20px; font-size:13.5px; color:#6b5600; margin-bottom:44px; }
.validation-banner b { color:#4d3e00; }

.back-foot { padding:20px 0 70px; }
.back-foot a { color:var(--green); font-weight:700; text-decoration:none; font-size:14.5px; }
.back-foot a:hover { color:var(--active); }

/* ---------- Load more ---------- */
.load-more-wrap { display:flex; justify-content:center; padding:8px 0 60px; }
.load-more-btn { background:var(--green); color:var(--white); border:none; border-radius:999px; padding:13px 34px; font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm); transition:background .15s ease, transform .15s ease; }
.load-more-btn:hover { background:var(--active); transform:translateY(-1px); }
.load-more-btn:disabled { display:none; }

/* ---------- Theme links (clickable, TRE-bound) ---------- */
.theme-link { text-decoration:none; cursor:pointer; }
.theme-link:hover { filter:brightness(0.94); }
a.facts-theme { text-decoration:none; }

/* ---------- Placeholder page ---------- */
.placeholder-wrap { min-height:60vh; display:flex; align-items:center; justify-content:center; padding:60px 24px; }
.placeholder-card { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:48px 44px; max-width:520px; text-align:center; }
.placeholder-icon { width:64px; height:64px; border-radius:50%; background:var(--gold-tint); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 22px; }
.placeholder-card h1 { font-size:24px; margin:0 0 12px; }
.placeholder-card p { font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 26px; }
.placeholder-card .theme-tag { display:inline-block; background:var(--mint-2); color:var(--green-deep); border:1px solid var(--line); border-radius:999px; padding:6px 16px; font-size:13px; margin-bottom:24px; }

/* ---------- Research Programmes showcase ---------- */
.programmes { margin:36px 0 44px; }
.programmes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:22px; }
.programme-card { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:26px 24px; transition:box-shadow .18s ease, transform .18s ease; }
.programme-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.programme-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:16px; }
.programme-card h3 { font-family:var(--serif); font-size:18px; margin:0 0 10px; color:var(--ink); }
.programme-card p { font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 16px; }
.programme-stat { display:flex; gap:18px; padding-top:14px; border-top:1px solid var(--line-soft); }
.programme-stat div b { display:block; font-family:var(--serif); font-size:20px; color:var(--green); }
.programme-stat div span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; font-family:var(--mono); }
.programmes-foot { margin-top:22px; font-size:13.5px; color:var(--muted); max-width:760px; line-height:1.6; }

@media (max-width:980px) { .programmes-grid { grid-template-columns:1fr; } }

/* ---------- Evidence Infrastructure workflow page ---------- */
.flow-rail { display:flex; align-items:center; justify-content:space-between; margin:32px 0 8px; position:relative; }
.flow-rail::before { content:""; position:absolute; top:26px; left:5%; right:5%; height:2px; background:var(--line); z-index:0; }
.flow-node { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; background:none; border:none; font-family:var(--sans); flex:1; padding:0; }
.flow-node .dot { width:52px; height:52px; border-radius:50%; background:var(--white); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:20px; transition:all .18s ease; }
.flow-node.active .dot { background:var(--green); border-color:var(--green); color:var(--white); box-shadow:0 0 0 6px var(--green-tint); }
.flow-node .label { font-size:12.5px; font-weight:700; color:var(--ink-soft); text-align:center; max-width:120px; }
.flow-node.active .label { color:var(--green); }
.flow-node .arrow { position:absolute; right:-14px; top:20px; color:var(--muted); font-size:14px; z-index:2; }

.stage-panel { display:none; background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:34px 36px; margin-top:28px; }
.stage-panel.active { display:block; }
.stage-panel .stage-kicker { font-family:var(--mono); font-size:11px; letter-spacing:1.6px; color:var(--active); text-transform:uppercase; font-weight:700; margin:0 0 8px; }
.stage-panel h2 { font-family:var(--serif); font-size:24px; color:var(--green); margin:0 0 12px; }
.stage-panel .stage-desc { font-size:14.5px; color:var(--ink-soft); line-height:1.65; max-width:680px; margin:0 0 22px; }
.stage-io { display:flex; gap:24px; margin-bottom:22px; flex-wrap:wrap; }
.stage-io-block { background:var(--mint); border-radius:var(--r); padding:14px 18px; flex:1; min-width:200px; }
.stage-io-block .io-label { font-family:var(--mono); font-size:10px; letter-spacing:1.2px; color:var(--muted); text-transform:uppercase; margin:0 0 6px; }
.stage-io-block .io-value { font-size:13.5px; color:var(--ink); line-height:1.5; }

.stage-nav { display:flex; justify-content:space-between; margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft); }
.stage-nav button { background:var(--white); border:1px solid var(--line); border-radius:999px; padding:10px 22px; font-size:13.5px; font-weight:700; color:var(--green); cursor:pointer; }
.stage-nav button:hover { border-color:var(--active); color:var(--active); }
.stage-nav button:disabled { opacity:0.35; cursor:default; }

/* Try-it demo */
.demo-box { background:var(--mint); border-radius:var(--r); padding:24px 26px; margin-top:8px; }
.demo-box label { font-family:var(--mono); font-size:11px; letter-spacing:1.2px; color:var(--muted); text-transform:uppercase; display:block; margin-bottom:8px; }
.demo-box select { padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-size:14px; min-width:260px; }
.demo-results { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
.demo-col { background:var(--white); border-radius:var(--r); padding:16px 18px; border:1px solid var(--line); }
.demo-col h4 { font-family:var(--mono); font-size:10.5px; letter-spacing:1.2px; color:var(--muted); text-transform:uppercase; margin:0 0 10px; }
.demo-col .demo-item { font-size:13px; color:var(--ink-soft); padding:6px 0; border-bottom:1px solid var(--line-soft); }
.demo-col .demo-item:last-child { border-bottom:none; }
.demo-col .demo-empty { font-size:12.5px; color:var(--muted); font-style:italic; }
.illustrative-tag { display:inline-block; font-size:10.5px; font-family:var(--mono); letter-spacing:0.6px; text-transform:uppercase; color:#8a6d00; background:var(--gold-tint); border-radius:999px; padding:3px 10px; margin-left:8px; vertical-align:middle; }

@media (max-width:900px) {
  .flow-rail { flex-direction:column; align-items:flex-start; gap:18px; }
  .flow-rail::before { display:none; }
  .flow-node { flex-direction:row; }
  .demo-results { grid-template-columns:1fr; }
  .stage-io { flex-direction:column; }
}

/* ---------- Programme switcher ---------- */
.programme-switcher { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0 8px; }
.prog-tab { background:var(--white); border:2px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; text-align:left; cursor:pointer; font-family:var(--sans); transition:all .15s ease; }
.prog-tab:hover { border-color:var(--active); }
.prog-tab.active { border-color:var(--green); background:var(--green-tint); }
.prog-tab .prog-name { font-family:var(--serif); font-size:16px; color:var(--ink); margin-bottom:4px; font-weight:700; }
.prog-tab.active .prog-name { color:var(--green); }
.prog-tab .prog-tagline { font-size:12.5px; color:var(--muted); line-height:1.4; }

/* ---------- Data Inputs (3-column) ---------- */
.inputs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.input-col { background:var(--mint); border-radius:var(--r); padding:20px 22px; }
.input-col h4 { font-family:var(--mono); font-size:11px; letter-spacing:1.2px; color:var(--muted); text-transform:uppercase; margin:0 0 12px; }
.input-col .big-stat { font-family:var(--serif); font-size:28px; color:var(--green); margin:0 0 6px; }
.input-col .stat-label { font-size:12.5px; color:var(--ink-soft); margin-bottom:12px; }
.input-col .input-item { font-size:12.5px; color:var(--ink-soft); padding:5px 0; border-top:1px solid var(--line-soft); }
.input-col .input-item:first-of-type { border-top:none; }

/* Synthesis Q&A base card — flex-row layout defined below under
   "Standard APCC page banner" section supersedes the old ::before approach. */

/* ---------- Dissemination / stakeholder push ---------- */
.stakeholder-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:20px 0 24px; }
.stakeholder-item { display:flex; align-items:center; gap:12px; background:var(--mint); border-radius:var(--r-sm); padding:13px 16px; }
.stakeholder-item input[type="checkbox"] { width:18px; height:18px; accent-color:var(--green); cursor:pointer; flex-shrink:0; }
.stakeholder-item label { font-size:13.5px; color:var(--ink); cursor:pointer; }
.stakeholder-item .stakeholder-sub { display:block; font-size:11.5px; color:var(--muted); }
.push-btn { background:var(--green); color:var(--white); border:none; border-radius:999px; padding:13px 30px; font-size:14.5px; font-weight:700; cursor:pointer; }
.push-btn:hover { background:var(--active); }
.push-btn:disabled { background:var(--line); color:var(--muted); cursor:not-allowed; }
.push-confirm { display:none; background:var(--green-tint); border:1px solid var(--green); border-radius:var(--r); padding:16px 20px; margin-top:16px; font-size:13.5px; color:var(--green-deep); }
.push-note { font-size:12px; color:var(--muted); margin-top:10px; font-style:italic; }

@media (max-width:900px) {
  .programme-switcher { grid-template-columns:1fr; }
  .inputs-grid { grid-template-columns:1fr; }
  .stakeholder-list { grid-template-columns:1fr; }
}

/* ---------- Standard APCC page banner ---------- */
.page-banner { background:linear-gradient(120deg, var(--hero-a), var(--hero-b)); padding:52px 24px 50px; text-align:center; }
.page-banner .banner-inner { max-width:760px; margin:0 auto; }
.page-banner h1 { color:#fff; font-family:var(--serif); font-size:32px; margin:0 0 10px; line-height:1.2; }
.page-banner p { color:rgba(255,255,255,0.88); font-size:14.5px; margin:0; line-height:1.5; }
@media (max-width:680px) { .page-banner { padding:40px 20px 38px; } .page-banner h1 { font-size:25px; } }

/* ---------- Q&A alignment fix: proper flex rows instead of ::before hanging indent ---------- */
.qa-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:22px 26px; margin-bottom:16px; }
.qa-row { display:flex; align-items:flex-start; gap:12px; }
.qa-row + .qa-row { margin-top:14px; }
.qa-badge { flex-shrink:0; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:700; margin-top:1px; }
.qa-badge.q { background:var(--gold-tint); color:#8a6d00; }
.qa-badge.a { background:var(--green-tint); color:var(--green); }
.qa-question { font-family:var(--serif); font-size:17px; color:var(--ink); margin:0; font-weight:700; line-height:1.4; flex:1; }
.qa-answer { font-size:14px; color:var(--ink-soft); line-height:1.7; margin:0; flex:1; }
.qa-readmore { display:inline-block; margin-top:12px; margin-left:38px; font-size:13px; font-weight:700; color:var(--green); text-decoration:none; }
.qa-readmore:hover { color:var(--active); }

@media (max-width:900px) {
  .tiles { grid-template-columns:repeat(2,1fr); }
  .info-grid { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
}