/* ══ PORTFOLIO X-RAY — shell styling ═════════════════════════════════════ */
:root{
  --xrbg:#fbfaf8;--xrcard:#fff;--xrline:#e8e4dd;--xrline2:#d8d2c8;
  --xrink:#1c1a17;--xrink2:#4a453d;--xrink3:#7a736a;--xrink4:#a29a8f;
  --xrpos:#1a6b3a;--xrneg:#b23a3a;--xrwarn:#a8760b;--xrblue:#1a4b8b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--xrbg);color:var(--xrink);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}

/* topbar */
.topbar{display:flex;align-items:center;gap:16px;padding:14px 26px;background:var(--xrink);color:#fff;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:11px;height:11px;border-radius:2px;background:#c8792e;display:inline-block}
.wordmark{font:600 15px/1 'DM Sans',sans-serif;letter-spacing:.2px}
.wordmark em{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400}
.topmeta{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;color:#bbb5ac;flex-wrap:wrap}
.topmeta .xr-btn{background:transparent;color:#e8e4dd;border-color:#4a453d;padding:6px 11px;font-size:11px}
.topmeta .xr-btn:hover{background:#2a2723;color:#fff;border-color:#6a6055}

/* stepper */
.stepwrap{background:#fff;border-bottom:1px solid var(--xrline);padding:12px 26px;overflow-x:auto}
.stepper{display:flex;align-items:center;gap:0;max-width:1220px;margin:0 auto;min-width:640px}
.step{display:flex;align-items:center;gap:7px;white-space:nowrap}
.step i{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font:600 10px/1 inherit;font-style:normal;border:1px solid var(--xrline2);color:var(--xrink4);background:#fff}
.step span{font:600 11px/1 inherit;color:var(--xrink4)}
.step.now i{background:var(--xrink);border-color:var(--xrink);color:#fff}
.step.now span{color:var(--xrink)}
.step.done i{background:var(--xrpos);border-color:var(--xrpos);color:#fff}
.step.done span{color:var(--xrink2)}
.stepline{flex:1;height:1px;background:var(--xrline2);margin:0 10px;min-width:18px}

/* toast */
.toast{position:fixed;left:50%;bottom:-90px;transform:translateX(-50%);z-index:9999;max-width:min(720px,92vw);
  background:var(--xrink);color:#fff;padding:12px 18px;border-radius:10px;font-size:12.5px;line-height:1.5;
  box-shadow:0 10px 34px rgba(0,0,0,.24);transition:bottom .25s ease;pointer-events:none}
.toast.show{bottom:24px}
.toast.success{background:#12492a}
.toast.warn{background:#7a3b12}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 600px at 50% -10%,#232019 0%,#131211 55%,#0d0c0b 100%)}
.login-card{width:100%;max-width:404px;background:#fff;border-radius:16px;padding:36px 34px;
  box-shadow:0 24px 70px rgba(0,0,0,.4)}
.login-card h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:27px;margin:0 0 4px}
.login-card .sub{font-size:12.5px;color:var(--xrink3);margin-bottom:24px;line-height:1.6}
.login-card label{display:block;font:600 10px/1 inherit;letter-spacing:.14em;text-transform:uppercase;
  color:var(--xrink4);margin:0 0 6px}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--xrline2);border-radius:9px;
  font:400 13.5px inherit;outline:none;margin-bottom:16px;background:#fff;color:var(--xrink)}
.login-card input:focus{border-color:var(--xrink);box-shadow:0 0 0 3px rgba(28,26,23,.07)}
.login-card button{width:100%;padding:12px;background:var(--xrink);color:#fff;border:none;border-radius:9px;
  font:600 13px inherit;cursor:pointer;transition:.15s}
.login-card button:hover:not(:disabled){background:#000}
.login-card button:disabled{opacity:.5;cursor:not-allowed}
.login-err{background:rgba(178,58,58,.08);border:1px solid rgba(178,58,58,.3);color:#8f2f2f;
  padding:10px 12px;border-radius:8px;font-size:12px;margin-bottom:16px;line-height:1.5}
.login-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--xrline);
  font-size:11px;color:var(--xrink4);line-height:1.65}
.login-mark{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.login-mark .mark{width:13px;height:13px}
.login-mark .wordmark{color:var(--xrink);font-size:16px}

@media print{.topbar,.stepwrap,.toast{display:none!important}}

/* configuration warning */
.warnbar{background:#a8760b;color:#fff;padding:9px 26px;font-size:11.5px;line-height:1.6}
.warnbar code{background:rgba(255,255,255,.18);padding:1px 5px;border-radius:3px;font-size:10.5px}
.warnbar a{color:#fff;font-weight:600;text-decoration:underline}

/* ── horizontal overflow guard ────────────────────────────────────────────
   The advisor review carries wide tables. Without this they push the whole
   page sideways, which scrolls the chrome out of view and clips the left
   edge. Wide content must scroll inside its own container, never move the
   page.                                                                    */
html,body{max-width:100%;overflow-x:hidden}
#xray-root{width:100%;max-width:100%;overflow-x:hidden}
main#xray-body{width:100%;max-width:100%}

/* every table scrolls within its card */
.xr-card:has(> .xr-tbl),
.xr-card:has(> table){overflow-x:auto}
.xr .xr-tbl{min-width:0}
.xr-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* the warning bar follows the same measure as the content */
.warnbar{padding:9px 0}
.warnbar>span{display:block;max-width:1220px;margin:0 auto;padding:0 26px}

/* long names must wrap rather than widen the table */
.xr-tbl td{overflow-wrap:anywhere}
.xr-tbl td.n{overflow-wrap:normal}

@media (max-width:900px){
  .topbar{padding:12px 16px}
  .stepwrap{padding:10px 16px}
  .warnbar>span{padding:0 16px}
  .xr{padding:16px 16px 48px!important}
}