/* ==========================================================================
   Portfolio Moguls — Data programme
   The hub, series pages, area hub and profiles, calculators, guides,
   corridor pages. Mobile-first; min-width breakpoints only.
   ========================================================================== */

/* Page head: the same navy band Insights uses, so the family reads as one. */
.pm-pagehead {
  background: var(--pm-navy);
  color: var(--pm-on-navy);
  border-bottom: var(--pm-rule-gold);
  padding-block: 44px 40px;
}

.pm-pagehead__h1 {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

.pm-pagehead__sub {
  font-family: var(--pm-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--pm-on-navy-soft);
  margin: 14px 0 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.pm-pagehead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 18px 0 0;
  font: var(--pm-stamp-type);
  letter-spacing: var(--pm-stamp-tracking);
  text-transform: uppercase;
  color: var(--pm-on-navy-muted);
}

.pm-pagehead__meta strong { color: var(--pm-on-navy); font-weight: 600; }

/* Sections */
.pm-data { padding-block: 44px; }
.pm-data--alt { background: var(--pm-surface-alt); }
.pm-data__heading { margin: 0 0 14px; }
.pm-data__lede {
  font: var(--pm-body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 72ch;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.pm-data__note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pm-muted-cool);
  margin: 10px 0 0;
  max-width: 72ch;
}

/* Basis chip: the basis is never allowed to be missing from a figure. */
.pm-basis {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--pm-pill);
  border: 1px solid var(--pm-border);
  font: var(--pm-chip);
  letter-spacing: 0.03em;
  color: var(--pm-muted-cool);
  background: var(--pm-white);
  white-space: nowrap;
}
.pm-basis--asking, .pm-basis--asking-rent { border-color: var(--pm-gold); color: var(--pm-gold-on-light); }
.pm-basis--achieved { border-color: var(--pm-green); color: var(--pm-green); }
.pm-basis--valuation { border-color: var(--pm-navy); color: var(--pm-navy); }

/* Pending cells */
.pm-pending {
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pm-muted-cool);
  font-style: italic;
}

/* Key figure */
.pm-keyfig {
  border-top: 2px solid var(--pm-navy);
  padding-top: 16px;
  margin: 0 0 26px;
}
.pm-keyfig__value {
  font-family: var(--pm-font-ui);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pm-navy);
  margin: 6px 0 8px;
}
.pm-keyfig__value small { font-size: 0.45em; font-weight: 500; color: var(--pm-muted-cool); letter-spacing: 0; margin-left: 6px; }
.pm-keyfig__line { font-size: 14px; color: var(--pm-muted-cool); margin: 0; }
.pm-keyfig__pending { font: var(--pm-body); font-size: 17px; margin: 6px 0 0; color: var(--pm-text-soft); }

/* Tables */
.pm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 6px; }
.pm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pm-font-ui);
  font-size: 14px;
  line-height: 1.4;
  min-width: 560px;
}
.pm-table th, .pm-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--pm-border);
}
.pm-table th {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-muted-cool);
  font-weight: 700;
  border-bottom: 2px solid var(--pm-navy);
}
.pm-table td.pm-num, .pm-table th.pm-num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 14px; }
.pm-table a { color: var(--pm-link); text-decoration: underline; text-underline-offset: 2px; }
.pm-table__name { font-weight: 600; }

/* Chart */
.pm-chart { position: relative; border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); padding: 14px; background: var(--pm-white); }
.pm-chart canvas { width: 100%; height: auto; display: block; }
.pm-chart__empty { margin: 0; padding: 26px 8px; text-align: center; color: var(--pm-muted-cool); font-size: 14px; }

/* Conflict statement */
.pm-conflict {
  border-left: 3px solid var(--pm-gold);
  padding: 4px 0 4px 18px;
  max-width: 80ch;
}
.pm-conflict h2 { font-size: 15px; margin: 0 0 8px; }
.pm-conflict p { font: var(--pm-body); font-size: 15px; margin: 0; color: var(--pm-text-soft); }

