/* The design of the monthly CREB reports
   (/market-reports/calgary-market-report-<month>-<year>.html).

   This file is the only stylesheet the reports use: no report carries its own
   <style> block, so every month looks the same and a new month only has to
   copy the markup of the newest report. scripts/test-market-report-months-unit.js
   fails if a report grows a <style> block again.

   server-lib/market-report-layout.js links this file into every monthly report
   at request time (with a content-hash ?v= so a change busts the 7-day asset
   cache) and marks <body> with data-monthly-report. Every selector is scoped
   under that attribute, so the file cannot restyle any other page.

   Sections:
     1. Tokens
     2. Template: the report layout, typography and components. Scoped with
        :where(), which adds no specificity, so these rules keep exactly the
        weight they had as the reports' inline CSS against the site header and
        footer includes.
     3. Components added by the site: quick answer, related links, the month
        switcher, scrollable tables.
     4. Phones. */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */

[data-monthly-report] {
  --mr-bg: #111;        /* page background; also the pinned column and scroll fade */
  --mr-bg-alt: #181817; /* even table rows (#111 under the 3% zebra tint) */
  --mr-accent: #e2c27a;
  --mr-gold: #c5973a;
}

/* ── 2. Template ────────────────────────────────────────────────────────── */

:where([data-monthly-report]) * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body:where([data-monthly-report]) {
  font-family: 'Cormorant Garamond', serif;
  color: #f8f4eb;
  background: #111;
  line-height: 1.8;
  font-size: 18px;
}

:where([data-monthly-report]) .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px;
}

:where([data-monthly-report]) h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: #e2c27a;
  margin-bottom: 24px;
}

:where([data-monthly-report]) h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #e2c27a;
  margin: 36px 0 16px;
}

:where([data-monthly-report]) h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #f8f4eb;
  margin: 28px 0 12px;
}

:where([data-monthly-report]) p {
  color: rgba(240, 236, 227, 0.85);
  margin-bottom: 20px;
}

:where([data-monthly-report]) .report-label {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 13px;
  color: #c5973a;
  margin-bottom: 8px;
}

:where([data-monthly-report]) .byline {
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(240, 236, 227, 0.85);
  margin-bottom: 28px;
}

:where([data-monthly-report]) .byline a {
  color: #e2c27a;
}

:where([data-monthly-report]) .snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 28px;
}

@media (min-width: 720px) {
  :where([data-monthly-report]) .snapshot-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

:where([data-monthly-report]) .stat-card {
  background: rgba(197, 151, 58, 0.1);
  border-left: 4px solid #c5973a;
  padding: 20px;
  border-radius: 8px;
}

:where([data-monthly-report]) .stat-card .number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: #e2c27a;
  line-height: 1.1;
}

:where([data-monthly-report]) .stat-card .label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(240, 236, 227, 0.85);
  margin-top: 6px;
}

:where([data-monthly-report]) .stat-card .change {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  margin-top: 10px;
  color: #ff8f8f;
}

:where([data-monthly-report]) .stat-card .change.up {
  color: #6fcf97;
}

:where([data-monthly-report]) .stat-card .change.neutral {
  color: rgba(240, 236, 227, 0.85);
}

:where([data-monthly-report]) .segment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0;
}

@media (min-width: 600px) {
  :where([data-monthly-report]) .segment-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

:where([data-monthly-report]) .segment-card {
  border: 1px solid rgba(248, 244, 235, 0.15);
  border-radius: 4px;
  padding: 22px;
  background: #fafaf7;
}

:where([data-monthly-report]) .segment-card h3 {
  margin-top: 0;
  color: #111;
}

:where([data-monthly-report]) .segment-card .market-tag {
  display: inline-block;
  font-family: 'Arial', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 12px;
}

:where([data-monthly-report]) .seller {
  background: #fdf3e3;
  color: #5e4a12;
}

:where([data-monthly-report]) .balanced {
  background: #e8f4e8;
  color: #14572f;
}

:where([data-monthly-report]) .buyer {
  background: #fde8e8;
  color: #8a1c12;
}

:where([data-monthly-report]) .softening {
  background: #fff3e0;
  color: #7a3f06;
}

:where([data-monthly-report]) .segment-card .price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.01em;
}

:where([data-monthly-report]) .segment-card .price-change {
  font-size: 12px;
  font-family: 'Arial', sans-serif;
  color: #4a4a4a;
  margin-top: 4px;
}

:where([data-monthly-report]) .segment-card p {
  margin-top: 14px;
  font-size: 15px;
  color: #444;
  line-height: 1.7;
}

