/* ============================================================
   ACM Historical Home Price Levels — Stylesheet v1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Rajdhani:wght@400;500;600;700&display=swap');

.acm-hpl-fullwidth {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    background: #07080A !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    font-family: 'Rajdhani', sans-serif;
    color: #E8E0D0;
}

/* ── Header ── */
.acm-hpl-header {
    background: linear-gradient(135deg, #6B0000 0%, #8B0000 40%, #7A0000 100%);
    border-bottom: 3px solid #C9A84C;
    padding: 28px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.acm-hpl-header::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(0,0,0,0.04) 40px,rgba(0,0,0,0.04) 80px); pointer-events:none; }
.acm-hpl-brand   { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:rgba(232,224,208,0.65); margin-bottom:8px; }
.acm-hpl-title   { font-size:30px; font-weight:700; color:#FFFFFF; letter-spacing:1px; text-transform:uppercase; line-height:1.1; margin:0; }
.acm-hpl-sub     { font-size:11px; color:rgba(232,224,208,0.55); letter-spacing:2px; text-transform:uppercase; margin-top:6px; }
.acm-hpl-byline  { border:1px solid rgba(201,168,76,0.6); padding:12px 20px; text-align:center; flex-shrink:0; }
.acm-hpl-byline-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(232,224,208,0.5); margin-bottom:4px; }
.acm-hpl-byline-name  { font-family:'Cormorant Garamond',serif; font-size:18px; color:#E8CC7A; margin-bottom:4px; }
.acm-hpl-live    { font-size:11px; letter-spacing:2px; color:#00C853; }
@media (max-width:700px) { .acm-hpl-header { flex-direction:column; gap:16px; padding:24px 20px; } .acm-hpl-title { font-size:22px; } }

/* ── Stats bar ── */
.acm-hpl-stats { display:flex; align-items:center; gap:32px; padding:14px 48px; background:#0A0B0E; border-bottom:1px solid rgba(201,168,76,0.12); flex-wrap:wrap; }
.acm-hpl-stat  { display:flex; flex-direction:column; align-items:center; }
.acm-hpl-stat-num  { font-size:28px; font-weight:700; color:#E8CC7A; line-height:1; }
.acm-hpl-stat-lbl  { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#555; margin-top:2px; }
.acm-hpl-stat-desc { font-size:12px; color:#333; margin-left:auto; }
@media (max-width:700px) { .acm-hpl-stats { padding:12px 20px; gap:16px; } .acm-hpl-stat-desc { margin-left:0; } }

/* ── Intro ── */
.acm-hpl-intro { padding:32px 48px 0; }
.acm-hpl-intro p { font-size:18px; line-height:1.9; color:#B8B0A0; margin:0 0 16px; }
@media (max-width:700px) { .acm-hpl-intro { padding:24px 20px 0; } }

/* ── Sections ── */
.acm-hpl-section { padding:40px 48px 0; }
@media (max-width:700px) { .acm-hpl-section { padding:28px 20px 0; } }
.acm-hpl-section-label { font-size:11px; letter-spacing:4px; text-transform:uppercase; color:#C9A84C; margin-bottom:10px; }
.acm-hpl-section-title { font-size:24px; font-weight:700; color:#FFFFFF; text-transform:uppercase; letter-spacing:1px; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid rgba(201,168,76,0.2); }
.acm-hpl-body { font-size:17px; line-height:1.8; color:#B8B0A0; margin:0 0 20px; }

/* ── Slider ── */
.acm-hpl-slider-wrap { margin-bottom:24px; }
.acm-hpl-slider-labels { display:flex; justify-content:space-between; font-size:12px; color:#555; letter-spacing:1px; margin-bottom:8px; }
#acm-hpl-slider-date { color:#E8CC7A; font-weight:700; font-size:14px; }

.acm-hpl-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #8B0000, #C9A84C);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.acm-hpl-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #C9A84C;
    border: 2px solid #07080A;
    box-shadow: 0 0 6px rgba(201,168,76,0.6);
    cursor: pointer;
}
.acm-hpl-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #C9A84C;
    border: 2px solid #07080A;
    cursor: pointer;
}

/* ── Rankings ── */
.acm-hpl-rankings { display:grid; grid-template-columns:1fr 1px 1fr; gap:0; background:#0E1014; border:1px solid rgba(201,168,76,0.15); }
@media (max-width:700px) { .acm-hpl-rankings { grid-template-columns:1fr; } }
.acm-hpl-rank-divider { background:rgba(201,168,76,0.15); }
.acm-hpl-rank-col     { padding:20px; }

.acm-hpl-rank-title { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:10px 0; margin-bottom:8px; border-bottom:1px solid rgba(201,168,76,0.1); }
.acm-hpl-rank-title.over  { color:#FF1744; }
.acm-hpl-rank-title.under { color:#00C853; }

.acm-hpl-rank-row   { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(201,168,76,0.05); }
.acm-hpl-rank-row:last-child { border-bottom:none; }
.acm-hpl-rank-pos   { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:300; color:rgba(201,168,76,0.3); width:28px; flex-shrink:0; line-height:1; }
.acm-hpl-rank-city  { flex:1; font-size:15px; font-weight:700; color:#E8E0D0; }
.acm-hpl-rank-data  { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.acm-hpl-rank-pct   { font-size:16px; font-weight:700; }
.acm-hpl-rank-over  .acm-hpl-rank-pct  { color:#FF1744; }
.acm-hpl-rank-under .acm-hpl-rank-pct  { color:#00C853; }
.acm-hpl-rank-zhvi  { font-size:12px; color:#555; }

.acm-hpl-month-rate { text-align:center; font-size:13px; color:#555; letter-spacing:2px; text-transform:uppercase; margin-top:16px; padding:10px; background:#0A0B0E; border:1px solid rgba(201,168,76,0.08); }
.acm-hpl-month-rate span { color:#C9A84C; font-weight:700; font-size:16px; }

/* ── City selector ── */
.acm-hpl-city-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    max-height: 160px;
    overflow-y: auto;
    background: #0A0B0E;
    border: 1px solid rgba(201,168,76,0.12);
    padding: 12px;
}
.acm-hpl-city-check { display:flex; align-items:center; gap:6px; cursor:pointer; }
.acm-hpl-city-check input { accent-color:#C9A84C; cursor:pointer; }
.acm-hpl-city-check span  { font-size:13px; color:#8A8278; white-space:nowrap; transition:color 0.15s; }
.acm-hpl-city-check:hover span,
.acm-hpl-city-check input:checked + span { color:#E8CC7A; }

/* ── Chart ── */
.acm-hpl-chart-wrap { background:#0A0B0E; border:1px solid rgba(201,168,76,0.15); padding:20px; }

/* ── Current tables ── */
.acm-hpl-current-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:900px) { .acm-hpl-current-grid { grid-template-columns:1fr; } }

.acm-hpl-table-title { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:12px 0; margin-bottom:8px; border-bottom:2px solid; }
.acm-hpl-table-title.over  { color:#FF1744; border-bottom-color:#FF1744; }
.acm-hpl-table-title.under { color:#00C853; border-bottom-color:#00C853; }

.acm-hpl-table { width:100%; border-collapse:collapse; font-family:'Rajdhani',sans-serif; }
.acm-hpl-table thead tr { background:#0E1014; border-bottom:1px solid rgba(201,168,76,0.2); }
.acm-hpl-table th { padding:10px 12px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#C9A84C; text-align:left; white-space:nowrap; }
.acm-hpl-table tbody tr { border-bottom:1px solid rgba(201,168,76,0.06); transition:background 0.15s; }
.acm-hpl-table tbody tr:hover { background:#0E1014; }
.acm-hpl-table td { padding:10px 12px; font-size:14px; }
.acm-hpl-rank-num   { color:rgba(201,168,76,0.4); font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:300; }
.acm-hpl-city-name  { font-weight:700; color:#E8E0D0; }
.acm-hpl-pct-bad    { color:#FF1744; font-weight:700; }
.acm-hpl-pct-good   { color:#00C853; font-weight:700; }
.acm-hpl-rate-bad   { color:#FF9800; }
.acm-hpl-rate-good  { color:#00C853; }

.acm-hpl-badge { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; }
.acm-hpl-under  { background:rgba(0,200,83,0.12);  color:#00C853; }
.acm-hpl-fair   { background:rgba(201,168,76,0.12); color:#C9A84C; }
.acm-hpl-over   { background:rgba(255,152,0,0.12);  color:#FF9800; }
.acm-hpl-severe { background:rgba(255,23,68,0.12);  color:#FF1744; }

/* ── Footer ── */
.acm-hpl-footer-note { padding:20px 48px 40px; font-size:12px; color:#333; line-height:1.6; border-top:1px solid rgba(201,168,76,0.08); margin-top:40px; }
@media (max-width:700px) { .acm-hpl-footer-note { padding:16px 20px 32px; } }