/* Calendar */
.pm-calendar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pm-calendar li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--pm-border); font-family: var(--pm-font-ui); font-size: 14.5px; }
.pm-calendar time { font-variant-numeric: tabular-nums; color: var(--pm-muted-cool); white-space: nowrap; }

/* Lead forms */
.pm-lead { border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); padding: 22px; background: var(--pm-white); max-width: 720px; }
.pm-lead__heading { font-size: 20px; margin: 0 0 6px; }
.pm-lead__intro { font: var(--pm-body); font-size: 15px; color: var(--pm-muted-cool); margin: 0 0 16px; }
.pm-lead__row { display: grid; gap: 12px; }
.pm-lead__field { display: block; }
.pm-lead__label { display: block; font: var(--pm-chip); color: var(--pm-muted-cool); margin: 0 0 6px; }
.pm-lead__control { width: 100%; padding: 11px 12px; border: 1px solid var(--pm-border-crumb); border-radius: var(--pm-radius); font: 400 15px/1.3 var(--pm-font-ui); background: var(--pm-white); }
.pm-lead__control:focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 1px; }
.pm-lead__submit { justify-self: start; }
.pm-lead__msg { margin: 0; padding: 12px 14px; border-radius: var(--pm-radius); font-family: var(--pm-font-ui); font-size: 14.5px; }
.pm-lead__msg--ok { background: var(--pm-surface-green); color: var(--pm-green); }
.pm-lead__msg--err { background: #fbeeee; color: #8a2a2a; }
.pm-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Area tiles */
.pm-areagrid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.pm-areatile { display: block; border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); padding: 18px; background: var(--pm-white); color: inherit; text-decoration: none; transition: border-color 160ms; }
.pm-areatile:hover, .pm-areatile:focus-visible { border-color: var(--pm-navy); }
.pm-areatile__name { font-family: var(--pm-font-ui); font-weight: 700; font-size: 19px; margin: 0 0 10px; color: var(--pm-navy); }
.pm-areatile__fig { font-family: var(--pm-font-ui); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--pm-navy); }
.pm-areatile__lab { display: block; font-size: 12.5px; color: var(--pm-muted-cool); margin-top: 3px; }
.pm-areatile__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Area profile blocks */
.pm-block { padding-block: 30px; border-top: 1px solid var(--pm-border); }
.pm-block__num { font: var(--pm-eyebrow); letter-spacing: var(--pm-eyebrow-tracking); text-transform: uppercase; color: var(--pm-gold-on-light); margin: 0 0 6px; }
.pm-block__heading { margin: 0 0 10px; }
.pm-block__sentence { font: var(--pm-body); font-size: 17px; margin: 0 0 16px; max-width: 72ch; }
.pm-block__basis { font-size: 13px; color: var(--pm-muted-cool); margin: 10px 0 0; max-width: 72ch; }
.pm-view { border: 1px solid var(--pm-border); border-left: 4px solid var(--pm-gold); border-radius: var(--pm-radius-lg); padding: 20px 22px; background: var(--pm-surface-alt); margin-top: 18px; }
.pm-view__label { font: var(--pm-eyebrow); letter-spacing: var(--pm-eyebrow-tracking); text-transform: uppercase; margin: 0 0 8px; color: var(--pm-navy); }
.pm-view__dated { font: var(--pm-stamp-type); letter-spacing: var(--pm-stamp-tracking); text-transform: uppercase; color: var(--pm-stamp); margin: 0 0 12px; }
.pm-view__body { font: var(--pm-body); }
.pm-view__body p { margin: 0 0 12px; }
.pm-anchors { margin: 0; padding-left: 18px; font: var(--pm-body); font-size: 15px; }
.pm-ctarow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pm-cards { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 18px; }

