:root{
  /* ── VAULT ──────────────────────────────────────────────────────────────
     The application chrome answers to the same document: deep navy ground,
     one brass accent used only for structure, never as a data colour.     */
  --xrbg:#0B1522;--xrcard:#12202F;--xrcard2:#16283A;--xrline:#1B2C3E;--xrline2:#2C4054;
  --xrink:#F0EDE4;--xrink2:#B4B9C2;--xrink3:#8B96A6;--xrink4:#6E7A8C;
  --xrpos:#59B589;--xrneg:#DC6F6B;--xrwarn:#D6A63C;--xrblue:#6FA8E8;--xrgold:#C9A24A;
}
*{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:15px 30px;background:#08111B;color:var(--xrink);
  border-bottom:1px solid var(--xrline2);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:20px;height:20px;border-radius:3px;border:1px solid var(--xrgold);color:var(--xrgold);
  display:inline-flex;align-items:center;justify-content:center;font:400 11px 'DM Serif Display',Georgia,serif}
.mark::before{content:'K'}
.wordmark{font:600 13px/1 'DM Sans',sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--xrink)}
.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:11.5px;color:var(--xrink3);flex-wrap:wrap}
.topmeta .xr-btn{background:transparent;color:var(--xrink2);border-color:var(--xrline2);padding:6px 12px;font-size:11px;border-radius:4px}
.topmeta .xr-btn:hover{background:var(--xrcard);color:var(--xrink);border-color:var(--xrgold)}

/* stepper */
.stepwrap{background:var(--xrcard);border-bottom:1px solid var(--xrline2);padding:13px 30px;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:transparent}
.step span{font:600 11px/1 inherit;color:var(--xrink4)}
.step.now i{background:var(--xrgold);border-color:var(--xrgold);color:#0B1522}
.step.now span{color:var(--xrink)}
.step.done i{background:transparent;border-color:var(--xrpos);color:var(--xrpos)}
.step.done span{color:var(--xrink2)}
.stepline{background:var(--xrline2)}
.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(--xrcard2);color:var(--xrink);border:1px solid var(--xrline2);padding:12px 18px;border-radius:6px;
  font-size:12.5px;line-height:1.5;box-shadow:0 12px 40px rgba(0,0,0,.5);transition:bottom .25s ease;pointer-events:none}
.toast.show{bottom:24px}
.toast.success{background:#0F3D2A;border-color:#1F6141}
.toast.warn{background:#3E2E10;border-color:#7A6118}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 620px at 50% -10%,#16283A 0%,#0B1522 58%,#060C13 100%)}
.login-card{width:100%;max-width:412px;background:var(--xrcard);border:1px solid var(--xrline2);border-radius:8px;
  padding:38px 34px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.login-card h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:28px;margin:0 0 5px;color:var(--xrink)}
.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:4px;
  font:400 13.5px inherit;outline:none;margin-bottom:16px;background:var(--xrbg);color:var(--xrink)}
.login-card input:focus{border-color:var(--xrgold);box-shadow:0 0 0 3px rgba(201,162,74,.16)}
.login-card button{width:100%;padding:12px;background:var(--xrgold);color:#0B1522;border:none;border-radius:4px;
  font:600 13px inherit;cursor:pointer;transition:.15s}
.login-card button:hover:not(:disabled){background:#DBB65F}
.login-card button:disabled{opacity:.5;cursor:not-allowed}
.login-err{background:rgba(220,111,107,.10);border:1px solid rgba(220,111,107,.35);color:#E8918D;
  padding:10px 12px;border-radius:4px;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:14px}

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

/* configuration warning */
.warnbar{background:#3E2E10;color:#EBC868;border-bottom:1px solid #7A6118;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%}
.xr-in{max-width:1180px;margin:0 auto}
#xray-root .xr{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:20px 16px 60px!important}
  .xr-doc{padding:0!important}
  .xr-in{padding:20px 16px 60px}
}

/* House View nav state */
.topmeta .xr-btn.on{background:var(--xrcard2);color:var(--xrink);border-color:var(--xrgold)}
.topmeta .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--xrgold);margin-left:4px;vertical-align:middle}

