/* =========================================================
   Tax lookup page
   ========================================================= */

.lookup-wrapper{
  max-width:1120px;
  margin:0 auto;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.lookup-label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
}

.lookup-input{
  width:100%;
  padding:14px 15px;
  color:#243028;
  background:#fff;
  border:1px solid #c9c9c9;
  border-radius:8px;
  outline:none;
  font-family:"Source Sans 3",sans-serif;
  font-size:1rem;
  font-weight:500;
}

.lookup-input:focus{
  border-color:var(--forest);
  box-shadow:0 0 0 4px rgba(27,94,32,.10);
}

.lookup-input::placeholder{
  color:#7A7A7A;
  font-family:"Source Sans 3",sans-serif;
  font-size:1rem;
  font-weight:400;
}

.matches{
  position:relative;
  z-index:5;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 8px 8px;
}

.matches:empty{display:none}

.match,
.no-match{
  padding:11px 13px;
  border-bottom:1px solid #EDF1EC;
}

.match:last-child,
.no-match:last-child{border-bottom:0}

/* .match is now a <button> so it is keyboard focusable; these rules strip the
   default button chrome so it still looks like the old list row. */
.match{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  border-bottom:1px solid #EDF1EC;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
.match:hover{background:var(--sage)}
.match:focus-visible{
  background:var(--sage);
  outline:3px solid rgba(23,61,32,.75);
  outline-offset:-3px;
}
.no-match{color:var(--muted)}
.results{margin-top:28px}

/* Side by side, with the four-column bond & override card given a slightly
   larger share. Below 900px the cards stack (see the media rule further down). */
.result-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:18px;
}

@media(max-width:899px){
  .result-grid{grid-template-columns:minmax(0,1fr)}
}

/* Side by side, both cards use the same header and row heights so their
   rows line up across the page. */
/* Less space between the small gray column headings and the line below. */
.result-grid .tax-table thead th{
  padding-top:4px;
  padding-bottom:6px;
}

@media(min-width:900px){
  .result-grid .tax-table thead tr{height:42px}
  /* Tall enough for a total whose "annual" label wraps to its own line. */
  .result-grid .tax-table tbody tr{height:98px}
}

.result-group{
  height:100%;
  padding:20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
}

.result-group.primary{border-left:5px solid var(--forest)}
.result-group.secondary{border-left:5px solid var(--copper)}

.result-group h2{
  margin:0 0 20px;
  color:var(--forest-dark);
  font-size:1.1rem;
}

/* Bond and Override table */

.tax-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.tax-table th,
.tax-table td{
  padding:15px 0;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}

.tax-table tbody tr:last-child th,
.tax-table tbody tr:last-child td{border-bottom:none}

.tax-table thead th{
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
}

/* Row labels are <th scope="row"> for screen readers but look like the
   ordinary label cells they replaced. */
.tax-table tbody th,
.tax-table tfoot th{
  color:inherit;
  font-weight:600;
  text-align:left;
}

/* Bond & override card: label | Proposed | Existing | Total 2027-28. */
/* ".tax-table.tax-table--props" so these widths win over the general
   .tax-table column widths further down. */
.tax-table.tax-table--props th:first-child,
.tax-table.tax-table--props td:first-child{width:32%}

.tax-table.tax-table--props th:nth-child(2),
.tax-table.tax-table--props td:nth-child(2),
.tax-table.tax-table--props th:nth-child(3),
.tax-table.tax-table--props td:nth-child(3){
  width:23%;
  padding-right:0;
}

/* A small gap between the Existing figures and the green Total shading. */
.tax-table.tax-table--props th:nth-child(3),
.tax-table.tax-table--props td:nth-child(3){padding-right:10px}

/* Follow-up panels scroll to their top; leave a little room above them. */
.journey-body,
.journey-panel,
.journey-bridge{scroll-margin-top:16px}

/* A little space between Existing and Total where the column has room. */
@media(min-width:1200px){
  .tax-table.tax-table--props th:nth-child(4),
  .tax-table.tax-table--props td:nth-child(4){padding-left:10px}
}

.tax-table.tax-table--props th:nth-child(4),
.tax-table.tax-table--props td:nth-child(4){
  width:22%;
  padding-right:12px;
  text-align:right;
}

.tax-table--props thead th{
  white-space:normal;
  line-height:1.25;
  vertical-align:bottom;
}

.tax-table--props thead small{
  display:block;
  font-weight:600;
}

.tax-cell-note{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  line-height:1.3;
}

.tax-table--props td del{
  color:var(--muted);
  font-weight:600;
}

.tax-total-cell{
  color:var(--forest-dark);
  font-weight:800;
  background:var(--sage);
}

.tax-table--props tbody tr:first-child .tax-total-cell{border-radius:10px 10px 0 0}
.tax-table--props tbody tr:last-child .tax-total-cell{border-radius:0 0 10px 10px}

.tax-total-cell .tax-cell-note{font-weight:600}

/* "$757.27 annual": the label matches the "a month" line underneath. The
   amount never breaks; "annual" moves to its own line when the column is
   too narrow (larger totals, smaller screens). */
.tax-total-annual{display:block}

#resultBondTotal,
#resultOverrideTotal{white-space:nowrap}

.tax-total-period{
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
}

.tax-cell-note--how{
  margin-top:4px;
  color:var(--forest);
  font-weight:700;
}

/* Keeps the small "?" buttons looking the same but gives them a larger
   area to tap on phones. */
.info-button::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
}

.tax-table th:first-child,
.tax-table td:first-child{
  width:45%;
  text-align:left;
}