/* Calculators */
.pm-tool { display: grid; gap: 26px; }
.pm-tool__inputs { display: grid; gap: 12px; }
.pm-tool__result { border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); padding: 20px 22px; background: var(--pm-surface-alt); }
.pm-tool__result h2 { margin: 0 0 10px; font-size: 18px; }
.pm-tool__big { font-family: var(--pm-font-ui); font-weight: 700; font-size: 34px; line-height: 1; color: var(--pm-navy); margin: 4px 0 10px; }
.pm-tool__disclaimer { font-size: 13px; color: var(--pm-muted-cool); margin: 14px 0 0; }
.pm-tool__assump { font-size: 13.5px; color: var(--pm-muted-cool); margin: 8px 0 0; }

@media (min-width: 700px) {
  .pm-pagehead__h1 { font-size: 40px; }
  .pm-data { padding-block: 56px; }
  .pm-lead__row { grid-template-columns: 1fr auto; align-items: end; }
  .pm-lead__row:has(.pm-lead__field + .pm-lead__field) { grid-template-columns: 1fr 1fr auto; }
  .pm-areagrid { grid-template-columns: repeat(2, 1fr); }
  .pm-cards { grid-template-columns: repeat(2, 1fr); }
  .pm-tool { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 1024px) {
  .pm-areagrid { grid-template-columns: repeat(3, 1fr); }
  .pm-cards { grid-template-columns: repeat(3, 1fr); }
  .pm-keyfig__value { font-size: 48px; }
}

/* Markdown prose (methodology, change log) */
.pm-mdprose h2 { font: var(--pm-h2); margin: 34px 0 12px; }
.pm-mdprose h2:first-child { margin-top: 0; }
.pm-mdprose h3 { font: var(--pm-h3); margin: 24px 0 8px; }
.pm-mdprose p { font: var(--pm-body); margin: 0 0 14px; }
.pm-mdprose ul { font: var(--pm-body); margin: 0 0 14px; padding-left: 20px; }
.pm-mdprose li { margin: 0 0 6px; }
.pm-mdprose .pm-table { min-width: 0; font-size: 14px; margin: 8px 0 18px; }
.pm-mdprose a { color: var(--pm-link); text-decoration: underline; text-underline-offset: 2px; }

/* FAQ */
.pm-faq { margin: 0; }
.pm-faq dt { font-family: var(--pm-font-ui); font-weight: 700; font-size: 17px; margin: 18px 0 6px; }
.pm-faq dd { font: var(--pm-body); margin: 0; color: var(--pm-text-soft); }

/* Valuation request form */
.pm-valform__grid { display: grid; gap: 12px; margin-bottom: 14px; }
.pm-table--compact { min-width: 0; font-size: 13.5px; }
.pm-sellinv { margin-top: 26px; }
@media (min-width: 640px) { .pm-valform__grid { grid-template-columns: 1fr 1fr; } }
.pm-tool__list { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--pm-text-soft); }
.pm-tool__list li { margin: 0 0 4px; }

/* Compare */
.pm-compare__pick { display: grid; gap: 12px; margin: 0 0 24px; }
.pm-compare__weights { display: grid; gap: 8px; margin: 0 0 8px; }
.pm-compare__w { display: grid; grid-template-columns: 1fr 140px 32px; gap: 10px; align-items: center; font-family: var(--pm-font-ui); font-size: 14px; }
.pm-compare__w output { text-align: right; font-variant-numeric: tabular-nums; color: var(--pm-muted-cool); }
.pm-compare__rank { margin-top: 22px; }
.pm-compare__list { font-family: var(--pm-font-ui); font-size: 17px; font-weight: 600; padding-left: 22px; }
.pm-compare__list small { font-weight: 400; color: var(--pm-muted-cool); }
@media (min-width: 700px) { .pm-compare__pick { grid-template-columns: repeat(3, 1fr); } .pm-compare__weights { grid-template-columns: 1fr 1fr; gap: 8px 28px; } }

