/* Foreclosure By State extras: term popups + 3D road map. Uses the site's own colour tokens. */

/* ---------- click-to-define terms ---------- */
.fbsTerm{all:unset;box-sizing:border-box;cursor:help;color:inherit;font:inherit;
  border-bottom:1.5px dotted var(--amber,#F0B429);padding-bottom:0;transition:background .15s,color .15s}
.fbsTerm:hover,.fbsTerm[aria-expanded="true"]{background:var(--amber-dim,rgba(240,180,41,.13));border-bottom-style:solid}
.fbsTerm:focus-visible{outline:2px solid var(--amber,#F0B429);outline-offset:2px;border-radius:3px}
.fbsPop{position:fixed;z-index:9999;width:380px;max-width:calc(100vw - 24px);box-sizing:border-box;
  background:var(--bg-2,#1F2B48);color:var(--ink,#F4F2ED);border:1px solid var(--amber,#F0B429);
  border-radius:14px;padding:16px 18px 15px;box-shadow:0 18px 50px rgba(0,0,0,.45);outline:none;
  animation:fbsPopIn .18s ease-out}
.fbsPop[hidden]{display:none}
.fbsPop.sheet{left:12px !important;right:12px;bottom:12px;top:auto !important;width:auto !important;max-width:none;
  max-height:70vh;overflow:auto;border-radius:16px}
.fbsPopK{margin:0 0 4px;font:10px/1.2 "JetBrains Mono",monospace;letter-spacing:.19em;text-transform:uppercase;color:var(--amber,#F0B429)}
.fbsPop h4{margin:0 0 6px;font-size:18px;line-height:1.25;font-weight:600;padding-right:28px;color:var(--ink,#F4F2ED)}
.fbsPopD{margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--ink,#F4F2ED)}
.fbsPopY{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink-2,#BAC2D1)}
.fbsPopY::before{content:"For you: ";color:var(--amber-2,#FFD569);font-weight:600}
.fbsPopA{font-size:14px;color:var(--amber-2,#FFD569);text-decoration:underline;text-underline-offset:3px}
.fbsPopX{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;
  color:var(--ink-2,#BAC2D1);font-size:22px;line-height:1;cursor:pointer}
.fbsPopX:hover,.fbsPopX:focus-visible{background:var(--surface-2,rgba(255,255,255,.08));color:var(--ink,#F4F2ED)}
:root[data-theme="light"] .fbsPop{background:#fff;box-shadow:0 18px 50px rgba(10,12,16,.22)}
:root[data-theme="light"] .fbsPopK,:root[data-theme="light"] .fbsPopA,:root[data-theme="light"] .fbsPopY::before{color:var(--amber,#9A6B00)}
@keyframes fbsPopIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- 3D road map ---------- */
.rm3{--rmTilt:42deg;--rmRoad:#0B1224;--rmEdge:rgba(255,255,255,.22);--rmGrid:rgba(255,255,255,.055);
  margin:46px 0 14px;position:relative}
:root[data-theme="light"] .rm3{--rmRoad:#3A4150;--rmEdge:rgba(10,12,16,.3);--rmGrid:rgba(10,12,16,.07)}
.rmHead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 18px}
.rmEyebrow{font:10px/1.2 "JetBrains Mono",monospace;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3,#8F99AD)}
.rmTot{font:12px/1.2 "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--ink-3,#8F99AD)}
.rm3 h2{margin:8px 0 6px;font-size:clamp(22px,3.4vw,32px);line-height:1.18;font-weight:600;color:var(--ink,#F4F2ED)}
.rmLede{margin:0 0 4px;color:var(--ink-2,#BAC2D1);font-size:15.5px;line-height:1.6;max-width:62ch}
.rmChips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
.rmChip{border:1px solid var(--edge-2,rgba(255,255,255,.15));border-radius:999px;padding:6px 13px;font-size:13px;color:var(--ink-2,#BAC2D1);
  background:var(--surface,rgba(255,255,255,.05))}
.rmChip b{color:var(--ink,#F4F2ED);font-weight:600}
.rmNext{margin:14px 0 0;padding:12px 15px;border:1px solid rgba(255,107,90,.4);border-left:4px solid var(--red,#FF6B5A);
  border-radius:10px;background:var(--red-dim,rgba(255,107,90,.12));font-size:15px;color:var(--ink,#F4F2ED)}
.rmNext b{color:var(--red,#FF6B5A)}

.rmStage{position:relative;margin:10px 0 0;overflow-x:clip;overflow-y:visible;padding-top:6px}
.rmScene{position:relative;margin:0 auto;perspective-origin:50% 0}
.rmPlane{position:relative;margin:0 auto;transform-style:preserve-3d;transform-origin:50% 100%;
  transform:rotateX(var(--rmTilt)) rotateY(var(--rmYaw,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rmFloor{position:absolute;inset:-30px -10px -10px;border-radius:26px;
  background:
    radial-gradient(120% 70% at 50% 100%,var(--amber-dim,rgba(240,180,41,.13)),transparent 70%),
    repeating-linear-gradient(0deg,var(--rmGrid) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,var(--rmGrid) 0 1px,transparent 1px 46px);
  border:1px solid var(--edge,rgba(255,255,255,.12));pointer-events:none}
.rmRoad{position:absolute;inset:0;overflow:visible;pointer-events:none}
.rmRoad .edge{fill:none;stroke:var(--rmEdge);stroke-width:50;stroke-linecap:round;stroke-linejoin:round}
.rmRoad .tar{fill:none;stroke:var(--rmRoad);stroke-width:42;stroke-linecap:round;stroke-linejoin:round}
.rmRoad .dash{fill:none;stroke:var(--amber,#F0B429);stroke-width:3;stroke-linecap:butt;stroke-dasharray:14 16;
  animation:rmFlow 1.6s linear infinite;opacity:.85}
.rmRoad .doneLine{fill:none;stroke:var(--green,#5CD6A0);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.0}
@keyframes rmFlow{to{stroke-dashoffset:-60}}

.rmStop{position:absolute;width:0;height:0;transform-style:preserve-3d}
.rmCard{position:absolute;left:0;bottom:6px;width:var(--cw,150px);box-sizing:border-box;margin-left:calc(var(--cw,150px) / -2);
  transform-origin:50% 100%;transform:rotateX(calc(var(--rmTilt) * -1)) translateZ(0);
  text-align:left;font:inherit;color:inherit;cursor:pointer;overflow:visible;
  background:var(--bg-2,#1F2B48);border:1px solid var(--edge-2,rgba(255,255,255,.15));border-radius:12px;padding:8px 10px 9px;
  transition:transform .45s cubic-bezier(.2,.9,.25,1.25),opacity .3s,box-shadow .3s,border-color .3s}
.rmCard:focus-visible{outline:2px solid var(--amber,#F0B429);outline-offset:3px}
.rmCard::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);
  background:inherit;border-right:1px solid var(--edge-2,rgba(255,255,255,.15));border-bottom:1px solid var(--edge-2,rgba(255,255,255,.15))}
.rmTop{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.rmIco{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2,#BAC2D1);
  border:1px solid var(--edge-2,rgba(255,255,255,.15));background:var(--bg,#18233D)}
.rmIco svg{width:19px;height:19px}
.rmDay{font:600 11.5px/1 "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--ink-2,#BAC2D1)}
.rmTtl{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.28;font-weight:500;color:var(--ink,#F4F2ED)}
.rmDt{margin-top:4px;font:10.5px/1.2 "JetBrains Mono",monospace;color:var(--ink-3,#8F99AD)}
.rmStop[data-k="critical"] .rmCard{border-color:rgba(255,107,90,.55)}
.rmStop[data-k="critical"] .rmIco{color:var(--red,#FF6B5A);border-color:rgba(255,107,90,.5)}
.rmStop[data-k="critical"] .rmDay{color:var(--red,#FF6B5A)}
.rmStop[data-k="relief"] .rmCard{border-color:rgba(92,214,160,.55)}
.rmStop[data-k="relief"] .rmIco{color:var(--green,#5CD6A0);border-color:rgba(92,214,160,.5)}
.rmStop[data-k="relief"] .rmDay{color:var(--green,#5CD6A0)}
.rmStop[data-k="past"] .rmCard{opacity:.55}
.rmStop.worst .rmCard{box-shadow:0 0 0 2px var(--red,#FF6B5A),0 0 26px rgba(255,107,90,.5);animation:rmPulse 2s ease-in-out infinite}
.rmStop.here .rmCard{box-shadow:0 0 0 2px var(--amber,#F0B429),0 0 24px var(--amber-dim,rgba(240,180,41,.4))}
.rmFlag{position:absolute;top:-11px;left:10px;padding:2px 8px;border-radius:999px;background:var(--amber,#F0B429);color:#1A1405;
  font:600 10px/1.5 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.rmDot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--amber,#F0B429);
  border:2px solid var(--bg,#18233D);transition:transform .3s}
.rmStop[data-k="critical"] .rmDot{background:var(--red,#FF6B5A)}
.rmStop[data-k="relief"] .rmDot{background:var(--green,#5CD6A0)}
.rm3.play .rmStop:not(.on) .rmCard{opacity:0;transform:rotateX(calc(var(--rmTilt) * -1)) translateY(26px) scale(.82)}
.rm3.play .rmStop:not(.on) .rmDot{transform:scale(.4)}
.rmStop.on .rmCard{transform:rotateX(calc(var(--rmTilt) * -1)) translateZ(0) scale(1)}
.rmStop.cur .rmCard{transform:rotateX(calc(var(--rmTilt) * -1)) translateY(-10px) scale(1.07);z-index:5;
  border-color:var(--amber,#F0B429);box-shadow:0 14px 28px rgba(0,0,0,.4)}
.rmStop.cur{z-index:5}
@keyframes rmPulse{0%,100%{box-shadow:0 0 0 2px var(--red,#FF6B5A),0 0 14px rgba(255,107,90,.35)}50%{box-shadow:0 0 0 2px var(--red,#FF6B5A),0 0 34px rgba(255,107,90,.7)}}

.rmCar{position:absolute;width:0;height:0;transform-style:preserve-3d;z-index:6;pointer-events:none}
.rmShadow{position:absolute;left:-17px;top:-8px;width:34px;height:16px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(3px)}
.rmPin{position:absolute;left:-15px;bottom:3px;width:30px;height:30px;transform-origin:50% 100%;
  transform:rotateX(calc(var(--rmTilt) * -1));display:grid;place-items:center}
.rmPin i{display:block;width:26px;height:26px;border-radius:50%;background:var(--amber,#F0B429);border:3px solid #fff;
  box-shadow:0 0 0 5px var(--amber-dim,rgba(240,180,41,.35)),0 4px 10px rgba(0,0,0,.4);animation:rmBob 1.1s ease-in-out infinite}
@keyframes rmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.rmDetail{margin:16px 0 0;padding:15px 17px;border:1px solid var(--edge-2,rgba(255,255,255,.15));border-radius:14px;
  background:var(--surface,rgba(255,255,255,.05));min-height:92px}
.rmDetail .k{font:10px/1.2 "JetBrains Mono",monospace;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3,#8F99AD)}
.rmDetail[data-k="critical"] .k{color:var(--red,#FF6B5A)}
.rmDetail[data-k="relief"] .k{color:var(--green,#5CD6A0)}
.rmDetail h3{margin:6px 0 2px;font-size:19px;line-height:1.25;color:var(--ink,#F4F2ED)}
.rmDetail .d{margin:0 0 8px;font:12.5px/1.4 "JetBrains Mono",monospace;color:var(--ink-3,#8F99AD)}
.rmDetail p.t{margin:0 0 9px;font-size:15px;line-height:1.55;color:var(--ink-2,#BAC2D1)}
.rmDetail button{font:inherit;font-size:14px;color:var(--amber-2,#FFD569);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.rmCtl{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.rmBtn{font:inherit;font-size:14px;padding:9px 15px;border-radius:999px;cursor:pointer;color:var(--ink,#F4F2ED);
  background:var(--surface,rgba(255,255,255,.05));border:1px solid var(--edge-2,rgba(255,255,255,.15))}
.rmBtn:hover,.rmBtn:focus-visible{border-color:var(--amber,#F0B429);background:var(--amber-dim,rgba(240,180,41,.13))}
.rmKey{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;font-size:12.5px;color:var(--ink-3,#8F99AD)}
.rmKey i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.rmFlash{animation:rmFlash 1.6s ease-out}
@keyframes rmFlash{0%{box-shadow:0 0 0 3px var(--amber,#F0B429)}100%{box-shadow:0 0 0 3px transparent}}
.rm3.still .rmRoad .dash,.rm3.still .rmPin i,.rm3.still .rmStop.worst .rmCard{animation:none}
.rm3.still .rmPlane,.rm3.still .rmCard{transition:none}
@media (prefers-reduced-motion:reduce){
  .rmRoad .dash,.rmPin i,.rmStop.worst .rmCard,.fbsPop{animation:none !important}
  .rmPlane,.rmCard{transition:none !important}
}
@media (max-width:519px){
  .rmDetail{position:sticky;bottom:10px;z-index:30;min-height:0;margin-top:12px;padding:12px 14px;background:var(--bg-2,#1F2B48);
    border-color:var(--amber,#F0B429);box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .rmDetail h3{font-size:17px}
  .rmDetail p.t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;margin-bottom:6px}
}
@media (max-width:480px){
  .rmCard{padding:7px 8px 8px}.rmTtl{font-size:12.5px}.rmIco{width:23px;height:23px}.rmIco svg{width:16px;height:16px}
}
@media print{.rm3 .rmCtl{display:none}}

/* ---------- two roads (judicial vs non-judicial guide) ---------- */
.tw{margin:26px auto 8px;perspective:1300px;max-width:800px}
.twLanes{display:grid;grid-template-columns:1fr 1fr;gap:20px;transform-style:preserve-3d}
.twLane{position:relative;padding:18px 18px 14px;border:1px solid var(--edge-2,rgba(255,255,255,.15));border-radius:16px;
  background:var(--surface,rgba(255,255,255,.05));transform:rotateY(7deg);transform-origin:100% 50%;transition:transform .6s,border-color .4s,box-shadow .4s}
.twLane[data-lane="court"]{transform:rotateY(-7deg);transform-origin:0 50%}
.tw:hover .twLane,.tw:focus-within .twLane{transform:none}
.twLane.done{border-color:var(--amber,#F0B429);box-shadow:0 12px 34px rgba(0,0,0,.28)}
.twLane h3{margin:0 0 3px;font-size:21px;line-height:1.2;color:var(--ink,#F4F2ED);font-family:"Fraunces",Georgia,serif;font-weight:500}
.twSub{margin:0 0 12px !important;font-size:14px !important;line-height:1.5 !important;color:var(--ink-3,#8F99AD) !important}
.twLane ol{position:relative;margin:0;padding:0 0 0 34px;list-style:none;--dy:17px;--ph:0px}
.twLane ol::before{content:"";position:absolute;left:11px;top:16px;bottom:18px;width:3px;border-radius:2px;background:var(--edge-2,rgba(255,255,255,.15))}
.twLane ol::after{content:"";position:absolute;left:11px;top:16px;width:3px;height:var(--ph);border-radius:2px;
  background:linear-gradient(var(--amber,#F0B429),var(--red,#FF6B5A));transition:height .6s cubic-bezier(.3,.7,.2,1)}
.tw:not(.twJs) .twLane ol::after{height:calc(100% - 34px)}
.twLane li{position:relative;padding:6px 0 11px;font-size:14.5px;line-height:1.45;color:var(--ink-3,#8F99AD);transition:color .4s}
.twLane li::before{content:"";position:absolute;left:-30px;top:10px;width:13px;height:13px;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--edge-2,rgba(255,255,255,.2));background:var(--bg-2,#1F2B48);transition:all .4s;z-index:1}
.tw:not(.twJs) .twLane li,.twLane li.lit{color:var(--ink,#F4F2ED)}
.tw:not(.twJs) .twLane li::before,.twLane li.lit::before{background:var(--amber,#F0B429);border-color:var(--amber,#F0B429)}
.tw:not(.twJs) .twLane li.sale::before,.twLane li.sale.lit::before{background:var(--red,#FF6B5A);border-color:var(--red,#FF6B5A);box-shadow:0 0 0 5px rgba(255,107,90,.22)}
.twLane li.sale.lit span,.tw:not(.twJs) .twLane li.sale span{color:var(--red,#FF6B5A);font-weight:600}
.twDot{position:absolute;left:5px;top:var(--dy);width:15px;height:15px;margin-top:-7px;border-radius:50%;background:#fff;z-index:2;
  box-shadow:0 0 0 4px var(--amber-dim,rgba(240,180,41,.4)),0 3px 8px rgba(0,0,0,.4);transition:top .6s cubic-bezier(.3,.7,.2,1)}
.tw:not(.twJs) .twDot{display:none}
.twTotal{margin:6px 0 0 !important;padding-top:10px;border-top:1px dashed var(--edge-2,rgba(255,255,255,.15));font-size:14px !important;color:var(--ink-3,#8F99AD) !important;opacity:.55;transition:opacity .4s,color .4s}
.twLane.done .twTotal,.tw:not(.twJs) .twTotal{opacity:1;color:var(--ink,#F4F2ED) !important}
.twLane .twTotal b{color:var(--amber-2,#FFD569);font-size:17px}
.twCtl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 0}
.twNote{font-size:13px;color:var(--ink-3,#8F99AD)}
.twGroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:14px auto 6px;max-width:800px}
.twGroups>div{padding:16px 18px;border:1px solid var(--edge,rgba(255,255,255,.12));border-radius:14px;background:var(--surface,rgba(255,255,255,.05))}
.twGroups h3{margin:0 0 8px;font-size:17px;color:var(--ink,#F4F2ED);font-family:"Fraunces",Georgia,serif;font-weight:500}
.twGroups p{margin:0;font-size:14.5px;line-height:2;color:var(--ink-2,#BAC2D1)}
.twGroups a{color:var(--amber-2,#FFD569);text-decoration:none;white-space:nowrap;margin-right:6px}
.twGroups a:hover{text-decoration:underline}
:root[data-theme="light"] .twGroups a{color:var(--amber,#9A6B00)}
@media (max-width:700px){
  .twLanes{grid-template-columns:1fr}
  .twLane,.twLane[data-lane="court"]{transform:none}
}
@media (prefers-reduced-motion:reduce){.twLane,.twLane ol::after,.twDot,.twLane li,.twLane li::before{transition:none !important}}
/* ---- last verified + report a correction (2026-10-18) ---- */
.fbsVerify{margin:44px 0 0;padding:20px 22px;border:1px solid var(--edge,rgba(255,255,255,.12));border-radius:14px;
  background:var(--surface,rgba(255,255,255,.03));font-size:14.5px;line-height:1.6;color:var(--ink-2,#c9cbd3)}
.fbsVerify .vLine{margin:0}
.fbsVerify .vLine b{color:var(--ink,#fff);font-weight:600}
.fbsVerify details{margin-top:10px}
.fbsVerify summary{cursor:pointer;color:var(--amber,#F0B429);font-weight:600;display:inline-block}
.fbsCx{display:grid;gap:10px;margin-top:12px;max-width:640px}
.fbsCx label{font-size:13px;color:var(--ink-3,#9aa0ad)}
.fbsCx textarea,.fbsCx input[type=email]{width:100%;box-sizing:border-box;background:var(--bg-2,#0f1730);color:var(--ink,#fff);
  border:1px solid var(--edge-2,rgba(255,255,255,.18));border-radius:10px;padding:11px 13px;font:inherit;font-size:15px}
.fbsCx textarea{min-height:110px;resize:vertical}
.fbsCx button{justify-self:start;background:var(--amber,#F0B429);color:#0A0A0A;border:0;border-radius:10px;padding:11px 20px;
  font:inherit;font-weight:600;cursor:pointer}
.fbsCx button:disabled{opacity:.6;cursor:default}
.fbsCx .hpf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fbsCx .cxMsg{margin:0;font-size:14px}
.fbsCx .cxMsg.ok{color:var(--green,#5CD6A0)}
.fbsCx .cxMsg.bad{color:var(--red,#FF6B5A)}
