/* KFUPM ASCENT — Position Estimation showcase (page-scoped widget styles).
   Dark navy + yellow accent, matches the site theme. No framework. */
.pe-scope{ --pe-acc:#FECC3D; --pe-panel:#1b2238; --pe-line:rgba(255,255,255,.10); }

/* ---- interactive replay widget ---- */
.pe-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.pe-tabs button{ border:1px solid rgba(255,255,255,.18); background:transparent; color:#cfd6e6;
    border-radius:99px; padding:6px 16px; font-size:13px; cursor:pointer; transition:all .25s ease; }
.pe-tabs button:hover{ border-color:var(--pe-acc); color:#fff; }
.pe-tabs button.on{ background:var(--pe-acc); color:#1a1a1a; border-color:var(--pe-acc); font-weight:600; }
.pe-canvas{ width:100%; display:block; border-radius:10px; background:var(--pe-panel);
    border:1px solid var(--pe-line); }
.pe-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.pe-bar button{ border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff;
    border-radius:6px; padding:6px 16px; cursor:pointer; transition:all .25s ease; }
.pe-bar button:hover{ border-color:var(--pe-acc); color:var(--pe-acc); }
.pe-bar input[type=range]{ flex:1; min-width:140px; accent-color:var(--pe-acc); }
.pe-bar select{ background:var(--pe-panel); color:#fff; border:1px solid rgba(255,255,255,.2);
    border-radius:6px; padding:6px 10px; }
.pe-hud{ font-family:Consolas,Menlo,monospace; font-size:12.5px; color:#8a96b4; width:100%; }
.pe-hud b{ color:var(--pe-acc); }
.pe-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:12.5px; color:#9aa6be; }
.pe-legend span{ display:inline-flex; align-items:center; gap:7px; }
.pe-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }

/* ---- pipeline flow ---- */
.pe-pipeline{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:10px; }
.pe-stage{ flex:1 1 160px; max-width:210px; background:var(--pe-panel); border:1px solid var(--pe-line);
    border-left:3px solid var(--pe-acc); border-radius:8px; padding:14px 16px; }
.pe-stage .pe-k{ font-family:Consolas,Menlo,monospace; font-size:11.5px; color:var(--pe-acc);
    letter-spacing:.3px; word-break:break-word; }
.pe-stage h5{ margin:.35rem 0 .3rem; font-size:15px; color:#fff; }
.pe-stage p{ margin:0; font-size:12.5px; color:#9aa6be; line-height:1.45; }
.pe-arrow{ align-self:center; color:var(--pe-acc); font-size:20px; font-weight:700; line-height:1; }
@media (max-width:767.98px){
    .pe-pipeline{ flex-direction:column; align-items:center; }
    .pe-stage{ width:100%; max-width:360px; flex-basis:auto; }
    .pe-arrow{ transform:rotate(90deg); }
}

/* ---- result cards ---- */
.pe-results{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pe-result{ background:var(--pe-panel); border:1px solid var(--pe-line); border-radius:10px; padding:22px; }
.pe-result .pe-num{ font-size:30px; font-weight:700; color:var(--pe-acc); line-height:1.1; }
.pe-result h5{ margin:.5rem 0 .35rem; font-size:15px; color:#fff; }
.pe-result p{ margin:0; font-size:13px; color:#9aa6be; line-height:1.5; }
@media (max-width:991.98px){ .pe-results{ grid-template-columns:1fr; } }

/* ---- architecture chain ---- */
.pe-chain{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 10px; }
.pe-chain .pe-node{ background:rgba(255,255,255,.04); border:1px solid var(--pe-line);
    border-radius:99px; padding:7px 15px; font-size:13px; color:#e7ecf5; white-space:nowrap; }
.pe-chain .pe-node.pe-hi{ border-color:var(--pe-acc); color:var(--pe-acc); font-weight:600; }
.pe-chain .pe-sep{ color:var(--pe-acc); font-weight:700; }
@media (max-width:420px){ .pe-chain .pe-node{ white-space:normal; text-align:center; max-width:100%; } }

/* ---- figure captions ---- */
.pe-fig{ margin:0; }
.pe-fig img{ width:100%; height:auto; display:block; border-radius:10px; }
.pe-cap{ font-size:13px; color:#8a96b4; margin:10px 0 0; }