.tax-table th:nth-child(2),
.tax-table td:nth-child(2){
  width:25%;
  text-align:right;
}

.tax-table th:nth-child(3),
.tax-table td:nth-child(3){
  width:30%;
  padding-right:12px;
  text-align:right;
}

.tax-table td{font-weight:600}

.tax-table td:nth-child(2),
.tax-table td:nth-child(3){
  font-weight:700;
}

/* Property details table */

/* The offset lines the first data row up with the left-hand card, which has a
   <thead> the property table does not. It only makes sense side by side - the
   single-column breakpoint below resets it. */

/* Property Details: label + 2026 / 2027 columns, styled like the bond table */
.property-years-table th:first-child,
.property-years-table td:first-child{width:34%}

.property-years-table th:nth-child(2),
.property-years-table td:nth-child(2),
.property-years-table th:nth-child(3),
.property-years-table td:nth-child(3){
  width:33%;
  white-space:nowrap;
  padding-left:8px;
}

.note{
  margin-top:18px;
  color:var(--muted);
  font-size:.8rem;
}

.table-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* The "Important Estimate Notice" pop-up styles are shared with the District
   Funding page and live in common/common.css (.estimate-notice). */

@media(max-width:760px){
  /* minmax(0,1fr) instead of 1fr: a plain 1fr track can't shrink below its
     widest unbreakable content, which is what pushed both cards past the
     edge of the screen. Matches the single-column District Funding cards. */
  .result-grid{
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }

  .result-group{
    min-width:0;
    padding:18px;
    border-radius:16px;
  }

  .result-group h2{margin-bottom:12px}

  /* Let the labels and column headers wrap on narrow screens; the dollar and
     percent figures stay on one line so they never break mid-number. */
  .tax-table th{
    white-space:normal;
    line-height:1.25;
  }

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

  .tax-table th:nth-child(2),
  .tax-table td:nth-child(2),
  .tax-table th:nth-child(3),
  .tax-table td:nth-child(3){
    padding-left:10px;
  }

  .table-label span{min-width:0}

  /* Four columns on a phone: tighter label spacing so the figures fit. */
  .tax-table--props th:first-child,
  .tax-table--props td:first-child{padding-right:6px}

  .tax-table--props th:nth-child(4),
  .tax-table--props td:nth-child(4){
    padding-left:8px;
    padding-right:8px;
  }

  .tax-table--props th:nth-child(2),
  .tax-table--props td:nth-child(2),
  .tax-table--props th:nth-child(3),
  .tax-table--props td:nth-child(3){padding-left:6px}

  .tax-table{
    table-layout:auto;
  }

  .tax-table th:first-child,
  .tax-table td:first-child{
    width:auto;
    padding-right:18px;
  }

  .tax-table th:nth-child(2),
  .tax-table td:nth-child(2),
  .tax-table th:nth-child(3),
  .tax-table td:nth-child(3){
    width:auto;
  }

}

/* =========================================================
   Follow-up journey
   ========================================================= */

.journey{
  margin-top:34px;

  /* The Local + State flow row and the result bucket beneath it are separate
     elements, so they share these numbers. --result-width is the one dial for
     how wide the result reads: 100% matches the full row, and
     calc((100% - var(--flow-op) - (var(--flow-gap) * 2)) / 2) matches one
     source bucket exactly. */
  --flow-gap:12px;
  --flow-op:18px;
  --result-width:68%;
  --bucket-h:68px;
}

.journey-invite{
  padding:28px 30px 30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(160deg,var(--white) 0%,var(--sand) 100%);
  box-shadow:var(--shadow);
  text-align:center;
}

.journey-invite .page-eyebrow{
  margin:0;
}

.journey-invite h2{
  margin:6px 0 10px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.6rem,3vw,2.05rem);
  font-weight:700;
  line-height:1.15;
  color:var(--forest-dark);
}

.journey-invite-text{
  max-width:62ch;
  margin:0 auto;
  color:var(--muted);
  font-size:.97rem;
}

.journey-open{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:680px;
  margin:22px auto 0;
  padding:16px 18px;
  border:2px solid var(--copper);
  border-radius:16px;
  background:var(--white);
  color:var(--forest-dark);
  font-size:1.02rem;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(28,67,32,.09);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.journey-open:hover{
  background:#FFF9F3;
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(28,67,32,.14);
}

.journey-open:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:3px;
}

.journey-open-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--sand-deep);
  color:var(--copper);
}

.journey-open-icon svg{width:22px;height:22px}

.journey-open-text{flex:1 1 auto}

.journey-open-chevron{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:var(--copper);
  transition:transform .2s ease;
}

.journey-open-chevron svg{width:20px;height:20px}

.journey-open[aria-expanded="true"] .journey-open-chevron{
  transform:rotate(90deg);
}

.journey-body{
  margin-top:18px;
}

/* --- the prompt and its question buttons ---------------- */

.journey-speech{
  position:relative;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  box-shadow:var(--shadow);
}

.journey-speech::before{
  content:"";
  position:absolute;
  top:-9px;
  left:38px;
  width:16px;
  height:16px;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  background:var(--white);
  transform:rotate(45deg);
}

.journey-choices{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.journey-choice{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--sand);
  color:var(--text);
  font-size:.95rem;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}

.journey-choice:hover{
  border-color:var(--copper);
  background:#FFF9F3;
}

.journey-choice.is-active{
  border-color:var(--forest);
  background:var(--sage);
  color:var(--forest-dark);
}

.journey-choice:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:2px;
}

/* --- panels --------------------------------------------- */

