:root{--bg:#0b1220;--card:#ffffff;--muted:#6b7280;--text:#0f172a;--accent:#2563eb;--accent-2:#06b6d4;--ring:#93c5fd;--chip:#f1f5f9;--chip-border:#e2e8f0;--shadow:0 8px 30px rgba(2,6,23,.08);--radius:16px}
@media (prefers-color-scheme: dark){:root{--card:#0b1220;--text:#e5e7eb;--muted:#9ca3af;--chip:#111827;--chip-border:#1f2937;--shadow:0 12px 40px rgba(0,0,0,.35)}}
.nmpp{max-width:1100px;margin:0 auto;padding:24px 18px 32px;background:linear-gradient(180deg, rgba(37,99,235,.06), rgba(6,182,212,.05)) 0 0/100% 260px no-repeat}
.nmpp-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px}
.nmpp-title{margin:0;font-size:28px;line-height:1.15;letter-spacing:.2px;font-weight:800;background:linear-gradient(90deg, var(--accent), var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nmpp-sub{font-size:13px;color:var(--muted);margin-top:6px}
.nmpp-controls{display:grid;grid-template-columns:1.1fr 1.1fr .8fr;gap:14px;margin:16px 0 6px}
.nmpp-field label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 6px}
.nmpp-field select{width:100%;padding:12px 14px;border:1px solid var(--chip-border);border-radius:14px;background:var(--card);color:var(--text);box-shadow:var(--shadow);outline:none;transition:border .15s, box-shadow .15s, transform .05s}
.nmpp-field select:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(147,197,253,.35)}
.nmpp-field select:hover{transform:translateY(-1px)}
.nmpp-chips{display:flex;gap:10px;flex-wrap:wrap;margin:10px 2px 6px}
.chip{border:1px solid var(--chip-border);border-radius:999px;padding:8px 14px;background:var(--chip);font-weight:700;font-size:13px;color:var(--text);cursor:pointer;transition:all .15s}
.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.chip.active{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent;box-shadow:0 8px 24px rgba(37,99,235,.35)}
.nmpp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 18px}
.nmpp-card{background:var(--card);border:1px solid var(--chip-border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.nmpp-card::after{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:calc(var(--radius) + 1px);background:linear-gradient(120deg, rgba(37,99,235,.10), rgba(6,182,212,.06));opacity:.4;mix-blend:overlay}
.kpi-label{font-size:12px;color:var(--muted);letter-spacing:.2px;margin-bottom:6px}
.kpi-value{font-size:30px;font-weight:900;color:var(--text)}
.kpi-chip{font-weight:800;color:var(--text)}
.green{color:#10b981}.red{color:#ef4444}
#nmpp-chart{background:var(--card);border:1px solid var(--chip-border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.nmpp-overview{margin-top:18px}
.nmpp-overview h3{margin:0 0 8px;color:var(--text);font-size:18px;font-weight:800;letter-spacing:.2px}
.nmpp-overview p{background:var(--card);border:1px solid var(--chip-border);border-radius:14px;padding:14px;box-shadow:var(--shadow);color:var(--text);line-height:1.55}
.nmpp-infra{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.nmpp-infra span{background:var(--chip);border:1px solid var(--chip-border);border-radius:999px;padding:8px 12px;font-size:13px;color:var(--text)}
.nmpp-footer{display:flex;gap:10px;margin-top:16px}
.btn{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;padding:10px 14px;border-radius:12px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 10px 24px rgba(37,99,235,.35);font-weight:800;letter-spacing:.2px;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--card);color:var(--text);border:1px solid var(--chip-border);box-shadow:var(--shadow);font-weight:700}
@media (max-width:960px){.nmpp-controls{grid-template-columns:1fr 1fr}.nmpp-kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.nmpp-controls{grid-template-columns:1fr}.nmpp-title{font-size:24px}.kpi-value{font-size:26px}}

/* extras: flats block under median + advisory paragraph */
.nmpp-flats { margin-top: 6px; }
.nmpp-flats .flat-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:6px; }
@media (max-width:680px){ .nmpp-flats .flat-grid { grid-template-columns: 1fr; } }
.nmpp-flats .flat-item { background: rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06); border-radius:10px; padding:6px 8px; display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.nmpp-flats .note { font-size:12px; opacity:.7; margin-top:4px; }

.nmpp-advisory { margin: 10px 0; padding: 10px 12px; background: rgba(0,0,0,.03); border: 1px dashed rgba(0,0,0,.12); border-radius: 10px; }
.nmpp-advisory p { margin:0; line-height:1.5; }

.kpi-chip.green { color:#128a27; }
.kpi-chip.red { color:#b31919; }


/* Desktop spacing fixes for flat tiles */
.nmpp-flats .flat-item span { display:inline-block; min-width:110px; }
.nmpp-flats .flat-item b { font-weight:700; }
@media (min-width: 1024px){
  .nmpp-flats .flat-grid { grid-template-columns: repeat(3, minmax(0, 240px)); }
}


/* --- Flats list as single rows with dash --- */
.nmpp-flats .flat-grid{ display:block !important; } /* legacy no-op */
.nmpp-flats .flat-list{ display:flex; flex-direction:column; gap:6px; }
.nmpp-flats .flat-row{ 
  display:flex; align-items:center; gap:8px; 
  padding:8px 10px; border:1px solid rgba(0,0,0,.08); border-radius:10px; 
  background: rgba(0,0,0,.03);
  white-space:nowrap;
}
.nmpp-flats .flat-row .label{ font-size:14px; }
.nmpp-flats .flat-row .dash{ opacity:.6; }
.nmpp-flats .flat-row .price{ margin-left:auto; font-size:14px; }
.nmpp-flats .flat-row .price b{ font-weight:700; }
@media (max-width:680px){
  .nmpp-flats .flat-row{ padding:8px 10px; }
}


/* v4: keep single-line rows within container */
.nmpp-flats .flat-row{ max-width:100%; box-sizing:border-box; }
.nmpp-flats .flat-row .label{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.nmpp-flats .flat-row .dash{ flex:0 0 auto; }
.nmpp-flats .flat-row .price{ flex:0 0 auto; }
@media (max-width: 420px){
  .nmpp-flats .flat-row{ font-size:13px; padding:6px 8px; }
  .nmpp-flats .flat-row .price b{ font-weight:700; }
}

/* v4.1: Make only the "Growth rate" KPI (2nd card) horizontally scrollable on small screens */
@media (max-width: 680px){
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value{
    display: inline-flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; /* keeps scrollbar off the text a bit */
  }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value > *{
    flex: 0 0 auto;
  }
  /* Slim horizontal scrollbar for this row only */
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::-webkit-scrollbar{ height: 6px; }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::-webkit-scrollbar-track{ background: transparent; }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 999px; }
}

/* v4.2 fixes */
/* Expand Median PSF container so BHK lines show full text */
.nmpp-flats .flat-row .label{
  flex: unset !important;
  overflow: visible !important;
  text-overflow: initial !important;
  white-space: normal !important;
}

/* Growth rate card scrollable if long */
@media (max-width: 680px){
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value{
    display: inline-flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
    opacity: 0.95; /* subtle hint it's scrollable */
  }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value > *{
    flex: 0 0 auto;
  }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::-webkit-scrollbar{ height: 6px; }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.3); border-radius: 999px; }
}

/* v4.2: Mobile improvements */
/* A) Widen Median PSF card on small screens */
@media (max-width: 680px){
  .nmpp-kpis .nmpp-card:first-child{
    grid-column: span 2;
  }
  /* B) Let BHK labels show fully instead of ellipsis */
  .nmpp-flats .flat-row .label{
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
  }
}

/* C) Growth rate: horizontal scrolling with subtle fade hint (mobile only) */
@media (max-width: 680px){
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value{
    position: relative;
    display: inline-flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value > *{
    flex: 0 0 auto;
  }
  /* slim scrollbar */
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::-webkit-scrollbar{ height:6px; }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::-webkit-scrollbar-track{ background: transparent; }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius:999px; }
  /* right fade hint */
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.12));
  }
}

