/* =========================================================
   District funding explorer
   ========================================================= */

.funding-section{
  padding:0;
}

.funding-panel{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(225,230,222,.96);
  border-radius:20px;
  box-shadow:0 18px 46px rgba(28,67,32,.09);
}

.funding-controls{
  position:sticky;
  top:18px;
  overflow:hidden;
}

.funding-controls-head{
  border-radius:17px 17px 0 0;
  padding:18px 20px 16px;
  color:#fff;
  background:linear-gradient(135deg,var(--forest-dark),var(--forest));
}

.funding-step-number{
  width:32px;
  height:32px;
  margin-bottom:13px;
  display:inline-grid;
  place-items:center;
  font-weight:800;
  background:rgba(250,248,244,.16);
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
}

.funding-panel-title{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:1.55rem;
  line-height:1.05;
}

.funding-panel-intro{
  margin:6px 0 0;
  color:#D5E2D3;
  font-size:.78rem;
  line-height:1.45;
}

.funding-controls-body{
  padding:18px;
}

.funding-field-label{
  display:block;
  margin:0 0 7px;
  color:var(--forest-dark);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.funding-controls select{
  width:100%;
  padding:10px 12px;
  color:var(--text);
  background:#fff;
  border:1px solid #B7C1B4;
  border-radius:10px;
  outline:none;
}

.funding-controls select:focus,
.weight-review-row input:focus{
  border-color:var(--forest);
  box-shadow:0 0 0 4px rgba(27,94,32,.10);
}

.funding-control-group{
  margin-top:16px;
}

.funding-control-group-title{
  margin:0 0 6px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.funding-check{
  min-height:40px;
  margin:0;
  padding:7px 8px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  border-bottom:1px solid #EDF1EC;
  border-radius:8px;
  transition:background .18s ease,color .18s ease;
}

.funding-check:hover{
  background:var(--sage);
}

.funding-check input{
  width:17px;
  height:17px;
  flex:0 0 17px;
  accent-color:var(--forest);
}
.funding-check > span{
    display:flex;
    align-items:center;
    gap:.35rem;
}

.funding-check:has(input:checked){
  color:var(--forest-dark);
  background:#F1F6EF;
}

.funding-sped-wrap{
  margin-top:12px;
  padding:12px;
  background:#FAFBF9;
  border:1px solid var(--line);
  border-radius:12px;
}

.funding-reset{
  width:100%;
  margin-top:16px;
  padding:10px 14px;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  background:var(--forest);
  border:1px solid var(--forest);
  border-radius:10px;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}

.funding-reset:hover{
  background:var(--forest-dark);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(17,61,24,.18);
}

.funding-small{
  margin:15px 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.58;
}

#lookupStatus.is-error{
  color:#9A5537;
  font-weight:700;
}

.funding-workspace{
  min-width:0;
}

.funding-summary{
  position:relative;
  overflow:hidden;
  padding:14px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(28,67,32,.05);
}

.funding-summary::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:var(--forest);
}

.funding-summary:nth-child(2)::before{
  background:var(--copper);
}

.funding-comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.funding-bar-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 16px 40px rgba(28,67,32,.075);
}

.funding-bar-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:7px;
  background:linear-gradient(90deg,var(--forest-dark),#65845E);
}

.funding-bar-card.cost::before{
  background:linear-gradient(90deg,#8B4F2F,var(--copper));
}

.funding-bar-card-head{
  padding:18px 18px 14px;
  background:linear-gradient(180deg,#fff,#FBFCFA);
  border-bottom:1px solid #EDF1EC;
}

.funding-bar-heading{
  margin:0;
  color:var(--forest-dark);
  font-family:"Cormorant Garamond",serif;
  font-size:1.5rem;
  line-height:1.08;
}

.funding-bar-subtitle{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.76rem;
}

.funding-bar-content{
  position:relative;
  min-height:430px;
  padding:18px 16px;
  display:grid;
  grid-template-columns:120px minmax(210px,245px);
  justify-content:center;
  gap:16px;
  align-items:start;
  overflow:visible;
}

.funding-bar-wrap{
  position:relative;
  z-index:2;
  height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
}

.funding-bar-total{
  margin-bottom:10px;
  color:var(--forest-dark);
  font-size:1.55rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.funding-bar{
  position:relative;
  width:112px;
  height:320px;
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-start;
  overflow:hidden;
  background:
    linear-gradient(to top,rgba(17,61,24,.055) 1px,transparent 1px),
    #F8FAF7;
  background-size:100% 20%;
  border:1px solid #CCD4CA;
  border-radius:14px 14px 5px 5px;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.55);
}

.funding-bar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 32%,rgba(0,0,0,.045));
}

