/* Annual city reports (/city/<slug>/report/<year>/).
   Loaded ONLY on report pages, on top of city.css — it reuses that file's
   layout vocabulary (.cdash/.cwrap/.card/.catrow/.gushtable/.trendpill/.src)
   and its CSS variables, and defines only what the yearly view adds:
   the year switcher, the quarterly column chart, the geography table extras
   and the property-characteristics bars. */

/* --- prose ---------------------------------------------------------------
   city.css styles `.prose p` but only sets the container inside `.progs`.
   Report sections use `.prose` standalone, so give it the base rules here. */
.prose{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.7;max-width:820px}

/* --- hero: narrower right column than the city page's map ---------------- */
.chero2--report{grid-template-columns:1.7fr 1fr}

/* --- year switcher (horizontal strip under the hero) --------------------- */
.yearsw{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 20px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.yearsw__lbl{font-size:14px;font-weight:600;color:var(--muted-2)}
.yearsw__grid{display:flex;gap:8px;flex-wrap:wrap}
.yearsw__item{display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:16px;font-weight:500;color:var(--ink-soft);
  padding:8px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .15s,color .15s,background .15s}
a.yearsw__item:hover{border-color:var(--blue);color:var(--blue)}
.yearsw__item--on{background:var(--blue);border-color:var(--blue);color:#fff}
.yearsw__city{margin-inline-start:auto;font-size:14.5px;font-weight:600;color:var(--blue)}

/* --- quarterly column chart ---------------------------------------------- */
.qchart{margin-top:24px}
.qchart__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft)}
.qchart__legend{font-size:13px;color:var(--muted-2);padding-bottom:14px}
.qchart__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.qcol{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
/* Fixed-height track so all four columns share one baseline; the fill is
   bottom-anchored and its height is the quarter's share of the busiest one. */
.qcol__track{width:100%;height:130px;display:flex;align-items:flex-end;
  background:linear-gradient(var(--line-soft),var(--line-soft)) bottom/100% 1px no-repeat}
.qcol__fill{display:block;width:100%;height:var(--h);min-height:3px;
  border-radius:6px 6px 0 0;background:var(--blue);opacity:.9}
.qcol:nth-child(2) .qcol__fill{opacity:.78}
.qcol:nth-child(3) .qcol__fill{opacity:.66}
.qcol:nth-child(4) .qcol__fill{opacity:.54}
.qcol__ppm{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--ink);
  letter-spacing:-.2px;margin-top:4px}
.qcol__meta{font-size:13px;color:var(--muted-2);font-weight:500}
.qcol__lbl{font-size:14.5px;font-weight:600;color:var(--ink-soft)}

/* --- asset mix: 2nd-level types nested under their category -------------- */
.sublist--nested{margin-top:14px;padding-inline-start:16px;
  border-inline-start:2px solid var(--line-soft)}

/* --- geography table ----------------------------------------------------- */
/* The geo table is wider than the city page's 3-column gush list and should
   not be trapped in that file's 300px scroll box. */
.gushtable--geo{font-size:14px}
.gushtable--geo th,.gushtable--geo td{white-space:nowrap}
.gushtable__ppm{font-family:var(--mono);font-weight:500;color:var(--ink)}
.gushtable__share{display:flex;align-items:center;gap:9px}
.gushtable__share i{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--muted-2)}
.minibar{display:block;width:64px;height:7px;border-radius:4px;
  background:var(--line-soft);overflow:hidden;flex:none}
.minibar__fill{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--blue)}