/* v5: Growth badge styling */
.growth-badge{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#fff;
}
.growth-badge.slow{ background:#f59e0b; }    /* amber */
.growth-badge.decent{ background:#0ea5e9; }  /* sky blue */
.growth-badge.fast{ background:#10b981; }    /* green */

/* Stretch growth card after removing confidence+observations */
@media (min-width:681px){
  .nmpp-kpis{ grid-template-columns:1fr 1fr; }
  .nmpp-kpis .nmpp-card:first-child{ grid-column:1; }
  .nmpp-kpis .nmpp-card:nth-child(2){ grid-column:2; }
}
@media (max-width:680px){
  .nmpp-kpis{ grid-template-columns:1fr; }
  .nmpp-kpis .nmpp-card{ grid-column:1 !important; }
}


/* v4.3: Remove confidence/observations and stretch Growth */
/* Two-card layout: both KPI cards (Median PSF and Growth rate) span 2 columns on desktop (4-col grid => half width each) */
.nmpp-kpis .nmpp-card:first-child{ grid-column: span 2; }
.nmpp-kpis .nmpp-card:nth-child(2){ grid-column: span 2; }

/* Mobile: both already span full width via previous rule for first child; ensure growth matches */
@media (max-width: 680px){
  .nmpp-kpis .nmpp-card:nth-child(2){ grid-column: span 2; }
}

/* Growth scroll remains available if text overflows */
@media (max-width: 680px){
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value{
    position: relative;
    display: inline-flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .nmpp-kpis .nmpp-card:nth-child(2) .kpi-value::after{
    content: "";
    position: absolute; top:0; right:0; bottom:0; width:28px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.12));
    pointer-events:none;
  }
}

/* Growth badge pill */
.growth-badge{
  display:inline-block;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid transparent;
}
.growth-badge.slow{ background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.35); color: #92400e; }
.growth-badge.decent{ background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.35); color: #1e3a8a; }
.growth-badge.fast{ background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.35); color: #065f46; }


/* Hide price chart on mobile */
@media (max-width: 768px){
  #nmpp-chart{ display:none !important; height:0 !important; }
}