.journey-panel,
.journey-bridge{
  margin-top:16px;
  animation:journey-rise .3s ease;
}

.journey-panel:focus-visible,
.journey-bridge:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:4px;
}

@keyframes journey-rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.journey-card{
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  box-shadow:var(--shadow);
}

.journey-card-title{
  margin:0 0 8px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.5rem;
  font-weight:700;
  line-height:1.2;
  color:var(--forest-dark);
}

.journey-card-sub{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

.journey-card-sub strong{color:var(--forest-dark)}

/* --- the real stacked bar ------------------------------- */

.journey-bar-total{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-top:20px;
}

.journey-bar-total-label{
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.journey-bar-total strong{
  font-size:1.7rem;
  font-weight:800;
  color:var(--forest-dark);
}

.journey-bar{
  display:flex;
  height:44px;
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

.journey-bar-fill{
  /* The inline width is the real share, so stop flex from resizing it. */
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:2px;
  color:var(--white);
  font-size:.72rem;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}

.journey-bar-fill.is-primary{background:var(--forest)}
.journey-bar-fill.is-override{background:#7E9A65}
.journey-bar-fill.is-bond{background:var(--copper)}

.journey-legend{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.journey-legend-item{
  display:grid;
  grid-template-columns:14px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:11px;
  background:var(--sand);
}

.journey-legend-swatch{
  width:14px;
  height:14px;
  border-radius:4px;
}

.journey-legend-swatch.is-primary{background:var(--forest)}
.journey-legend-swatch.is-override{background:#7E9A65}
.journey-legend-swatch.is-bond{background:var(--copper)}

.journey-legend-text{min-width:0}

.journey-legend-text strong{
  display:block;
  font-size:.92rem;
  color:var(--text);
}

.journey-legend-text small{
  display:block;
  margin-top:1px;
  color:var(--muted);
  font-size:.78rem;
}

.journey-legend-amount{
  font-size:1rem;
  font-weight:800;
  color:var(--forest-dark);
  font-variant-numeric:tabular-nums;
}

/* --- callouts, flows, layers ---------------------------- */

.journey-callout{
  margin:14px 0 0;
  padding:13px 17px;
  border-left:4px solid var(--forest);
  border-radius:0 12px 12px 0;
  background:var(--sage);
  color:var(--text);
  font-size:.9rem;
  line-height:1.55;
}

.journey-callout p{margin:0}

.journey-callout p + p{margin-top:9px}

.journey-callout strong{color:var(--forest-dark)}

.journey-flow{
  display:grid;
  grid-template-columns:1fr var(--flow-op) 1fr;
  align-items:center;
  gap:var(--flow-gap);
  margin:20px 0 0;
}

.journey-versus{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin:20px 0;
}

.journey-bucket{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:var(--bucket-h);
  padding:14px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--sand);
  color:var(--text);
  font-size:.9rem;
  font-weight:700;
  text-align:center;
}

.journey-bucket-kicker{
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;

}

/* Narrower than the row above and centred under the arrow, so it reads as the
   result of the two source buckets. Border weight, radius and padding are
   inherited from .journey-bucket so all three stay consistent. */
.journey-bucket--result{
  width:var(--result-width);
  max-width:100%;
  margin:6px auto 0;
  border-color:#BFD3B6;
  background:var(--sage);
  color:var(--forest-dark);
  font-size:1rem;
}

.journey-flow-op{
  font-size:1.5rem;
  font-weight:800;
  color:var(--copper);
  text-align:center;
}

.journey-flow-op--ne{font-size:1.7rem}

.journey-flow-down{
  display:grid;
  place-items:center;
  margin-top:6px;
  line-height:0;
  color:var(--copper);
}

.journey-flow-down svg{width:26px;height:26px}

/* Supporting detail for the result bucket, so it sits a step below it: less
   vertical padding, a lighter sage border and a slightly smaller type scale. */
.funding-summary{
  margin:14px 0 0;
  padding:14px 18px 15px;
  border:1px solid #E2ECDE;
  border-radius:12px;
  background:#F4F8F2;
  color:#113D18;
  font-size:.92rem;
}

.funding-intro{
  margin:0 0 8px;
  line-height:1.45;
}

/* Two labelled groups rather than one list poured into two columns, so each
   column states what it covers. */
.funding-columns{
  display:grid;
  gap:14px 26px;
}

.funding-group-label{
  margin:0 0 5px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Each item carries its own inline icon in place of a bullet, so the marker and
   the text indent are both handled by the flex row below. */
.funding-list{
  list-style:none;
  margin:0;
  padding:0;
  line-height:1.4;
}

.funding-list li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:0;
  padding:4px 0;
}

.funding-icon{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-top:0;
  color:var(--forest-dark);
}

.journey-stack{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.journey-layer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
}

.journey-layer-text strong{
  display:block;
  color:var(--forest-dark);
  font-size:.98rem;
}

.journey-layer-text small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.45;
}

.journey-badge{
  flex:0 0 auto;
  padding:6px 11px;
  border-radius:30px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

.journey-badge--base{background:var(--sage);color:var(--forest-dark)}
.journey-badge--ops{background:#E7EFE0;color:#3F5B33}
.journey-badge--capital{background:var(--sand-deep);color:#7A4E28}

/* The badges double as info-buttons. common.css sizes .info-button as a 16px
   circle, so the pill dimensions have to be restored at higher specificity. */

/* Keep each layer's own colour while open; the shared .info-button rule would
   otherwise turn all three solid dark green. */

/* --- forks and calls to action -------------------------- */

.journey-fork{
  margin-top:18px;
  padding:16px 18px 18px;
  border-radius:16px;
  background:var(--forest-dark);
  color:var(--sand);
}

.journey-fork h4{
  margin:0 0 6px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.35rem;
  font-weight:700;
  line-height:1.2;
  color:var(--white);
}

.journey-fork p{
  margin:0;
  color:#DCE7DA;
  font-size:.9rem;
}

.journey-fork-buttons{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.journey-fork-buttons--plain{margin-top:16px}

/* Grid stretch already makes the pair equal height; these keep the label and
   the arrow sitting the same way in both cards whether the text wraps or not. */
.journey-fork-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  height:100%;
  padding:14px 16px;
  border:1px solid transparent;
  border-radius:13px;
  background:var(--white);
  color:var(--forest-dark);
  font-size:.93rem;
  font-weight:800;
  line-height:1.35;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}

.journey-fork-btn > span{
  flex:0 0 auto;
  align-self:center;
  font-size:1.05rem;
  line-height:1;
}

.journey-fork-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(17,61,24,.18);
}

.journey-fork-btn:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:2px;
}

.journey-fork-btn--muted{
  background:#DCE9D8;
  color:var(--forest-dark);
}

.journey-fork-buttons--plain .journey-fork-btn{
  border-color:var(--line);
  background:var(--sand);
}

.journey-fork-buttons--plain .journey-fork-btn--muted{
  background:var(--sage);
}

.journey-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  margin-top:18px;
  padding:15px;
  border:0;
  border-radius:14px;
  background:var(--copper);
  color:var(--white);
  font-size:.97rem;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background .16s ease,transform .16s ease;
}

.journey-cta:hover{
  background:#A25F2F;
  transform:translateY(-2px);
}

.journey-cta:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:3px;
}

/* The bridge call to action is an anchor, not a button, so it needs the
   sizing an <a> does not inherit. */
.journey-cta--link{
  box-sizing:border-box;
  line-height:1.3;
}

/* --- bridge into District Funding ----------------------- */

.journey-bridge{
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  box-shadow:var(--shadow);
}

.journey-student{
  margin-top:16px;
  padding:20px;
  border:1px solid #DBE6D8;
  border-radius:16px;
  background:linear-gradient(145deg,var(--sage),var(--white));
  text-align:center;
}

.journey-student-icon{
  display:grid;
  place-items:center;
  color:var(--forest);
}

.journey-student-icon svg{width:42px;height:42px}

.journey-student-title{
  margin:8px 0 0;
  color:var(--forest-dark);
  font-size:1.1rem;
  font-weight:800;
}

.journey-student-parts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.journey-student-parts li{
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--white);
  color:var(--text);
  font-size:.76rem;
  font-weight:700;
}

.journey-reset-row{
  margin:18px 0 0;
  text-align:center;
}

.journey-reset{
  padding:6px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:.85rem;
  text-decoration:underline;
  cursor:pointer;
}

.journey-reset:hover{color:var(--forest-dark)}

.journey-reset:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:2px;
}

/* =========================================================
   Two-option invite + "rising every year" branch
   ========================================================= */

.journey-options{
  display:grid;
  gap:16px;
  margin-top:20px;
  text-align:left;
}

.journey-option{
  display:flex;
  flex-direction:column;
  padding:18px 18px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.72);
}

