:root{color:#111126;background:#fcfbfa;font-family:Inter,sans-serif;font-synthesis:none;--purple:#3e1bdb;--green:#078538;--amber:#a95700;--line:#e5e2e5}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;background:radial-gradient(circle at 70% 10%,#fff 0,#fcfbfa 52%,#faf8f6 100%)}button{font:600 13px Inter,sans-serif;cursor:pointer}.monitor-shell{display:flex;flex-direction:column;width:min(1180px,100%);height:100vh;min-height:0;margin:auto;padding:0 clamp(20px,4vw,48px)}.monitor-tabs{flex:0 0 70px;height:70px;display:flex;justify-content:center;align-items:stretch;gap:8px;border-bottom:1px solid #ece8e3;margin:0 calc(clamp(20px,4vw,48px)*-1);padding:0 clamp(20px,4vw,48px)}.monitor-tab-list{display:flex;align-items:stretch;gap:38px}.monitor-tab{position:relative;display:flex;align-items:center;flex:0 0 auto;padding:0 4px;border:0;background:transparent;color:#373344;font-size:11px;font-weight:600;white-space:nowrap}.monitor-tab::after{content:'';position:absolute;right:0;bottom:-1px;left:0;height:2px;background:#ed8a23;transform:scaleX(0);transition:transform .18s ease}.monitor-tab:hover{color:#ba6511}.monitor-tab.active{color:#d87517;background:transparent}.monitor-tab.active::after{transform:scaleX(1)}.monitor-view{display:none;min-height:0}.monitor-view.active{display:block;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:34px 0 54px;scrollbar-gutter:stable}.insights-hero{display:flex;justify-content:space-between;align-items:center;margin:0 0 26px}.insights-hero h1{font:400 clamp(32px,4vw,46px) 'DM Serif Display',serif;margin:0}.insights-hero h1 em{color:var(--purple);font-weight:400}.insights-hero p{margin:8px 0 0;color:#4e4c5d}.memory-link{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;color:#18162b;padding:12px 18px}.memory-link b{font-size:22px}.recommended-card{border:1px solid #f0cdbb;border-radius:22px;padding:28px;background:rgba(255,255,255,.65)}.recommendation-main{display:grid;grid-template-columns:76px minmax(310px,1.6fr) .55fr .75fr;gap:20px;align-items:start}.recommendation-icon{width:66px;height:66px;border-radius:50%;background:#fbf0e1;color:#754000;font-size:35px;display:grid;place-items:center}.recommendation-copy small,.trade-plan>small{color:#c11717;font-weight:600}.recommendation-copy h2{font:400 34px 'DM Serif Display',serif;margin:7px 0 8px}.recommendation-copy>b,.recommendation-copy p{font-size:13px;line-height:1.45}.recommendation-copy p{margin:5px 0}.recommendation-score,.goal-impact{border-left:1px solid #d8d4d3;padding-left:24px;min-height:72px}.recommendation-score span,.goal-impact span{font-size:12px}.recommendation-score strong{display:block;font-size:24px;margin-top:8px}.recommendation-score i{color:#777;font-style:normal}.recommendation-score em{color:var(--green);font-style:normal}.goal-impact strong{display:block;color:var(--green);margin:14px 0 24px}.goal-impact button{border:0;border-radius:11px;background:linear-gradient(135deg,#3f1cb4,#6a2ecd);color:#fff;padding:13px 20px;width:100%}.recommendation-details{border-top:1px solid #efcbbb;margin-top:18px;padding-top:14px;display:block}.trade-columns{display:grid;grid-template-columns:1fr 44px 1fr;align-items:start;gap:0 18px;margin-top:10px}.trade-columns p{font-size:12px;margin:7px 0}.trade-columns p strong{float:right}.red{color:#c31313}.green{color:var(--green)!important}.amber{color:var(--amber)!important}.trade-arrow{font-size:36px;color:#97949b}.alternative{display:grid;grid-template-columns:44px 1fr 15px;gap:12px;align-items:start;border:1px solid #eadbd2;border-radius:16px;padding:16px;box-shadow:0 4px 18px rgba(73,37,11,.05)}.alternative b{border-bottom:2px solid #8a582d;padding-bottom:5px}.alternative p{font-size:12px;line-height:1.45}.round-icon{width:42px;height:42px;border-radius:50%;background:#f1edff;color:var(--purple);font-size:25px;display:grid;place-items:center}.impact-strip{display:flex;gap:50px;border-top:1px solid #f1d8ca;margin-top:14px;padding-top:13px}.impact-strip span{display:grid;grid-template-columns:20px auto;font-size:12px}.impact-strip b{grid-column:2}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 34px}.metric-card{border:1px solid var(--line);border-radius:17px;background:#fff;padding:22px;min-height:205px}.metric-card header,.metric-card footer,.probability-row{display:flex;justify-content:space-between;align-items:center}.metric-card header span{font-size:13px}.good{background:#eef8ee;color:var(--green);border-radius:999px;padding:5px 10px}.metric-number{display:block;font-size:38px;margin:18px 0}.metric-number small{font-size:18px;color:#454355;font-weight:400}.health-bar,.risk-bar{height:10px;background:#e9e7eb;border-radius:99px;overflow:hidden;margin:10px 0 34px}.health-bar i{display:block;width:82%;height:100%;background:var(--green);border-radius:99px}.risk-bar{background:linear-gradient(90deg,#17a457,#f2c02d 55%,#e4e3e7 55%);position:relative;margin:10px 0 22px}.risk-bar i{position:absolute;left:72%;height:18px;top:-4px;border-left:2px solid #171522}.metric-card footer{font-size:12px;color:#555263}.metric-card footer button,.action-section>header button,.mini-grid button{border:0;background:transparent;color:var(--purple);padding:0}.risk-delta{font-size:12px;color:#cf1f1f}.risk-delta span{color:#666372}.probability-row .metric-number{margin-bottom:5px}.probability-row span{color:var(--green);font-size:12px}.metric-card>p.green{font-size:12px}.sparkline{width:100%;height:42px}.sparkline path{fill:none;stroke:var(--purple);stroke-width:2}.action-section>header{display:flex;justify-content:space-between;align-items:center}.action-section h2,.other-insights h2{font:400 27px 'DM Serif Display',serif}.action-row{display:grid;grid-template-columns:64px 1fr 150px 120px 15px;gap:16px;align-items:center;border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px 24px;margin:14px 0}.action-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:29px}.action-icon.gold{background:#fbf0e1;color:#955000}.action-icon.violet{background:#f1edff;color:var(--purple)}.action-row h3{font:400 18px 'DM Serif Display',serif;margin:0 0 7px}.action-row div>b,.action-row p{font-size:12px;line-height:1.5;margin:3px 0}.action-row dl{border-left:1px solid #d9d7dd;padding-left:22px}.action-row dt{font-size:12px}.action-row dd{font-weight:600;margin:12px 0 0}.action-row dd em{color:var(--green);font-style:normal}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mini-grid article{display:grid;grid-template-columns:58px 1fr;gap:14px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px}.mini-grid article>span{width:50px;height:50px;border-radius:50%;background:#f1edff;color:var(--purple);font-size:27px;display:grid;place-items:center}.mini-grid h3{font-size:14px;margin:5px 0 10px}.mini-grid p{font-size:12px;line-height:1.5;margin:0}.mini-grid button{margin-top:6px}

/* Portfolio Snapshots retains the connected holdings monitor. */
.monitor-heading{display:flex;align-items:end;justify-content:space-between;gap:24px}.eyebrow{color:#4535e8!important;letter-spacing:.16em;font-size:11px!important;font-weight:600}.monitor-heading h1{font:400 clamp(34px,3vw,46px) 'DM Serif Display',serif;margin:4px 0 6px}.monitor-heading p{color:#6d6c7e;margin:0;font-size:13px}.monitor-heading p strong{color:#19184b;font-size:15px}.dot{margin:0 12px}.heading-actions{display:flex;gap:10px;flex-wrap:wrap}.heading-actions button,.attention-item button,.primary{color:#2915d4;border:1px solid #7565ff;border-radius:8px;background:#fff;padding:12px 18px}.heading-actions #refresh{border-color:#dedbd7;color:#55505a}.monitor-note,.method-note{border:1px solid #e4e0f4;border-radius:8px;background:#f8f7ff;color:#34336f;padding:12px 15px;font-size:12px;margin:20px 0}.state-card{margin-top:26px;border:1px solid #e7e2de;border-radius:13px;background:#fff;padding:60px 24px;text-align:center}.state-card h2{font:30px 'DM Serif Display',serif;margin:0 0 8px}.state-card p{color:#6d6c7e;max-width:560px;margin:0 auto 22px;line-height:1.6}.primary,.attention-item button{background:#28146d;color:#fff;border:0}.summary-card{display:grid;grid-template-columns:1.5fr repeat(4,1fr);border:1px solid #e8e2dc;background:#fff;border-radius:14px;padding:24px 26px}.summary-card>div{padding:0 24px;border-left:1px solid #eee8e4;display:flex;flex-direction:column;justify-content:center;min-width:0}.summary-card>div:first-child{border:0;padding-left:0;position:relative}.summary-card span{font-size:12px}.summary-card strong{font:400 27px 'DM Serif Display',serif;margin:12px 0 5px;white-space:nowrap}.summary-main strong{font-size:44px}.summary-card small{color:#656475;font-size:11px}.positive{color:#00843d!important}.negative{color:#e12929!important}.muted{font:600 17px Inter,sans-serif!important;color:#4f4d61}.spark{position:absolute;width:120px;height:44px;right:4px;bottom:5px;border-bottom:2px solid #5139ec;transform:skewY(-12deg);opacity:.65}.dashboard-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:14px;margin-top:14px}.attention-card,.holdings-card{border:1px solid #e8e2dc;background:#fff;border-radius:14px;overflow:hidden}.attention-card>header,.holdings-card>header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px}.attention-card h2,.holdings-card h2{font:26px 'DM Serif Display',serif;margin:0}.attention-card header span{background:#fff6ef;color:#c44b13;padding:6px 9px;border-radius:7px;font-size:10px}.attention-item{padding:4px 22px 20px}.attention-item.needs-review{border-left:2px solid #f04b35;margin-left:22px;padding-left:20px}.attention-title{display:flex;align-items:center;gap:13px}.attention-title i{border:1px solid #f04b35;color:#e32d21;border-radius:50%;width:27px;height:27px;display:grid;place-items:center}.attention-title i.watch{border-color:#e0c9a8;color:var(--amber)}.attention-title i.clear{border-color:#cfe8d4;color:var(--green)}.attention-title h3{font:21px 'DM Serif Display',serif}.attention-item dl{display:grid;grid-template-columns:130px 1fr;gap:12px;font-size:11px;line-height:1.55}.attention-item dt{font-weight:600}.attention-item dd{margin:0}.attention-card footer{display:flex;gap:28px;border-top:1px solid #eee9e5;padding:15px 22px;font-size:10px}.table-wrap{overflow:auto;padding:0 12px 18px}table{border-collapse:collapse;width:100%;font-size:11px}th{text-align:left;color:#6d6b76;font-weight:500;padding:8px 12px;border-bottom:1px solid #e8e2de}td{padding:12px;border-bottom:1px solid #eee9e5}td small{display:block;color:#6c6a7b;margin-top:5px}.investment{display:flex;align-items:center;gap:10px}.asset-icon{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#3b2ce7,#0fa5d6);color:#fff;display:grid;place-items:center}.status{display:inline-block;color:#087b3e;background:#eff9ed;border-radius:6px;padding:6px 8px}.status.review{background:#fff5ec;color:#cc4b15}.origin-note{font-size:10px}.method-note{background:#fff}
/* Portfolio Insights renders from the engines, so these carry the pieces the
   demo layout never needed: the evidence behind a recommendation, the
   confidence attached to it, and each engine's own status. */
.recommended-card.calm{border-color:#d8e7d9}.goal-impact.worse strong{color:var(--amber)!important}.goal-impact.steady strong{color:#45435a!important}.all-clear .recommendation-icon.calm{background:#eef8ee;color:var(--green)}.calm-label{color:var(--green)!important}
.intervention-note{font-size:12px;line-height:1.5;color:#4e4c5d;margin:12px 0 0}
.decision-why{border-top:1px solid #efcbbb;margin-top:14px;padding-top:13px}
.evidence-strip{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:11px}.evidence-strip span{display:grid;font-size:12px}.evidence-strip small{color:#6b6879}.evidence-strip b{font-size:13px}
.what-would-change{font-size:12px;line-height:1.5;margin:0 0 6px}.what-would-change b{font-weight:600}
.confidence-line{font-size:11px;color:#6b6879;margin:0}
.check-in{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.check-option{border:1px solid var(--line);border-radius:999px;background:#fff;color:#18162b;padding:10px 15px}.check-option:hover{border-color:#c8ddff;background:#eef5ff;color:#0865dc}
.watching-note{font-size:12px;color:#6b6879}
.engine-status{display:inline-block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.02em;border:1px solid var(--line);border-radius:999px;padding:3px 8px;margin-left:8px;color:#55525f;vertical-align:middle}
.engine-status.good{border-color:#cfe8d4;background:#f3faf4;color:var(--green)}.engine-status.amber{border-color:#f0dcc2;background:#fdf7ef;color:var(--amber)}
.metric-card>p.green,.metric-card>p.amber{font-size:12px}.metric-card header span.amber{background:#fdf7ef;border-radius:999px;padding:5px 10px}
.health-bar.warn i{background:#d08a12}.health-bar.poor i{background:#c31313}
.snapshot-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:14px;align-items:start}
.intent-chip{font-size:10px;color:#34336f;background:#f8f7ff;border:1px solid #e4e0f4;border-radius:7px;padding:6px 9px}
.fact-list{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0 24px 20px;font-size:11px;line-height:1.55}
.fact-list dt{color:#6d6b76;margin-top:11px}.fact-list dd{font-weight:600;margin:3px 0 0}
#allocation-body td small{display:block;color:#6c6a7b;margin-top:4px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #eee9e5;margin:0 22px;padding:13px 0;font-size:11px;color:#6d6b76}
.pager button{border:1px solid var(--line);border-radius:8px;background:#fff;color:#2915d4;padding:7px 12px;font-size:11px}
.pager button:hover:not([disabled]){border-color:#c8ddff;background:#f8fbff}
.pager button[disabled]{color:#a5a2ad;cursor:default}
.holdings-card .pager{margin:0 24px}

@media(max-width:900px){.recommendation-main{grid-template-columns:66px 1fr}.recommendation-score,.goal-impact{border:0}.recommendation-details,.metric-grid,.mini-grid{grid-template-columns:1fr}.action-row{grid-template-columns:54px 1fr}.action-row dl,.action-row>strong{display:none}.summary-card{grid-template-columns:repeat(2,1fr)}.snapshot-grid{grid-template-columns:1fr}.summary-card>div{border:0;padding:18px 8px}.summary-card>div:first-child{grid-column:1/-1}.dashboard-grid{grid-template-columns:1fr}}@media(max-width:620px){.monitor-shell{padding:0 14px 36px}.monitor-tabs{height:62px;gap:4px;margin-left:-14px;margin-right:-14px;padding:0 14px}.monitor-tab{padding:9px 7px;font-size:9px}.insights-hero{align-items:flex-start;gap:18px}.memory-link{padding:9px;font-size:0}.recommendation-main{grid-template-columns:1fr}.recommendation-details{grid-template-columns:1fr}.impact-strip{gap:16px;flex-wrap:wrap}.evidence-strip{gap:10px 18px}.trade-columns{grid-template-columns:1fr}.trade-arrow{transform:rotate(90deg);justify-self:center}.action-row{padding:16px}.monitor-heading{align-items:flex-start;flex-direction:column}.summary-card{grid-template-columns:1fr}.summary-card>div:first-child{grid-column:auto}}

/* What to do, position by position.
   The cards are shared markup (`/templates/stock-card.css`) and the drawer under
   them is styled by Portfolio Blueprint's own decision stylesheet, which the
   monitor loads rather than copies. That stylesheet is written against Master
   Construct's design tokens, so the monitor has to supply the ones it reads —
   without them the panel's borders and muted text silently disappear. */
#insight-what-to-do .decision-panel,#insight-what-to-do .decision-toggle{--line2:#f1f5f9;--muted:#64748b;--text:#0f172a;--cyan:#0ea5e9;--green:#10b981;--panel:#fff;--panel2:#f8fafc}
/* The plan is the widest thing on the page: every position it touches is a card,
   and two narrow columns inside a 1180px reading column made them cramped. The
   section breaks out of that column and is centred on its own. */
#insight-what-to-do{position:relative;left:50%;transform:translateX(-50%);width:min(1400px,calc(100vw - 2*clamp(14px,4vw,48px)));margin:30px 0 40px}
#insight-what-to-do>header{margin-bottom:6px}
.plan-note{display:block;max-width:760px;margin:0 0 16px;line-height:1.55}
.plan-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:20px 0 10px;font:400 21px 'DM Serif Display',serif}
.plan-group span{color:#6b6879;font:600 11px Inter,sans-serif}
.trade-more{color:#6b6879!important;font-style:italic}
#insight-what-to-do .holding-grid{grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));gap:14px}
#insight-what-to-do .decision-grid{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
#insight-what-to-do .zone-legend{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
#insight-what-to-do .verdict-facts{grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr))}
#insight-what-to-do .entry-ring b{font-size:19px}
/* The bands table: every sleeve at once, each with its own tolerance. */
.rebalance-bands{margin:0 0 22px}
.rebalance-bands .method-note{margin:0 24px 18px;background:#fbfaff}
.rebalance-bands td{vertical-align:top}
.rebalance-bands td:first-child b{font-size:12px}

/* The target is the widest thing the monitor draws: an allocation and its
   composition side by side do not fit in a 1180px reading column. The view
   breaks out of that column and is centred on its own, exactly as the
   rebalancing plan on Portfolio Insights does. */
#portfolio-target{position:relative;left:50%;transform:translateX(-50%);width:min(1400px,calc(100vw - 2*clamp(14px,4vw,48px)))}
#portfolio-target::before{content:"";position:absolute;z-index:-1;top:75px;right:calc(100% - 45px);width:170px;height:520px;opacity:.45;background:repeating-radial-gradient(ellipse at 100% 50%,transparent 0 9px,rgba(222,145,53,.16) 10px 11px,transparent 12px 20px);pointer-events:none}

/* ── Target Portfolio ───────────────────────────────────────────────────────
   The steady state. Two wide cards side by side — the allocation and what is
   inside it — then the argument for that allocation underneath, at full width,
   because ten reasons in a 400px column is a scroll, not a page. */
.target-hero{display:grid;grid-template-columns:minmax(320px,.92fr) minmax(580px,1.28fr);gap:42px;align-items:start;margin:0 0 28px}
.target-intro h1{font:400 clamp(30px,3.4vw,44px) 'DM Serif Display',serif;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.target-chip{font:600 11px Inter,sans-serif;color:#7a4a12;background:#fdf3e6;border:1px solid #f0dcc2;border-radius:999px;padding:6px 12px;white-space:nowrap}
#target-lede{margin:12px 0 0;color:#4e4c5d;font-size:13px;line-height:1.6;max-width:60ch}
.target-meta{margin:12px 0 0;color:#75727f;font-size:11px}
.target-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kpi{display:grid;grid-template-columns:38px 1fr;gap:12px;min-height:148px;border:1px solid #e9e3dd;border-radius:14px;background:rgba(255,255,255,.82);padding:20px 18px;box-shadow:0 5px 18px rgba(64,42,22,.025)}
.kpi-icon{width:34px;height:34px;border-radius:11px;background:#f1edff;color:var(--purple);display:grid;place-items:center;font-size:16px}
.kpi small{display:block;color:#6b6879;font-size:11px}
.kpi strong{display:block;font:400 22px 'DM Serif Display',serif;margin:5px 0 4px;line-height:1.15}
.kpi em{display:block;font-style:normal;color:#75727f;font-size:10.5px;line-height:1.45}

.target-grid{display:grid;grid-template-columns:minmax(400px,1.02fr) minmax(470px,1.22fr);gap:16px;align-items:start}
.target-card{border:1px solid #e8e2dc;background:rgba(255,255,255,.86);border-radius:16px;overflow:hidden;margin-bottom:16px;box-shadow:0 5px 22px rgba(64,42,22,.025)}
.target-card>header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px 12px}
.target-card>header h2{font:400 24px 'DM Serif Display',serif;margin:0}
.allocation-body{display:grid;grid-template-columns:196px 1fr;gap:4px;align-items:center;padding:0 10px}
.allocation-chart svg{width:100%;height:auto;max-width:196px}
.donut-arc{transition:opacity .15s}
.donut-label{font:600 10px Inter,sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:middle}
.donut-total{font:400 26px 'DM Serif Display',serif;fill:#111126;text-anchor:middle}
.donut-caption{font:500 10px Inter,sans-serif;fill:#75727f;text-anchor:middle}
.sleeve-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.allocation-why{color:#3d3b4c;line-height:1.45}
.allocation-why b{font-weight:600}
.allocation-why small{color:#75727f}
#target-allocation td{font-size:10.5px}
#target-allocation th{font-size:10.5px}
#target-allocation td small{display:block;color:#75727f;margin-top:4px;font-size:10px}
.target-jump{display:block;width:100%;text-align:left;border:0;border-top:1px solid #eee9e5;background:transparent;color:var(--purple);padding:15px 24px}
.target-jump b{font-size:15px}

.composition-key{display:flex;gap:8px;flex-wrap:wrap}
.composition-key span{font-size:10px;border-radius:7px;padding:6px 9px}
.key-existing{background:#f1edff;color:#3b2ba6;border:1px solid #ddd5ff}
.key-new{background:#eef8ee;color:#0a6b31;border:1px solid #cfe8d4}
.composition-table td{vertical-align:top}
.composition-scroll{max-height:var(--composition-window-height,none);overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain}
.composition-scroll.is-scrollable{border-top:1px solid #f1ece7;border-bottom:1px solid #f1ece7}
.composition-scroll:focus-visible{outline:2px solid #7d68f4;outline-offset:-2px}
.composition-scroll thead{position:sticky;top:0;z-index:3;background:#fff}
.composition-scroll::-webkit-scrollbar{width:7px}.composition-scroll::-webkit-scrollbar-thumb{background:#d9d2cc;border-radius:10px}.composition-scroll::-webkit-scrollbar-track{background:#f8f5f2}
.composition-table td small{display:block;color:#75727f;margin-top:4px;font-size:10px}
.sleeve-row td{background:#fbfaff;border-bottom:1px solid #eae6f5}
.sleeve-toggle{display:flex;align-items:center;gap:2px;border:0;background:transparent;color:#19184b;padding:0;font-size:11px;letter-spacing:.04em}
.sleeve-toggle i{display:inline-block;width:16px;font-style:normal;color:#8b889a;transition:transform .15s}
.sleeve-row.is-open .sleeve-toggle i{transform:rotate(90deg)}
.instrument{display:flex;align-items:flex-start;gap:10px}
.instrument-mark{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:600;flex:0 0 28px}
.instrument-row td{border-bottom:1px solid #f3efeb}
.origin{display:inline-block;font-size:9.5px;border-radius:6px;padding:5px 7px;white-space:nowrap}
.origin.is-existing{background:#f1edff;color:#3b2ba6}
.origin.is-new{background:#eef8ee;color:#0a6b31}
.origin.is-pending{background:#fdf7ef;color:var(--amber)}
.action{display:inline-block;font-weight:600;font-size:11px}
.action.go{color:var(--green)}.action.flat{color:#55525f}.action.warn{color:var(--amber)}.action.stop{color:#c31313}
.residue-row td{background:#fbfaff;color:#55525f}
.composition-table tfoot td{border-top:1px solid #d9d4e8;background:#fff;font-size:11px}
.composition-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #eee9e5;padding:14px 24px;font-size:11px;color:#6d6b76}
.composition-footer button{border:0;background:transparent;color:var(--purple);padding:0}

#target-goals-card td small{display:block;color:#75727f;margin-top:4px;font-size:10px}

.target-rationale{margin:8px 0 0}
.target-rationale>header h2{font:400 30px 'DM Serif Display',serif;margin:0 0 8px}
.target-rationale>header p{margin:0;color:#4e4c5d;font-size:12.5px;line-height:1.6;max-width:88ch}
.checks-strip{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.check{display:grid;grid-template-columns:18px 1fr;align-items:center;gap:2px 8px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:9px 13px}
.check i{grid-row:1/3;font-style:normal;font-size:12px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.check.is-pass i{background:#eef8ee;color:var(--green)}
.check.is-fail i{background:#fdecea;color:#c31313}
.check.is-fail{border-color:#f2cfc9;background:#fffbfa}
.check small{color:#6b6879;font-size:10px}
.check b{font-size:11px}
.reason-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:6px}
.reason{border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.reason>header{display:flex;align-items:center;gap:12px}
.reason-icon{width:36px;height:36px;border-radius:50%;background:#f1edff;color:var(--purple);display:grid;place-items:center;font-size:17px;flex:0 0 36px}
.reason h3{font:600 14px Inter,sans-serif;margin:0;line-height:1.35}
.reason p{margin:0;font-size:12px;line-height:1.6;color:#3d3b4c}
.reason dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:2px 0 0;padding:12px 0 0;border-top:1px solid #f0eef3}
.reason dt{font-size:10px;color:#6b6879;margin-bottom:3px}
.reason dd{margin:0;font-size:11.5px;font-weight:600}
.reason dl .is-fail dd{color:#c31313}
.reason dl .is-pass dd{color:var(--green)}
.reason>small{color:#75727f;font-size:10px;line-height:1.5;margin-top:auto}

@media(max-width:1080px){.target-hero,.target-grid{grid-template-columns:1fr}.allocation-body{grid-template-columns:1fr;justify-items:center}.allocation-why{max-width:none}.reason-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.target-intro h1{font-size:28px}.target-kpis{grid-template-columns:1fr}.kpi{grid-template-columns:38px 1fr;min-height:0}.target-card>header{padding:16px}.composition-footer{padding:14px 16px}.reason-grid{grid-template-columns:1fr}.reason{padding:16px}}
.target-conflict{border:1px solid #f2cfc9;border-radius:12px;background:#fffbfa;color:#8a2015;padding:13px 16px;margin:16px 0 0;font-size:12.5px;line-height:1.6}

/* Snapshot visual system: the quiet, editorial dashboard used by the product
   reference. DM Serif Display and Inter are the same two faces as the landing
   page; no monitor-only display font is introduced here. */
.fullscreen-button{display:none}
#portfolio-snapshots{position:relative;left:50%;transform:translateX(-50%);width:min(1400px,calc(100vw - 64px))}
#portfolio-snapshots::before,#portfolio-snapshots::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:340px;height:430px;opacity:.32;background:url('/assets/hero-pattern.svg') center/cover no-repeat}
#portfolio-snapshots::before{right:-70px;top:40px;transform:rotate(8deg)}
#portfolio-snapshots::after{left:-100px;bottom:-80px;transform:rotate(188deg)}
#portfolio-snapshots .monitor-heading{align-items:center;margin:0 2px 22px}
#portfolio-snapshots .eyebrow{color:#d66c00!important;letter-spacing:.2em;font-size:11px!important}
#portfolio-snapshots .monitor-heading h1{font-family:'DM Serif Display',Georgia,serif;color:#07162f;font-size:46px;line-height:1;margin:13px 0 15px}
#portfolio-snapshots .monitor-heading p{font-size:11px;color:#64748b}
#portfolio-snapshots .monitor-heading p strong{font-size:12px;color:#07162f}
#portfolio-snapshots .heading-actions{gap:16px;align-items:center}
#portfolio-snapshots .heading-actions button{min-height:52px;border:1px solid #d9d4ce;border-radius:8px;padding:0 24px;background:rgba(255,255,255,.82);box-shadow:0 2px 5px rgba(15,23,42,.04);color:#07162f;font-size:11px}
#portfolio-snapshots .heading-actions button span{font-size:19px;margin-right:9px;vertical-align:-1px}
#portfolio-snapshots .heading-actions #add-transaction{background:#071a3e;color:#fff;border-color:#071a3e;box-shadow:0 5px 10px rgba(7,26,62,.16)}
#portfolio-snapshots .heading-actions #view-blueprint span{margin:0 0 0 15px}
#portfolio-snapshots .monitor-note{display:flex;align-items:center;gap:13px;margin:0 0 20px;padding:13px 18px;border-color:#dfe4f2;background:rgba(249,250,255,.8);color:#24345b}
#portfolio-snapshots .monitor-note span{color:#3159e6;font-size:16px}
#portfolio-snapshots .summary-card,#portfolio-snapshots .attention-card,#portfolio-snapshots .holdings-card{border-color:#e4ded6;border-radius:9px;box-shadow:0 4px 14px rgba(44,31,17,.035);background:rgba(255,255,255,.88)}
#portfolio-snapshots .summary-card{padding:24px 22px;min-height:142px}
#portfolio-snapshots .summary-card strong{font-family:'DM Serif Display',Georgia,serif;color:#071a3e}
#portfolio-snapshots .summary-main strong{font-size:36px}
#portfolio-snapshots .summary-card>div{padding:0 25px}
#portfolio-snapshots .dashboard-grid{grid-template-columns:minmax(390px,.78fr) minmax(620px,1.22fr);gap:12px;margin-top:14px;align-items:stretch}
#portfolio-snapshots .attention-card h2,#portfolio-snapshots .holdings-card h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#071a3e;font-size:23px}
#portfolio-snapshots .attention-card>header,#portfolio-snapshots .holdings-card>header{padding:20px 24px 14px}
#portfolio-snapshots .attention-title h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#071a3e;font-size:18px;line-height:1.3}
#portfolio-snapshots .attention-item{padding-bottom:18px}
#portfolio-snapshots .attention-item.needs-review{border-left-width:1px}
#portfolio-snapshots .attention-item dl{grid-template-columns:125px 1fr;font-size:10px}
#portfolio-snapshots .attention-item button{padding:10px 15px;border-radius:6px;background:#071a3e;font-size:10px}
#portfolio-snapshots table{font-size:10px;color:#071a3e}
#portfolio-snapshots th{font-size:9px;padding:9px 11px}
#portfolio-snapshots td{padding:10px 11px}
#portfolio-snapshots .asset-icon{width:29px;height:29px;border-radius:6px;background:linear-gradient(145deg,#5634f4,#174fd6)}
#portfolio-snapshots .status{padding:4px 6px;border-radius:4px}
#portfolio-snapshots .snapshot-grid{grid-template-columns:1.08fr .92fr;gap:12px}
#portfolio-snapshots .fact-list{grid-template-columns:155px 1fr;padding-top:1px}
#portfolio-snapshots .fact-list dt{margin-top:8px}
#portfolio-snapshots .fact-list dd{margin-top:8px}

@media(min-width:850px){
  .monitor-shell{width:calc(100% - 20px);height:calc(100vh - 20px);margin:10px auto;padding:0 36px;border:1px solid #e2dbd3;border-radius:24px;background:rgba(255,255,255,.72);box-shadow:0 10px 34px rgba(43,33,24,.055);overflow:hidden}
  .monitor-tabs{position:relative;flex-basis:78px;height:78px;margin:0 -36px;border:0;border-bottom:1px solid #e5ded7;border-radius:24px 24px 0 0;padding:0 86px 0 120px;justify-content:stretch;background:rgba(255,255,255,.94);box-shadow:0 4px 15px rgba(35,29,23,.035)}
  .monitor-view.active{padding-top:38px}
  .monitor-tab-list{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;width:100%;gap:0}
  .monitor-tab{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;gap:18px;min-width:0;height:52px;margin:0 8px;padding:0 16px;border:1px solid transparent;border-radius:14px 14px 8px 8px;background:transparent;box-shadow:none;color:#344465;font-size:13px;font-weight:600;white-space:nowrap}
  .monitor-tab:hover{border-color:#eee6dd;background:#fdfbf8;color:#172748}
  .monitor-tab.active{border-color:#ecd6b9;background:#fffaf3;color:#a95b00;box-shadow:0 3px 9px rgba(96,61,20,.04)}
  .monitor-tab.active::after{content:"";position:absolute;left:10%;right:10%;bottom:-14px;height:3px;border-radius:3px 3px 0 0;background:#e88a00}
  .monitor-tab-icon{color:currentColor;font-size:19px;font-weight:400;line-height:1}.monitor-tab-icon.target-icon{font-size:20px}
  .fullscreen-button{display:grid;place-items:center;position:absolute;right:22px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid #e4ddd5;border-radius:12px;background:#fff;color:#071a3e;box-shadow:0 2px 7px rgba(32,25,19,.04)}
  .fullscreen-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
  .fullscreen-button:hover{background:#faf8f5;border-color:#d5ccc2}
}
@media(max-width:1080px){#portfolio-snapshots .dashboard-grid{grid-template-columns:1fr}#portfolio-snapshots .heading-actions{justify-content:flex-start}#portfolio-snapshots .monitor-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){#portfolio-snapshots{width:100%;left:auto;transform:none}#portfolio-snapshots .monitor-heading h1{font-size:38px}#portfolio-snapshots .heading-actions{gap:8px}#portfolio-snapshots .heading-actions button{padding:0 13px;min-height:44px}#portfolio-snapshots .fact-list{grid-template-columns:1fr}#portfolio-snapshots .snapshot-grid{grid-template-columns:1fr}}

/* Vestmind typography roles.
   Serif is reserved for the judgements and important intelligence; Inter owns
   navigation, labels, portfolio facts, controls, and explanatory language. */
b,strong{font-weight:600}
.recommendation-score strong,.goal-impact strong,.metric-number{font-family:'DM Serif Display',Georgia,serif;font-weight:400}
#portfolio-snapshots .summary-card span,
#portfolio-snapshots .summary-card small,
#portfolio-snapshots .attention-item dl,
#portfolio-snapshots .attention-card footer,
#portfolio-snapshots table,
#portfolio-snapshots .fact-list,
#portfolio-snapshots .intent-chip{font-family:Inter,sans-serif}

/* Portfolio Insights — editorial decision sheet. The landing page's DM Serif
   Display and Inter remain the only two faces used on this surface. */
#portfolio-insights{position:relative;left:50%;transform:translateX(-50%);width:min(1400px,calc(100vw - 64px));color:#071a3e}
#portfolio-insights::before,#portfolio-insights::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:390px;height:500px;opacity:.25;background:url('/assets/hero-pattern.svg') center/cover no-repeat}
#portfolio-insights::before{right:-105px;top:36px;transform:rotate(6deg)}
#portfolio-insights::after{left:-150px;bottom:-160px;transform:rotate(186deg)}
#portfolio-insights .insights-hero{margin:0 14px 26px}
#portfolio-insights .insights-hero h1{font:400 clamp(37px,3.5vw,52px)/1.05 'DM Serif Display',Georgia,serif;letter-spacing:-.025em}
#portfolio-insights .insights-hero h1 em{color:#d36a00}
#portfolio-insights .insights-hero p{font-size:13px;color:#293753;margin-top:12px}
#portfolio-insights .memory-link{min-width:190px;justify-content:center;border-color:#dcd5ce;box-shadow:0 4px 12px rgba(30,23,15,.04);color:#071a3e}
#portfolio-insights .recommended-card{border-color:#efc28f;border-radius:17px;padding:26px 38px 22px;background:rgba(255,255,255,.78);box-shadow:0 8px 26px rgba(64,41,13,.035)}
#portfolio-insights .recommendation-main{grid-template-columns:70px minmax(340px,1.65fr) .55fr .72fr;gap:24px}
#portfolio-insights .recommendation-icon{width:58px;height:58px;background:#fff2df;color:#c76500;font-size:28px}
#portfolio-insights .recommendation-copy small,#portfolio-insights .trade-plan>small{color:#cc6200;font-size:10px;letter-spacing:.025em}
#portfolio-insights .recommendation-copy h2{font:400 clamp(25px,2.3vw,36px)/1.05 'DM Serif Display',Georgia,serif;color:#071a3e;margin:7px 0 10px}
#portfolio-insights .recommendation-score strong,#portfolio-insights .goal-impact strong{font-family:Inter,sans-serif;font-size:25px;font-weight:600}
#portfolio-insights .goal-impact button{background:#081a46;border-radius:8px;font-size:10px}
#portfolio-insights .recommendation-details{margin-top:20px;padding:18px 20px;border:0;border-radius:13px;background:linear-gradient(90deg,#fff9f0,#fff5e7)}
.trade-pills{display:flex;align-items:center;gap:18px;margin-top:7px}
.trade-pill{display:flex;align-items:center;gap:11px;min-width:230px;padding:10px 15px;border:1px solid #ead6bf;border-radius:999px;background:rgba(255,255,255,.78);color:#071a3e;font-size:15px}
.trade-pill>i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 8px currentColor;opacity:.9;margin:0 7px}
.trade-pill.red>i{color:#ffebe8;background:#f2352b}.trade-pill.green>i{color:#e2f6e9;background:#18a958}
.trade-pill>span{margin-left:auto}.trade-pill b{font-weight:600}
#portfolio-insights .decision-why{display:grid;grid-template-columns:auto 1fr;gap:8px 26px;align-items:start;border-color:#e6dfd8}
#portfolio-insights .evidence-strip{grid-column:1;margin:0}
#portfolio-insights .what-would-change{grid-column:2;grid-row:1;margin:0}
#portfolio-insights .confidence-line{grid-column:2}
#portfolio-insights .impact-strip{border-color:#e6dfd8;margin-top:16px}
#portfolio-insights .metric-grid{display:none}

#insight-what-to-do{width:min(1420px,calc(100vw - 64px));margin-top:30px}
#insight-what-to-do>header h2{font:400 30px 'DM Serif Display',Georgia,serif;margin:0}
#insight-what-to-do>header .watching-note{color:#253550}
#insight-what-to-do .plan-note{max-width:750px;margin-top:3px}
.plan-strips{margin:18px 0 28px}
.plan-disclosure{border:1px solid #ded8d2;background:rgba(255,255,255,.88);overflow:hidden}
.plan-disclosure:first-child{border-radius:14px 14px 0 0}.plan-disclosure:last-child{border-top:0;border-radius:0 0 14px 14px}
.plan-strip{display:grid;grid-template-columns:34px 180px 1fr auto;align-items:center;gap:12px;width:100%;min-height:67px;padding:0 20px;border:0;background:transparent;text-align:left;color:#071a3e}
.plan-strip-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:50%}.plan-strip-icon i{width:7px;height:7px;border-radius:50%;background:currentColor}
.plan-strip-icon.sell{color:#f13128;background:#ffe8e4;box-shadow:0 0 0 7px #fff4f1}.plan-strip-icon.buy{color:#109849;background:#dff4e7;box-shadow:0 0 0 7px #f0faf4}
.plan-strip-total{font-size:12px}.plan-strip-total strong{font-size:13px;margin-right:4px}
.plan-strip-cta{display:flex;align-items:center;gap:14px;border:1px solid #dcd7d2;border-radius:999px;padding:10px 16px;background:#fff;font-size:10px}
.plan-strip-cta i{font-style:normal;font-size:14px;transition:transform .28s ease}.plan-disclosure.is-open .plan-strip-cta i{transform:rotate(180deg)}
.plan-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1),opacity .25s ease;background:#fffdfb}
.plan-panel-inner{min-height:0;overflow:hidden;padding:0 16px}
.plan-disclosure.is-open .plan-panel{grid-template-rows:1fr;opacity:1;border-top:1px solid #eee8e2}
.plan-disclosure.is-open .plan-panel-inner{padding-top:18px;padding-bottom:18px}
.rebalance-bands{border-color:#ded8d2;border-radius:14px;background:rgba(255,255,255,.88)}
.rebalance-bands>header h2{font:400 24px 'DM Serif Display',Georgia,serif}

@media(max-width:850px){#portfolio-insights,#insight-what-to-do{width:100%;left:auto;transform:none}.trade-pills{align-items:stretch;flex-direction:column}.trade-pill{min-width:0}.plan-strip{grid-template-columns:30px 1fr auto}.plan-strip-total{grid-column:2}.plan-strip-cta{grid-column:3;grid-row:1/3}.recommendation-details{display:block!important}}
@media(max-width:560px){#portfolio-insights .recommended-card{padding:20px}#portfolio-insights .insights-hero{margin-left:0;margin-right:0}.plan-strip{padding:10px 12px}.plan-strip-cta{padding:9px;font-size:0}.plan-strip-cta i{font-size:14px}#portfolio-insights .decision-why{display:block}.plan-strip-total{font-size:10px}}

/* ── Talk to my portfolio ─────────────────────────────────────────────────────

   The panel is Portfolio Studio's conversation, ported rather than reinterpreted:
   the same card, the same uppercase head, the same 34px-gapped thread, the same
   left-shouldered assistant bubble with its serif medallion, the same
   right-shouldered investor bubble with its read receipt, and the same composer
   — 64px textarea, soft-blue secondary button, navy gradient send. An investor
   who has talked to Vestmind while building a portfolio should not have to learn
   a second chat while monitoring one.

   The values below are Studio's own (`playground.html`, the
   `architect-reference-revamp` block and the bubble rules after it). Where the
   monitor adds something Studio has no need for — the valuation basis, the
   source chips under an answer — it is styled to sit inside that same card
   rather than beside it.

   Layout: the drawer is a *column of the page*, never a sheet over it. The
   grid below owns both tracks, so opening the assistant narrows the monitor
   instead of covering what the investor was reading. That matters more here
   than in Studio: the answer is about the thing on screen.                    */

:root{--architect-navy:#061852;--architect-blue:#0868f5;--architect-border:#e3e9f2;--architect-copy:#6e83aa;--chat-width:clamp(316px,27vw,404px)}

/* ── The two tracks ───────────────────────────────────────────────────────── */
.monitor-layout{display:grid;grid-template-columns:0 minmax(0,1fr);height:100%;min-height:0;transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1)}
body.chat-open .monitor-layout{grid-template-columns:var(--chat-width) minmax(0,1fr)}
.monitor-layout>*{min-width:0}
/* Placed explicitly, never auto-placed. A hidden drawer is `display:none` and
   leaves no grid item behind, so auto-placement would drop the monitor into the
   collapsed first track and squeeze it to its min-content width. */
#portfolio-chat{grid-column:1;grid-row:1}
.monitor-shell{grid-column:2;grid-row:1;width:auto;margin:10px}
.monitor-shell>*,.monitor-view{min-width:0}
/* Each of the three views is a deliberate full-bleed: it centres itself with
   `left:50%; translateX(-50%)` and takes `min(1400px, 100vw - gutters)`, so
   Portfolio Insights can run wider than the card it sits in. That trick is
   measured against the *viewport*, which the drawer does not change — so with
   the drawer open the view kept its full-viewport width, overflowed the
   narrowed shell equally on both sides, and was clipped on the left. That is
   what swallowed the start of every line.

   With the assistant open the bleed is simply switched off and the view becomes
   the shell's content box. Subtracting the drawer's width from the `100vw`
   arithmetic instead would work too, and would break the next time somebody
   changed the shell's padding. */
body.chat-open #portfolio-insights,
body.chat-open #portfolio-snapshots,
body.chat-open #portfolio-target{position:relative;left:auto;transform:none;width:100%}

/* ── The pull tab ─────────────────────────────────────────────────────────── */
.chat-rail{position:fixed;left:5px;top:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(-50%);width:52px;min-height:300px;border:2px solid #d79a27;border-radius:27px;background:radial-gradient(circle at 72% 12%,#183552 0,#0a223c 29%,#03172e 76%);color:#f4cb70;padding:16px 6px 14px;box-shadow:inset 0 0 0 1px #6e410b,inset 0 0 0 3px rgba(255,225,139,.32),inset 0 0 16px rgba(0,0,0,.36),2px 3px 8px rgba(2,16,34,.24);transition:transform .18s ease,box-shadow .18s ease}
.chat-rail:hover{box-shadow:inset 0 0 0 1px #6e410b,inset 0 0 0 3px rgba(255,225,139,.42),inset 0 0 16px rgba(0,0,0,.36),3px 5px 11px rgba(2,16,34,.3);transform:translateY(-50%) translateX(1px)}
.chat-rail-label{writing-mode:vertical-rl;font:400 12px/1 'DM Serif Display',Georgia,serif;letter-spacing:.13em;text-transform:uppercase;color:#e8bd66}
.chat-rail-flourish{display:flex;align-items:center;gap:3px;color:#edbd51;font-size:13px;line-height:1}.chat-rail-flourish i{display:block;width:8px;height:1px;background:linear-gradient(90deg,transparent,#d99a28)}.chat-rail-flourish i:last-child{background:linear-gradient(90deg,#d99a28,transparent)}
body.chat-open .chat-rail{display:none}

/* Layered speech bubbles echo the reference badge's polished gold and navy. */
.chat-rail-icon,.chat-title-icon{display:block;width:34px;height:34px;flex:0 0 auto}
.chat-title-icon{width:18px;height:18px;display:inline-block;vertical-align:-3px;margin-right:9px}
.chat-rail-icon svg,.chat-title-icon svg{width:100%;height:100%;display:block}
.chat-rail .bubble-back{fill:url(#rail-gold);stroke:#f5d273;stroke-width:1}
.chat-rail .bubble-front{fill:#071d35;stroke:url(#rail-gold);stroke-width:3}
.chat-rail .bubble-dots{fill:url(#rail-gold)}

/* ── The panel — Portfolio Studio's card ──────────────────────────────────── */
#portfolio-chat{display:flex;flex-direction:column;min-height:0;margin:10px 0 10px 10px;border:1px solid var(--architect-border);border-radius:17px;background:#fff;box-shadow:0 2px 12px rgba(6,24,82,.045);overflow:hidden}
#portfolio-chat[hidden]{display:none}

#portfolio-chat>h2{flex:0 0 auto;display:grid;grid-template-columns:1fr auto;row-gap:15px;align-items:start;margin:0;padding:30px 24px 20px;font-size:16px;text-transform:uppercase;color:var(--architect-navy)}
/* Studio's title is one short word and sits at 18px. "Talk to my portfolio" is
   four, and at that size it wrapped under the two head buttons. Same uppercase
   treatment, one notch down, so it stays a single line in the narrowest panel. */
#portfolio-chat .conversation-title{font-size:15px;font-weight:600;letter-spacing:.05em;min-width:0}
/* Studio sets 700 in several of these; the monitor loads Inter 400/500/600 and
   disables synthesis, so a 700 here renders as 600 and merely misdeclares
   itself. Same weight on screen, declared honestly. */
#portfolio-chat .conversation-title small{display:block;margin-top:6px;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--architect-copy);line-height:1.45}
.chat-head-actions{display:flex;gap:8px}
#portfolio-chat .full-btn{width:38px;height:38px;border:1px solid var(--architect-border);border-radius:10px;background:#fff;color:#7083a7;font-size:17px;line-height:1;display:grid;place-items:center}
#portfolio-chat .full-btn:hover{background:#f5f8fd;color:var(--architect-navy)}

/* What the answers are measured against. Studio has no equivalent; this is the
   monitor's "Saved marks" line, in the panel's own idiom. */
.chat-basis{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:0 24px 4px;padding:9px 12px;border:1px solid #d8e6fb;border-radius:10px;background:#eef5ff;color:#1e3a8a;font-size:11px;line-height:1.45}
.chat-basis[hidden],.chat-warning[hidden]{display:none}
.chat-warning{flex:0 0 auto;margin:0 24px 4px;padding:10px 12px;border:1px solid #f0dcc2;border-radius:10px;background:#fdf7ef;color:#7a4a05;font-size:11px;line-height:1.5}

/* ── The thread ───────────────────────────────────────────────────────────── */
#portfolio-chat .chat{flex:1 1 100px;min-height:120px;display:flex;flex-direction:column;gap:34px;overflow:auto;padding:4px 22px 10px;scrollbar-gutter:stable}
#portfolio-chat .msg{position:relative;max-width:78%;padding:17px 20px;border:0;border-radius:0 17px 17px 17px;background:linear-gradient(110deg,#f8f7ff,#f2efff);color:#11122b;font:500 13px/1.55 Inter,sans-serif;box-shadow:none}
#portfolio-chat .msg.ai{margin-left:64px}
#portfolio-chat .msg.ai:before{content:"V";position:absolute;left:-64px;top:0;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#f8f5ff,#eee9ff);color:#5422e7;font:italic 600 25px/1 'DM Serif Display',Georgia,serif}
#portfolio-chat .msg b{font-weight:650}
#portfolio-chat .msg p{margin:7px 0 0}
#portfolio-chat .msg p:first-child{margin:0}
#portfolio-chat .msg small.at{position:absolute;left:2px;top:100%;margin-top:9px;color:#6c708e;font-size:10px;letter-spacing:0;white-space:nowrap}
#portfolio-chat .msg.me{align-self:flex-end;margin:0 0 6px;border-radius:17px 17px 0 17px;background:linear-gradient(110deg,#f0e9ff,#e8dcff);color:#11122b}
#portfolio-chat .msg.me small.at{left:auto;right:2px}
#portfolio-chat .msg.me small.at:after{content:" ✓✓";color:#5523e8;font-weight:800}
#portfolio-chat .msg.thinking{color:#6c708e;font-style:italic}
#portfolio-chat .msg.failed{background:linear-gradient(110deg,#fff4f2,#ffeae6);color:#8c1d10}

/* Provenance. Chips name the reading an answer came from; the panel underneath
   names the fields it cited. Portfolio Monitor already labels its valuation
   basis "Saved marks" on the Snapshot tab, and an answer that quotes a price
   has to carry the same label. */
.chat-cites{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:13px}
.chat-cite{border:1px solid #dfe6f2;border-radius:999px;background:#fff;color:#3f5480;padding:4px 9px;font-size:10px;font-weight:600}
.chat-cite.asof{border-color:#e7e1d6;background:#fdfaf5;color:#7a5a22;font-weight:500}
.chat-evidence{margin-top:10px;font-size:11px}
.chat-evidence summary{cursor:pointer;color:var(--architect-blue);font-weight:600;list-style:none}
.chat-evidence summary::-webkit-details-marker{display:none}
.chat-evidence summary:before{content:"▸ ";font-size:10px}
.chat-evidence[open] summary:before{content:"▾ "}
.chat-evidence dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;margin:9px 0 0;color:#4d5570;line-height:1.5}
.chat-evidence dt{color:#7184a8}
.chat-evidence dd{margin:0;overflow-wrap:anywhere}
.chat-gaps{margin:10px 0 0;padding:9px 11px;border-radius:8px;background:#fdf7ef;color:#7a4a05;font-size:11px;line-height:1.5}

/* ── Suggested questions — Studio's pills ─────────────────────────────────── */
#portfolio-chat .suggestions{flex:0 0 auto;display:none;flex-wrap:wrap;gap:7px;padding:0 22px 10px}
#portfolio-chat .suggestions.show{display:flex}
#portfolio-chat .suggestion{border:1px solid #cbd5e1;border-radius:999px;background:#fff;color:#0f172a;padding:8px 14px;font:600 12px Inter,sans-serif;box-shadow:0 1px 3px rgba(6,24,82,.05);transition:.15s ease}
#portfolio-chat .suggestion:hover{border-color:var(--architect-blue);background:#eff6ff;color:var(--architect-blue)}
#portfolio-chat .suggestion:focus-visible{outline:2px solid var(--architect-blue);outline-offset:2px}

/* ── The composer — Studio's, to the pixel ────────────────────────────────── */
#portfolio-chat .input{flex:0 0 auto;display:grid;grid-template-columns:1fr 58px;gap:11px;padding:26px 28px 12px;border-top:1px solid var(--architect-border)}
#portfolio-chat .input.stopping{grid-template-columns:1fr 58px 58px}
#portfolio-chat textarea{height:64px;border:1px solid var(--architect-border);border-radius:11px;background:#fff;color:var(--architect-navy);font:inherit;font-size:14px;padding:20px;resize:none;box-shadow:inset 0 1px 3px rgba(6,24,82,.04);width:100%}
#portfolio-chat textarea:focus{outline:none;border-color:var(--architect-blue);box-shadow:0 0 0 3px rgba(8,104,245,.12)}
#portfolio-chat .mic-btn,#portfolio-chat .send{height:62px;border:0;border-radius:11px;background:#eef5ff;color:var(--architect-blue);font-size:20px;box-shadow:none}
#portfolio-chat .send{background:linear-gradient(145deg,#07388f,#002874);color:#fff;font-size:24px;font-weight:800}
#portfolio-chat .send:hover{background:linear-gradient(145deg,#0a44ad,#00358f)}
#portfolio-chat .send[disabled]{opacity:.45;cursor:default}
#portfolio-chat .mic-btn[hidden]{display:none}

#portfolio-chat .hint{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:5px 28px 25px;color:#6f83a8;font-size:11px;line-height:1.45}
#portfolio-chat .hint>span{min-width:0}
#portfolio-chat .transcript-link{flex:0 0 auto;border:0;background:transparent;color:#1d6bf3;padding:0;font:600 11px Inter,sans-serif;white-space:nowrap}
#portfolio-chat .transcript-link:hover{text-decoration:underline}

/* ── Giving the monitor its width back ────────────────────────────────────── */
/* The viewport does not change when the drawer opens, so the monitor's own
   media queries cannot help it. These do. */
@media(min-width:901px){
  body.chat-open .monitor-shell{padding:0 24px}
  body.chat-open .monitor-tabs{margin:0 -24px;padding:0 58px 0 68px}
  body.chat-open .monitor-view.active{padding-top:30px}
}
/* Each view's own grids are declared id-scoped, so these have to be too — a
   class-level override would lose to `#portfolio-snapshots .dashboard-grid`
   and the two-column layout would survive into a column too narrow for it. */
@media(max-width:1560px){
  body.chat-open #portfolio-snapshots .dashboard-grid,
  body.chat-open #portfolio-snapshots .snapshot-grid,
  body.chat-open .target-grid,
  body.chat-open .trade-columns{grid-template-columns:minmax(0,1fr)}
  body.chat-open #portfolio-insights .recommendation-main{grid-template-columns:66px minmax(0,1fr)}
  body.chat-open .recommendation-score,body.chat-open .goal-impact{border-left:0;padding-left:0}
  body.chat-open .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.chat-open .summary-card{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.chat-open .summary-card>div:first-child{grid-column:1/-1;padding-bottom:16px}
  body.chat-open .action-row{grid-template-columns:54px minmax(0,1fr) 132px 15px}
  body.chat-open .action-row dl{display:none}
  body.chat-open .allocation-body{grid-template-columns:minmax(0,1fr);justify-items:center}
  body.chat-open .target-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.chat-open .trade-arrow{transform:rotate(90deg);justify-self:center}
}
@media(max-width:1180px){
  body.chat-open .mini-grid,body.chat-open .summary-card{grid-template-columns:minmax(0,1fr)}
  body.chat-open .summary-card>div{border-left:0;padding:14px 0}
  body.chat-open .target-kpis{grid-template-columns:minmax(0,1fr)}
  body.chat-open #portfolio-snapshots .fact-list,
  body.chat-open #portfolio-snapshots .attention-item dl{grid-template-columns:minmax(0,1fr)}
  body.chat-open .impact-strip{gap:16px;flex-wrap:wrap}
}

/* ── Too narrow to divide ─────────────────────────────────────────────────── */
/* Below this the monitor cannot be halved and still read, so the drawer covers
   it and says so with a scrim. */
.chat-scrim{position:fixed;inset:0;z-index:44;background:rgba(17,17,38,.32);backdrop-filter:blur(2px);display:none}
.chat-scrim[hidden]{display:none}
@media(max-width:900px){
  .monitor-layout{display:block;grid-template-columns:none}
  body.chat-open .monitor-layout{grid-template-columns:none}
  .monitor-shell{width:calc(100% - 20px);margin:10px auto}
  #portfolio-chat{position:fixed;left:0;top:0;bottom:0;z-index:45;width:min(430px,100vw);margin:0;border:0;border-right:1px solid var(--architect-border);border-radius:0;box-shadow:10px 0 40px rgba(24,18,64,.10)}
  .chat-scrim{display:block}
}
@media(max-width:640px){
  #portfolio-chat .msg{max-width:83%}
  #portfolio-chat .msg.ai{margin-left:48px}
  #portfolio-chat .msg.ai:before{left:-48px;width:36px;height:36px;font-size:20px}
  #portfolio-chat .input{padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){.chat-rail{transition:none}.monitor-layout{transition:none}}