.funding-segment{
  position:relative;
  width:100%;
  min-height:0;
  padding:0 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
  font-size:.66rem;
  font-weight:800;
  line-height:1.12;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  border-top:1px solid rgba(255,255,255,.68);
  transition:height .72s cubic-bezier(.16,.8,.22,1);
}

.funding-legend{
  position:relative;
  z-index:2;
  width:100%;
  max-width:245px;
  align-self:start;
  display:flex;
  flex-direction:column;
  padding-top:0;
}

.funding-legend-item{
  min-height:34px;
  padding:5px 2px;
  display:grid;
  grid-template-columns:11px minmax(0,1fr) auto;
  column-gap:7px;
  align-items:center;
  font-size:.73rem;
  background:transparent;
  border:0;
  border-radius:0;
}

.funding-swatch{
  width:11px;
  height:11px;
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

.funding-legend-name{
  min-width:0;
  font-weight:650;
  line-height:1.18;
}

.funding-legend-amount{
  justify-self:end;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.funding-comparison-note{
  margin:16px 2px 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.55;
}

.funding-details{
  margin-top:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
}

.funding-details summary{
  padding:17px 20px;
  color:var(--forest-dark);
  font-weight:800;
  cursor:pointer;
  background:#FBFCFA;
}

.funding-details-body{
  padding:2px 20px 20px;
  border-top:1px solid var(--line);
}

.weight-review{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.weight-review-row{
  padding:13px;
  background:#FBFCFA;
  border:1px solid var(--line);
  border-radius:12px;
}

.weight-review-row label{
  display:block;
  margin-bottom:7px;
  color:var(--forest-dark);
  font-size:.78rem;
  font-weight:800;
}

.weight-review-row input{
  width:100%;
  padding:10px 11px;
  color:var(--text);
  background:#fff;
  border:1px solid #B7C1B4;
  border-radius:9px;
  outline:none;
}

@media(min-width:981px) and (max-width:1250px){
  .funding-bar-content{
    grid-template-columns:120px minmax(230px,280px);
  }

  .funding-legend{
    max-width:280px;
  }
}

@media(max-width:1250px){
  .funding-comparison{
    grid-template-columns:1fr;
  }

  .funding-bar-content{
    min-height:455px;
  }
}

@media(max-width:980px){

  .funding-controls{
    position:static;
  }
}

@media(max-width:760px){

  .weight-review{
    grid-template-columns:1fr;
  }

  .funding-bar-content{
    grid-template-columns:1fr;
    justify-content:stretch;
    min-height:0;
  }

  .funding-bar-wrap{
    height:350px;
  }

  .funding-legend{
    padding-top:0 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .funding-segment,
  .funding-reset{
    transition:none;
  }
}

/* =========================================================
   Budget builder
   ========================================================= */

.bb{
  margin:22px 0 6px;
  padding:18px 18px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--sand);
}

.bb-status{
  margin:0 0 14px;
  padding:11px 14px;
  border-radius:12px;
  font-size:.92rem;
  line-height:1.45;
}

.bb-status.is-ok{
  border:1px solid #9CC29A;
  background:#EEF6EC;
  color:var(--forest-dark);
}

.bb-status.is-over{
  border:2px solid #B3261E;
  background:#FDECEA;
  color:#7A1712;
}

.bb-status.is-over strong{color:#B3261E}

.bb-status-note{
  display:block;
  margin-top:4px;
  font-size:.84rem;
  opacity:.9;
}

.bb-grid{
  display:grid;
  gap:18px;
}

.bb-pie{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.bb-pie svg{
  width:260px;
  height:260px;
  max-width:100%;
}

.bb-slice{stroke:var(--white);stroke-width:1.5}

.bb-ring-ok{fill:#9CC29A}
.bb-ring-over{fill:#B3261E}
.bb-ring-spare{fill:#E6E0D3}

.bb-center-big{
  font-size:22px;
  font-weight:800;
  fill:var(--forest-dark);
}

.bb-center-small{
  font-size:11px;
  font-weight:700;
  fill:var(--muted);
}

.bb-center-small.is-over{fill:#B3261E}

.bb-legend{
  display:grid;
  gap:6px;
  width:100%;
}

.bb-legend-row{
  display:grid;
  grid-template-columns:14px minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
  padding:6px 8px;
  border-radius:8px;
  background:var(--white);
  font-size:.84rem;
}

.bb-swatch{
  width:14px;
  height:14px;
  margin-top:2px;
  border-radius:3px;
}

.bb-swatch.is-locked{
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 5px) !important;
}

.bb-legend-name strong{color:var(--forest-dark)}

.bb-legend-name small{
  display:block;
  color:var(--muted);
  font-size:.76rem;
}

.bb-lock{
  display:inline-block;
  margin-left:4px;
  padding:0 6px;
  border-radius:999px;
  background:var(--sand);
  color:var(--muted);
  font-size:.7rem;
  font-weight:700;
  white-space:nowrap;
}

.bb-legend-amount{
  text-align:right;
  font-weight:800;
  color:var(--forest-dark);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.bb-legend-amount small{
  display:block;
  font-weight:700;
  font-size:.74rem;
  color:var(--muted);
}

.bb-legend-amount small.is-up{color:#B3261E}
.bb-legend-amount small.is-down{color:var(--forest)}

.bb-notes{margin-top:14px}

.bb-notes-body{
  padding:0 16px 12px;
  font-size:.86rem;
  line-height:1.5;
  color:var(--text);
}

.bb-notes-body ul{margin:0;padding-left:18px}
.bb-notes-body li + li{margin-top:6px}

@media(min-width:860px){
  .bb-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
}

/* --- responsive ----------------------------------------- */

@media(min-width:760px){
  .journey-choices{grid-template-columns:1fr 1fr}
  .journey-fork-buttons{grid-template-columns:1fr 1fr}

  .funding-columns{grid-template-columns:1fr 1fr}
}

@media(max-width:620px){
  .journey-invite{padding:22px 18px 24px}
  .journey-card,
  .journey-bridge{padding:18px}

  .journey-open{
    flex-wrap:wrap;
    font-size:.95rem;
  }

  .journey-flow,
  .journey-versus{
    grid-template-columns:1fr;
    justify-items:stretch;
  }

  .journey-bucket--result{width:auto}

  /* The inset on the aside is only worth having when there is room for it. */
  .funding-summary{padding:14px 15px}

  .journey-fork{padding:16px}

  .journey-layer{
    flex-direction:column;
    align-items:flex-start;
  }

  .journey-legend-item{
    grid-template-columns:14px minmax(0,1fr);
    row-gap:4px;
  }

  .journey-legend-amount{grid-column:2}
}

@media(prefers-reduced-motion:reduce){
  .journey-panel,
  .journey-bridge{animation:none}

  .journey-open,
  .journey-open-chevron,
  .journey-fork-btn,
  .journey-cta,
  .journey-choice{transition:none}

  .journey-open:hover,
  .journey-fork-btn:hover,
  .journey-cta:hover{transform:none}
}

/* --- Budget-builder detail additions -------------------- */

.bb-capital-note{margin-top:16px}
.bb-capital-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.bb-capital-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
}
.bb-capital-card strong{
  display:block;
  color:var(--forest-dark);
  font-size:.92rem;
}
.bb-capital-card span{
  display:block;
  margin-top:5px;
  color:var(--copper);
  font-weight:800;
  font-size:.88rem;
}
.bb-capital-card small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  line-height:1.45;
}
.bb-capital-bottom{
  margin:14px 0 0;
  padding:12px 14px;
  border-left:4px solid var(--copper);
  background:#FFF9F3;
  color:var(--text);
  font-size:.88rem;
  line-height:1.5;
}

@media(max-width:620px){
  .bb-capital-grid{grid-template-columns:1fr}
}

/* =========================================================
   Shared District Funding explorer
   ========================================================= */
.funding-explorer-layout{
  display:grid;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  gap:22px;
  align-items:start;
}

.funding-explorer-card{
  /* visible so assumption popups aren't clipped; the header rounds its own corners */
  overflow:visible;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff !important;
  box-shadow:var(--shadow);
}

/* Only the header is green. */
.funding-explorer-card .funding-controls-head{
  margin:0;
  padding:20px;
  background:var(--forest-dark) !important;
  color:#fff;
  border-radius:0;
}

.funding-explorer-card .funding-controls-body{
  padding:20px;
  background:#fff !important;
  color:var(--text);
}

.funding-explorer-card .funding-step-number{
  background:#fff;
  color:var(--forest-dark);
}

.funding-explorer-head-copy .funding-panel-title,
.funding-explorer-head-copy .funding-panel-intro{
  color:#fff;
}

.funding-explorer-head-copy .funding-panel-intro{
  opacity:.88;
}

.funding-explorer-tabs{
  display:grid;
  gap:7px;
  margin-top:14px;
}

.funding-explorer-tab{
  width:100%;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font:inherit;
  font-size:.86rem;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.funding-explorer-tab:hover{background:rgba(255,255,255,.16)}

.funding-explorer-tab.is-active{
  background:#fff;
  border-color:#fff;
  color:var(--forest-dark);
}

.funding-explorer-tab:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:2px;
}

[data-left-mode-panel][hidden],
[data-funding-workspace][hidden]{
  display:none !important;
}

.funding-explorer-workspace{min-width:0}

.funding-budget-control-list .eq-slider{margin-top:16px}
.funding-budget-control-list .eq-slider:first-of-type{margin-top:10px}

/* Float takes the legend off the border line so it sits inside the box. */
.funding-inline-override legend{
  float:left;
  width:100%;
  margin:0 0 2px;
  padding:0 28px 0 0;
  color:var(--forest-dark);
  font-size:.84rem;
  font-weight:800;
}

.funding-inline-override label{
  display:flex;
  gap:7px;
  align-items:flex-start;
  color:var(--text);
  font-size:.82rem;
  line-height:1.35;
}

.funding-inline-override input{margin-top:2px}

/* Two-line override choices: amount on top (beside the radio button), the
   Prop 435 outcome underneath. */
.bb-override-option small{
  display:block;
  color:var(--muted);
  font-size:.76rem;
}

#fundingBudgetWorkspace .bb{margin:0}
#fundingBudgetWorkspace .bb-grid{grid-template-columns:minmax(0,1fr)}
#fundingBudgetWorkspace .bb-pie{max-width:none}

@media(max-width:900px){
  .funding-explorer-layout{grid-template-columns:1fr}
}

/* =========================================================
   Expandable budget pie legend
   ========================================================= */

.bb-legend-item:last-child{
  border-bottom:0;
}

.bb-legend-item .bb-legend-row{
  border-bottom:0;
}

.bb-legend-details[open] > summary::after{
  transform:rotate(180deg);
}

.bb-legend-detail-body > p{
  margin:0 0 9px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.45;
}

.bb-legend-detail-body h6{
  margin:12px 0 6px;
  color:var(--forest-dark);
  font-size:.78rem;
}

.bb-legend-detail-table-wrap{
  overflow-x:auto;
}

.bb-legend-detail-table{
  width:100%;
  border-collapse:collapse;
  font-size:.75rem;
  line-height:1.35;
}

.bb-legend-detail-table th,
.bb-legend-detail-table td{
  padding:6px 7px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

.bb-legend-detail-table thead th{
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:left;
}

.bb-legend-detail-table tbody th{
  color:var(--text);
  font-weight:700;
  text-align:left;
}

.bb-legend-detail-table td:nth-child(2),
.bb-legend-detail-table td:nth-child(3){
  white-space:nowrap;
}

.bb-legend-detail-table:not(.bb-pay-table) td:last-child{
  text-align:right;
  font-weight:700;
  color:var(--forest-dark);
}

.bb-pay-table td{
  color:var(--forest-dark);
  font-weight:700;
}

.bb-legend-detail-note{
  margin-top:8px !important;
  font-style:italic;
}

.bb-legend-source{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.45;
}

@media(max-width:620px){
  .bb-legend-details{
    margin-left:0;
  }

  /* On phones each table row stacks: the name on the first line, then the
     FTE / amount (or pay) beneath it, instead of narrow side-by-side columns. */
  .bb-legend-detail-table,
  .bb-legend-detail-table tbody,
  .bb-legend-detail-table tr,
  .bb-legend-detail-table th,
  .bb-legend-detail-table td{
    display:block;
    width:auto;
  }

  .bb-legend-detail-table thead{
    display:none;
  }

  .bb-legend-detail-table tr{
    padding:7px 0;
    border-bottom:1px solid var(--line);
  }

  .bb-legend-detail-table tbody th,
  .bb-legend-detail-table td{
    padding:1px 2px;
    border-bottom:0;
  }

  .bb-legend-detail-table td:nth-child(2),
  .bb-legend-detail-table td:nth-child(3){
    white-space:normal;
  }

  .bb-legend-detail-table:not(.bb-pay-table) td:last-child{
    text-align:left;
  }

  .bb-legend-detail-table td[data-label]::before{
    content:attr(data-label) ": ";
    color:var(--muted);
    font-weight:400;
  }

  .bb-legend-detail-table td.bb-cell-empty{
    display:none;
  }
}

/* =========================================================
   Compact caret control for expandable pie legend
   ========================================================= */

/* Native summary remains present for semantics but is not visually duplicated. */

.bb-legend-details > summary::after{
  font-size:.72rem;
  transition:transform .15s ease;
  content:none !important;
}

/* =========================================================
   Final pie-legend caret treatment
   ========================================================= */

/* There is intentionally no visible summary/label for the dropdown. */

/* =========================================================
   Pie legend: native disclosure arrow to match budget notes
   ========================================================= */

/* The legend row becomes the positioning reference for the disclosure marker. */

/* Use the browser's native <summary> disclosure triangle, just like the
   "If there were no bond" and "How this budget model works" dropdowns. */

/* Empty summary: only the native disclosure marker is visible. */

/* Do not suppress or replace the native marker. */

/* The expanded content begins below the legend row rather than beside the arrow. */

/* Retire the prior custom-caret styling entirely. */

/* =========================================================
   FINAL FIX: visible arrow-only legend controls
   ========================================================= */
.bb-legend-item{
  border-bottom:1px solid var(--line);
  position:relative;
}

/* No box, no text, just a green disclosure triangle/chevron. */

.bb-legend-details[hidden]{
  display:none !important;
}

/* Completely suppress all previous native-summary/caret implementations. */
.bb-legend-details > summary{
  display:none !important;
}

/* =========================================================
   FINAL: pie legend uses the same native disclosure marker
   as "If there were no bond" and "How this budget model works"
   ========================================================= */

/* Keep the color swatch in its normal position. */
.bb-legend-marker{
  flex:0 0 auto;
  gap:4px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:18px !important;
  min-width:18px !important;
}

.bb-legend-marker .bb-swatch{
  flex:0 0 auto !important;
  position:static !important;
  display:block !important;
  margin:0 !important;
}

/* The details row sits directly below the legend row.
   Its native marker is intentionally NOT replaced or restyled.
   Browser-native behavior: points right when closed, down when open. */
.bb-legend-details{
  display:block !important;
  margin:0 0 10px 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.bb-legend-details > summary{
  align-items:center;
  gap:6px;
  font-weight:800;
  list-style:none;
  position:absolute !important;
  top:27px !important;
  left:1px !important;
  height:16px !important;
  font-size:14px !important;
  overflow:visible !important;
  display:list-item !important;
  width:18px !important;
  min-width:18px !important;
  min-height:16px !important;
  margin:0 0 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--forest-dark) !important;
  cursor:pointer !important;
  line-height:1 !important;
  list-style-position:inside !important;
}

/* Undo older rules that hid/replaced the native marker. */
.bb-legend-details > summary::-webkit-details-marker{
  color:var(--forest-dark) !important;
  display:inline !important;
}

.bb-legend-details > summary::before, .bb-legend-details > summary::after{
  content:none !important;
  display:none !important;
}

.bb-legend-details > summary:hover{
  color:var(--forest-dark) !important;
  background:transparent !important;
}

.bb-legend-details > summary:focus-visible{
  border-radius:2px !important;
  outline:2px solid var(--copper) !important;
  outline-offset:2px !important;
}

/* Keep accessible text for screen readers without displaying any label. */
.bb-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Expanded content aligns under the descriptive text, not under the arrow. */
.bb-legend-detail-body{
  padding:10px 12px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--sand);
  margin-top:8px !important;
  margin:6px 0 0 26px !important;
}

/* Retire every previous custom caret implementation. */

/* =========================================================
   Sliders (moved from tax-lookup.css; tax-lookup.css keeps its
   own copy because the Tax Estimate page still uses sliders)
   ========================================================= */
.eq-slider{position:relative}

.eq-slider + .eq-slider{margin-top:12px}

.eq-slider label{
  font-weight:700;
  font-size:.92rem;
  color:var(--forest-dark);
}

.eq-slider output{
  font-weight:800;
  font-size:.92rem;
  color:#8A4F22;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.eq-slider input[type="range"]{
  display:block;
  width:100%;
  margin:6px 0 2px;
  accent-color:var(--copper);
  cursor:pointer;
}

.eq-slider input[type="range"]:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:3px;
  border-radius:6px;
}

.eq-slider-hint{
  margin:0;
  font-size:.8rem;
  color:var(--muted);
  line-height:1.4;
}

/* The hint carries its own text now, so no appended message. */
.eq-slider-hint.is-warning{color:#B3261E;font-weight:700}
.eq-slider-hint.is-warning::after{
  color:#B3261E;
  font-weight:700;
  content:none;
}

/* =========================================================
   Assumption popups ("i" buttons)
   ========================================================= */
.bb-label-group{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* Popups anchor to the whole slider row (not the tiny button) so they span
   the panel width and aren't cut off by the panel's rounded-corner clipping. */
.bb-info-wrap{
  position:static;
  display:inline-flex;
}

.eq-slider-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  position:relative;
}

.bb-info{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  padding:0;
  border:1.5px solid var(--copper);
  border-radius:50%;
  background:var(--white);
  color:#8A4F22;
  font:italic 800 .72rem/1 Georgia,serif;
  cursor:help;
}

.bb-info:hover,
.bb-info-wrap.is-open .bb-info{background:var(--copper);color:var(--white)}

.bb-info:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:2px;
}

.bb-tip{
  position:absolute;
  z-index:30;
  top:calc(100% + 6px);
  left:0;
  right:0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  color:var(--text);
  font-size:.8rem;
  font-weight:500;
  line-height:1.5;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events:none;
}

.bb-tip strong{color:var(--forest-dark)}

.bb-info-wrap:hover .bb-tip,
.bb-info:focus-visible + .bb-tip,
.bb-info-wrap.is-open .bb-tip{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.funding-inline-override{
  display:grid;
  gap:7px;
  margin:4px 0 0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--sand);
  position:relative;
}

/* Corner "i" buttons on the override boxes. The button is pinned, not its
   wrapper: a positioned wrapper would make the popup size itself to the
   wrapper (about 30px wide) instead of spanning the whole box. */
.bb-info-wrap--corner{position:static}

.bb-info-wrap--corner .bb-info{
  position:absolute;
  top:8px;
  right:10px;
}

/* Override popup: span the fieldset and open below its legend. */
.bb-info-wrap--corner .bb-tip{top:30px;left:-4px;right:-4px}

/* The last slider sits near the bottom of the panel, so it opens upward. */
#tipSped{top:auto;bottom:calc(100% + 6px)}

@media(prefers-reduced-motion:reduce){
  .bb-tip{transition:none}
}

/* =========================================================
   Keep the pie and status in view while sliding
   ========================================================= */
/* Wide screens: three columns. Operating sliders (left panel), then the pie
   with its category drop-downs and notes, then the override controls on the
   far right. The pie isn't pinned here, because pinning it would cover the
   notes below it in the same column. */
@media(min-width:1200px){
  #budgetBuilder{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(250px,290px);
    gap:0 18px;
    align-items:start;
  }

  #budgetBuilder > *{grid-column:1}
  #budgetBuilder > .bb-override-controls{
    grid-column:2;
    grid-row:1 / span 20;
  }
}

@media(min-width:901px) and (max-width:1199px){
  .bb-override-controls{margin-top:16px}
}

.bb-mobile-slot .bb-override-controls{margin-top:16px}

.bb-mobile-slot:empty{display:none}

@media(max-width:900px){
  /* Pie and status sit above the sliders on phones and tablets. */
  .bb-mobile-slot{margin:0 0 16px}

  .bb-mobile-slot .bb-status{
    position:sticky;
    top:0;
    z-index:20;
    box-shadow:0 6px 14px rgba(0,0,0,.08);
  }

  .bb-mobile-slot .bb-pie svg{width:220px;height:220px}
}

/* Breathing room between the override box and the slider heading. */
.funding-inline-override + .funding-control-group-title{margin-top:16px}

/* "What the override pays for": same box as "Override available", holding
   sliders. Undo the radio-label styling the shared box class applies. */
.funding-inline-override + .bb-ov-group{margin-top:12px}
.bb-ov-group .bb-ov-intro{margin:0 0 2px}
.bb-ov-group .eq-slider{margin-top:6px}
.bb-ov-group .eq-slider label{
  display:inline;
  color:var(--forest-dark);
  font-size:.86rem;
  font-weight:700;
  line-height:1.3;
}
.bb-ov-group .eq-slider output{font-size:.84rem}

/* =========================================================
   Optional student-funding add-ons
   ========================================================= */

.funding-addon-group{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.funding-addon-heading{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:3px;
}

.funding-addon-heading .funding-control-group-title{
  margin:0;
}

/* The add-on popups anchor to their whole row (the heading or the checkbox
   row), not the small "i" button at its right edge. Anchored to the button,
   a 360px popup spilled past the left edge of the screen. */
.funding-addon-info-wrap{
  position:static;
  flex:0 0 auto;
}

.funding-addon-tip{
  top:calc(100% + 7px);
  left:0;
  right:0;
  width:auto;
}

.funding-addon-check{
  background:#FBFCFA;
}

.funding-addon-check + .funding-addon-check{
  margin-top:2px;
}

.funding-addon-check:has(input:checked){
  background:#EEF4EB;
  box-shadow:inset 3px 0 0 var(--forest);
}

/* Per-source optional funding add-on rows */
.funding-addon-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  margin-top:2px;
}

.funding-addon-row .funding-addon-check{
  width:100%;
}

.funding-addon-row-info{
  position:static;
  flex:0 0 auto;
}

.funding-addon-row-tip{
  top:calc(100% + 7px);
  left:0;
  right:0;
  width:auto;
  line-height:1.45;
}

.funding-addon-row-tip strong{
  color:var(--forest-dark);
}

/* =========================================================
   Pie-legend expand caret (visible fix)
   Earlier rules set the summary to list-style:none, which hides the
   browser's built-in arrow in Chrome, Edge and Firefox, and also turned
   off ::before/::after, so nothing was drawn. This draws the caret
   itself as a small chevron under each color swatch: pointing down when
   closed, up when open.
   ========================================================= */
.bb-legend-item .bb-legend-details > summary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  top:26px !important;
  left:-1px !important;
  width:20px !important;
  min-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  list-style:none !important;
  border-radius:6px !important;
}
.bb-legend-item .bb-legend-details > summary::-webkit-details-marker{display:none !important}
.bb-legend-item .bb-legend-details > summary::marker{content:""}
.bb-legend-item .bb-legend-details > summary::before{
  content:"" !important;
  display:block !important;
  width:7px;
  height:7px;
  margin-top:-3px;
  border-right:2px solid var(--forest-dark);
  border-bottom:2px solid var(--forest-dark);
  transform:rotate(45deg);
  transition:transform .15s ease, margin .15s ease;
}
.bb-legend-item .bb-legend-details[open] > summary::before{
  margin-top:3px;
  transform:rotate(-135deg);
}
.bb-legend-item .bb-legend-details > summary:hover{
  background:var(--sage) !important;
}
@media (prefers-reduced-motion:reduce){
  .bb-legend-item .bb-legend-details > summary::before{transition:none}
}

/* Grid and flex items default to the width of their widest content, so on a
   phone the budget detail tables stretched the whole panel past the screen,
   where the page clipped them. Letting these boxes shrink keeps them on
   screen, and each table scrolls sideways inside its own wrapper instead. */
.funding-explorer-layout > *,
.bb-grid > *,
.bb-pie > *,
.bb-legend,
.bb-legend-item{
  min-width:0;
}