/* ============================================================================
   pd2-extras.css — detail page extras (house rules, rent check, nearby,
   interest card, "Moving in?", link directory).
   Prefix .pd2-x-  · uses the shared pd2-tokens.css variables only.
   Loaded non-blocking: every block sits below the fold.
   ========================================================================== */

.pd2-x-sec{padding:28px 0;border-top:1px solid var(--pd2-line)}
.pd2-x-h{font-size:20px;font-weight:600;line-height:1.35;margin:0 0 4px;color:var(--pd2-ink)}
.pd2-x-sub{font-size:13.5px;color:var(--pd2-ink-3);margin:0 0 16px;line-height:1.55}

/* house rules */
.pd2-x-rules{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pd2-x-rule{display:flex;gap:10px;align-items:center;border:1px solid var(--pd2-line);border-radius:var(--pd2-r-md);padding:12px}
.pd2-x-rule i{font-size:18px;flex:none}
.pd2-x-rule b{display:block;font-size:13.5px;font-weight:600;color:var(--pd2-ink)}
.pd2-x-rule small{font-size:12px}
.pd2-x-rule.is-yes i,.pd2-x-rule.is-yes small{color:var(--pd2-green)}
.pd2-x-rule.is-ask{background:var(--pd2-bg-soft)}
.pd2-x-rule.is-ask i,.pd2-x-rule.is-ask small{color:var(--pd2-ink-3)}

/* rent check */
.pd2-x-rent{border:1px solid var(--pd2-line);border-radius:var(--pd2-r-lg);padding:18px}
.pd2-x-rent-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.pd2-x-rent-top b{font-size:15px;font-weight:600;color:var(--pd2-ink)}
.pd2-x-badge{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid}
.pd2-x-badge.is-above{color:var(--pd2-amber);background:var(--pd2-amber-soft);border-color:var(--pd2-amber-line)}
.pd2-x-badge.is-below,.pd2-x-badge.is-typical{color:var(--pd2-green);background:var(--pd2-green-soft);border-color:var(--pd2-green-line)}
.pd2-x-bar{position:relative;height:10px;border-radius:6px;margin:38px 0 10px;background:linear-gradient(90deg,var(--pd2-green-soft),var(--pd2-green-line) 50%,var(--pd2-amber-soft))}
.pd2-x-med{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--pd2-green)}
.pd2-x-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--pd2-ink);transform:translate(-50%,-50%)}
.pd2-x-mk{position:absolute;top:-30px;transform:translateX(-50%);font-size:11px;font-weight:700;white-space:nowrap;background:var(--pd2-ink);color:#fff;padding:3px 7px;border-radius:6px}
.pd2-x-mk::after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-top-color:var(--pd2-ink);border-bottom:0}
.pd2-x-scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--pd2-ink-3)}
.pd2-x-scale-med{color:var(--pd2-green);font-weight:700}
.pd2-x-note{font-size:12.5px;color:var(--pd2-ink-2);margin:12px 0 0;line-height:1.5}

/* nearby */
.pd2-x-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pd2-x-chip{font-size:12.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--pd2-line);background:var(--pd2-bg-soft);color:var(--pd2-ink-2)}
.pd2-x-chip i{color:var(--pd2-ink-3)}
.pd2-x-nb{border:1px solid var(--pd2-line);border-radius:var(--pd2-r-lg);overflow:hidden}
.pd2-x-nb-tabs{display:flex;border-bottom:1px solid var(--pd2-line);background:var(--pd2-bg-soft)}
.pd2-x-nb-tabs button{flex:1;border:0;border-bottom:2px solid transparent;background:none;padding:12px 8px;font:inherit;font-size:13px;font-weight:600;color:var(--pd2-ink-3);cursor:pointer}
.pd2-x-nb-tabs button.is-on{color:var(--pd2-accent-ink);border-bottom-color:var(--pd2-accent);background:#fff}
.pd2-x-nb-list{list-style:none;margin:0;padding:4px 16px}
.pd2-x-nb-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--pd2-line);font-size:13.5px}
.pd2-x-nb-list li:last-child{border-bottom:0}
.pd2-x-nb-name{color:var(--pd2-ink);font-weight:500;min-width:0}
.pd2-x-nb-name i{color:var(--pd2-ink-3);margin-right:8px}
.pd2-x-nb-name em{font-style:normal;color:var(--pd2-ink-3);font-size:12px;margin-left:6px}
.pd2-x-nb-dist{color:var(--pd2-ink-3);font-size:12.5px;white-space:nowrap}

/* interest card (rail) */
.pd2-x-card{border:1px solid var(--pd2-line);border-radius:var(--pd2-r-lg);padding:18px;background:#fff;box-shadow:var(--pd2-shadow-sm)}
.pd2-x-card-h{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--pd2-ink)}
.pd2-x-act{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.pd2-x-act div+div{border-left:1px solid var(--pd2-line)}
.pd2-x-act b{display:block;font-size:18px;color:var(--pd2-ink)}
.pd2-x-act small{font-size:11.5px;color:var(--pd2-ink-3)}
.pd2-x-act-note{font-size:12px;color:var(--pd2-amber);background:var(--pd2-amber-soft);border-radius:8px;padding:8px 10px;margin-top:12px}

/* moving in */
.pd2-x-band{padding:30px 0;border-top:1px solid var(--pd2-line)}
.pd2-x-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.pd2-x-svc a{display:flex;gap:12px;align-items:center;border:1px solid var(--pd2-line);border-radius:var(--pd2-r-md);padding:16px;color:var(--pd2-ink);text-decoration:none;background:#fff}
.pd2-x-svc a:hover{border-color:var(--pd2-accent-line)}
.pd2-x-svc i{flex:none;width:40px;height:40px;border-radius:10px;background:var(--pd2-accent-soft);color:var(--pd2-accent);display:grid;place-items:center;font-size:18px}
.pd2-x-svc b{display:block;font-size:13.5px;font-weight:600}
.pd2-x-svc small{color:var(--pd2-ink-3);font-size:12px}

/* link directory */
.pd2-x-dir{background:var(--pd2-bg-soft);border-top:1px solid var(--pd2-line);padding:30px 0 34px}
.pd2-x-dir-g+.pd2-x-dir-g{margin-top:22px}
.pd2-x-dir-g h3,.pd2-x-dir-g h2{font-size:14px;font-weight:700;margin:0 0 10px;color:var(--pd2-ink)}
.pd2-x-dir-chips{display:flex;flex-wrap:wrap;gap:8px}
.pd2-x-dir-chips a{font-size:12.5px;line-height:1.3;color:var(--pd2-ink-2);background:#fff;border:1px solid var(--pd2-line);border-radius:6px;padding:6px 10px;text-decoration:none}
.pd2-x-dir-chips a:hover{border-color:var(--pd2-accent);color:var(--pd2-accent-ink)}
@media (max-width:1000px){
  .pd2-x-rules{grid-template-columns:repeat(2,1fr)}
  .pd2-x-svc{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .pd2-x-h{font-size:17px}
  .pd2-x-svc a{padding:12px}
  .pd2-x-dir-chips a{font-size:12px}
}