.journey-option-title{
  margin:0 0 6px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.35rem;
  font-weight:700;
  line-height:1.2;
  color:var(--forest-dark);
}

.journey-option-text{
  margin:0;
  color:var(--muted);
  font-size:.93rem;
}

/* Inside an option card the opener fills the card and sits at the bottom,
   so both options line up side by side. */
.journey-option .journey-open{
  max-width:none;
  margin:16px 0 0;
  margin-top:auto;
}

.journey-option-text + .journey-open{margin-top:16px}

.journey-option .journey-option-text{flex:1 1 auto}

.rising-subhead{
  margin:18px 0 0;
  font-weight:700;
  color:var(--forest-dark);
  font-size:.95rem;
}

/* --- simple two-bar comparisons ------------------------ */

.rising-compare{
  display:grid;
  gap:12px;
  margin:18px 0 4px;
}

.rising-compare-row{
  display:grid;
  grid-template-columns:minmax(0,210px) minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}

.rising-compare-label{
  font-size:.9rem;
  font-weight:700;
  color:var(--text);
  line-height:1.3;
}

.rising-compare-label small{
  display:block;
  font-weight:500;
  color:var(--muted);
  font-size:.8rem;
}

.rising-compare-track{
  height:18px;
  border-radius:9px;
  background:var(--sand);
  overflow:hidden;
}

.rising-compare-fill{
  display:block;
  height:100%;
  width:var(--w);
  border-radius:9px;
}

.rising-compare-fill.is-rate{background:var(--copper)}
.rising-compare-fill.is-value{background:var(--forest)}

.rising-compare-value{
  min-width:92px;
  font-weight:800;
  color:var(--forest-dark);
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.rising-points{
  margin:16px 0 0;
  padding-left:20px;
  color:var(--text);
  font-size:.93rem;
  line-height:1.55;
}

.rising-points li + li{margin-top:8px}

.rising-points strong{color:var(--forest-dark)}

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

  /* Point the speech-bubble notch at the right-hand option. */
  .journey-speech--second::before{
    left:auto;
    right:38px;
  }
}

/* Three main questions side by side where there's room; the second
   question's notch then points at the middle card. */
@media(min-width:980px){
  .journey-options{grid-template-columns:repeat(3,minmax(0,1fr))}

  .journey-speech--second::before{
    left:calc(50% - 8px);
    right:auto;
  }
}

