/* Funder outputs summary (js/funder-summary.js). Used on the funder outputs
   page and on the Projects page, so it must look the same on both: every
   property that either page's own card / table / heading styles could change
   is set here, under .fs, and nothing relies on the host page. */
.fs { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.09); padding: 22px 24px 18px; margin: 0 0 18px; color: #111827; font-size: 0.9rem; line-height: 1.4; }
.fs *, .fs *::before, .fs *::after { box-sizing: border-box; }

.fs .fs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 16px; }
.fs .fs-title { font-size: 1.15rem; font-weight: 800; color: #1B4332; margin: 0; padding: 0; line-height: 1.25; }
.fs .fs-meta { font-size: 0.82rem; color: #6B7280; margin: 3px 0 0; }
.fs .fs-more { font-size: 0.84rem; font-weight: 700; color: #2D6A4F; text-decoration: none; white-space: nowrap; padding: 7px 12px; border: 1px solid #E5E7EB; border-radius: 8px; background: #fff; }
.fs .fs-more:hover { border-color: #52B788; background: #F4FAF6; }

.fs .fs-years { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #F3F4F6; border-radius: 10px; margin: 0 0 16px; }
.fs .fs-year { border: 0; background: transparent; border-radius: 7px; padding: 6px 14px; font: inherit; font-size: 0.84rem; font-weight: 700; color: #374151; cursor: pointer; text-align: left; line-height: 1.3; }
.fs .fs-year span { display: block; font-size: 0.7rem; font-weight: 500; color: #6B7280; }
.fs .fs-year:hover { background: #E5E7EB; }
.fs .fs-year.is-active { background: #1B4332; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.fs .fs-year.is-active span { color: #D8F3DC; }
.fs .fs-year:focus-visible, .fs .fs-more:focus-visible { outline: 2px solid #2D6A4F; outline-offset: 2px; }

.fs .fs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 10px; margin: 0 0 18px; }
.fs .fs-tile { border: 1px solid #E5E7EB; border-left-width: 4px; border-radius: 10px; padding: 10px 14px; background: #FAFBFA; min-width: 0; }
.fs .fs-tile-n { font-size: 1.5rem; font-weight: 800; color: #111827; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fs .fs-tile-l { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6B7280; margin-top: 2px; }
.fs .fs-tile-achieved { border-left-color: #15803D; }
.fs .fs-tile-on_track { border-left-color: #52B788; }
.fs .fs-tile-attention { border-left-color: #DC2626; }
.fs .fs-tile-waiting { border-left-color: #9CA3AF; }
.fs .fs-tile-year { border-left-color: #1B4332; }
.fs .fs-tile-year .fs-tile-n { font-size: 1.05rem; line-height: 1.6; }
.fs .fs-tile-year .fs-bar { margin-top: 7px; }

.fs .fs-scroll { overflow-x: auto; }
.fs table.fs-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; font-size: 0.88rem; margin: 0; }
.fs .fs-c-name { width: auto; }
.fs .fs-c-num { width: 12%; }
.fs .fs-c-prog { width: 24%; }
.fs .fs-c-status { width: 164px; }
.fs .fs-table th, .fs .fs-table td { padding: 10px 12px; text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid #EEF0F2; background: none; font-weight: 400; color: #111827; text-transform: none; letter-spacing: 0; white-space: normal; font-size: inherit; }
.fs .fs-table thead th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7280; border-bottom: 2px solid #E5E7EB; padding-top: 6px; padding-bottom: 8px; white-space: nowrap; }
.fs .fs-table .fs-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs .fs-table td.fs-num { font-weight: 700; }
.fs .fs-table td.fs-word { font-weight: 500; color: #4B5563; }
.fs .fs-table th.fs-name { font-weight: 600; }
.fs .fs-table .fs-progcell { padding-left: 22px; }
.fs .fs-table tr.fs-group th { background: #F4FAF6; color: #1B4332; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; padding: 8px 12px; border-bottom: 1px solid #D8F3DC; border-top: 14px solid #fff; overflow-wrap: anywhere; }
.fs .fs-table tbody:first-of-type tr.fs-group th { border-top-width: 6px; }
.fs .fs-table tbody tr:not(.fs-group):hover th, .fs .fs-table tbody tr:not(.fs-group):hover td { background: #FAFBFA; }
.fs .fs-table tr.fs-quiet th.fs-name, .fs .fs-table tr.fs-quiet td { color: #6B7280; }
.fs .fs-table tr.fs-quiet td.fs-word { color: #9CA3AF; font-style: italic; }

.fs .fs-prog { display: flex; align-items: center; gap: 10px; }
.fs .fs-bar { display: block; flex: 1; min-width: 0; overflow: hidden; border-radius: 4px; }
.fs .fs-bar-bg { fill: #E5E7EB; }
.fs .fs-bar-fill { fill: #2D6A4F; }
.fs .fs-fill-achieved { fill: #15803D; }
.fs .fs-fill-slightly_behind { fill: #CA8A04; }
.fs .fs-fill-behind { fill: #EA580C; }
.fs .fs-fill-at_risk, .fs .fs-fill-missed { fill: #DC2626; }
.fs .fs-fill-year { fill: #1B4332; }
.fs .fs-bar-mark { fill: #111827; }
.fs .fs-pct { flex: 0 0 38px; text-align: right; font-size: 0.78rem; font-weight: 700; color: #4B5563; font-variant-numeric: tabular-nums; }

/* Every chip carries its word, so meaning never rests on colour alone. */
:is(.fs, .fs-menu) .fs-st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; background: #F3F4F6; color: #4B5563; }
:is(.fs, .fs-menu) .fs-st-achieved { background: #15803D; color: #fff; }
:is(.fs, .fs-menu) .fs-st-on_track { background: #D8F3DC; color: #1B4332; }
:is(.fs, .fs-menu) .fs-st-early { background: #DBEAFE; color: #1E40AF; }
:is(.fs, .fs-menu) .fs-st-slightly_behind { background: #FEF9C3; color: #854D0E; }
:is(.fs, .fs-menu) .fs-st-behind { background: #FED7AA; color: #9A3412; }
:is(.fs, .fs-menu) .fs-st-at_risk { background: #FEE2E2; color: #991B1B; }
:is(.fs, .fs-menu) .fs-st-missed { background: #991B1B; color: #fff; }

/* A pill set by hand carries a pencil. For a superadmin the pill is a button
   that opens the picker (js/funder-summary.js wireStatusPicker). These are
   not under .fs because the detail tab uses the same markup with its own
   pill classes, and the picker sits on <body>. */
.fs-hand { margin-left: 5px; font-weight: 400; }
.fs-caret { margin-left: 5px; font-size: 0.85em; opacity: 0.75; }
.fs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.fs-st-btn { border: 0; font-family: inherit; cursor: pointer; line-height: inherit; }
button.fs-st-btn:hover { box-shadow: 0 0 0 2px rgba(17,24,39,0.18); }
button.fs-st-btn:focus-visible { outline: 2px solid #2D6A4F; outline-offset: 2px; }

.fs-menu { position: fixed; z-index: 10000; width: 250px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,0.2); padding: 12px; font-size: 0.84rem; line-height: 1.4; color: #111827; box-sizing: border-box; }
.fs-menu * { box-sizing: border-box; }
.fs-menu-h { font-weight: 800; color: #1B4332; margin: 0 0 8px; overflow-wrap: anywhere; }
.fs-menu-sub { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7280; margin: 10px 0 4px; }
.fs-menu-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin: 0; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fs-menu-opt:hover:not(:disabled) { background: #F3F4F6; }
.fs-menu-opt.is-current { border-color: #2D6A4F; background: #F4FAF6; }
.fs-menu-opt:focus-visible { outline: 2px solid #2D6A4F; outline-offset: 1px; }
.fs-menu-opt:disabled { opacity: 0.55; cursor: default; }
.fs-menu-auto { font-weight: 700; }
.fs-menu-note { display: block; font-size: 0.74rem; font-weight: 700; color: #4B5563; margin: 10px 0 0; }
.fs-menu-note input { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid #D1D5DB; border-radius: 8px; font: inherit; font-size: 0.84rem; font-weight: 400; color: #111827; }
.fs-menu-foot { font-size: 0.74rem; color: #6B7280; margin: 8px 0 0; }
.fs-menu-err { font-size: 0.78rem; font-weight: 700; color: #991B1B; margin: 6px 0 0; }
.fs-menu-err:empty { display: none; }

.fs .fs-under { display: none; }

.fs .fs-foot { font-size: 0.76rem; color: #6B7280; margin: 12px 0 0; }

@media (max-width: 900px) {
  .fs .fs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs .fs-tile-year { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .fs { padding: 16px 14px 14px; }
  /* The cols stay (the section rows span all five) but take no width. */
  .fs .fs-table .fs-progcell, .fs .fs-table .fs-status { display: none; }
  .fs .fs-c-prog, .fs .fs-c-status { width: 0; }
  .fs .fs-under { display: block; margin-top: 5px; }
  .fs .fs-c-num { width: 23%; }
  .fs .fs-table td.fs-word { white-space: normal; }
  .fs .fs-table th, .fs .fs-table td { padding: 9px 6px; }
  .fs .fs-table { font-size: 0.82rem; }
  .fs .fs-years { display: flex; }
  .fs .fs-year { flex: 1; padding: 6px 8px; }
}