/* ===========================
   CSS
   =========================== */
:root{
  /* Fluid spacing */
  --space-1: clamp(8px, 0.8vw, 14px);
  --space-2: clamp(12px, 1.2vw, 20px);
  --space-3: clamp(16px, 1.6vw, 28px);
  --space-4: clamp(20px, 2.0vw, 36px);
  --space-5: clamp(28px, 2.6vw, 48px);
  --radius:   12px;

  /* Fluid type scale */
  --text-sm:  clamp(13px, 1.05vw, 15px);
  --text-md:  clamp(15px, 1.2vw, 17px);
  --text-lg:  clamp(18px, 1.6vw, 22px);
  --title:    clamp(26px, 3.2vw, 40px);

  /* Brand colors */
  --brand:  #003754;
  --muted:  #4C626C;
  --bg:     #DCE3E5;   /* login page background */
  --card:   #ffffff;   /* dashboard page background */
  --warn:   #AA493A;
  --accent: #723C5D;
}

/* Default dashboard background = white */
body { background-color: var(--card); }

/* Ensure brand title aligns nicely */
.navbar .brand-wrap,
.navbar-brand .brand-wrap{
  display: flex;
  align-items: center;
}

/* ===========================
   Right-aligned user menu
   =========================== */
.navbar .navbar-nav.navbar-right {
  margin-right: 0 !important;
}
/* Use flex so the right menu truly hugs the right edge on desktop */
@media (min-width: 768px){
  .navbar .navbar-collapse {
    display: flex !important;
    align-items: center;
    width: 100%;
  }
  .navbar .navbar-nav {
    flex: 0 1 auto;                 /* left-side tabs */
  }
  .navbar .navbar-nav.navbar-right {
    margin-left: auto !important;   /* push to the far right */
    flex: 0 0 auto;
  }
}

/* ===========================
   Home page layout
   =========================== */
.landing-container{
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: stretch;
  align-content: center;
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(28px, 4vw, 64px);
  padding-inline: max(clamp(24px, 4vw, 64px), calc((100vw - 1500px) / 2));
  background-color: var(--bg);
}
.home-tab-shell{
  min-height: calc(100vh - 50px);
  margin: -20px -15px 0;
}
.landing-visual{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.landing-visual img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,55,84,.12));
}
.landing-media{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}
.landing-copy{
  width: 100%;
  max-width: none;
  color: #303A3E;
}
.landing-copy p{
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  line-height: 1.6;
}
.landing-copy p:last-of-type{
  margin-bottom: 0;
}
.landing-enter-btn{
  margin-top: 0;
}