/* "What would pay for school buildings if there were no bond?" fund cards */
/* Three per row (3 + 2) on wide screens, two on tablets, one on phones. */
.capital-funds{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:18px 0 0;
}

@media(max-width:760px){
  .capital-funds{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:480px){
  .capital-funds{grid-template-columns:minmax(0,1fr)}
}

.capital-fund{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--sand);
}

.capital-fund strong{
  color:var(--forest-dark);
  font-size:.92rem;
  line-height:1.3;
}

.capital-fund span{
  color:var(--copper);
  font-size:.84rem;
  font-weight:700;
}

.capital-fund small{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.45;
}

@media(max-width:620px){
  .rising-compare-row{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .rising-compare-label{grid-column:1 / -1}
}

/* --- rising branch graphics ---------------------------- */

/* One line (box × box = box) on most screens. Flex (not grid) so the three
   boxes share the row evenly; on phones they stack (see the 520px rule). */
.tax-equation{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
  margin:18px 0 6px;
}

.tax-equation .tax-eq-item{
  flex:1 1 0;
  min-width:0;
}

.tax-equation .tax-eq-op{
  flex:0 0 auto;
  align-self:center;
}

.tax-eq-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:14px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--sand);
  text-align:center;
}

.tax-eq-item--result{
  border-color:var(--copper);
  background:#FFF9F3;
}

.tax-eq-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  color:var(--forest-dark);
}

.tax-eq-item--result .tax-eq-icon{color:var(--copper)}

.tax-eq-icon svg,
.tax-eq-icon img{width:40px;height:40px;object-fit:contain}

.tax-eq-label{
  font-size:.86rem;
  font-weight:700;
  color:var(--forest-dark);
  line-height:1.25;
}

.tax-eq-value{
  font-size:1.05rem;
  font-weight:800;
  color:var(--forest-dark);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  white-space:nowrap;
}

.tax-eq-item--result .tax-eq-value{color:#8A4F22}

.tax-eq-op{
  font-size:1.6rem;
  font-weight:800;
  color:var(--copper);
}

.tax-base{
  display:flex;
  align-items:center;
  gap:20px;
  margin:18px 0 4px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--sand);
}

.tax-base-donut{
  flex:0 0 auto;
  width:140px;
  height:140px;
  object-fit:contain;
}

.tax-base figcaption{
  display:grid;
  gap:5px;
  font-size:.9rem;
  color:var(--text);
}

.tax-base figcaption strong{color:var(--forest-dark)}

.tax-base figcaption small{
  color:var(--muted);
  font-size:.8rem;
  line-height:1.4;
}

.tax-base-key{
  display:flex;
  align-items:center;
  gap:8px;
}

.tax-base-swatch{
  flex:0 0 auto;
  width:12px;
  height:12px;
  border-radius:3px;
}

.tax-base-swatch.is-util{background:var(--copper)}
.tax-base-swatch.is-rest{background:var(--forest)}

