:root { color-scheme: light; --ink: #272b28; --muted: #646963; --line: #dedfd8; --green: #286444; --yellow: #f1d15c; }
* { box-sizing: border-box; }
body { margin: 0; background: #f3f2ec; color: var(--ink); font: 15px/1.5 system-ui, sans-serif; }
a { color: #28634a; text-underline-offset: 3px; }
button, input, select { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #368363; outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.masthead { max-width: 1160px; margin: auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 10px; color: var(--ink); font: bold 28px Georgia, serif; text-decoration: none; }
.brand span { color: var(--muted); font: 13px system-ui, sans-serif; }
.masthead nav { display: flex; gap: 24px; }
.masthead nav a { color: var(--muted); text-decoration: none; padding: 8px 0; }
.masthead nav a[aria-current=page] { color: var(--ink); font-weight: 650; border-bottom: 2px solid var(--green); }
main { max-width: 1160px; margin: auto; padding: 28px 24px; }
.workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.directory { min-width: 0; position: sticky; top: 24px; }
.detail, .ranking { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 32px 36px; box-shadow: 0 2px 3px #252d2210; }
h1, h2 { font: bold 28px/1.2 Georgia, serif; margin: 0 0 8px; }
.directory h2 { font: 650 16px/1.4 system-ui, sans-serif; margin-bottom: 14px; }
h3 { font-size: 16px; margin: 0; }
p { margin: 8px 0; }
.muted, .address, footer { color: var(--muted); }
.office-heading { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.address { font-size: 14px; margin: 0; }
label { display: block; font-size: 14px; font-weight: 600; }
input[type=search], select { width: 100%; min-height: 44px; border: 1px solid #a5aea3; border-radius: 4px; background: #fff; color: var(--ink); padding: 9px 11px; }
button, input[type=submit] { cursor: pointer; border: 1px solid #b7c1b4; background: #fff; color: var(--green); border-radius: 4px; min-height: 44px; padding: 8px 12px; font-weight: 600; }
button:disabled { opacity: .6; cursor: wait; }
.location { margin: 8px 0 0; padding: 4px 0; min-height: 36px; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.directory .muted, .result-count { font-size: 12px; margin: 4px 0 10px; }
.office-list { max-height: 65vh; overflow-y: auto; border-top: 1px solid var(--line); }
.office { display: block; text-decoration: none; color: var(--ink); padding: 12px 10px; border-bottom: 1px solid var(--line); }
.office[hidden] { display: none; }
.office:hover { background: #e9ece5; }
.office[aria-current=true] { background: #e3eadf; border-left: 3px solid var(--green); padding-left: 7px; }
.office strong, .office span, .office small { display: block; }
.office strong { font-size: 14px; font-weight: 600; }
.office span, .office small { color: var(--muted); font-size: 12px; }
.office small:empty { display: none; }
.coverage { margin-top: 3px; }
turbo-frame { display: block; }
turbo-frame[busy] { opacity: .65; }
.latest { margin: 22px 0 28px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.badge { color: var(--muted); font-size: 12px; font-weight: 500; }
.latest .muted, .section-heading > .muted { font-size: 12px; }
.measurement { font-size: 13px; color: var(--muted); }
.measurement strong { color: var(--ink); font-size: 40px; line-height: 1.2; margin-right: 6px; font-weight: 650; letter-spacing: -.04em; }
.latest [role=status] { color: #83592c; font-size: 13px; }
.day-history { margin: 24px 0; }
.daily-chart { display: block; width: 100%; font-size: 13px; fill: var(--muted); margin-top: 10px; }
.daily-axis { stroke: #b5bcb3; }
.daily-line { stroke: var(--green); stroke-width: 2; }
.daily-point { fill: var(--green); }
.daily-point.selected-record { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.daily-unknown { fill: #8b7771; }
.day-record strong { font-size: 24px; }
.data-warning { font-size: 12px; color: #71613c; margin: 8px 0; }
.notice { border-left: 2px solid #b5bcb3; padding: 8px 12px; margin: 16px 0; color: var(--muted); font-size: 14px; }
details { font-size: 13px; margin-top: 12px; }
summary { cursor: pointer; padding: 8px 0; font-weight: 550; }
.history-disclosure, .records-disclosure, .office-info { border-top: 1px solid var(--line); margin: 0; }
.history-disclosure > summary, .records-disclosure > summary, .office-info > summary { padding: 16px 0; font-size: 14px; }
summary > span { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.comparison { margin-top: 6px; }
.comparison summary { color: var(--muted); font-size: 12px; padding: 2px 0; }
.placements { margin: 0 0 20px; }
.placements h3 { font-size: 14px; }
.placements a, .placements .muted { font-size: 13px; }
.placements td:last-child { min-width: 190px; }
.office-info p { margin: 0 0 16px; font-size: 13px; }
.usual { padding: 6px 0 20px; }
.usual h3 { font-size: 14px; color: var(--muted); font-weight: 500; }
.days { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0; }
.days a { text-decoration: none; padding: 9px 10px; font-size: 13px; min-height: 40px; border-radius: 3px; }
.days a:hover { background: #edf1e9; }
.days a[aria-current=true] { background: var(--green); color: white; }
.chart-title, .chart-legend { font-size: 12px; color: var(--muted); }
.chart-scroll, .table-scroll { overflow-x: auto; }
#office_chart { overflow-anchor: none; }
.chart-result { display: grid; grid-template-rows: auto 270px; align-content: start; }
.chart-result > .notice, .chart-result > .chart-scroll { align-self: start; }
.histogram { display: flex; gap: 5px; padding: 18px 0 8px; }
.column { flex: 1; text-align: center; min-width: 20px; font-size: 11px; }
.legend-range { font-size: 18px; font-weight: 700; color: var(--green); }
.legend-median { color: var(--ink); font-weight: 700; margin-left: 8px; }
.range-values { display: flex; flex-direction: column; line-height: 1.5; margin-bottom: 8px; }
.maximum-value, .minimum-value { color: var(--muted); font-size: 10px; }
.median-value { font-size: 12px; }
.bar-track { position: relative; height: 150px; display: flex; align-items: end; justify-content: center; border-bottom: 1px solid #a5aea3; }
.bar { width: 85%; display: block; background: #dce8d9; border-radius: 2px 2px 0 0; }
.range { position: absolute; left: 50%; width: 2px; background: var(--green); transform: translateX(-50%); }
.range::before, .range::after { content: ""; position: absolute; left: -5px; width: 12px; height: 2px; background: var(--green); }
.range::before { top: -1px; }
.range::after { bottom: -1px; }
.median-marker { position: absolute; left: 8%; width: 84%; height: 3px; background: var(--ink); transform: translateY(50%); }
.unknown { color: var(--muted); }
.hour { display: block; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
td, th { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
thead th { color: var(--muted); font-weight: 500; }
caption { text-align: left; padding: 10px 0; color: var(--muted); }
.ranking { margin: 0; }
.ranking-table { min-width: 600px; margin-top: 20px; }
.ranking-table td, .ranking-table th { padding: 12px; }
.ranking-table tbody tr:nth-child(-n+3), .day-measurements .selected-record { background: #f2f5ed; }
.ranking-table .rank { color: var(--muted); width: 40px; }
.peak-total strong { font-size: 18px; }
footer { font-size: 12px; margin: 20px 0 0; }
footer details { margin: 0; font-size: 12px; }
footer summary { display: inline-block; padding: 4px 0; font-weight: 400; text-decoration: underline; }
@media (max-width: 850px) {
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .directory { position: static; }
  .office-list { max-height: 150px; }
  main { padding: 20px 16px; }
  .detail, .ranking { padding: 22px 20px; }
  .masthead { padding: 12px 16px; }
  .masthead nav { gap: 18px; }
  .brand { font-size: 25px; }
  .brand span { display: none; }
  h2 { font-size: 25px; }
  .daily-chart { font-size: 22px; }
  .daily-point { r: 5px; }
  .daily-point.selected-record { r: 9px; }
  .latest .section-heading { display: block; }
  .latest .badge { display: block; margin-top: 4px; }
}