/* Data views for the Bay Area (place-data.js). The layout, cards, tabs,
   distribution and profile bars come from station-index.css, the original
   atlas's Station data; this sheet adds only what places need beyond it:
   the area filter, inline charts, the ranking table and place search. */

/* Map console: Area beside Find, the same weight as the original Line control. */
.place-data-console .place-data-area-filter{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.place-data-console .place-data-area-filter > span,
.place-data-conditions label > span{
  color: var(--ink-label, rgba(17, 16, 14, .62));
  font: 600 var(--panel-label, 12px)/1.2 var(--font-main);
}
.place-data-console select,
.place-data-conditions select{
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 4px 28px 4px 10px;
  border: 1px solid rgba(17, 16, 14, .16);
  border-radius: var(--panel-control-radius, 8px);
  background: rgba(255, 253, 247, .9);
  color: var(--ink);
  font: 600 var(--panel-label, 12px)/1.2 var(--font-main);
}
.place-data-conditions{
  display: grid;
  gap: 10px;
}
.place-data-conditions label{
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.place-data-find-listbox button{
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.place-data-find-listbox button:hover,
.place-data-find-listbox button:focus-visible,
.place-data-find-listbox button[aria-selected="true"]{
  background: rgba(216, 137, 44, .12);
}
.place-data-find-listbox button small{
  color: var(--story-ink-quiet, rgba(12, 12, 12, .6));
}

/* Section heads outside the original atlas's named blocks. */
.place-data-section-head{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.place-data-section-head strong{
  color: var(--story-ink, var(--ink));
  font: var(--story-weight-strong, 650) var(--panel-body, 14px)/1.25 var(--font-main);
}
.place-data-section-head small{
  color: var(--story-ink-quiet, rgba(12, 12, 12, .6));
  font: var(--story-weight-regular, 400) var(--panel-label, 12px)/1.3 var(--font-main);
  text-align: right;
}
.place-data-mix{
  padding: 12px;
  border: 1px solid rgba(17, 16, 14, .08);
  border-radius: var(--panel-control-radius, 8px);
  background: var(--panel-surface-sunk, rgba(240, 236, 226, .6));
}
.place-data-bars > div.is-active > span,
.place-data-bars > div.is-active > strong{
  color: var(--ink);
  font-weight: 700;
}
.place-data-source{
  margin: 0;
  color: var(--story-ink-quiet, rgba(12, 12, 12, .6));
  font: 400 var(--panel-label, 12px)/1.45 var(--font-main);
}

/* Inline SVG charts: the access curve and the rent scatter. */
.place-data-chart-stage svg{
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.place-data-chart-stage text{
  fill: rgba(17, 16, 14, .62);
  font: 500 11px var(--font-main);
  font-variant-numeric: tabular-nums;
}
.place-data-chart-stage text.axis{
  fill: rgba(17, 16, 14, .5);
  font-size: 10.5px;
  letter-spacing: .02em;
}
.place-data-chart-stage line.grid{
  stroke: rgba(17, 16, 14, .08);
  stroke-width: 1;
}
.place-data-curve .band{
  fill: rgba(79, 166, 166, .16);
  stroke: none;
}
.place-data-curve .median{
  fill: none;
  stroke: rgba(17, 16, 14, .5);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}
.place-data-curve .threshold{
  stroke: var(--accent, #c9352b);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.place-data-curve .selected{
  fill: none;
  stroke: rgb(8, 79, 94);
  stroke-width: 2.2;
}
.place-data-curve circle{
  fill: rgb(8, 79, 94);
  stroke: #fffdf7;
  stroke-width: 1.4;
}
.place-data-scatter line.median{
  stroke: rgba(17, 16, 14, .3);
  stroke-width: 1;
}
.place-data-scatter .place-data-trend{
  stroke: rgba(17, 16, 14, .55);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}
.place-data-scatter .dots circle{
  fill: rgba(129, 120, 102, .45);
  stroke: rgba(255, 253, 247, .8);
  stroke-width: .6;
  cursor: pointer;
}
.place-data-scatter .dots circle.is-above{ fill: rgba(17, 112, 124, .7); }
.place-data-scatter .dots circle.is-below{ fill: rgba(191, 94, 39, .66); }
.place-data-scatter .dots circle.is-selected{
  fill: var(--ink);
  stroke: #fffdf7;
  stroke-width: 2;
}
.place-data-scatter .dots circle:hover{ stroke: var(--ink); stroke-width: 1.4; }

/* The ranking: a plain table that scrolls inside the ledger drawer. */
.place-data-ledger-body{
  overflow: auto;
}
.place-data-ledger{
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.35 var(--font-main);
  font-variant-numeric: tabular-nums;
}
.place-data-ledger thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(17, 16, 14, .16);
  background: #fbf8f0;
  color: var(--ink-label, rgba(17, 16, 14, .62));
  font: 600 12px/1.2 var(--font-main);
  text-align: left;
}
.place-data-ledger tbody tr{
  cursor: pointer;
}
.place-data-ledger tbody tr:hover,
.place-data-ledger tbody tr:focus-visible{
  background: rgba(216, 137, 44, .08);
}
.place-data-ledger tbody tr.is-selected{
  background: rgba(216, 137, 44, .14);
  box-shadow: inset 3px 0 0 var(--accent, #c9352b);
}
.place-data-ledger :is(td, th[scope="row"]){
  padding: 7px 10px;
  border-bottom: 1px solid rgba(17, 16, 14, .07);
  text-align: left;
  vertical-align: top;
}
.place-data-ledger td:first-child{
  width: 3.5em;
  color: var(--story-ink-quiet, rgba(12, 12, 12, .6));
}
.place-data-ledger th[scope="row"]{
  font-weight: 650;
}
.place-data-ledger th[scope="row"] small{
  display: block;
  color: var(--story-ink-quiet, rgba(12, 12, 12, .6));
  font-weight: 400;
  font-size: 12px;
}

/* Phones: the workspace reads in the sheet, the console stacks above it. */
.place-data-workspace.is-mobile{
  padding-bottom: 12px;
}
#mobilePrimarySummary .place-data-console{
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
#mobilePrimarySummary .place-data-console .station-index-query-bar{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

/* Data mode's sheet head stays in flow while the sheet is open on phones. */
@media (max-width: 980px) {
  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet:is([data-snap="half"],[data-snap="full"]) > :is(.mobile-sheet-head,.mobile-mode-control) { position: relative; top: auto; z-index: 1; }
}

#mobilePrimarySummary .place-data-console .station-index-search{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
#mobilePrimarySummary .place-data-console .station-index-plate-conditions > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  list-style: none;
  cursor: pointer;
}
#mobilePrimarySummary .place-data-console .station-index-plate-conditions > summary > span{
  display: grid;
  gap: 2px;
}
#mobilePrimarySummary .place-data-console .station-index-plate-conditions > summary small{
  color: var(--ink-label, rgba(17, 16, 14, .62));
  font: 600 11px/1.2 var(--font-main);
}
#mobilePrimarySummary .place-data-console .station-index-plate-conditions > summary strong{
  font: 650 13px/1.3 var(--font-main);
}
#mobilePrimarySummary .place-data-console .station-index-plate-conditions > summary em{
  color: var(--accent, #c9352b);
  font: 600 12px/1.2 var(--font-main);
  font-style: normal;
}
#mobilePrimarySummary .station-index-story-map-legend{
  position: static;
  min-width: 0;
  max-width: none;
  margin: 0 0 10px;
}
#mobilePrimarySummary .place-data-console .station-index-plate-conditions > summary::after{
  display: none;
}
#mobilePrimarySummary .place-data-console :is(.station-index-find-field, .station-index-find-field input, .place-data-area-filter, .place-data-area-filter select){
  width: 100%;
  max-width: none;
}
#mobilePrimarySummary .place-data-console :is(.station-index-search, .place-data-area-filter){
  grid-template-columns: 52px minmax(0, 1fr);
}
/* The original profile grid has fixed minimums; place bars shrink on narrow phones
   and give the value column the room its readout needs. */
.place-data-bars > div{
  grid-template-columns: minmax(0, 1fr) minmax(56px, 1.1fr) auto;
}
.place-data-bars > div > strong{
  min-width: 2.6em;
  text-align: right;
  white-space: nowrap;
}
.place-data-mix,
.place-data-chart{
  min-width: 0;
  box-sizing: border-box;
}
/* The original atlas weights its tab columns for its own lens names; five SF lenses share
   the row equally and wrap only between words, in every language. */
.station-index-panel.is-plate-layout .place-data-workspace .station-index-tabs{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.place-data-workspace .station-index-tab :is(strong, small){
  overflow-wrap: normal;
  hyphens: auto;
}