@media(max-width:620px){
  /* Still one line here; just tighten everything up. */
  .tax-equation{gap:6px}

  .tax-eq-item{
    padding:10px 6px;
    gap:6px;
  }

  .tax-eq-icon{width:32px;height:32px}
  .tax-eq-icon svg,
  .tax-eq-icon img{width:28px;height:28px}

  .tax-eq-label{font-size:.74rem}
  .tax-eq-value{font-size:.72rem;letter-spacing:-.01em}
  .tax-eq-item{padding:10px 4px}

  .tax-eq-op{font-size:1.2rem}

  .tax-base{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Phones: three boxes side by side leave about 66px each, too narrow for a
   figure like $28,498,166, so the equation stacks into rows instead. */
@media(max-width:520px){
  .tax-equation{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }

  .tax-equation .tax-eq-item{
    flex:none;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    text-align:left;
  }

  .tax-eq-label{
    flex:1;
    font-size:.85rem;
  }

  .tax-eq-value{font-size:.95rem}

  .tax-equation .tax-eq-op{
    align-self:center;
    line-height:1;
  }
}

/* --- rising branch: charts, pie, cards, year table ----- */

.rise-chart{
  margin:6px 0 2px;
  padding:8px 6px 2px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
}

.rise-chart svg{
  display:block;
  width:100%;
  height:auto;
}

.rc-grid{stroke:#E6E0D3;stroke-width:1}

.rc-tick--right{fill:var(--forest)}

.rise-chart-note--top{margin:0 0 8px}

.rc-tick{
  font-size:13px;
  fill:var(--muted);
  font-family:inherit;
}

.rc-line{
  fill:none;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rc-dot{stroke:var(--white);stroke-width:2}

.rc-value{
  font-size:13px;
  font-weight:800;
  font-family:inherit;
}

.rc-line.is-home,.rc-line.is-rate{stroke:var(--copper)}
.rc-dot.is-home,.rc-dot.is-rate{fill:var(--copper)}
.rc-value.is-home,.rc-value.is-rate{fill:#8A4F22}

.rc-line.is-district{stroke:var(--forest)}
.rc-dot.is-district{fill:var(--forest)}
.rc-value.is-district{fill:var(--forest-dark)}

.rc-band{fill:rgba(184,115,58,.14)}

.rise-chart-note{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.5;
}

.rate-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:8px 0 0;
  font-size:.84rem;
  color:var(--text);
}

.rate-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.rate-swatch{
  width:18px;
  height:4px;
  border-radius:2px;
}

.rate-swatch.is-home{background:var(--copper)}
.rate-swatch.is-district{background:var(--forest)}

/* The pie reuses the .tax-base figure layout. */

.tax-base-swatch.is-you{
  border-radius:50%;
  background:#FFF3C4;
  box-shadow:inset 0 0 0 2px var(--forest-dark);
}

.tax-base-key--you{font-weight:700}

/* Three-card summary: levy x slice = tax */
.rise-cards{
  display:flex;
  align-items:stretch;
  gap:8px;
  margin:8px 0 4px;
}

.rise-card{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:14px 8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--sand);
  text-align:center;
}

.rise-card--result{
  border-color:var(--copper);
  background:#FFF9F3;
}

.rise-card-value{
  font-size:1.7rem;
  font-weight:800;
  line-height:1;
  color:var(--forest-dark);
  font-variant-numeric:tabular-nums;
}

.rise-card--result .rise-card-value{color:#8A4F22}

.rise-card-label{
  font-size:.8rem;
  font-weight:600;
  color:var(--muted);
  line-height:1.3;
}

.rise-card-op{
  align-self:center;
  font-size:1.4rem;
  font-weight:800;
  color:var(--copper);
}

/* Year-by-year toggle */
.rise-details{
  margin:16px 0 0;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
}

.rise-details summary{
  padding:12px 16px;
  font-weight:700;
  color:var(--forest-dark);
  cursor:pointer;
}

.rise-details summary:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:2px;
  border-radius:12px;
}

.rise-table-wrap{
  overflow-x:auto;
  padding:0 12px 12px;
}

.rise-table{
  width:100%;
  border-collapse:collapse;
  font-size:.86rem;
  font-variant-numeric:tabular-nums;
}

.rise-table th,
.rise-table td{
  padding:7px 8px;
  border-bottom:1px solid var(--line);
  text-align:right;
  white-space:nowrap;
}

.rise-table th:first-child{text-align:left}

.rise-table thead th{
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  vertical-align:bottom;
}

.rise-table thead small{display:block;font-weight:500}

.rise-table tbody tr:last-child th,
.rise-table tbody tr:last-child td{
  font-weight:800;
  color:var(--forest-dark);
}

@media(max-width:620px){
  .rise-cards{gap:4px}
  .rise-card{padding:10px 4px}
  .rise-card-value{font-size:1.25rem}
  .rise-card-label{font-size:.7rem}
  .rise-card-op{font-size:1.05rem}
  .rc-tick{font-size:14px}
  .rc-value{font-size:14px}
}

/* --- rising branch: two-lever fork --------------------- */

.rise-fork-lead{
  margin:18px 0 8px;
  font-weight:700;
  color:var(--forest-dark);
}

.rise-fork{
  display:grid;
  gap:12px;
}

.rise-fork-btn{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  column-gap:12px;
  row-gap:4px;
  align-items:center;
  width:100%;
  padding:14px 16px;
  border:2px solid var(--copper);
  border-radius:14px;
  background:var(--white);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}

.rise-fork-btn:hover{background:#FFF9F3;transform:translateY(-1px)}

.rise-fork-btn:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:2px;
}

.rise-fork-kicker{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--copper);
  color:var(--white);
  font-weight:800;
}

.rise-fork-btn strong{
  color:var(--forest-dark);
  font-size:1rem;
  line-height:1.3;
}

.rise-fork-btn small{
  grid-column:2;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.45;
}

.rise-fork-go{
  grid-column:3;
  grid-row:1 / span 2;
  color:var(--copper);
  font-size:1.3rem;
  font-weight:800;
}

.rise-crumb{
  margin:0 0 4px;
  color:var(--copper);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

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

/* --- rising branch: "Try it" sliders ------------------- */

.tax-eq-item{transition:border-color .2s ease, box-shadow .2s ease, background .2s ease}

.tax-eq-item.is-adjusted{
  border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(184,115,58,.18);
  background:#FFF4E8;
}

.eq-play{
  margin:12px 0 4px;
  padding:14px 16px 16px;
  border:1px dashed var(--copper);
  border-radius:14px;
  background:#FFFBF6;
}

.eq-play-title{
  margin:0 0 10px;
  font-size:.93rem;
  color:var(--text);
}

.eq-play-title strong{color:#8A4F22}

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

.eq-slider-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: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;
}

.eq-play-result{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:10px;
  background:var(--white);
  border:1px solid var(--line);
  font-weight:700;
  font-size:.92rem;
  color:var(--forest-dark);
}

.eq-play-reset{
  margin-top:10px;
  padding:7px 14px;
  border:1px solid var(--copper);
  border-radius:999px;
  background:var(--white);
  color:#8A4F22;
  font:inherit;
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
}

.eq-play-reset:hover{background:#FFF4E8}

.eq-play-reset:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:2px;
}

/* --- "Try it" pie --------------------------------------- */

.eq-play-grid{
  display:grid;
  gap:16px;
  align-items:center;
}

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

.eq-pie svg{
  width:200px;
  height:200px;
  max-width:100%;
  overflow:visible;
}

.play-pie-whole{fill:var(--forest)}
.play-pie-slice{fill:var(--copper);stroke:var(--white);stroke-width:2}

.play-pie-ref{
  fill:none;
  stroke-width:2;
  stroke-dasharray:5 4;
  pointer-events:none;
}

.play-pie-ref.is-inside{stroke:#FFF3C4}
.play-pie-ref.is-outside{stroke:var(--forest-dark);opacity:.6}

.eq-pie figcaption{
  display:grid;
  gap:4px;
  width:100%;
  font-size:.84rem;
  color:var(--text);
}

.eq-pie figcaption small{
  color:var(--muted);
  font-size:.76rem;
  line-height:1.4;
}

.eq-pie-key{
  display:grid;
  grid-template-columns:12px 1fr;
  column-gap:8px;
  align-items:center;
}

.eq-pie-key strong{
  grid-column:2;
  color:var(--forest-dark);
  font-size:.98rem;
  font-variant-numeric:tabular-nums;
}

.eq-pie-swatch{
  flex:0 0 auto;
  width:12px;
  height:12px;
  border-radius:3px;
}

.eq-pie-swatch.is-whole{background:var(--forest)}
.eq-pie-swatch.is-slice{background:var(--copper)}

@media(min-width:760px){
  .eq-play-grid{grid-template-columns:230px minmax(0,1fr)}
}

/* --- lever 2: rate selectors ---------------------------- */

.rc-line.is-r-primary{stroke:var(--forest)}
.rc-dot.is-r-primary{fill:var(--forest)}
.rc-value.is-r-primary{fill:var(--forest-dark)}

.rc-line.is-r-override{stroke:#C9A227}
.rc-dot.is-r-override{fill:#C9A227}
.rc-value.is-r-override{fill:#7A6012}

.rc-line.is-r-bond{stroke:#4F6D8A}
.rc-dot.is-r-bond{fill:#4F6D8A}
.rc-value.is-r-bond{fill:#2E4458}

.rate-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 4px;
}

.rate-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--muted);
  font:inherit;
  font-size:.84rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.rate-toggle:hover{border-color:var(--copper)}

.rate-toggle[aria-pressed="true"]{
  border-color:var(--forest-dark);
  background:var(--sand);
  color:var(--forest-dark);
}

.rate-toggle:focus-visible{
  outline:3px solid var(--copper);
  outline-offset:2px;
}

.rate-toggle-swatch{
  width:14px;
  height:4px;
  border-radius:2px;
  opacity:.35;
}

.rate-toggle[aria-pressed="true"] .rate-toggle-swatch{opacity:1}

.rate-toggle-swatch.is-rate{background:var(--copper)}
.rate-toggle-swatch.is-r-primary{background:var(--forest)}
.rate-toggle-swatch.is-r-override{background:#C9A227}
.rate-toggle-swatch.is-r-bond{background:#4F6D8A}

.rise-chart-empty{
  margin:0;
  padding:48px 12px;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
}

.eq-slider-hint.is-warning::after{
  content:" Some rates are held at the state minimum.";
  color:#B3261E;
  font-weight:700;
}

/* --- 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 vs. costs graphic (journey panel 3: "Why would schools
   need an override on top of that?"). All shapes are inline SVG
   and CSS; colors come from common.css.
   ========================================================= */

.gap-graphic{
  --gap-green:var(--forest);
  --gap-green-soft:#E3EDE0;
  --gap-copper:var(--copper);
  --gap-copper-soft:#F6E7DB;
  margin:20px 0 0;
}

.gap-lead{
  margin:0 0 16px;
  text-align:center;
  color:var(--muted);
  font-size:.98rem;
}

.gap-columns{
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);
  align-items:stretch;
}

/* --- the two side cards --------------------------------- */

.gap-side{
  display:flex;
  flex-direction:column;
  border:1.5px solid var(--gap-green);
  border-radius:16px;
  background:#FBFDFA;
}

.gap-side--cost{
  border-color:var(--gap-copper);
  background:#FFFCF9;
}

.gap-side-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:12px 16px;
  border-radius:14px 14px 0 0;
  background:var(--sage);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.3rem;
  font-weight:700;
  line-height:1.15;
  color:var(--forest-dark);
}

.gap-side--cost .gap-side-head{background:var(--gap-copper-soft)}

.gap-num{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--gap-green-soft);
  color:var(--forest-dark);
  font-family:"Source Sans 3",sans-serif;
  font-size:1.15rem;
  font-weight:800;
}

.gap-side--cost .gap-num{
  background:#EFD3BD;
  color:#7A3E17;
}

.gap-side-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 16px 18px;
}

.gap-side-note{
  margin:-4px 0 14px;
  padding:6px 14px;
  border:1px dashed #E4B996;
  border-radius:12px;
  color:#7A3E17;
  font-size:.86rem;
  font-style:italic;
  text-align:center;
}

.gap-icon-disc--more{
  background:transparent !important;
  border:2px dashed #E4B996;
}

/* --- icon rows ------------------------------------------ */

.gap-icons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:10px 14px;
  margin:0;
  padding:0;
  list-style:none;
}

.gap-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:104px;
  text-align:center;
  font-size:.88rem;
  font-weight:600;
  line-height:1.2;
  color:var(--text);
}

.gap-icon-disc{
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  margin-bottom:7px;
  border-radius:50%;
  background:var(--gap-green-soft);
}

.gap-side--cost .gap-icon-disc{background:var(--gap-copper-soft)}

.gap-icon-disc svg{width:56px;height:56px}

/* --- bracket + arrow that gathers the icons ------------- */

.gap-gather{
  width:78%;
  height:18px;
  margin-top:12px;
  border:2.5px solid #A9C4A2;
  border-top:0;
  border-radius:0 0 12px 12px;
}

.gap-side--cost .gap-gather{border-color:#E4B996}

.gap-arrow{
  width:26px;
  height:30px;
  margin:2px 0 8px;
  color:#7FA276;
}

.gap-side--cost .gap-arrow{color:var(--gap-copper)}

/* --- result blocks -------------------------------------- */

.gap-result{
  position:relative;
  width:min(100%,280px);
  padding:16px 18px;
  border:3px solid var(--forest-dark);
  border-radius:14px;
  background:linear-gradient(180deg,#2E7336 0%,var(--forest) 55%,#17521C 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.28),0 8px 18px rgba(17,61,24,.22);
  color:var(--white);
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}

.gap-side--cost .gap-result{
  border-color:#8A4E24;
  background:linear-gradient(180deg,#C98352 0%,var(--copper) 55%,#9C5A2C 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.3),0 8px 18px rgba(138,78,36,.22);
}

.gap-caption{
  margin:12px 0 0;
  padding:5px 16px;
  border-radius:999px;
  background:var(--gap-green-soft);
  font-size:.88rem;
  color:var(--text);
  text-align:center;
}

.gap-side--cost .gap-caption{background:var(--gap-copper-soft)}

/* --- the "not directly linked" middle ------------------- */

.gap-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  position:relative;
  color:var(--gap-copper);
  text-align:center;
}

.gap-link::before,
.gap-link::after{
  content:"";
  flex:1;
  width:1px;
  background:var(--line);
}

.gap-link svg{width:62px;height:62px}

.gap-link span{
  color:var(--text);
  font-size:.9rem;
  font-weight:600;
  line-height:1.2;
}

/* --- bottom takeaway ------------------------------------ */

.gap-takeaway{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:16px;
  padding:14px 20px;
  border:1.5px solid #C9D6C4;
  border-radius:14px;
  background:#F7FAF5;
}

.gap-takeaway-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  padding-right:0;
  border-radius:50%;
  background:var(--gap-green-soft);
}

.gap-takeaway-icon svg{width:32px;height:32px}

.gap-takeaway p{
  flex:1;
  margin:0;
  padding-left:16px;
  border-left:1.5px solid #C9D6C4;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.3rem;
  font-weight:700;
  line-height:1.2;
  color:var(--text);
  text-align:center;
}

/* --- budget-side icons: 2x2 grid with hover tooltips --- */

.gap-icons--grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:14px 10px;
  width:100%;
}

.gap-icons--grid .gap-icon{width:auto}

.gap-tip-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding:4px;
  border:0;
  border-radius:12px;
  background:none;
  color:inherit;
  font:inherit;
  cursor:help;
}

.gap-tip-btn:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:2px;
}

.gap-icon-disc{position:relative}

.gap-tip-hint{
  position:absolute;
  right:-2px;
  bottom:2px;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border:2px solid var(--white);
  border-radius:50%;
  background:var(--forest);
  color:var(--white);
  font-size:.75rem;
  font-weight:800;
  line-height:1;
}

.gap-tip-btn:hover .gap-icon-disc,
.gap-tip-wrap.is-open .gap-icon-disc{box-shadow:0 0 0 3px #A9C4A2}

/* Each tooltip opens directly under its own icon and spans both grid
   columns, so it stays on screen and the pointer can move straight down
   into it (to reach the links) without crossing another icon. */
.gap-tip-wrap{position:relative}

.gap-tip{
  position:absolute;
  top:100%;
  left:0;
  z-index:20;
  display:none;
  width:calc(200% + 10px);
  margin-top:8px;
  padding:14px 16px;
  border:1.5px solid var(--forest);
  border-radius:12px;
  background:var(--white);
  box-shadow:0 12px 28px rgba(17,61,24,.18);
  color:var(--text);
  font-size:.88rem;
  font-weight:400;
  line-height:1.5;
  text-align:left;
}

.gap-tip-wrap:nth-child(even) .gap-tip{
  left:auto;
  right:0;
}

/* invisible bridge over the 8px gap so hover isn't lost on the way in */
.gap-tip::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:10px;
}

.gap-tip strong{
  display:block;
  margin-bottom:4px;
  color:var(--forest-dark);
  font-size:.95rem;
}

.gap-tip-links{
  display:block;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line);
}

.gap-tip a{
  color:var(--forest);
  font-weight:700;
}

.gap-tip-wrap:hover .gap-tip,
.gap-tip-wrap:focus-within .gap-tip,
.gap-tip-wrap.is-open .gap-tip{display:block}

/* --- the answer to the panel's question ----------------- */

.gap-answer{
  margin:22px 0 0;
  padding:22px 26px;
  border:2px solid var(--forest);
  border-left-width:8px;
  border-radius:16px;
  background:var(--sage);
}

.gap-answer-kicker{
  margin:0 0 4px;
  color:var(--forest);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.gap-answer-head{
  margin:0 0 10px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.85rem;
  font-weight:700;
  line-height:1.15;
  color:var(--forest-dark);
}

.gap-answer-text{
  margin:0;
  color:var(--text);
  font-size:1.05rem;
  line-height:1.6;
}

.gap-answer-text + .gap-answer-text{margin-top:10px}

.gap-answer-text a{
  color:var(--forest);
  font-weight:700;
}

#journeyPanelLayers .journey-fork{margin-top:24px}

/* --- narrow screens: stack, chain turns sideways -------- */

@media (max-width:760px){
  .gap-columns{grid-template-columns:1fr}

  .gap-link{
    flex-direction:row;
    padding:12px 0;
  }

  .gap-link::before,
  .gap-link::after{
    width:auto;
    height:1px;
  }

  .gap-link svg{width:44px;height:44px}

  .gap-icon{width:92px}

  .gap-takeaway p{font-size:1.15rem}

  .gap-answer{padding:18px 18px 18px 20px}

  .gap-answer-head{font-size:1.5rem}
}