/* ── reference shelf on the main screen ───────────────────────────────────
   House View and the Product Library are guidance, not steps. They are
   entered from the main screen only, so reading them never means being
   stranded part-way through an X-Ray.                                      */
.refcard{cursor:pointer;transition:.16s;border-color:var(--xrline2)}
.refcard:hover{border-color:var(--xrgold);box-shadow:0 8px 26px rgba(0,0,0,.34);transform:translateY(-1px)}
.refhd{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.refmk{font-size:15px;line-height:1}
.refnm{font:400 18px/1.2 'DM Serif Display',Georgia,serif;color:var(--xrink)}
.refmk{color:var(--xrgold)}
.refdot{width:7px;height:7px;border-radius:50%;background:var(--xrgold);display:inline-block}
.refdesc{line-height:1.65;min-height:56px}
.reffoot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:11px;
  border-top:1px solid var(--xrline);font:600 11px/1 inherit;color:var(--xrink4)}
.refgo{color:var(--xrgold)}
@media (max-width:760px){.xr-grid[style*="1fr 1fr"]{grid-template-columns:1fr!important}}
.buildstamp{font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
  color:var(--xrink4);border:1px solid var(--xrline2);border-radius:3px;padding:4px 6px;margin-left:4px}

/* band editor */
.bandin{display:inline-flex;align-items:center;gap:5px}
.bandin input{width:58px;padding:6px 7px;border:1px solid var(--xrline2);border-radius:4px;
  font:600 11.5px inherit;text-align:right;outline:none;background:var(--xrbg);color:var(--xrink)}
.bandin input:focus{border-color:var(--xrgold);box-shadow:0 0 0 3px rgba(201,162,74,.16)}
.bandin i,.bandin em{font-style:normal;font:600 10.5px inherit;color:var(--xrink4)}

/* risk-profile tabs on the House View */
.proftabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.proftab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--xrcard);
  border:1px solid var(--xrline2);border-radius:9px;padding:9px 14px;cursor:pointer;transition:.15s;
  font:600 12px/1.2 inherit;color:var(--xrink2);text-align:left}