/* Guides */
.pm-guide__reviewed { font: var(--pm-stamp-type); letter-spacing: var(--pm-stamp-tracking); text-transform: uppercase; color: var(--pm-stamp); margin: 0 0 18px; }
.pm-related { border: 1px solid var(--pm-border); border-left: 4px solid var(--pm-gold); border-radius: var(--pm-radius-lg); padding: 18px 20px; margin-top: 30px; background: var(--pm-surface-alt); }
.pm-related h2 { font-size: 16px; margin: 0 0 8px; }
.pm-related ul { margin: 0; padding-left: 18px; font: var(--pm-body); font-size: 15px; }
.pm-steps { font: var(--pm-body); padding-left: 22px; }
.pm-steps li { margin: 0 0 14px; }
.pm-reading { border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); padding: 18px 20px; background: var(--pm-white); }
.pm-reading .pm-block__sentence { font-size: 16px; margin: 8px 0 12px; }
.pm-homeareas .pm-areagrid { margin-top: 6px; }

/* Area page redesign (2026-09-08): tiles, glance grid, facts, collapsed data */
.pm-data--tight { padding-block: 30px; }
.pm-pagehead__meta--small { font-size: 10.5px; } /* no opacity: at 85% the muted token fell to 4.48:1 on navy */
.pm-tiles { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.pm-tile { border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); padding: 16px 18px; background: var(--pm-white); min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.pm-tile__label { font: var(--pm-chip); color: var(--pm-muted-cool); letter-spacing: 0.02em; }
.pm-tile__value { font-family: var(--pm-font-ui); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.01em; color: var(--pm-navy); }
.pm-tile__basis { font-size: 11.5px; color: var(--pm-gold-on-light); }
.pm-tile__coming { font-size: 13px; color: var(--pm-muted-cool); font-style: italic; }
.pm-tile--pending { background: var(--pm-surface-alt); border-style: dashed; }
.pm-areatile .pm-tile__coming { display: block; }
.pm-areatile__tag { font: var(--pm-body); font-size: 14px; color: var(--pm-muted-cool); margin: -4px 0 12px; }
.pm-glance { display: grid; gap: 22px 40px; grid-template-columns: 1fr; }
.pm-glance__heading { font: var(--pm-eyebrow); letter-spacing: var(--pm-eyebrow-tracking); text-transform: uppercase; color: var(--pm-gold-on-light); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--pm-border); }
.pm-glance__row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--pm-hairline); font-family: var(--pm-font-ui); font-size: 14.5px; }
.pm-glance__label { color: var(--pm-text-soft); }
.pm-glance__value { font-weight: 600; color: var(--pm-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-glance__basis { font-weight: 400; font-size: 11px; color: var(--pm-muted-cool); margin-left: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.pm-glance__coming { font-size: 12.5px; color: var(--pm-muted-cool); font-style: italic; white-space: nowrap; }
.pm-glance__row--coming .pm-glance__label { color: var(--pm-muted-cool); }
.pm-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pm-facts__chip { display: inline-block; padding: 7px 12px; border-radius: var(--pm-pill); border: 1px solid var(--pm-border); background: var(--pm-white); font-family: var(--pm-font-ui); font-size: 13.5px; color: var(--pm-text-soft); }
.pm-facts__chip strong { color: var(--pm-navy); margin-left: 4px; }
.pm-facts__chip--anchor { border-color: var(--pm-gold); color: var(--pm-navy); }
.pm-alldata { border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); background: var(--pm-white); padding: 0 18px; }
.pm-alldata__summary { cursor: pointer; padding: 14px 0; font-family: var(--pm-font-ui); font-weight: 700; font-size: 16px; color: var(--pm-navy); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pm-alldata__summary::after { content: "+"; font-weight: 400; font-size: 20px; color: var(--pm-muted-cool); }
.pm-alldata[open] .pm-alldata__summary::after { content: "−"; }
.pm-alldata__summary::-webkit-details-marker { display: none; }
.pm-alldata .pm-block { padding-block: 18px 22px; }
.pm-alldata .pm-block__sentence { font-size: 15px; }
.pm-conflict-line { font-size: 13px; color: var(--pm-muted-cool); margin: 0; max-width: 80ch; }
.pm-conflict-line a { color: var(--pm-link); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 700px) { .pm-tiles { grid-template-columns: repeat(4, 1fr); } .pm-glance { grid-template-columns: 1fr 1fr; } .pm-tile__value { font-size: 32px; } }