/* --- property characteristics ------------------------------------------- */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:22px}
.featcol{display:flex;flex-direction:column}
.featbars{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.featrow{display:flex;flex-direction:column;gap:6px}
.featrow__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.featrow__lbl{font-size:14.5px;font-weight:600;color:var(--ink-soft)}
.featrow__ppm{font-family:var(--mono);font-size:14.5px;font-weight:500;color:var(--ink);
  letter-spacing:-.2px;white-space:nowrap}
.featrow__ppm i{font-style:normal;font-size:11.5px;color:var(--muted-2);margin-inline-start:2px}
.featrow__track{display:block;height:8px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.featrow__fill{display:block;height:100%;width:var(--w);border-radius:5px;background:var(--c-res)}
.featrow__meta{font-size:12.5px;color:var(--muted-2);font-weight:500}

/* --- price dispersion (p25 — median — p75) ------------------------------- */
.dispbar{margin-top:22px}
.dispbar__track{position:relative;display:block;height:14px;border-radius:8px;
  background:var(--line-soft)}
/* The band is the interquartile range itself: p25 and p75 are the two labelled
   ends, so the fill spans the middle 50% of the track by construction. */
.dispbar__band{position:absolute;inset-block:0;inset-inline-start:25%;width:50%;
  border-radius:8px;background:linear-gradient(90deg,#93B4E8,var(--blue))}
.dispbar__median{position:absolute;inset-block:-4px;inset-inline-start:50%;width:3px;
  border-radius:2px;background:var(--navy);transform:translateX(-1px)}
.dispbar__marks{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.dispbar__marks span{display:flex;flex-direction:column;gap:3px}
.dispbar__marks span:nth-child(2){align-items:center;text-align:center}
.dispbar__marks span:last-child{align-items:flex-end;text-align:end}
.dispbar__marks i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted-2)}
.dispbar__marks b{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--ink);
  letter-spacing:-.2px}
.dispbar__marks .is-median b{color:var(--blue)}

/* --- ownership split ----------------------------------------------------- */
.ownlist{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 28px;margin-top:20px}
.ownrow{display:flex;flex-direction:column;gap:7px}
.ownrow__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ownrow__lbl{font-size:15px;font-weight:600;color:var(--ink)}
.ownrow__share{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--ink);
  letter-spacing:-.3px}
.ownrow__track{display:block;height:9px;border-radius:5px;background:var(--line-soft);
  overflow:hidden}
.ownrow__fill{display:block;height:100%;width:var(--w);border-radius:5px;background:var(--blue)}
.ownrow__fill--state{background:var(--c-com)}
.ownrow__fill--mixed{background:var(--c-land)}
.ownrow__fill--municipal{background:#94A3B8}
.ownrow__meta{font-size:12.5px;color:var(--muted-2);font-weight:500}

/* --- forward-looking supply (tenders + plans) ---------------------------- */
.pipegrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px}
.pipecol{display:flex;flex-direction:column}
.featrow__fill--gold{background:var(--c-com)}
.planchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.planchip{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px}
.planchip b{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--blue)}
.planchip--active b{color:var(--green)}
.planchip--historical{opacity:.7}
.gushwrap--tall{max-height:420px}

/* --- hubs (/reports/, /reports/<year>/, /city/<slug>/reports/) ----------- */
.rhub__head .cherocard__title{margin-top:8px}
.rhub__head .cherocard__stats{margin-top:22px}

.ryears{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;margin-top:20px}
.ryear{display:flex;flex-direction:column;gap:4px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .15s,box-shadow .15s}
.ryear:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.ryear__num{font-family:var(--mono);font-size:24px;font-weight:500;color:var(--ink);
  letter-spacing:-.5px}
.ryear__vol{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--blue)}
.ryear__meta{font-size:13px;font-weight:500;color:var(--muted-2)}

.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;margin-top:20px}
.rcard{display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:15px 17px;border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .15s,box-shadow .15s}
.rcard:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.rcard__city{font-size:16.5px;font-weight:600;color:var(--ink)}
.rcard__vol{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--blue);
  letter-spacing:-.2px}
.rcard__meta{font-size:12.5px;font-weight:500;color:var(--muted-2);line-height:1.5}

/* --- prev / next year ---------------------------------------------------- */
.yearnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.yearnav__link{display:flex;flex-direction:column;gap:4px;padding:16px 20px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s}
.yearnav__link:hover{border-color:var(--blue)}
.yearnav__link span{font-size:13px;font-weight:600;color:var(--muted-2)}
.yearnav__link b{font-size:16px;font-weight:500;color:var(--ink)}
.yearnav__link--next{text-align:end}

/* --- closing CTA --------------------------------------------------------- */
.rcta{margin-top:18px;text-align:center}
.rcta .card__sub{max-width:640px;margin-inline:auto}
.rcta .btn{margin-top:18px}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1000px){
  .chero2--report{grid-template-columns:1fr}
  .featgrid{grid-template-columns:1fr 1fr}
  .pipegrid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .featgrid{grid-template-columns:1fr}
  .ownlist{grid-template-columns:1fr}
  .yearnav{grid-template-columns:1fr}
  .yearnav__link--next{text-align:start}
  .qchart__cols{gap:8px}
  .qcol__track{height:100px}
  .qcol__ppm{font-size:14px}
  .qcol__meta{font-size:11.5px}
  .yearsw{gap:12px;padding:12px 14px}
  .yearsw__city{margin-inline-start:0}
}