/* ==========================================================================
         Intelio property-market design system.

         Carried over from intelio-property-market-mockup.html and deliberately
         SCOPED to #pm-page (the <main> wrapper) so the shared site header /
         footer and the rest of the app are never affected. For the same reason
         the mockup's design tokens are declared on #pm-page rather than :root.

         NOTE: .market-chart / .market-chart--map / .market-chart--donut /
         .market-chart-empty / .raw-data-toggle / .insight-list are contract
         classes used by the bottom chart-init script - keep those names.
         ========================================================================== */
      #pm-page {
        --bg: #f1f4f7;
        --surface: #ffffff;
        --primary-soft: #f9eaea;
        --primary-light: #e07070;
        --ink: #1b1b1b;
        --muted: #5a6572;
        --line: #dfe4ea;
        --green: #1e9e6a;
        --green-soft: #e7f6f0;

        background: var(--bg);
        color: var(--ink);
        line-height: 1.6;
      }
      #pm-page *,
      #pm-page *::before,
      #pm-page *::after {
        box-sizing: border-box;
      }
      /* The shared /css/styles.css ships `@layer base { em { font-style:italic
         !important } }`. A layered !important outranks an unlayered one, so the
         upright accent from the mockup must be re-asserted inside the same
         @layer base with a higher-specificity selector. */
      @layer base {
        #pm-page em.acc {
          font-style: normal !important;
          color: var(--primary) !important;
        }
      }
      #pm-page .int-container {
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 24px;
      }

      /* ---- Hero ---- */
      #pm-page .pm-hero {
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 50px 0 46px;
      }
      #pm-page .pm-hero h1 {
        font-size: 36px;
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--ink);
        margin: 0 0 14px;
      }
      #pm-page .pm-hero .pm-sub {
        font-size: 16.5px;
        color: var(--muted);
        margin: 0 0 12px;
      }
      #pm-page .pm-hero .pm-sub:last-child {
        margin-bottom: 0;
      }

      /* ---- Insights features band ---- */
      #pm-page .pm-analysis {
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 48px 0 54px;
      }
      #pm-page .pm-kicker {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--primary);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        margin: 0 0 10px;
      }
      #pm-page .pm-analysis h2 {
        font-size: 26px;
        letter-spacing: -0.01em;
        color: var(--ink);
        margin: 0 0 16px;
      }
      #pm-page .pm-prose {
        font-size: 15.5px;
        color: #333d49;
      }
      #pm-page .pm-prose p {
        margin: 0 0 14px;
      }
      #pm-page .pm-prose strong {
        color: var(--ink);
      }
      /* Desktop: the six feature cards are always visible (button hidden).
         Mobile (<=600px): the cards collapse behind .pm-offerbtn. */
      #pm-page .pm-offerbtn {
        display: none;
      }
      #pm-page .pm-offerbtn.open {
        background: var(--ink);
        border-color: var(--ink);
      }
      #pm-page .pm-featgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 26px;
      }
      #pm-page .pm-feat {
        background: #fff;
        border: 1px solid var(--line);
        padding: 22px;
      }
      #pm-page .pm-feat b {
        display: block;
        font-size: 15px;
        color: var(--ink);
        margin-bottom: 6px;
      }
      #pm-page .pm-feat p {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.6;
        margin: 0;
      }

      /* ---- Content blocks ---- */
      #pm-page .pm-block {
        padding: 50px 0 54px;
        border-top: 1px solid var(--line);
      }
      #pm-page .pm-head {
        margin-bottom: 24px;
      }
      #pm-page .pm-head h2 {
        font-size: 24px;
        letter-spacing: -0.01em;
        color: var(--ink);
        margin: 0;
      }
      #pm-page .pm-head p {
        color: var(--muted);
        font-size: 14.5px;
        margin: 6px 0 0;
      }
      #pm-page .pm-block--first {
        border-top: none;
      }
      #pm-page .pm-block--alt {
        background: #fff;
      }

      /* ---- Stat grid ---- */
      #pm-page .pm-statgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      #pm-page .pm-stat {
        background: #fff;
        border: 1px solid var(--line);
        padding: 24px 26px;
        transition: 0.15s;
      }
      #pm-page .pm-stat:hover {
        border-color: var(--primary);
      }
      #pm-page .pm-stat .lbl {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
      }
      #pm-page .pm-stat .place {
        font-size: 21px;
        font-weight: 800;
        color: var(--ink);
        margin: 8px 0 2px;
        letter-spacing: -0.01em;
        line-height: 1.25;
      }
      #pm-page .pm-stat .place a:hover {
        color: var(--primary);
      }
      #pm-page .pm-stat .val {
        font-size: 26px;
        font-weight: 800;
        color: var(--primary);
        letter-spacing: -0.02em;
        line-height: 1.15;
      }
      #pm-page .pm-stat .note {
        font-size: 13px;
        color: var(--muted);
        margin-top: 8px;
      }

      /* ---- Chart cards ---- */
      #pm-page .pm-chartbox {
        background: #fff;
        border: 1px solid var(--line);
        padding: 14px 10px 6px;
      }

      /* ---- Top-markets chart (ApexCharts) ----
         SVG typography, the dashed grid treatment and the value-label pills
         can only be applied from CSS (ApexCharts options cannot uppercase SVG
         text, dash the gridlines or draw the mockup's label pill). Scoped to
         #pm-page #chart so no other chart or page is affected. */
      #pm-page #chart {
        max-width: 100%;
      }
      #pm-page #chart svg {
        max-width: 100%;
      }
      #pm-page #chart .apexcharts-xaxis-label,
      #pm-page #chart .apexcharts-xaxis-texts-g text {
        font-family: var(--font-mono);
        /* 9px (mockup uses 9.5px): the horizontal desktop layout keeps the
           full ~14-char place name inside its ~93.5px slot, so the labels
           never need trimming. The rotated breakpoints below shrink further. */
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        fill: var(--muted);
      }
      #pm-page #chart .apexcharts-yaxis-label,
      #pm-page #chart .apexcharts-yaxis-texts-g text {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.02em;
        fill: var(--muted);
      }
      #pm-page #chart .apexcharts-datalabel,
      #pm-page #chart .apexcharts-datalabels text {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0;
        fill: var(--ink);
      }
      #pm-page #chart .pm-datalabel-pill {
        fill: #fff;
        stroke: var(--line);
        stroke-width: 1;
      }
      #pm-page #chart .apexcharts-gridline {
        stroke: var(--line);
        stroke-dasharray: 3 3;
      }
      #pm-page #chart .apexcharts-xaxis-line,
      #pm-page #chart .apexcharts-yaxis-line,
      #pm-page #chart .apexcharts-xaxis-border,
      #pm-page #chart .apexcharts-yaxis-border {
        display: none;
      }

      /* ---- Top-markets tooltip card ---- */
      #pm-page #chart .apexcharts-tooltip,
      #pm-page #chart .apexcharts-tooltip.apexcharts-theme-light {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        overflow: visible;
      }
      #pm-page #chart .pm-tip {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 2px;
        padding: 8px 10px;
        box-shadow: 0 6px 18px rgba(17, 25, 33, 0.12);
      }
      #pm-page #chart .pm-tip-name {
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--ink);
      }
      #pm-page #chart .pm-tip-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        margin-top: 4px;
      }
      #pm-page #chart .pm-tip-key {
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
      }
      #pm-page #chart .pm-tip-val {
        font-family: var(--font-mono);
        font-size: 11.5px;
        font-weight: 700;
        color: var(--ink);
      }

      /* Narrow layouts: shrink chart type so 10 columns stay readable. */
      @media (max-width: 900px) and (min-width: 701px) {
        /* Rotated (-45) category labels: a touch smaller so their bounding
           boxes clear each other at tablet widths. */
        #pm-page #chart .apexcharts-xaxis-label,
        #pm-page #chart .apexcharts-xaxis-texts-g text {
          font-size: 9px;
        }
      }
      @media (max-width: 700px) {
        #pm-page #chart .apexcharts-xaxis-label,
        #pm-page #chart .apexcharts-xaxis-texts-g text,
        #pm-page #chart .apexcharts-datalabel,
        #pm-page #chart .apexcharts-datalabels text {
          font-size: 8.5px;
          letter-spacing: 0.02em;
        }
        #pm-page #chart .apexcharts-yaxis-label,
        #pm-page #chart .apexcharts-yaxis-texts-g text {
          font-size: 9px;
        }
      }
      @media (max-width: 480px) {
        #pm-page #chart .apexcharts-xaxis-label,
        #pm-page #chart .apexcharts-xaxis-texts-g text,
        #pm-page #chart .apexcharts-datalabel,
        #pm-page #chart .apexcharts-datalabels text {
          font-size: 6.5px;
        }
      }

      /* ---- Insight panels (chart first) ---- */
      #pm-page .pm-panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }
      #pm-page .pm-panel {
        background: #fff;
        border: 1px solid var(--line);
        display: flex;
        flex-direction: column;
      }
      #pm-page .pm-panel--wide {
        grid-column: 1 / -1;
      }
      #pm-page .pm-panelhead {
        padding: 20px 22px;
        border-bottom: 1px solid var(--line);
      }
      #pm-page .pm-panelhead h3 {
        font-size: 17px;
        color: var(--ink);
        margin: 0 0 6px;
      }
      #pm-page .pm-panelhead p {
        font-size: 13px;
        color: var(--muted);
        margin: 0;
      }
      #pm-page .pm-panel .market-chart {
        padding: 10px 8px 0;
      }
      #pm-page .pm-panel .raw-data-toggle {
        margin-top: auto;
      }
      /* Property type mix panels: the mockup pairs each bar chart with a
         "Market / Share" table (.pm-tablewrap > .pm-table) inset in the card,
         separated from the chart by the same hairline the mockup gets from the
         chart's border-bottom. Overrides the table's 640px min-width so it can
         never overflow a half-width panel at tablet/desktop widths. */
      #pm-page .pm-panel .pm-panel-table {
        margin-top: auto;
        border-top: 1px solid var(--line);
      }
      #pm-page .pm-panel-table .pm-tablewrap {
        border: none;
        background: transparent;
      }
      #pm-page .pm-panel-table .pm-table {
        min-width: 0;
      }

      /* ---- Chart containers (contract classes - used by the init script) ---- */
      #pm-page .market-chart {
        width: 100%;
        min-height: 320px;
      }
      #pm-page .market-chart--map {
        /* Height is the limiting dimension for the UK map fit, so this panel is
           taller than the other charts to render a readable UK-wide view. */
        min-height: 620px;
      }
      #pm-page .market-chart--donut {
        min-height: 380px;
      }
      #pm-page .market-chart-empty {
        min-height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 24px;
        border: 1px dashed var(--line);
        background: #fafbfc;
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--muted);
      }

      /* ---- Raw data toggles ---- */
      #pm-page .raw-data-toggle {
        border-top: 1px solid var(--line);
        background: #fff;
      }
      #pm-page .raw-data-toggle summary {
        cursor: pointer;
        list-style: none;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 20px;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        transition: color 0.15s ease, background 0.15s ease;
      }
      #pm-page .raw-data-toggle summary:hover {
        color: var(--primary);
        background: #fafbfc;
      }
      #pm-page .raw-data-toggle summary::-webkit-details-marker {
        display: none;
      }
      #pm-page .raw-data-toggle summary::after {
        content: '+';
        font-size: 16px;
        line-height: 1;
        color: var(--muted);
      }
      #pm-page .raw-data-toggle[open] summary::after {
        content: '\2212';
      }
      #pm-page .raw-data-toggle .insight-list {
        padding: 4px 20px 20px;
      }
      #pm-page .insight-list {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      /* ---- Location links inside the raw-data lists ---- */
      #pm-page a.market-loc-link {
        color: inherit;
        transition: color 0.15s ease, text-decoration-color 0.15s ease;
      }
      #pm-page a.market-loc-link:hover {
        color: var(--primary);
        text-decoration-color: currentColor;
      }
      #pm-page .apexcharts-bar-area {
        cursor: pointer;
      }

      /* ---- FAQ ---- */
      #pm-page .pm-faq details {
        background: #fff;
        border: 1px solid var(--line);
        margin-bottom: 12px;
      }
      #pm-page .pm-faq summary {
        font-weight: 700;
        font-size: 15.5px;
        color: var(--ink);
        cursor: pointer;
        list-style: none;
        padding: 18px 24px;
      }
      #pm-page .pm-faq summary::-webkit-details-marker {
        display: none;
      }
      #pm-page .pm-faq summary::after {
        content: '+';
        float: right;
        color: var(--primary);
        font-size: 20px;
        line-height: 1;
      }
      #pm-page .pm-faq details[open] summary::after {
        content: '\2212';
      }
      #pm-page .pm-faq details p {
        padding: 0 24px 18px;
        color: var(--muted);
        font-size: 14.5px;
        margin: 0;
      }

      /* ---- Data table (mockup design system) ---- */
      #pm-page .pm-tablewrap {
        background: #fff;
        border: 1px solid var(--line);
        overflow-x: auto;
      }
      #pm-page .pm-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        min-width: 640px;
      }
      #pm-page .pm-table th {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        padding: 11px 16px;
        background: #fafbfc;
        border-bottom: 1px solid var(--line);
      }
      #pm-page .pm-table td {
        padding: 11px 16px;
        border-top: 1px solid var(--line);
        color: #3a4552;
      }
      #pm-page .pm-table td b {
        color: var(--ink);
      }
      #pm-page .pm-table td a:hover {
        color: var(--primary);
      }
      #pm-page .pm-up {
        color: var(--green);
        font-weight: 600;
      }
      #pm-page .pm-down {
        color: var(--primary);
        font-weight: 600;
      }

      /* ---- Responsive ---- */
      @media (max-width: 980px) {
        #pm-page .pm-statgrid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 860px) {
        #pm-page .pm-panels {
          grid-template-columns: 1fr;
        }
        #pm-page .pm-featgrid {
          grid-template-columns: 1fr 1fr;
        }
        #pm-page .pm-hero h1 {
          font-size: 27px;
        }
        #pm-page .pm-statgrid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 800px) {
        #pm-page .pm-stat .val {
          font-size: 22px;
        }
        #pm-page .pm-stat .place {
          font-size: 19px;
        }
      }
      @media (max-width: 600px) {
        #pm-page .int-container {
          padding: 0 16px;
        }
        #pm-page .pm-hero {
          padding: 38px 0 36px;
        }
        #pm-page .pm-hero h1 {
          font-size: 24px;
        }
        #pm-page .pm-analysis h2 {
          font-size: 21px;
        }
        #pm-page .pm-head h2 {
          font-size: 20px;
        }
        #pm-page .pm-statgrid {
          grid-template-columns: 1fr;
        }
        #pm-page .pm-stat {
          padding: 20px;
        }
        #pm-page .pm-offerbtn {
          display: block;
          width: 100%;
          background: var(--primary);
          border: 1px solid var(--primary);
          color: #fff;
          font-family: var(--font-sans);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          padding: 14px;
          cursor: pointer;
          border-radius: 2px;
        }
        #pm-page .pm-featgrid {
          display: none;
          grid-template-columns: 1fr;
          margin-top: 16px;
        }
        #pm-page .pm-featgrid.open {
          display: grid;
        }
        #pm-page .pm-faq summary {
          font-size: 14px;
          padding: 15px 46px 15px 16px;
          position: relative;
        }
        #pm-page .pm-faq summary::after {
          position: absolute;
          right: 16px;
          top: 14px;
          float: none;
        }
        #pm-page .pm-faq details p {
          padding: 0 16px 16px;
          font-size: 13.5px;
        }
        #pm-page .market-chart {
          min-height: 280px;
          display: none;
        }
        #pm-page .market-chart--map {
          min-height: 360px;
        }
        #pm-page .market-chart--donut {
          min-height: 340px;
        }
        #pm-page .pm-tablewrap {
          overflow-x: visible;
        }
        #pm-page .pm-table {
          min-width: 0;
        }
        #pm-page .pm-table thead {
          display: none;
        }
        #pm-page .pm-table tbody,
        #pm-page .pm-table tr,
        #pm-page .pm-table td {
          display: block;
          width: 100%;
        }
        #pm-page .pm-table tr {
          border-top: 1px solid var(--line);
          padding: 10px 0;
        }
        #pm-page .pm-table tr:first-child {
          border-top: none;
        }
        #pm-page .pm-table td {
          border-top: none;
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 14px;
          padding: 5px 16px;
          font-size: 13.5px;
        }
        #pm-page .pm-table td::before {
          content: attr(data-label);
          font-family: var(--font-mono);
          font-size: 9px;
          font-weight: 500;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: #8b95a1;
        }
        .pm-top-chart {
          display: none;
        }
      }