:where([data-monthly-report]) .insight-block {
  background: rgba(197, 151, 58, 0.12);
  border-left: 4px solid #c5973a;
  padding: 22px 26px;
  margin: 36px 0;
  border-radius: 0 4px 4px 0;
}

:where([data-monthly-report]) .insight-block p {
  margin-bottom: 0;
  font-style: italic;
  color: rgba(248, 244, 235, 0.95);
}

:where([data-monthly-report]) .ground-truth {
  background: rgba(228, 196, 122, 0.06);
  border-left: 4px solid #e2c27a;
  padding: 22px 26px;
  margin: 28px 0;
  border-radius: 0 4px 4px 0;
}

:where([data-monthly-report]) .ground-truth p {
  color: rgba(248, 244, 235, 0.92);
}

:where([data-monthly-report]) .ground-truth p:last-child {
  margin-bottom: 0;
}

:where([data-monthly-report]) .ground-truth .ground-label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: #e2c27a;
  margin-bottom: 10px;
}

:where([data-monthly-report]) .ground-truth a {
  color: #e2c27a;
}

:where([data-monthly-report]) .district-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

:where([data-monthly-report]) .district-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(248, 244, 235, 0.12);
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: rgba(240, 236, 227, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

:where([data-monthly-report]) .district-list li:last-child {
  border-bottom: none;
}

:where([data-monthly-report]) .district-list .label {
  color: rgba(240, 236, 227, 0.85);
}

:where([data-monthly-report]) .district-list .value-up {
  color: #6fcf97;
  font-weight: 700;
}

:where([data-monthly-report]) .district-list .value-down {
  color: #ff8f8f;
  font-weight: 700;
}

:where([data-monthly-report]) .faq-section {
  margin-top: 56px;
}

:where([data-monthly-report]) .faq-item {
  border-bottom: 1px solid rgba(248, 244, 235, 0.15);
  padding: 22px 0;
}

:where([data-monthly-report]) .faq-item:last-child {
  border-bottom: none;
}

:where([data-monthly-report]) .faq-item h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: #e2c27a;
}

:where([data-monthly-report]) .faq-item p {
  margin: 0;
  color: rgba(240, 236, 227, 0.85);
}

:where([data-monthly-report]) .faq-item a {
  color: #e2c27a;
}

:where([data-monthly-report]) .cta-box {
  background: #1a1a1a;
  color: #fff;
  padding: 36px 32px;
  border-radius: 4px;
  margin-top: 60px;
  text-align: center;
  border: 1px solid rgba(197, 151, 58, 0.4);
}

:where([data-monthly-report]) .cta-box h2 {
  color: #e2c27a;
  margin: 0 0 12px;
  font-size: 1.4rem;
}

:where([data-monthly-report]) .cta-box p {
  color: #e8e4da;
  margin-bottom: 20px;
}

:where([data-monthly-report]) .cta-box a {
  display: inline-block;
  background: #B8963E;
  color: #000;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 2px;
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

:where([data-monthly-report]) .cta-box .phone {
  display: block;
  margin-top: 16px;
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  color: #d4d0c6;
}

:where([data-monthly-report]) hr {
  border: none;
  border-top: 1px solid rgba(248, 244, 235, 0.18);
  margin: 40px 0;
}

:where([data-monthly-report]) .source-note {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  color: rgba(240, 236, 227, 0.85);
  margin-top: 40px;
  line-height: 1.6;
}

:where([data-monthly-report]) .data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 8px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: rgba(240, 236, 227, 0.9);
  overflow-x: auto;
}

:where([data-monthly-report]) .data-table th {
  background: #c5973a;
  color: #111;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
}

:where([data-monthly-report]) .data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(248, 244, 235, 0.12);
}

:where([data-monthly-report]) .data-table tr:last-child td {
  border-bottom: none;
}

:where([data-monthly-report]) .chart-wrap {
  background: rgba(248, 244, 235, 0.04);
  border-radius: 8px;
  padding: 22px;
  margin: 16px 0 8px;
}

:where([data-monthly-report]) .chart-caption {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  color: rgba(240, 236, 227, 0.85);
  margin-top: 12px;
  text-align: center;
}

/* Breadcrumb, tuned for the dark report shell. */

:where([data-monthly-report]) .crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 26px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 236, 227, 0.85);
}

:where([data-monthly-report]) .crumbs a {
  color: rgba(226, 194, 122, 0.85);
  text-decoration: none;
}

:where([data-monthly-report]) .crumbs a:hover {
  text-decoration: underline;
}

:where([data-monthly-report]) .crumbs li + li::before {
  content: '·';
  margin-right: 8px;
  color: rgba(240, 236, 227, 0.85);
}

