/*
 * Monthly market report pages.
 *
 * Layered on top of assets/site.css, the hand-written marketing stylesheet, so a
 * report reads as part of fudosansoba.com rather than as a document that happens
 * to share the domain. That file supplies the nav, the footer, the warm paper
 * palette and the type; everything here is the long-form reading column it does
 * not otherwise need.
 *
 * It deliberately does NOT load ward-page.css. That is the application shell's
 * stylesheet and carries a cool slate palette (#0f172a ink, #0284c7 accent)
 * against this one's warm paper (#1a1917 ink, #2a7faa accent). Loading both put a
 * report visibly between the two and belonging to neither.
 *
 * House style applies: no bold on Japanese text, ruled rather than boxed, no
 * colour-filled calls to action.
 */

/* Sticky footer. A month with one report leaves the page far shorter than the
   viewport, and without this the footer floated in the middle of the screen with
   white space under it, reading as a stray band rather than the end of the page.
   The nav above stays position:sticky inside the column. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.report {
  flex: 1 0 auto;
  width: 100%;
  max-width: 54rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) 1.25rem 4rem;
  color: var(--text, #1a1917);
  font-size: 1rem;
  line-height: 1.85;
}

.site-footer {
  flex: none;
}

/* A single quiet line naming the series, rather than a breadcrumb trail. The
   chain of separators made every page read like a directory listing, and the
   route back is already in the nav. */
.report-kicker {
  display: block;
  margin-bottom: 0.875rem;
  color: var(--muted, #6b6960);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: none;
}

.report-kicker:hover {
  color: var(--accent-dark, #185b7c);
}

.report-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border, #e7e3da);
}

.report-header h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.report-meta {
  margin: 0;
  color: var(--muted, #6b6960);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.report h2 {
  margin: 2.75rem 0 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border, #e7e3da);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.report h3 {
  margin: 2rem 0 0.625rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted-strong, #45433c);
}

.report p {
  margin: 0 0 1.125rem;
}

.report ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.report li {
  margin-bottom: 0.5rem;
}

.report a {
  color: var(--accent-dark, #185b7c);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong, #d6d1c5);
}

.report a:hover {
  border-bottom-color: currentColor;
}

.report code {
  padding: 0.1em 0.35em;
  background: var(--paper, #faf8f3);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

/* Wide tables scroll inside themselves so the page body never scrolls sideways. */
.report-table-wrap {
  margin: 0 0 1.75rem;
  overflow-x: auto;
}

/* The reading column at 54rem clears the ward table's ~720px on its own, so
   figures line up with the prose rather than breaking out of it. */

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-table th,
.report-table td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  text-align: right;
  border-bottom: 1px solid var(--border, #e7e3da);
}

.report-table th:first-child,
.report-table td:first-child {
  text-align: left;
  white-space: normal;
}

/* Headers wrap so five columns fit the reading column; the numbers below them
   must not, or a value breaks across lines. Without this the last column was
   clipped mid-character with no sign that anything had been cut off. */
.report-table thead th {
  border-bottom: 1px solid var(--border-strong, #d6d1c5);
  color: var(--muted, #6b6960);
  font-weight: 400;
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.35;
}

.report-table tbody tr:nth-child(even) {
  background: var(--paper, #faf8f3);
}

/* Charts are inline SVG, sized by the reading column rather than a fixed width. */
.report-figure {
  margin: 0 0 1.75rem;
}

.report-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.report-figure figcaption {
  margin-top: 0.5rem;
  color: var(--muted, #6b6960);
  font-size: 0.75rem;
}


/* Scoped past `.report ul`, which is (0,1,1) and was winning: its 1.25rem
   padding-left pushed the list 20px right of the heading above it. */
.report .report-index {
  margin: 0;
  padding: 0;
  list-style: none;
}

.report .report-index li {
  display: block;
  margin: 0;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--border, #e7e3da);
}

/* The related-reports block opens with its own rule, so a border here too left
   two lines with an empty band between them. */
.report .report-index li:last-child {
  border-bottom: 0;
}

.report-index-title {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.report-index-blurb {
  margin: 0.375rem 0 0;
  color: var(--muted, #6b6960);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* No rule on the first row: the header already closes with one, and the two
   together read as a stray empty band. */

.report-index a {
  color: var(--text, #1a1917);
  text-decoration: none;
  border-bottom: none;
  line-height: 1.5;
}

.report-index a:hover {
  color: var(--accent-dark, #185b7c);
}

/* The city's headline figure sits beside the title rather than under it: one
   number, on the same line as the name it belongs to. It wraps below the title
   on a narrow screen, where a two-column header would squeeze both. */
.report-header--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
}

.report-header-main {
  flex: 1 1 20rem;
  min-width: 0;
}

.report-figures {
  display: flex;
  gap: 2.5rem;
  flex: 0 0 auto;
}

.report-figure-item {
  min-width: 6rem;
  text-align: right;
}

.report-figure-label {
  display: block;
  color: var(--muted, #6b6960);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-figure-value {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.report-figure-note {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted, #6b6960);
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  .report {
    padding: 1.5rem 1rem 3rem;
    font-size: 0.9375rem;
  }

  /* Keep the figure beside the title rather than letting it claim a row of its
     own. The provenance note is what made it too wide to fit; it is stated in
     full in the report, so it goes rather than the layout. */
  .report-header--split {
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .report-header-main {
    flex: 1 1 auto;
  }

  .report-figures {
    gap: 1rem;
  }

  .report-figure-item {
    min-width: 0;
  }

  .report-figure-value {
    font-size: 1.125rem;
  }

  .report-figure-note {
    display: none;
  }

  /* Two lines of summary is enough to choose by on a phone. */
  .report-index-blurb {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .report-related ul {
    gap: 0.5rem 1.25rem;
  }
}

.report-hub-pending {
  color: var(--muted, #6b6960);
}

/* Cross-references to the other cities' reports for the same month. */
.report-related {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border, #e7e3da);
}

.report-related h2 {
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
  font-size: 1rem;
  font-weight: 400;
}

.report-related-lede {
  margin: 0 0 1rem;
  color: var(--muted, #6b6960);
  font-size: 0.8125rem;
}

.report-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.report-related li {
  margin: 0;
}

.report-related-move {
  color: var(--muted, #6b6960);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* Direction of travel, last in the cascade so it beats the muted colours that
   the related-links and table cells set on themselves.
   The sign in the text is the real encoding and this only reinforces it: red and
   green do not separate under protanopia (validated at dE 3.5, against a floor
   of 8), so a reader who cannot tell them apart still reads the minus. */
.report .report-move--down,
.report-table .report-move--down {
  color: #b95544;
}

.report .report-move--up,
.report-table .report-move--up {
  color: #1f7a4d;
}