.proftab i{font-style:normal;font-weight:400;font-size:10.5px;color:var(--xrink4)}
.proftab:hover{border-color:var(--xrink3)}
.proftab.on{background:var(--xrgold);border-color:var(--xrgold);color:#0B1522}
.proftab.on i{color:#3A2E10}

/* configuration marker — operator-facing, not a wall for viewers */
.cfgdot{width:7px;height:7px;border-radius:50%;background:var(--xrgold);display:inline-block;
  margin-left:2px;cursor:help;flex:0 0 auto;box-shadow:0 0 0 3px rgba(201,162,74,.20)}
.cfgdot:hover{background:#DBB65F}

/* stale-build warning — a correctness problem, not a configuration nag */
.stalebar{background:#3B1614;color:#F0A9A5;border-bottom:1px solid #7A2C28;padding:10px 0;font-size:12px;line-height:1.6}
.stalebar>span{display:block;max-width:1220px;margin:0 auto;padding:0 26px}
.stalebar code{background:rgba(255,255,255,.2);padding:1px 5px;border-radius:3px;font-size:11px}
.stalebar .xr-btn{background:#F0A9A5;color:#3B1614;border-color:#F0A9A5;margin-left:8px;font-weight:600}
.stalebar .xr-btn:hover{background:#fff;color:#3B1614}
@media (max-width:900px){.stalebar>span{padding:0 16px}}

/* ══ MOBILE ═══════════════════════════════════════════════════════════════
   The layout already reflowed — nothing overflowed the page and wide tables
   scrolled inside their own wrappers. What it was not was *usable* on a
   phone: the six-step rail needs 640px and was clipped after step three, so
   the two things a progress indicator exists to say — where you are, how
   much is left — were the parts cut off; controls sat at 26–33px against a
   44px finger; and the tables that scrolled gave no sign that they did.

   Everything below is additive and scoped to narrow screens or coarse
   pointers. The desktop layout is untouched.                              */

/* ── the step indicator ─────────────────────────────────────────────────
   Two forms are rendered, one is shown. Above 760px the rail, which has the
   room it needs; below it a compact line and a progress bar, which say the
   same thing in the space available. */
.stepmini{display:none}
@media (max-width:760px){
  .stepper{display:none}
  .stepmini{display:block;max-width:1220px;margin:0 auto}
  .stepmini-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
  .stepmini-t b{font:600 13px/1.2 inherit;color:var(--xrink)}
  .stepmini-t span{font:600 11px/1.2 inherit;color:var(--xrink4);white-space:nowrap}
  .stepmini-bar{height:3px;border-radius:2px;background:var(--xrline2);overflow:hidden}
  .stepmini-bar i{display:block;height:100%;background:var(--xrgold);transition:width .3s ease}
}

/* ── chrome ─────────────────────────────────────────────────────────────
   The signed-in address costs a whole row on a phone and tells the advisor
   nothing they do not know. The controls stay. */
@media (max-width:760px){
  .topbar{padding:11px 16px;gap:10px;
          padding-left:max(16px,env(safe-area-inset-left));
          padding-right:max(16px,env(safe-area-inset-right))}
  .topmeta{gap:7px}
  .topmeta #who{display:none}
  .wordmark{font-size:12px;letter-spacing:.08em}
  .stepwrap{padding:11px 16px}
  .stalebar{font-size:11.5px}
  .stalebar>span{padding:0 16px}
  .stalebar .xr-btn{display:block;margin:8px 0 0}
}

/* ── section headers ────────────────────────────────────────────────────
   The subtitle is pushed right by margin-left:auto, which on a narrow
   screen leaves it stranded against the opposite edge from the heading it
   belongs to. Below 760px it sits under the heading, left-aligned. */
@media (max-width:760px){
  .xr-sech{gap:6px;margin-bottom:18px}
  .xr-secs{margin-left:0;text-align:left;justify-content:flex-start;width:100%}
  .xr-sect{font-size:19px;line-height:1.25}
}

/* ── touch targets ──────────────────────────────────────────────────────
   Scoped to coarse pointers, so a mouse-driven desktop keeps its compact
   controls and only a finger gets the larger ones. */
@media (pointer:coarse){
  /* An inline link inside a sentence ("load a demo portfolio", "edit") is a
     12px-tall target. It cannot be given a 44px box without tearing a hole in
     the paragraph, so it gets vertical padding that overflows the line box
     instead — the text stays where it is and the hit area grows around it. */
  .xr-in a,.xr a:not(.xr-btn),.xr-note a{padding:9px 2px;margin:-9px -2px;
    display:inline-block;position:relative}
  .xr-btn{min-height:44px;padding:11px 16px;font-size:12.5px}
  .topmeta .xr-btn{min-height:38px;padding:9px 13px}
  select,input[type=text],input[type=number],input[type=password],textarea{min-height:44px;font-size:16px}
  .bandin{white-space:nowrap}
  .bandin input{min-height:40px;width:58px;font-size:15px}
  .proftab{min-height:48px}
  .xr-tbl td a,.xr-tbl td button{min-height:36px;display:inline-flex;align-items:center}
}
/* 16px on inputs is what stops iOS Safari zooming the page on focus, which
   otherwise leaves the layout scrolled sideways with no way back. */

/* ── legibility ─────────────────────────────────────────────────────────
   11.5px reads on a 27" monitor at arm's length and does not read on a
   phone held at forty centimetres. Raised only where the screen is small. */
@media (max-width:900px){
  /* Extends to 900px, not 760: a tablet in portrait is held at the same
     distance as a phone and gets no dispensation for being wider.
     !important is load-bearing here rather than lazy: most of these sizes
     arrive as inline styles from generated markup, and an inline style beats
     any class rule. The floor is 11.5px — below that the text is decoration,
     and none of this text is decoration. */
  .xr-note{font-size:12.5px!important;line-height:1.7}
  .xr-chip{font-size:11.5px!important;padding:3px 9px}
  .xr-tbl{font-size:12px}
  .xr-tbl td,.xr-tbl th{font-size:12px!important}
  .xr-in [style*="font-size:9"],.xr-in [style*="font-size:10"],
  .xr [style*="font-size:9"],.xr [style*="font-size:10"]{font-size:11.5px!important}
  .xr em,.xr-in em{font-size:11.5px}
  .xr-mfp{font-size:11.5px}
  .buildstamp{font-size:10px;padding:3px 5px}
}

/* ── tables that scroll ─────────────────────────────────────────────────
   A table wider than its wrapper scrolls, and used to do so silently. The
   fade is painted only while there is more to the right, and .is-scrollable
   is set by the engine so the hint never appears on a table that fits. */
.xr-tblwrap{position:relative}
.xr-tblwrap.is-scrollable::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
  background:linear-gradient(to right,rgba(11,21,34,0),rgba(11,21,34,.92));
  opacity:1;transition:opacity .2s}
.xr-tblwrap.is-scrollable.at-end::after{opacity:0}
.xr-swipe{display:none}
@media (max-width:760px){
  .xr-tblwrap.is-scrollable + .xr-swipe,
  .xr-swipe.on{display:block;font:600 10.5px/1 inherit;color:var(--xrink4);
    margin:6px 0 0;letter-spacing:.04em}
}

/* ── spacing and grids ─────────────────────────────────────────────────── */
@media (max-width:560px){
  .xr-in{padding:20px 14px 80px;
         padding-left:max(14px,env(safe-area-inset-left));
         padding-right:max(14px,env(safe-area-inset-right))}
  .xr{padding:16px 14px 80px!important}
  .xr-3{grid-template-columns:1fr;gap:26px}
  .xr-allocgrid{grid-template-columns:1fr}
  .xr-grid{grid-template-columns:1fr!important}
  .xr-sect{font-size:18px}
}

/* ── overlays clear of the home indicator ─────────────────────────────── */
.toast{bottom:-90px}
@media (max-width:760px){
  .toast{max-width:calc(100vw - 24px);font-size:12.5px}
  .toast.show{bottom:calc(18px + env(safe-area-inset-bottom))}
}
/* A sticky action bar sits on the home indicator on a notched phone. */
@media (max-width:760px){
  .xr [style*="position:sticky"][style*="bottom"]{
    padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}
}

/* Nothing may widen the page. This is the backstop that turns a future
   layout mistake into a scrollbar inside one element rather than a page
   the reader has to drag sideways to finish a sentence. */
@media (max-width:760px){
  html,body{overflow-x:hidden}
  .xr-doc,.xr-in,.xr-sec{max-width:100%}
  img,svg,canvas{max-width:100%;height:auto}
}

/* ── action rows ────────────────────────────────────────────────────────
   Toolbars push the primary action right with margin-left:auto. When the
   row wraps on a phone that leaves the main button stranded on its own
   line, right-aligned under two left-aligned ones. Below 560px the auto
   margin is dropped and the primary action takes the full width, which is
   where a thumb expects it. */
@media (max-width:560px){
  .xr [style*="margin-left:auto"]{margin-left:0!important}
  .xr-btn.p{width:100%;justify-content:center;text-align:center}
  .xr-hdr{flex-direction:column;align-items:flex-start;gap:10px}
}