/* District tables carry eight rows of six figures. Numerals right-align so
   the eye can compare a column; the label column stays left. */

:where([data-monthly-report]) .data-table td.num,
:where([data-monthly-report]) .data-table th.num {
  text-align: right;
}

:where([data-monthly-report]) .data-table tbody tr:nth-child(even) {
  background: rgba(248, 244, 235, 0.03);
}

:where([data-monthly-report]) .data-table .up {
  color: #6fcf97;
  font-weight: 700;
}

:where([data-monthly-report]) .data-table .down {
  color: #ff8f8f;
  font-weight: 700;
}

:where([data-monthly-report]) .data-table tr.total td {
  font-weight: 700;
  color: #e2c27a;
}

:where([data-monthly-report]) .table-note {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  color: rgba(240, 236, 227, 0.85);
  margin: 6px 0 28px;
  line-height: 1.6;
}

:where([data-monthly-report]) .regional-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0;
}

@media (min-width: 600px) {
  :where([data-monthly-report]) .regional-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 3. Components ──────────────────────────────────────────────────────── */

/* Quick answer: the report's one-paragraph summary, directly under the byline.
   data-aeo-answer on it tells the AEO injector not to add its own, and the
   Speakable schema points AI engines at it. */
[data-monthly-report] .quick-answer {
  background: rgba(197, 151, 58, 0.1);
  border-left: 4px solid var(--mr-gold);
  border-radius: 0 4px 4px 0;
  padding: 20px 24px;
  margin: 0 0 32px;
}
[data-monthly-report] .quick-answer .qa-label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mr-accent);
  margin-bottom: 8px;
}
[data-monthly-report] .quick-answer p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(248, 244, 235, 0.92);
}

/* A qualifier after a card price, e.g. "$603,100 detached". */
[data-monthly-report] .segment-card .price-unit {
  font-size: 13px;
  font-weight: 400;
  color: #777;
}

/* Related reading at the foot of the report. */
[data-monthly-report] .related-list {
  padding-left: 20px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 2;
  color: rgba(240, 236, 227, 0.85);
}
[data-monthly-report] .related-list a { color: var(--mr-accent); }

/* A phone number must never break at its hyphens ("403-998-" / "4274"). */
[data-monthly-report] a[href^="tel:"] { white-space: nowrap; }

/* Chart.js sizes canvases itself; if its CDN script is blocked the canvas
   keeps its 400px width attribute and would push the page sideways. */
[data-monthly-report] canvas { max-width: 100%; }

/* Month switcher and the "newer report" note, injected by
   server-lib/market-report-months.js below the breadcrumb. */
[data-monthly-report] .mr-months {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 14px;
  margin: 0 0 22px;
  padding: 10px 0;
  border-top: 1px solid rgba(197, 151, 58, 0.35);
  border-bottom: 1px solid rgba(197, 151, 58, 0.35);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
[data-monthly-report] .mr-months a { color: var(--mr-accent); text-decoration: none; }
[data-monthly-report] .mr-months a:hover,
[data-monthly-report] .mr-months a:focus-visible { text-decoration: underline; }
[data-monthly-report] .mr-months .mr-step { flex: 0 0 auto; white-space: nowrap; padding-top: 5px; }
[data-monthly-report] .mr-months .mr-step.is-empty { visibility: hidden; }
[data-monthly-report] .mr-months .mr-picker { flex: 1 1 auto; text-align: center; position: relative; }
[data-monthly-report] .mr-months summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  padding: 4px 12px;
  border: 1px solid rgba(197, 151, 58, 0.55);
  border-radius: 2px;
}
[data-monthly-report] .mr-months summary::-webkit-details-marker { display: none; }
[data-monthly-report] .mr-months summary::after { content: ' \25BE'; color: var(--mr-gold); }
[data-monthly-report] .mr-months details[open] summary::after { content: ' \25B4'; }
[data-monthly-report] .mr-months ul {
  list-style: none;
  margin: 8px auto 0;
  padding: 6px 0;
  max-width: 240px;
  border: 1px solid rgba(197, 151, 58, 0.35);
  border-radius: 2px;
  text-align: left;
}
[data-monthly-report] .mr-months li { padding: 4px 14px; }
[data-monthly-report] .mr-months li [aria-current] { font-weight: 700; }
[data-monthly-report] .mr-months .mr-tag { font-size: 11px; color: var(--mr-accent); margin-left: 6px; }
[data-monthly-report] .mr-stale {
  margin: 0 0 22px;
  padding: 10px 14px;
  border-left: 3px solid var(--mr-gold);
  background: rgba(197, 151, 58, 0.1);
  font-size: 15px;
  line-height: 1.5;
}
[data-monthly-report] .mr-stale a { color: var(--mr-accent); font-weight: 600; }