.quest-teams-section{
  margin: 0 -15px;
  padding: 0 max(clamp(24px, 4vw, 64px), calc((100vw - 1500px) / 2)) clamp(42px, 5vw, 72px);
  background: var(--bg);
}
.quest-teams-inner{
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}
.quest-teams-title{
  margin: 0 0 18px;
  color: var(--brand);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.15;
}
.quest-team-category{
  margin-top: 12px;
}
.quest-team-category-summary{
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--quest-team-category-color, var(--brand));
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
.quest-team-category-body{
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #f8f9fa;
}
.quest-team-item{
  margin-bottom: 10px;
}
.quest-team-item:last-child{
  margin-bottom: 0;
}
.quest-team-item-summary{
  padding: 8px 10px;
  border: 1px solid #dde4e8;
  border-radius: 5px;
  background: #eef2f4;
  color: #4C626C;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
.quest-team-item-body{
  padding: 10px 10px 4px;
}
.quest-team-link{
  display: inline-block;
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
}
.about-footer-shell{
  margin: 0 -15px -20px;
}
.about-footer-shell .quest-footer{
  margin: 0;
}

/* Feedback survey (preserved from the deleted draft dashboard). */
.feedback-page{
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 24px 32px 0;
  box-sizing: border-box;
}
.survey-shell{
  min-height: 570px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: none;
}
.survey-brand{
  padding: 16px 26px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.survey-brand span{
  color: var(--brand);
  font-weight: 800;
}
.survey-progress{
  height: 4px;
  background: #c7d0d3;
}
.survey-progress-fill{
  height: 100%;
  background: #c12075;
  transition: width .4s ease;
}
.survey-question{
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 30px;
  animation: surveyIn .3s ease;
}
.survey-number{
  color: #c12075;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.survey-question h1{
  margin: 10px 0;
  color: var(--brand);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.16;
}
.survey-question > p{
  color: var(--muted);
  font-size: 14px;
}
.survey-question .radio,
.survey-question .checkbox{
  position: relative;
  margin: 9px 0;
  padding: 0;
}
.survey-question .radio-inline,
.survey-question .checkbox-inline{
  display: block;
  margin: 9px 0 0;
  padding: 0;
}
.survey-question .radio label,
.survey-question .checkbox label{
  position: relative;
  display: flex;
  min-height: 46px;
  align-items: center;
  padding: 11px 46px 11px 48px;
  border: 1px solid #aebbc1;
  border-radius: 7px;
  background: #fff;
  color: #303a3e;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.survey-question .radio label:hover,
.survey-question .checkbox label:hover{
  border-color: var(--brand);
  background: #f8fbfc;
  box-shadow: 0 3px 8px rgba(0,55,84,.09);
  transform: translateY(-1px);
}
.survey-question .radio label::before,
.survey-question .checkbox label::before{
  position: absolute;
  left: 13px;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid #8da2ab;
  border-radius: 4px;
  background: #eef3f5;
  color: var(--brand);
  content: attr(data-shortcut);
  font-size: 11px;
  font-weight: 800;
}
.survey-question .radio label::after,
.survey-question .checkbox label::after{
  position: absolute;
  right: 15px;
  color: #fff;
  content: '\2713';
  font-weight: 900;
  opacity: 0;
}
.survey-question .radio label:has(input:checked),
.survey-question .checkbox label:has(input:checked){
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 0 2px rgba(0,55,84,.18);
  color: #fff;
}
.survey-question .radio label:has(input:checked)::before,
.survey-question .checkbox label:has(input:checked)::before{
  border-color: #fff;
  background: #fff;
  color: var(--brand);
}
.survey-question .radio label:has(input:checked)::after,
.survey-question .checkbox label:has(input:checked)::after{
  opacity: 1;
}
.survey-question input[type="radio"],
.survey-question input[type="checkbox"]{
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.survey-question .survey-scale .shiny-options-group{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.survey-question .survey-scale .radio{
  margin: 0;
}
.survey-question .survey-scale .radio label{
  min-height: 76px;
  justify-content: center;
  padding: 34px 7px 9px;
  font-size: 12px;
  text-align: center;
}
.survey-question .survey-scale .radio label::before{
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}
.survey-question .survey-scale .radio label::after{
  top: 9px;
  right: 10px;
}
.survey-nav{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
}
.survey-nav .btn-primary{
  margin-left: auto;
  padding: 9px 17px;
}
.survey-nav .btn-back,
.survey-thanks .btn-back{
  border: 1px solid #aeb8bc;
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  font-weight: 700;
}
.survey-nav .btn-back:hover,
.survey-nav .btn-back:focus,
.survey-thanks .btn-back:hover,
.survey-thanks .btn-back:focus{
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.survey-auto-next{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}
.survey-thanks{
  text-align: center;
}
.survey-thanks > i{
  color: #009aa9;
  font-size: 48px;
}
@keyframes surveyIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:none;}
}
@media (max-width: 800px){
  .feedback-page{
    padding: 22px 18px 0;
  }
  .survey-question{
    padding: 42px 22px;
  }
  .survey-question h1{
    font-size: 27px;
  }
  .survey-question .survey-scale .shiny-options-group{
    grid-template-columns: 1fr;
  }
  .survey-question .survey-scale .radio:last-child{
    grid-column: auto;
  }
  .survey-question .survey-scale .radio label{
    min-height: 48px;
    justify-content: flex-start;
    padding: 11px 46px 11px 48px;
    text-align: left;
  }
  .survey-question .survey-scale .radio label::before{
    top: auto;
    left: 13px;
    transform: none;
  }
  .survey-question .survey-scale .radio label::after{
    top: auto;
    right: 15px;
  }
}

.login-container{
  /* Make the login page background DCE3E5 without affecting dashboard */
  background-color: var(--bg);

  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.login-left{
  max-width: min(80ch, 100%);
  margin-inline: auto;
}
.login-left h3{
  margin: 0 0 var(--space-2) 0;
  color: var(--brand);
  font-size: var(--title);
  line-height: 1.15;
}
.login-left p,
.login-left li,
.login-left ol,
.login-left ul{
  color:#303A3E;
  line-height: 1.6;
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
}
.login-left ol{ padding-left: 1.1em; }

.login-right{ display:flex; align-items:center; justify-content:center; }
.login-card{
  width: 100%;
  max-width: min(480px, 92vw);
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 32px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
}

.login-title{
  margin: 0 0 .25rem 0;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--brand);
  font-weight: 700;
}
.login-subtitle{
  color: var(--muted);
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
}

/* Inputs expand; font scales with zoom/width */
.login-card .form-group label{
  font-weight: 600;
  color: #2c3e50;
  font-size: var(--text-sm);
}
.login-card .form-control{
  height: auto;
  padding: 10px 12px;
  font-size: var(--text-md);
  border-radius: 10px;
  width: 100% !important;
  box-sizing: border-box;
}
.login-card .shiny-input-container,
.login-card .form-group{
  width: 100% !important;
  max-width: none !important;
  margin-bottom: var(--space-2);
}

/* Button: full width; readable at every zoom */
.login-btn{
  background-color: var(--brand);
  color: #fff;
  border-color: var(--brand);
  width: 100% !important;
  font-weight: 700;
  font-size: var(--text-md);
  padding: 10px 14px;
  border-radius: 999px;
}
.login-btn:hover{ filter: brightness(1.05); }
.login-btn.landing-enter-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content !important;
  min-width: 400px;
  max-width: 100%;
  height: auto;
  padding: 12px 28px;
  line-height: 1.25;
  white-space: nowrap;
}

.login-msg{
  color: var(--warn);
  margin-top: .75rem;
  font-size: var(--text-sm);
}

/* Breakpoints */
@media (max-width: 1200px){
  .login-container{ grid-template-columns: 1fr; gap: var(--space-4); }
  .login-left{ max-width: min(90ch, 100%); }
}
@media (max-width: 900px){
  .landing-container{
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .landing-media{
    width: min(100%, 760px);
    justify-self: center;
    justify-content: flex-start;
    align-self: auto;
  }
  .landing-copy{ max-width: 90ch; }
}
@media (max-width: 680px){
  .landing-container{
    padding-block: 24px 36px;
    padding-inline: 18px;
  }
  .login-btn.landing-enter-btn{
    width: 100% !important;
    min-width: 0;
    white-space: normal;
  }
  .login-card{ max-width: 100%; }
}

/* Micro-interactions (respect reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .login-card{ transition: transform .2s ease, box-shadow .2s ease; }
  .login-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px rgba(0,0,0,.12); }
}

/* ===========================
   Moved from custom_plot_ui.R (global styles)
   =========================== */
.compass-updated{
  min-width: 240px;
  max-width: 320px;
}
.compass-filters{
  position: sticky;
  top: 60px;
  z-index: 3000;
  background: rgba(191,191,191,0.90);
  padding: 8px 12px;
  margin: 0 0 14px 0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
}
/* Tidy up inline checkbox groups */
.compass-filters .checkbox-inline,
.compass-filters .shiny-options-group > label.checkbox{
  display: inline-flex;
  align-items: center;
}
.filter-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-title{ font-weight: 700; color:#303A3E; }
.filter-help-text{
  margin: 2px 0 8px 0;
  color: #4f5f66;
  font-size: 13px;
  line-height: 1.35;
}
.filter-toggle{ opacity: .9; }

/* Tab-local filters flank the activity charts. The panels use the same
   surfaces and blue accents as the existing overview filters. */
.dashboard-three-column{
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(190px, 220px);
  align-items: start;
  gap: clamp(12px, 1.5vw, 22px);
  width: 100%;
  min-width: 0;
}
.dashboard-results{
  min-width: 0;
}
.dashboard-results > .row{
  margin-left: 0;
  margin-right: 0;
}
.dashboard-results .metrics-row{
  margin-left: 0;
  margin-right: 0;
}
.dashboard-results .metrics-row > [class*='col-']{
  padding-left: 8px;
  padding-right: 8px;
}
.dashboard-filter-sidebar{
  position: sticky;
  top: 68px;
  align-self: start;
  min-width: 0;
  max-height: calc(100vh - 82px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.dashboard-filter-panel{
  padding: 15px 13px 12px;
  background: #eef3f5;
  border: 1px solid #d5e0e3;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,55,84,.07);
  color: #303A3E;
}
.dashboard-filter-panel-heading{
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #d5e0e3;
}
.dashboard-filter-panel-heading h3,
.dashboard-filter-panel--policy-areas .filter-title{
  display: block;
  margin: 0;
  color: #003754;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.2;
}
.dashboard-filter-panel-heading p{
  margin: 5px 0 0;
  color: #4f5f66;
  font-size: 12px;
  line-height: 1.35;
}
.dashboard-filter-panel .filter-title{
  display: block;
  margin-bottom: 7px;
}
.dashboard-filter-panel .form-group{
  margin-bottom: 8px;
}
.dashboard-filter-panel .shiny-options-group > .checkbox{
  margin: 0;
}
.dashboard-filter-panel .shiny-options-group > .checkbox > label{
  display: flex;
  align-items: flex-start;
  min-height: 34px;
  margin: 0;
  padding: 7px 5px;
  border-radius: 6px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dashboard-filter-panel .shiny-options-group > .checkbox > label:hover{
  background: #dceaf0;
}
.dashboard-filter-panel .shiny-options-group input[type='checkbox']{
  position: static;
  flex: 0 0 auto;
  margin: 2px 9px 0 0;
  margin-left: 0;
  accent-color: #003754;
}
.dashboard-filter-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  padding-top: 7px;
  border-top: 1px solid #d5e0e3;
}
.dashboard-filter-actions .btn,
.dashboard-filter-actions .bttn{
  white-space: nowrap;
}
.dashboard-three-column--policy .policy-map-layout{
  grid-template-columns: minmax(0, 1fr);
}
.dashboard-three-column--policy .metrics-row > [class*='col-']{
  width: 50%;
}
.dashboard-three-column--policy .metrics-row > [class*='col-']:last-child{
  width: 100%;
}
.dashboard-filter-panel--policy-areas > .col-sm-12{
  float: none;
  width: 100%;
  padding: 0;
}
.dashboard-filter-panel--policy-areas .project-subject-filter-heading{
  display: block;
}
.dashboard-filter-panel--policy-areas .project-subject-filter-heading .filter-toggle{
  margin-top: 8px;
}
.dashboard-filter-panel--policy-areas .project-subject-filter-tiles{
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: minmax(60px, auto);
  gap: 8px;
}
.dashboard-filter-panel--policy-areas .project-subject-filter-tile-cell,
.dashboard-filter-panel--policy-areas .project-subject-filter-tile{
  min-height: 60px;
}
.dashboard-filter-panel--policy-areas .project-subject-filter-tile{
  padding: 8px 35px;
  font-size: 13px !important;
}
.dashboard-filter-panel--policy-areas .programme-area-info-button{
  top: 6px;
  left: 6px;
  padding: 5px 8px;
}
.dashboard-filter-panel--map-key .project-legend-control{
  max-height: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
@media (max-width: 1100px){
  .dashboard-three-column{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-filter-sidebar{
    position: static;
    max-height: 340px;
  }
  .dashboard-results{
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .dashboard-filter-sidebar--right{
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 700px){
  .dashboard-three-column{
    grid-template-columns: minmax(0, 1fr);
  }
  .dashboard-filter-sidebar,
  .dashboard-filter-sidebar--right,
  .dashboard-results{
    grid-column: 1;
  }
  .dashboard-filter-sidebar--left{
    grid-row: 1;
  }
  .dashboard-filter-sidebar--right{
    grid-row: 2;
  }
  .dashboard-results{
    grid-row: 3;
  }
  .dashboard-filter-sidebar{
    max-height: none;
  }
  .dashboard-three-column--policy .metrics-row > [class*='col-']{
    width: 100%;
  }
}

/* Projects + Policy Engagement: one three-level type scale. */
.overview-tab-shell{
  font-size: var(--overview-font-body, 14px);
}
.overview-tab-shell *{
  font-size: var(--overview-font-body, 14px) !important;
}
.overview-tab-shell h1,
.overview-tab-shell h2,
.overview-tab-shell h3,
.overview-tab-shell h4,
.overview-tab-shell h5,
.overview-tab-shell h6,
.overview-tab-shell .project-legend-title{
  font-size: var(--overview-font-heading, 18px) !important;
}
.overview-tab-shell h1 > strong,
.overview-tab-shell h2 > strong,
.overview-tab-shell h3 > strong,
.overview-tab-shell h4 > strong,
.overview-tab-shell h5 > strong,
.overview-tab-shell h6 > strong{
  font-size: inherit !important;
}
.overview-tab-shell .overview-tab-title{
  font-size: var(--overview-font-title, 48px) !important;
  line-height: 1.08;
}

.methodology-content{
  color: #303A3E;
  line-height: 1.55;
}
.methodology-content h3,
.methodology-content h4{
  color: var(--brand);
}
.methodology-content h4{
  margin-top: 28px;
}
.methodology-document-title{
  margin-top: 0;
}
.legal-document-content .frame-header h2{
  margin-top: 0;
  color: var(--brand);
  font-size: 24px;
  line-height: 1.1;
}
.legal-document-content h3,
.legal-document-content h4{
  color: var(--brand);
}
.legal-document-content h4{
  margin-top: 28px;
}
.legal-document-content h2 .text-info,
.legal-document-content h3 .text-info,
.legal-document-content h4 .text-info{
  color: inherit;
}
.legal-contact-block p{
  margin-top: 0;
  margin-bottom: 0;
}
.methodology-table-caption{
  margin-top: 24px;
  font-style: italic;
}
.methodology-contact-block p{
  margin-top: 0;
  margin-bottom: 0;
}
.methodology-coding-guide{
  margin: 16px 0 24px;
}
.methodology-guide-dimension{
  margin-bottom: 10px;
  border: 1px solid #b8cbd4;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.methodology-guide-dimension-summary,
.methodology-guide-subdimension-summary{
  cursor: pointer;
  color: var(--brand);
}
.methodology-guide-dimension-summary{
  padding: 12px 14px;
  font-weight: 700;
  background: #e7eef1;
}
.methodology-guide-dimension-body{
  padding: 6px 14px 14px;
  background: #f8fafb;
}
.methodology-guide-subdimension{
  margin-top: 8px;
  border: 1px solid #cad8de;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.methodology-guide-subdimension-summary{
  padding: 10px 12px;
  font-weight: 600;
  background: #f0f5f7;
}
.methodology-guide-code-list{
  padding: 0 12px 10px;
  background: #fff;
}
.methodology-guide-code{
  padding: 10px 0;
  border-top: 1px solid #dce6ea;
}
.methodology-guide-code-name{
  color: var(--brand);
}
.methodology-guide-code-explanation{
  margin-top: 4px;
  color: #303A3E;
}

.overview-subject-area-section{
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 6px;
  margin-left: 0;
  padding: 18px 18px 20px 18px;
  background: #eef3f5;
  border: 1px solid #d5e0e3;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,55,84,.07);
}
.project-subject-filter-heading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.project-subject-filter-copy{
  min-width: 0;
}
.project-subject-filter-copy .filter-help-text{
  margin-bottom: 0;
}
.project-subject-filter-heading .filter-toggle{
  flex: 0 0 auto;
  padding-top: 1px;
  white-space: nowrap;
}
.project-subject-filter-tiles-wrap{
  width: 100%;
  min-width: 0;
}
.project-subject-filter-tiles{
  display: grid;
  grid-template-columns: repeat(var(--subject-tile-columns, 8), minmax(0, 1fr));
  grid-auto-rows: minmax(76px, auto);
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.project-subject-filter-tile-cell{
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 76px;
  transition: transform .15s ease;
}
.project-subject-filter-tile-cell:hover{
  transform: translateY(-1px);
}
.project-subject-filter-tile{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 10px 46px;
  border: 2px solid #8eabb8;
  border-radius: 12px;
  background: #dceaf0;
  color: #003754;
  font-family: inherit;
  font-size: var(--overview-font-body, 14px);
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  opacity: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,.10);
  transition: opacity .15s ease, filter .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.project-subject-filter-tile:hover{
  opacity: 1;
  filter: none;
  transform: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.20);
}
.project-subject-filter-tile:focus{
  opacity: 1;
  outline: 3px solid #003754;
  outline-offset: 3px;
}
.project-subject-filter-tile.is-active{
  opacity: 1;
  filter: none;
  background: #003754;
  color: #ffffff;
  border-color: #003754;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #003754, 0 8px 18px rgba(0,55,84,.24);
}
.project-subject-filter-tile.is-active::after{
  content: "\2713";
  position: absolute;
  top: auto;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0,55,84,.35);
  border-radius: 999px;
  background: #ffffff;
  color: #003754;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.project-subject-filter-tile.is-unavailable:not(.is-active){
  opacity: 1;
  filter: none;
  background: #e1e4e6;
  color: #66757c;
  border-color: #c2c9cc;
  box-shadow: none;
}
.project-subject-filter-tile.is-unavailable.is-active{
  opacity: 1;
  filter: none;
  background: #d3d9dc;
  color: #44565f;
  border-color: #7f9098;
  border-style: solid;
  box-shadow: inset 0 0 0 2px rgba(68,86,95,.28), 0 2px 5px rgba(68,86,95,.14);
  cursor: pointer;
}
.project-subject-filter-tile.is-disabled{
  cursor: not-allowed;
}
.project-subject-filter-tile.is-disabled:hover{
  box-shadow: none;
}
.project-subject-filter-tile-label{
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.programme-area-info-button{
  position: absolute;
  z-index: 4;
  top: 8px;
  right: auto;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  max-width: 100%;
  padding: 6px 10px;
  border-color: #dceaf0;
  background-color: #dceaf0;
  color: #003754;
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
  cursor: help;
}
.programme-area-info-button:hover{
  border-color: #dceaf0;
  background-color: #dceaf0;
  color: #003754;
}
.programme-area-info-button:focus{
  border-color: #dceaf0;
  background-color: #dceaf0;
  color: #003754;
  outline: 2px solid #003754;
  outline-offset: 1px;
}
.programme-area-info-button.is-active,
.programme-area-info-button.is-active:hover,
.programme-area-info-button.is-active:focus{
  border-color: #003754;
  background-color: #003754;
  color: #ffffff;
}
.programme-area-info-button.is-unavailable,
.programme-area-info-button.is-unavailable:hover,
.programme-area-info-button.is-unavailable:focus{
  border-color: #e1e4e6;
  background-color: #e1e4e6;
  color: #66757c;
}
.programme-area-info-button.is-unavailable:focus{
  outline-color: #66757c;
}
.programme-area-info-button.is-unavailable.is-active,
.programme-area-info-button.is-unavailable.is-active:hover,
.programme-area-info-button.is-unavailable.is-active:focus{
  border-color: #7f9098;
  background-color: #d3d9dc;
  color: #44565f;
  outline-color: #44565f;
}
.programme-area-info-button i{
  font-size: 13px !important;
}
.popover{
  max-width: min(520px, calc(100vw - 24px));
}
.programme-area-info-content{
  color: #303A3E;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.programme-area-info-section + .programme-area-info-section{
  margin-top: 10px;
}
.programme-area-info-section-label{
  margin-bottom: 2px;
  color: #003754;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .055em;
}
.programme-area-info-section-text{
  color: #303A3E;
  font-size: 14px;
  line-height: 1.48;
}
@media (max-width: 1199px){
  .project-subject-filter-tiles{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 760px){
  .overview-subject-area-section{
    padding: 14px 12px 16px 12px;
  }
  .project-subject-filter-heading{
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .project-subject-filter-heading .filter-toggle{
    padding-top: 0;
  }
  .project-subject-filter-tiles{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .project-subject-filter-tiles{
    grid-template-columns: 1fr;
  }
}

.overview-subject-area-section .project-active-filters{
  margin: 12px 0 0 0;
}

.project-map-body .leaflet-top,
.project-map-body .leaflet-bottom{
  z-index: 500;
}

.project-active-filters{
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 0 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(48,58,62,.14);
}
.project-active-filter-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}
.project-active-filters-title{
  color: #303A3E;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.project-active-filter-pills{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.project-filter-subject-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #c7d4d9;
  border-radius: 999px;
  background: #ffffff;
  color: #22343b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.project-filter-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(100%, 380px);
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(48,58,62,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  color: #303A3E;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.project-filter-pill:not(.is-active){
  opacity: .42;
  filter: grayscale(1);
}
.project-filter-pill.is-disabled{
  cursor: default;
  pointer-events: none;
}
.project-filter-pill:hover,
.project-filter-pill:focus{
  opacity: 1;
  filter: none;
  border-color: #506f79;
  background: rgba(255,255,255,.85);
  color: #13232a;
  outline: none;
}
.project-filter-pill.is-active{
  opacity: 1;
  filter: none;
  border-color: #003754;
  background: #003754;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,55,84,.26);
}
.project-filter-pill-label{
  flex: 0 0 auto;
}
.project-filter-pill-value{
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1f2933;
  font-size: 13px;
  font-weight: 700;
}
.project-filter-pill.is-active .project-filter-pill-value{
  color: #ffffff;
}
.project-filter-pill-x{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: rgba(49,93,103,.14);
  color: #315d67;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}
.project-filter-pill.is-active .project-filter-pill-x{
  background: rgba(255,255,255,.22);
  color: #ffffff;
}

/* ===========================
   Equal-height rows for metric tiles
   =========================== */
.metric-section{
  width:100%;
  min-width:0;
  margin-bottom:20px;
}
.metrics-row{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.metrics-row > [class*='col-']{
  display:flex;
  min-width:0;
  max-width:100%;
}
.metrics-row > [class*='col-'] > .metric-wrap{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  max-width:100%;
}

/* Make each tile a flex column that fills its column */
.metric-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  max-width:100%;
}

/* Give the plot area a fixed minimum and let it stretch */
.metric-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px; /* tune 360–480 if you like */
  min-width:0;
  max-width:100%;
}
.metric-body > .shiny-spinner-output-container,
.metric-body > .shiny-html-output,
.metric-body > .html-widget,
.metric-body > .leaflet{
  width:100%;
}

.activity-trend-card-body{
  width:100%;
  align-self:stretch;
}
.activity-trend-mode{
  display:flex;
  justify-content:flex-start;
  margin:0 0 8px 0;
}
.activity-trend-category{
  margin:0 0 8px 0;
  padding:8px 10px;
  border:1px solid rgba(48,58,62,.16);
  border-radius:8px;
  background:rgba(255,255,255,.26);
}
.activity-trend-category .control-label{
  display:block;
  margin-bottom:6px;
  color:#303A3E;
  font-size:13px;
  font-weight:700;
}
.activity-trend-category .shiny-options-group{
  max-height:92px;
  overflow-y:auto;
}
.activity-trend-note{
  margin:0 0 8px 0;
  color:#4C626C;
  font-size:13px;
  line-height:1.35;
}

.project-sankey-output,
.project-sankey-output .shiny-spinner-output-container,
.project-sankey-output .shiny-plot-output,
.project-sankey-output .html-widget,
.project-sankey-output .plotly{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:100% !important;
  overflow: visible !important;
}
.project-sankey-output{
  scrollbar-width: thin;
}

.project-network-card-body{
  width:100%;
  min-width:0;
  align-self:stretch;
}
.project-network-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  margin:0 0 12px 0;
  padding:12px 14px;
  border:1px solid rgba(0,55,84,.14);
  border-radius:10px;
  background:rgba(255,255,255,.42);
}
.project-network-summary-mode{
  flex:0 1 auto;
  color:#003754;
  font-weight:800;
}
.project-network-summary-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.project-network-summary-stat{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:5px 9px;
  border-radius:999px;
  background:#ffffff;
  color:#4C626C;
  white-space:nowrap;
}
.project-network-summary-value{
  color:#003754;
  font-weight:800;
}
.project-network-summary-label{
  color:#4C626C;
}
.project-network-view-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 18px;
  width:100%;
  margin:0 0 12px 0;
}
.project-network-view-switch .form-group,
.project-network-view-switch .shiny-options-group{
  margin:0;
}
.project-network-view-switch .shiny-options-group{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid rgba(0,55,84,.18);
  border-radius:999px;
  background:rgba(255,255,255,.6);
}
.project-network-view-switch .radio-inline{
  margin:0;
  padding:0;
}
.project-network-view-switch .radio-inline + .radio-inline{
  margin-left:0;
}
.project-network-view-switch .radio-inline label{
  position:relative;
  display:block;
  margin:0;
  cursor:pointer;
}
.project-network-view-switch input[type='radio']{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}
.project-network-view-switch input[type='radio'] + span{
  display:block;
  padding:7px 13px;
  border-radius:999px;
  color:#4C626C;
  font-size:13px;
  font-weight:700;
  line-height:1;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.project-network-view-switch input[type='radio']:checked + span{
  background:#003754;
  box-shadow:0 2px 7px rgba(0,55,84,.18);
  color:#ffffff;
}
.project-network-view-switch input[type='radio']:focus-visible + span{
  outline:3px solid rgba(0,154,169,.28);
  outline-offset:2px;
}
.project-network-view-switch label.is-disabled{
  cursor:not-allowed;
}
.project-network-view-switch label.is-disabled span{
  background:transparent;
  box-shadow:none;
  color:#8E999E;
  opacity:.58;
}
.project-network-map-availability-note{
  color:#627984;
  font-size:12px;
  line-height:1.35;
  text-align:right;
}
.project-network-map-status{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  max-width:58%;
  color:#4C626C;
  font-size:12px;
  line-height:1.35;
  text-align:right;
}
.project-network-map-status .fa{
  color:#007A87;
}
.project-network-map-status.has-unmapped .fa{
  color:#93282C;
}
.project-network-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 20px;
  width:100%;
  margin:0 0 8px 0;
  color:#4C626C;
}
.project-network-legend-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.project-network-legend-node{
  display:inline-block;
  width:14px;
  height:14px;
  border:1px solid #ffffff;
  box-shadow:0 0 0 1px rgba(0,55,84,.18);
}
.project-network-legend-node.is-area{
  border-radius:999px;
  background:conic-gradient(
    #003754 0 12.5%,
    #ED6A5A 12.5% 25%,
    #E1B742 25% 37.5%,
    #5596A7 37.5% 50%,
    #93282C 50% 62.5%,
    #9B8BC0 62.5% 75%,
    #007A87 75% 87.5%,
    #8E496D 87.5% 100%
  );
}
.project-network-legend-node.is-organisation{
  border-radius:999px;
  border-color:#4C626C;
  background:#F7F9F9;
}
.project-network-legend-line{
  display:inline-block;
  width:30px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#003754 0 25%,#ED6A5A 25% 50%,#E1B742 50% 75%,#007A87 75% 100%);
}
.project-network-interaction-hint{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin:2px 0 12px 0;
  color:#4C626C;
  font-size:12px;
  line-height:1.45;
}
.project-network-interaction-hint .fa{
  color:#007A87;
  font-size:14px;
}
.project-network-map-scale-legend{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 7px 0;
  color:#4C626C;
  font-size:11.5px;
  line-height:1.3;
}
.project-network-map-bundle-symbol{
  position:relative;
  display:inline-block;
  width:34px;
  height:14px;
  flex:0 0 34px;
}
.project-network-map-bundle-symbol span{
  position:absolute;
  left:0;
  width:34px;
  border-radius:999px;
  background:#627984;
}
.project-network-map-bundle-symbol .is-thin{
  top:2px;
  height:2px;
  opacity:.55;
}
.project-network-map-bundle-symbol .is-thick{
  bottom:1px;
  height:5px;
  opacity:.75;
}
.project-network-plot-scroll{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:thin;
}
.project-network-canvas-shell{
  position:relative;
  width:100%;
  min-width:760px;
}
.project-network-canvas-shell > .shiny-html-output{
  width:100%;
  min-width:760px;
}
.project-network-zoom-controls{
  position:absolute;
  z-index:20;
  top:12px;
  right:12px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border:1px solid rgba(0,55,84,.16);
  border-radius:9px;
  background:rgba(255,255,255,.9);
  box-shadow:0 5px 16px rgba(0,55,84,.12);
}
.project-network-zoom-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#003754;
  font-size:22px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.project-network-zoom-button.is-fit{
  font-size:14px;
}
.project-network-zoom-button:hover,
.project-network-zoom-button:focus-visible{
  background:#E9F3F4;
  color:#007A87;
  outline:none;
}
.project-network-plot-scroll .visNetwork,
.project-network-plot-scroll .vis-network,
.project-network-plot-scroll .html-widget{
  width:100% !important;
  min-width:760px !important;
  max-width:none !important;
}
.project-network-plot-scroll canvas{
  border-radius:10px;
  outline:none;
}
.project-network-plot-scroll .vis-navigation .vis-up,
.project-network-plot-scroll .vis-navigation .vis-down,
.project-network-plot-scroll .vis-navigation .vis-left,
.project-network-plot-scroll .vis-navigation .vis-right{
  display:none !important;
}
.project-network-plot-scroll .vis-navigation .vis-button{
  filter:grayscale(1) sepia(.35) hue-rotate(145deg) saturate(2.5) brightness(.62) !important;
  opacity:.72 !important;
  transition:opacity .15s ease;
}
.project-network-plot-scroll .vis-navigation .vis-button:hover{
  opacity:1 !important;
  box-shadow:none !important;
}
.project-network-plot-scroll .vis-tooltip{
  max-width:340px;
  padding:9px 11px !important;
  border:1px solid rgba(0,55,84,.16) !important;
  border-radius:8px !important;
  background:#ffffff !important;
  box-shadow:0 8px 24px rgba(0,55,84,.14) !important;
  color:#303A3E !important;
  font-family:Arial,sans-serif !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

.project-network-map-shell{
  position:relative;
  width:100%;
  min-width:0;
  height:720px;
  overflow:hidden;
  border:1px solid rgba(0,55,84,.14);
  border-radius:10px;
  background:#D9EDF2;
}
.project-network-map-shell .leaflet-container{
  background:#D9EDF2;
}
.project-network-map-shell canvas.leaflet-interactive{
  cursor:grab;
}
.project-network-map-shell canvas.leaflet-interactive:active{
  cursor:grabbing;
}
.project-network-map-shell .leaflet,
.project-network-map-shell .html-widget,
.project-network-map-shell .leaflet-map-pane{
  width:100% !important;
  max-width:none !important;
}
.project-network-country-legend{
  position:absolute;
  right:10px;
  bottom:24px;
  z-index:500;
  min-width:178px;
  padding:8px 10px;
  border:1px solid rgba(0,55,84,.16);
  border-radius:7px;
  background:rgba(255,255,255,.93);
  box-shadow:0 3px 12px rgba(0,55,84,.12);
  color:#303A3E;
  font-size:11px;
  line-height:1.25;
  pointer-events:none;
}
.project-network-country-legend-title{
  margin-bottom:5px;
  color:#003754;
  font-weight:800;
}
.project-network-country-legend-item{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:3px;
}
.project-network-country-legend-swatch{
  display:inline-block;
  flex:0 0 auto;
  width:24px;
  height:10px;
  border:1px solid rgba(0,55,84,.24);
  border-radius:2px;
}
.leaflet-tooltip.project-network-map-tooltip{
  min-width:190px;
  max-width:340px !important;
  padding:8px 10px;
  border:1px solid rgba(0,55,84,.16);
  border-radius:7px;
  background:#ffffff;
  box-shadow:0 7px 20px rgba(0,55,84,.14);
  color:#303A3E;
  font-size:12px;
  line-height:1.4;
  white-space:normal;
}
.leaflet-tooltip.project-network-country-map-tooltip{
  min-width:220px;
  max-width:300px !important;
}
.project-network-country-name{
  margin-bottom:3px;
  color:#003754;
  font-size:13px;
  font-weight:800;
}
.project-network-country-organisations{
  margin-top:6px;
  padding-top:5px;
  border-top:1px solid rgba(0,55,84,.10);
}
.project-network-country-organisations > span:first-child{
  color:#4C626C;
  font-weight:700;
}
.project-network-country-more{
  color:#627984;
  font-style:italic;
}
.leaflet-tooltip.project-network-map-area-label{
  max-width:110px;
  padding:3px 6px;
  border:0;
  border-radius:5px;
  background:rgba(255,255,255,.82);
  box-shadow:0 1px 4px rgba(0,55,84,.12);
  color:#003754;
  font-size:11px;
  font-weight:800;
  line-height:1.15;
  white-space:normal;
  text-align:center;
}
.leaflet-tooltip.project-network-map-area-label::before{
  display:none;
}
.project-network-map-label-details{
  display:none;
}
.leaflet-tooltip.project-network-map-area-label.is-expanded{
  min-width:220px;
  max-width:340px !important;
  padding:8px 10px;
  border:1px solid rgba(0,55,84,.16);
  border-radius:7px;
  background:#ffffff;
  box-shadow:0 7px 20px rgba(0,55,84,.14);
  color:#303A3E;
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  text-align:left;
}
.leaflet-tooltip.project-network-map-area-label.is-expanded .project-network-map-label-code{
  display:none;
}
.leaflet-tooltip.project-network-map-area-label.is-expanded .project-network-map-label-details{
  display:block;
}
.leaflet-tooltip.project-network-map-hub-label{
  width:0;
  min-width:0;
  height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  color:#ffffff;
  pointer-events:none;
}
.leaflet-tooltip.project-network-map-hub-label::before{
  display:none;
}
.project-network-map-hub-count{
  position:absolute;
  left:-23px;
  top:-23px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  color:#ffffff;
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-align:center;
}
.project-network-map-hub-name{
  position:absolute;
  left:30px;
  top:-13px;
  padding:5px 8px;
  border:1px solid rgba(0,55,84,.14);
  border-radius:6px;
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 7px rgba(0,55,84,.12);
  color:#003754;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
.leaflet-tooltip.project-network-map-halo-label{
  padding:4px 8px;
  border:1px solid rgba(0,55,84,.12);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 2px 7px rgba(0,55,84,.10);
  color:#003754;
  font-size:10.5px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
}
.leaflet-tooltip.project-network-map-halo-label::before{
  display:none;
}
.project-network-map-shell .leaflet-popup-content{
  min-width:190px;
  margin:12px 16px;
  color:#303A3E;
  font-size:12px;
  line-height:1.45;
}


/* avoid horizontal overflow from htmlwidgets */
.html-widget{ max-width:100% !important; }

/* Larger geomap hover labels */
.geomap-tooltip{
  font-size: 20px;
  line-height: 1;
  padding: 8px 12px;
  max-width: 700px;
  min-width: 240px;
  width: auto;
  white-space: normal;
}
.leaflet-tooltip.geomap-tooltip{
  max-width: 700px !important;
  width: auto !important;
}
.leaflet-tooltip.policy-map-tooltip{
  min-width: 240px;
  max-width: 440px !important;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.policy-map-hover-card{
  display: block;
  max-width: 100%;
}
.policy-map-hover-organisation{
  font-weight: 700;
}
.policy-map-hover-record{
  margin-top: 5px;
}
.policy-map-hover-record + .policy-map-hover-record{
  padding-top: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.policy-map-hover-entity{
  font-weight: 600;
}
.policy-map-hover-body{
  margin-top: 1px;
}
.policy-map-popup-location{
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

/* Overview maps: external legend column + details panel */
.project-map-body{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.overview-map-layout{
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.project-map-canvas{
  width: 100%;
}
.overview-map-canvas{
  width: 100%;
  min-width: 0;
}
.project-map-legend-output{
  position: static;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  pointer-events: auto;
}
.project-map-legend-output .project-legend-control{
  width: 100%;
  max-width: none;
  max-height: 500px;
  box-sizing: border-box;
  background: #ffffff;
  pointer-events: auto;
}
.project-detail-card{
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 14px;
  color: #303A3E;
}
.project-detail-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2933;
  min-width: 0;
  overflow-wrap: anywhere;
}
.project-detail-card--project{
  padding: 16px 18px;
}
.project-detail-card--project .project-detail-title{
  font-size: 2.65rem;
  line-height: 1.15;
}
.project-detail-divider{
  border: 0;
  border-top: 1px solid #d7dbe0;
  margin: 10px 0 10px;
}
.project-detail-subtitle{
  margin: 0 0 4px;
  font-weight: 600;
}
.project-detail-description + .project-detail-description{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #d7dbe0;
}
.project-detail-summary-area{
  margin: 0 0 5px;
  color: #315d67;
}
.project-detail-area-context{
  min-width: 0;
}
.project-detail-area-context--project{
  margin: 10px 0 12px;
}
.project-detail-area-context--output{
  margin-top: 7px;
  padding-left: .85rem;
}
.project-detail-area-context-label{
  margin-bottom: 5px;
  color: #5f6b72;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.3;
}
.project-detail-area-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  min-width: 0;
}
.project-detail-area-badge{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid #b8cbd2;
  border-radius: 999px;
  background: #eaf1f3;
  color: #003754;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.project-detail-empty{
  color: #6c757d;
}
.project-map-body .project-selection-toolbar{
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(31, 41, 51, .06);
  overflow-x: auto;
  white-space: nowrap;
}
.project-map-body .project-selection-group{
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}
.project-map-body .project-selection-label{
  color: #5f6b72;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.project-map-body .project-selection-title{
  color: #1f2933;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  max-width: min(34vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
.project-map-body .project-selection-actions{
  flex: 0 0 auto;
}
.overview-action-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  height: auto;
  border: 1px solid #7D0037 !important;
  border-radius: 999px;
  background: #7D0037 !important;
  background-color: #7D0037 !important;
  color: #ffffff !important;
  padding: 7px 12px 7px 8px !important;
  font-size: var(--overview-font-body, 14px) !important;
  font-family: inherit !important;
  font-weight: 700;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 6px 14px rgba(125, 0, 55, .24) !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.overview-action-btn .overview-action-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #ffffff;
  font-size: var(--overview-font-body, 14px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.overview-action-btn:hover,
.overview-action-btn:focus{
  border-color: #590027 !important;
  background: #590027 !important;
  background-color: #590027 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(89, 0, 39, .28) !important;
  transform: translateY(-1px);
}
.quest-footer{
  margin: 48px -45px -45px;
  padding: 28px 24px;
  background: var(--brand);
  color: #fff;
  text-align: center;
}
.quest-footer-inner{
  width: min(100%, 1100px);
  margin: 0 auto;
}
.quest-footer-address{
  display: block;
  line-height: 1.7;
}
.quest-footer-address a{
  color: #fff;
  text-decoration: underline;
}
.quest-footer-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.quest-footer-button{
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
}
.quest-footer-button:hover,
.quest-footer-button:focus{
  background: #fff;
  color: var(--brand);
}
.quest-footer-modal .modal-content{
  color: #303A3E;
}
.quest-footer-modal .modal-header{
  min-height: 48px;
}
.quest-footer-modal .modal-body{
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
@media (max-width: 767px){
  .overview-tab-shell{
    padding: 0 0 24px 0 !important;
    margin-top: 0 !important;
  }
  .overview-tab-shell > .row{
    margin-left: 0;
    margin-right: 0;
  }
  .overview-tab-shell .overview-tab-title{
    margin-top: 10px;
    font-size: var(--overview-font-title, 48px) !important;
  }
  .overview-tab-shell .well{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .overview-tab-shell .well .row{
    margin-left: -5px;
    margin-right: -5px;
  }
  .overview-tab-shell .well [class*='col-']{
    padding-left: 5px;
    padding-right: 5px;
  }
  .quest-footer{
    margin: 40px 0 -24px;
    padding: 24px 18px;
  }
  .overview-tab-shell #project_map,
  .overview-tab-shell #policy_map{
    height: 420px !important;
  }
  .project-tab-shell #project_funding_type_plot,
  .project-tab-shell #project_field_of_work_plot,
  .project-tab-shell #project_cooperation_mode_plot,
  .project-tab-shell #project_role_plot{
    height: 390px !important;
  }
  .project-sankey-output{
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 6px;
  }
  .project-sankey-output .shiny-spinner-output-container,
  .project-sankey-output .shiny-plot-output,
  .project-sankey-output .html-widget,
  .project-sankey-output .plotly{
    width: 720px !important;
    min-width: 720px !important;
    max-width: none !important;
  }
  .project-network-summary{
    align-items:flex-start;
    flex-direction:column;
  }
  .project-network-summary-stats{
    justify-content:flex-start;
  }
  .project-network-view-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .project-network-map-status{
    align-items:flex-start;
  }
  .project-network-legend{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .compass-filters{
    position: static;
    top: auto;
  }
  .metrics-row{
    display: block;
    width: 100%;
  }
  .metrics-row > [class*='col-']{
    display: block;
    width: 100%;
    min-width: 0;
  }
  .metrics-row > [class*='col-'] > .metric-wrap,
  .metric-card,
  .metric-body{
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .metric-body{
    min-height: 320px;
  }
  .overview-map-layout{
    grid-template-columns: minmax(0, 1fr);
  }
  .project-map-legend-output .project-legend-control{
    width: 100%;
    max-width: none;
    max-height: 220px;
  }
  .project-map-body .project-selection-toolbar{
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    white-space: normal !important;
  }
  .project-map-body .project-selection-group{
    flex-wrap: wrap !important;
  }
  .project-map-body .project-selection-project{
    width: 100%;
    margin-right: 0 !important;
  }
  .project-map-body .project-selection-actions{
    margin-left: 0;
  }
  .project-map-body .project-selection-title{
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}
.project-detail-line{
  margin-bottom: 6px;
}
.project-detail-summary{
  line-height: 1.5;
}
.project-detail-summary-section{
  margin-top: 8px;
}
.project-detail-section{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #d7dbe0;
}
.project-detail-section-title{
  margin: 0 0 9px;
  color: #25343a;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
}
.project-detail-funding-phase + .project-detail-funding-phase{
  margin-top: 14px;
}
.project-detail-phase-title{
  margin: 0 0 5px;
  color: #315d67;
}
.project-detail-not-documented{
  color: #6c757d;
  font-weight: 400;
  font-style: italic;
}
.project-detail-partner-list{
  list-style: disc;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.25rem;
}
.project-detail-partner-list li{
  display: list-item;
}
.project-detail-simple-list{
  list-style: disc;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.25rem;
}
.project-detail-simple-list > li + li{
  margin-top: 4px;
}
.project-detail-nested-list{
  list-style: circle;
  margin: 4px 0 0;
  padding-left: 1.25rem;
}
.project-detail-links-list{
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.project-output-item{
  padding-left: 0;
}
.project-output-item + .project-output-item{
  margin-top: 10px;
}
.project-output-row{
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.project-output-primary-link,
.project-output-title-text{
  font-weight: 650;
}
.project-output-primary-link{
  color: #18BC9C;
}
.project-output-primary-link:hover,
.project-output-primary-link:focus{
  color: #0f7f69;
}
.project-output-separator{
  margin: 0 .45rem;
  color: #5f6b72;
  white-space: nowrap;
}
.project-output-main-text{
  font-weight: 400;
}
.project-output-status{
  margin-left: .45rem;
  color: #5f6b72;
  font-size: .88rem;
  font-style: italic;
  white-space: nowrap;
}
.project-output-additional{
  margin-top: 3px;
  padding-left: .85rem;
  color: #4b5563;
  font-size: .9rem;
  line-height: 1.45;
}
.project-output-additional-link{
  overflow-wrap: anywhere;
}
.project-detail-partners-empty{
  color: #6c757d;
  font-size: 0.9rem;
}
.project-legend-control{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  padding: 8px 10px;
  max-height: 220px;
  max-width: 320px;
  overflow: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.project-legend-title{
  color: #303A3E;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 7px 0;
}
.project-legend-control.is-empty{
  color: #6c757d;
}
.project-legend-item{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 6px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  user-select: none;
  transition: opacity .15s ease, filter .15s ease;
}
.project-legend-item:hover .project-legend-text,
.project-legend-item:focus .project-legend-text{
  text-decoration: underline;
}
.project-legend-item:last-child{
  margin-bottom: 0;
}
.project-legend-item--static{
  cursor: default;
}
.project-legend-item--static:hover .project-legend-text,
.project-legend-item--static:focus .project-legend-text{
  text-decoration: none;
}
.project-legend-swatch{
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #333;
  flex: 0 0 12px;
}
.project-legend-text{
  color: #303A3E;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.project-legend-item.is-active{
  font-weight: 700;
}
.project-legend-item.is-active .project-legend-text{
  font-weight: 700;
}
.project-legend-item.is-active .project-legend-swatch{
  outline: 2px solid #723C5D;
}
.project-legend-control.has-active .project-legend-item:not(.is-active){
  opacity: .38;
  filter: grayscale(1);
}