/* Scrollable tables. The server wraps every .data-table as
     .rt-frame > .rt-hint + .rt-box > .rt-scroll > table
   and a small inline script adds .is-scrollable when the table is wider than
   the screen and .at-end once it has been swiped all the way across. Without
   the script the table still scrolls; it just has no hint or fade. */
[data-monthly-report] .rt-frame { margin: 20px 0 8px; }
[data-monthly-report] .rt-box { position: relative; }
[data-monthly-report] .rt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
[data-monthly-report] .rt-scroll:focus-visible { outline: 2px solid var(--mr-accent); outline-offset: 2px; }
[data-monthly-report] .rt-scroll > table { display: table; width: 100%; margin: 0; }
[data-monthly-report] .rt-frame .rt-hint {
  display: none;
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mr-accent);
}
[data-monthly-report] .rt-frame.is-scrollable .rt-hint { display: block; }
[data-monthly-report] .rt-frame.is-scrollable:not(.at-end) .rt-box::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--mr-bg));
}

@media (max-width: 520px) {
  [data-monthly-report] .mr-months { justify-content: space-between; }
  [data-monthly-report] .mr-months .mr-picker { order: -1; flex-basis: 100%; }
}

/* ── 4. Phones ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Page frame: less dead space around a 390px column. */
  [data-monthly-report] .container { padding: 28px 18px 48px; }

  /* Headings inherit the body line-height of 1.8, which opens a gap the height
     of a line between every wrapped heading line. */
  [data-monthly-report] h1,
  [data-monthly-report] h2,
  [data-monthly-report] h3 { line-height: 1.2; }
  [data-monthly-report] .container h1 { font-size: 2rem; margin-bottom: 18px; }
  [data-monthly-report] .container h2 { font-size: 1.5rem; margin: 32px 0 14px; }
  [data-monthly-report] .container h3 { font-size: 1.25rem; }

  /* Body copy only. Classed paragraphs (captions, source notes, the table
     hint) keep their own small sizes, and list items are left alone because
     the breadcrumb trail is one. */
  [data-monthly-report] .container > p:not([class]),
  [data-monthly-report] .container .insight-block p,
  [data-monthly-report] .container .ground-truth p,
  [data-monthly-report] .container .faq-item p { font-size: 17px; line-height: 1.7; }
  [data-monthly-report] .container .report-label { font-size: 12px; letter-spacing: 0.14em; }

  /* Cards and call-outs: reclaim horizontal room for the text. */
  [data-monthly-report] .quick-answer { padding: 18px 16px 18px 18px; }
  [data-monthly-report] .quick-answer p { font-size: 16px; }
  [data-monthly-report] .stat-card { padding: 16px 14px; }
  [data-monthly-report] .stat-card .number { font-size: 1.6rem; }
  [data-monthly-report] .stat-card .label { line-height: 1.35; }
  [data-monthly-report] .segment-card { padding: 18px 16px; }
  [data-monthly-report] .segment-card p { font-size: 15.5px; }
  [data-monthly-report] .insight-block,
  [data-monthly-report] .ground-truth { padding: 18px 16px 18px 18px; margin: 28px 0; }
  [data-monthly-report] .chart-wrap { padding: 12px 8px; }
  [data-monthly-report] hr { margin: 32px 0; }

  /* Call to action: a full-width button that is easy to hit with a thumb. */
  [data-monthly-report] .cta-box { padding: 28px 18px; margin-top: 44px; }
  [data-monthly-report] .cta-box a {
    display: block;
    padding: 15px 16px;
    font-size: 15px;
    white-space: nowrap;
  }

  /* Tables: compact single-line cells, with the first column pinned so the
     row label stays in view while the figures scroll underneath it. */
  [data-monthly-report] .rt-scroll th,
  [data-monthly-report] .rt-scroll td {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
  }
  [data-monthly-report] .rt-scroll tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mr-bg);
    box-shadow: 1px 0 0 rgba(128, 128, 128, 0.25);
  }
  /* Keep the zebra rows and the gold header on their pinned cells. */
  [data-monthly-report] .rt-scroll tbody tr:nth-child(even) > :first-child { background: var(--mr-bg-alt); }
  [data-monthly-report] .rt-scroll thead th:first-child { background: var(--mr-gold); }

  /* Month switcher: 44px tap targets. */
  [data-monthly-report] .mr-months summary { padding: 10px 14px; }
  [data-monthly-report] .mr-months .mr-step { padding: 10px 0; }
  [data-monthly-report] .mr-months li a { display: inline-block; padding: 6px 0; }
}