/* Scope every rule: the existing Designer keeps its own layout. Colour comes from theme variables only — a light theme can land later without touching this file, and nothing here hard-codes a palette. */ .yv { position:relative; max-width:1240px; margin:auto; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); font-size:13px; } /* The workspace takes the room the window gives it: the shell column becomes the height budget, and the card spends all of it instead of sitting in a fixed rectangle. */ .yield-active .main { height:100dvh; } .yield-active #yieldWorkspace { flex:1; min-height:0; max-width:none; display:flex; } .yield-active .yv { max-width:none; width:100%; margin:0; border:0; border-radius:0; display:flex; flex-direction:column; min-height:0; } .yv h1,.yv h2,.yv h3 { font-family:var(--display); font-weight:600; margin:0; } .yv h1 { font-size:22px; letter-spacing:-.04em; } .yv h2 { font-size:16px; } .yv h3 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); } .yv p { margin:0; } /* While the universe is read the plane is not drawn: it blurs in once the markets are there. The progress line is announced at once but only shown if the read runs past two seconds, so an ordinary load shows no loading text while a slow server build still says what it reads. */ .yv-loading .yv-workspace,.yv-loading .yv-basket { visibility:hidden; opacity:0; filter:blur(8px); } .yv-workspace,.yv-basket { transition:opacity .7s ease-out, filter .7s ease-out, visibility 0s; } .yv-startup-status { position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-2); font-size:13px; opacity:0; animation:yv-status-late .4s ease-out 2s forwards; } @keyframes yv-status-late { to { opacity:1; } } @media (prefers-reduced-motion: reduce) { .yv-workspace,.yv-basket { transition:none; } } .yield-active #universeLoad { display:none; } .yv a { color:var(--accent); } .yv button { border:1px solid var(--line-strong); border-radius:4px; padding:5px 9px; min-width:26px; min-height:28px; font-size:12px; } .yv button:not(.yv-dot):hover:not(:disabled):not([aria-disabled=true]) { border-color:var(--accent); background:var(--accent-soft); } .yv button:not(.yv-dot)[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .yv button:disabled,.yv [aria-disabled=true] { opacity:.45; cursor:not-allowed; } .yv :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .yv input,.yv select { width:100%; min-width:0; font-size:12px; min-height:30px; } .yv input:not([type=range]):not([type=checkbox]),.yv select,.yv-input { border:1px solid var(--line-strong); border-radius:4px; background:var(--inset); min-height:32px; padding:5px 8px; } .yv input[type=number] { font-variant-numeric:tabular-nums; } /* Ranges draw their own track. The global `input` rule gives every input a padded, bordered box; on a native range that box is what the eye reads as the track, so the thumb at 0 and 100 stopped short of its ends. Here the track is painted exactly over the thumb's travel: inset by half a thumb on each side, so 0 is the left end and 100 the right one. */ .yv input[type=range] { appearance:none; -webkit-appearance:none; padding:0; border:0; border-radius:0; margin:0; height:20px; background:transparent; cursor:pointer; --yv-thumb:18px; background-image:linear-gradient(var(--line-strong),var(--line-strong)); background-repeat:no-repeat; background-size:calc(100% - var(--yv-thumb)) 6px; background-position:calc(var(--yv-thumb) / 2) center; } .yv input[type=range]::-webkit-slider-runnable-track { height:var(--yv-thumb); background:transparent; border:0; } .yv input[type=range]::-moz-range-track { height:var(--yv-thumb); background:transparent; border:0; } .yv input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:var(--yv-thumb); height:var(--yv-thumb); border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-strong); } .yv input[type=range]::-moz-range-thumb { width:var(--yv-thumb); height:var(--yv-thumb); border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-strong); } .yv input[type=range]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .yv-position.is-armed input[type=range] { background-image:linear-gradient(var(--ink-2),var(--ink-2)); } .yv .yv-input { display:flex; align-items:center; gap:4px; min-width:0; font:12px var(--mono); } .yv .yv-input input:not([type=range]) { flex:1; width:0; min-height:30px; padding:0; border:0; border-radius:0; background:transparent; } .yv .yv-input > span,.yv .yv-input > small { flex:none; white-space:nowrap; color:var(--ink-2); } .yv .yv-input { padding-block:0; } .yv input:not([type=range]):focus,.yv select:focus,.yv-input:focus-within { border-color:var(--accent); } .yv .yv-input:focus-within { outline:2px solid var(--accent); outline-offset:2px; } .yv .yv-input input:focus { border:0; outline:none; } .yv input[type=number]:invalid,.yv .yv-input:has(input:invalid) { border-color:var(--bad); } .yv .yv-input input:invalid { border:0; } .yv input:disabled,.yv select:disabled,.yv .yv-input:has(input:disabled) { opacity:.45; cursor:not-allowed; } @supports (appearance:base-select) { #yieldMarketFilters select, #yieldMarketFilters select::picker(select) { appearance:base-select; } #yieldMarketFilters select::picker(select) { background:var(--raised); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius-s); padding:4px; margin-top:4px; max-block-size:min(320px,60vh); box-shadow:0 8px 24px rgba(0,0,0,.3); } #yieldMarketFilters select::picker-icon { color:var(--ink-2); } #yieldMarketFilters option { padding:6px 10px; border-radius:3px; color:var(--ink-2); } #yieldMarketFilters option:checked { background:var(--accent-soft); color:var(--ink); } #yieldMarketFilters option:is(:hover,:focus-visible) { background:var(--line-strong); color:var(--ink); outline:none; } } .yv .yv-input input:disabled { opacity:1; } .yv small { display:block; font-size:11px; color:var(--ink-2); } .yv-muted { color:var(--ink-2); } .yv-note { font-size:11px; line-height:1.5; } .yv-draft-status { padding:6px 16px; border-bottom:1px solid var(--line-strong); } .yv-eyebrow { color:var(--ink-2); text-transform:uppercase; font:11px var(--mono); letter-spacing:.08em; } .yv-figure { font:500 12px var(--mono); text-align:right; } .yv-chips { display:flex; gap:5px; flex-wrap:wrap; } .yv-assets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .yv-assets .yv-other { min-width:0; min-height:0; padding:5px 9px; background:var(--panel-control, var(--inset)); text-align:center; text-align-last:center; justify-content:center; align-items:center; } #yieldMarketFilters .yv-assets .yv-other { border-style:dashed; } #yieldMarketFilters .yv-assets .yv-other:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-soft); } #yieldMarketFilters .yv-assets .yv-other::picker-icon { display:none; } .yv-filters > .yv-results { flex:none; } .yv-glyph-map { display:none; } .yv-status { color:var(--ink-2); display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:0; border:0; font-size:11px; } .yv-results { display:grid; gap:8px; margin-bottom:14px; font-size:11px; font-variant-numeric:tabular-nums; } .yv-error { color:var(--serious); } /* 206 / plane / 268–340 — the original card proportions, so the basket bar stays on screen. */ /* One card, one screen: the columns scroll inside a fixed workspace so the basket bar — the totals an allocator watches while sizing — is never pushed under the fold. */ .yv-workspace { --filter-width:206px; --detail-width:minmax(201px,255px); display:grid; grid-template-columns:var(--filter-width) minmax(320px,1fr) var(--detail-width); height:530px; } .yield-active .yv-workspace { flex:1; min-height:260px; height:auto; } .yv-filters { grid-column:1; padding:14px; min-width:0; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--line); } .yv-filter-controls { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; } /* The detail column is a scrolling body under a fixed foot: the add actions stay in reach however far the engine figures run. */ .yv-detail { grid-column:3; border-left:1px solid var(--line); min-width:0; display:flex; flex-direction:column; overflow:hidden; } .yv-detail-body { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; padding:14px; } /* The heading stays put above the scroller, so the floating panel can be grabbed at any scroll. */ .yv-detail-head { flex:none; margin:0; padding:14px 14px 0; } .yv-detail-head .yv-expand { margin-left:auto; display:inline-grid; place-items:center; min-width:28px; min-height:28px; border-radius:6px; color:var(--ink-3); } .yv-detail-head .yv-expand:hover,.yv-detail-head .yv-expand:focus-visible { color:var(--ink-1); background:var(--accent-soft); } .yv-detail-head .yv-expand + .yv-grip { margin-left:0; } /* So does the market name: the figures scroll under it and it never leaves the panel. */ /* The rule under it marks where the scrolling figures begin. */ .yv-detail > .yv-detail-id { flex:none; position:static; margin:0 14px; padding-bottom:8px; border-bottom:1px solid var(--line); background:none; } .yv-detail-head + .yv-detail-body { padding-top:4px; } .yv-detail-id + .yv-detail-body { padding-top:8px; } .yv-detail-foot { flex:none; padding:10px 14px 8px; border-top:1px solid var(--line); background:var(--surface); } .yv-detail-foot { display:grid; gap:8px; } .yv-detail > .yv-limit-note { padding:0 14px; margin:8px 0 0; } .yv-foot-pair { grid-template-columns:1fr 1fr; } .yv-detail-foot button { width:100%; min-height:32px; } /* #1178 put Capital in its own bar under both drawer tabs. It carries no save: the one save belongs to the allocation half (below), so Market evidence renders none. */ /* The one save, at the bottom right of the allocation half. It shares the line the cash and capacity notes already occupy, so it costs the drawer no height (#1178 fits that drawer). */ .yv-alloc-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; } .yv-alloc-notes { min-width:0; } .yv-alloc-notes > p:last-child { margin-bottom:0; } .yv-alloc-save { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:none; } .yv-alloc-save button { width:auto; min-width:112px; min-height:32px; flex:none; } .yv-alloc-save [role=status] { margin:0 auto 0 0; text-align:left; } .yv-filter-gaps summary { cursor:pointer; } .yv-filter-gaps ul { margin:6px 0 0; padding-left:16px; } .yv-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-size:12px; } .yv-field strong { font:500 18px var(--font); color:var(--accent); font-variant-numeric:tabular-nums;} .yv fieldset { border:0; padding:0; margin:0 0 16px; min-width:0; } .yv legend { margin-bottom:7px; font-weight:500; } /* A control we cannot honour is shown in place, inert, with the reason — not deleted. */ .yv-off { color:var(--ink-2); gap:4px; } .yv-off small { grid-column:1 / -1; font-size:10px; line-height:1.4; } .yv-off-box { width:11px; height:11px; border:1px solid var(--line-strong); border-radius:2px; display:inline-block; opacity:.5; } .yv-explore { position:relative; min-width:0; padding:8px 16px; display:flex; flex-direction:column; overflow:hidden; } .yv-explore > [data-part=chart] { display:flex; flex-direction:column; flex:1; min-height:0; } .yv-section-heading,.yv-list-title { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; } .yv-chart-tools { position:absolute; top:8px; right:55px; z-index:7; display:flex; gap:4px; padding:2px; border:1px solid var(--line); border-radius:6px; background:color-mix(in srgb,var(--surface) 94%,transparent); cursor:default; } /* Owner, 2026-09-23: the map's main controls, a size step over the shared 28px button. */ .yv-chart-tools button { min-height:28.35px; min-width:26px; padding:4px 7.2px; font:11.34px var(--mono); background:transparent; } .yv-chart-status { position:absolute; top:48px; left:26px; z-index:5; max-width:min(300px,calc(100% - 100px)); background:color-mix(in srgb,var(--surface) 90%,transparent); } .yv-chart-status:empty { display:none; } .yv-rail-tools { position:absolute; inset:0; z-index:7; pointer-events:none; } .yv-rail-tools .yv-panel-toggle { position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto; background:color-mix(in srgb,var(--surface) 82%,transparent); backdrop-filter:blur(4px); } .yv-rail-tools [data-action=filterToggle] { left:0; border-radius:0 6px 6px 0; } .yv-rail-tools [data-action=collapse] { right:0; border-radius:6px 0 0 6px; } /* The plane: the field scales, the marks do not. Zoom spreads the field instead of magnifying every dot into its neighbour. */ .yv-plane { position:relative; height:436px; flex:none; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:var(--inset); touch-action:none; -webkit-user-select:none; user-select:none; cursor:grab; } .yield-active .yv-plane { flex:1; height:auto; min-height:240px; } .yv-plane:active { cursor:grabbing; } /* #1004: no raster caching here — the browser must redraw the marks at the current scale, or a zoomed-in plane shows soft, resampled dots. */ .yv-plane-field { --k:1; --ik:1; position:absolute; inset:0; transform-origin:0 0; } .yv-plot { position:absolute; inset:0 48px 24px 0; overflow:hidden; } .yv-grid { position:absolute; inset:0 48px 24px 0; pointer-events:none; } .yv-labels { position:absolute; inset:0; pointer-events:none; } .yv-axis-control { position:absolute; z-index:5; touch-action:none; } .yv-axis-y { right:0; top:0; bottom:24px; width:48px; cursor:ns-resize; } .yv-axis-x { left:0; bottom:0; right:48px; height:24px; cursor:ew-resize; } .yv-axis-control:focus-visible { outline:1px solid var(--accent); outline-offset:-1px; } .yv-axis-control[aria-disabled="true"] { cursor:default; } .yv-grid-y { position:absolute; left:0; width:100%; border-top:1px solid var(--line); } .yv-grid-x { position:absolute; top:0; height:100%; border-left:1px solid var(--line); } .yv-y-tick,.yv-x-tick { position:absolute; font:11px var(--mono); color:var(--ink-2); background:var(--inset); padding:0 3px; } .yv-y-tick { right:-48px; top:0; width:48px; padding-left:6px; text-align:left; transform:translateY(-50%); } .yv-x-tick { left:0; bottom:-20px; transform:translateX(-50%); } .yv .yv-dot { position:absolute; width:calc(var(--d) / 2); height:calc(var(--d) / 2); min-width:0; min-height:0; padding:0; border:0; border-radius:50%; background:var(--accent); opacity:.55; transform:translate(-50%,-50%) scale(var(--ik,1)); } .yv .yv-dot.is-unknown { box-shadow:inset 0 0 0 1px var(--ink-2); } .yv .yv-dot:hover { opacity:.9; z-index:2; } .yv .yv-dot.is-selected { opacity:1; outline:2px solid var(--ink); outline-offset:2px; z-index:3; } .yv .yv-dot:focus-visible { z-index:4; } .yv .yv-dot.is-waiting { visibility:hidden; } /* Optical centring: the line box centres the FONT (ascent 10 / descent 3), which leaves the x-height band ~1px low against the bubble's true centre. */ .yv .yv-label { pointer-events:auto; min-width:0; min-height:0; border:0; cursor:pointer; position:absolute; transform:translateY(-50%) translateY(-0.9px); font:10px var(--mono); color:var(--ink-2); background:var(--inset); padding:0 3px; white-space:nowrap; border-radius:2px; } .yv .yv-label.is-selected { color:var(--ink); } /* A name is text, not a chip: selection and hover brighten the ink only. The generic pressed-button treatment would paint an accent box over the plane (#1063, owner). */ .yv .yv-labels button.yv-label:not(.yv-dot):hover:not([aria-disabled=true]), .yv .yv-labels button.yv-label:not(.yv-dot)[aria-pressed=true] { color:var(--ink); border:0; background:transparent; } /* One control: hovering either half lights both, and the name stops hiding what is under it. */ .yv .yv-labels button.yv-label.is-hot { color:var(--ink); background:transparent; text-shadow:0 0 3px var(--page), 0 0 3px var(--page), 0 0 2px var(--page); } /* Same lift as :hover (opacity .9, #1006) plus a shared ring, so pointing at either half looks identical whichever half the pointer is on. */ .yv .yv-dot.is-hot { opacity:.9; z-index:2; box-shadow:0 0 0 1px var(--ink); } .yv .yv-label:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .yv-edge,.yv-zoomtag { position:absolute; font:11px var(--mono); color:var(--ink-2); pointer-events:none; } .yv-zoomtag { font-size:10px; } .yv-edge-y { top:48px; right:58px; } /* The off-chart hint sits left of the x-axis name on its line, never over it (#2349). */ .yv-edge-x-row { position:absolute; right:58px; bottom:30px; display:flex; align-items:center; gap:8px; z-index:5; pointer-events:none; } .yv-edge-x-row .yv-edge-x { position:static; } .yv-zoomtag { top:8px; left:10px; } .yv-chart-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; text-align:center; gap:8px; color:var(--ink-2); } .yv-chart-empty span { font-size:11px; } /* The list is the plane's equal-access twin, not a permanent 180px peephole under it. */ .yv-list-panel { -webkit-user-select:text; user-select:text; position:absolute; inset:0; z-index:6; background:var(--surface); border-radius:5px; padding:44px 12px 10px; display:flex; flex-direction:column; } .yv-list-title { margin-bottom:6px; font-size:11px; } /* The list covers the plane, so it carries the plane's disclosure while it is open (#1635). Beside the heading, not above it: the rows keep every pixel they had. */ .yv-list-status { margin-right:auto; } .yv-list-status:empty { display:none; } /* The first column is frozen and opaque, so a free horizontal scroll parks the next column part-way under it and `Ethereum` renders as `thereum` — a different word, with no mark on it (#1648). Snapping the scroll to the frozen edge means every column is either wholly readable or wholly off: no value is ever sliced into another value. --yv-frozen is the ONE width; the frozen column and the snap inset must never disagree. */ .yv-market-list { --yv-frozen:128px; flex:1; min-height:0; overflow:auto; scrollbar-width:thin; touch-action:pan-x pan-y; cursor:default; overflow-anchor:none; scroll-snap-type:x mandatory; scroll-padding-left:var(--yv-frozen); } .yv-market-table th:not(:first-child),.yv-market-table td:not(:first-child) { scroll-snap-align:start; } .yv-market-table { border-collapse:separate; border-spacing:0; table-layout:fixed; width:1433px; font-size:11px; } .yv-market-table th { position:sticky; top:0; z-index:1; background:var(--surface); text-align:left; vertical-align:top; padding:4px; border-bottom:1px solid var(--line); } .yv-market-table th:first-child { width:var(--yv-frozen); } /* Name through Chain fit the list beside Market detail at 1440 (693px of 697), so same-asset rows show their chain (#2983). */ .yv-market-table th[data-column="proj"] { width:130px; } .yv-market-table th[data-column="chain"] { width:105px; } .yv-market-table th[data-column="net"],.yv-market-table th[data-column="drag"],.yv-market-table th[data-column="est"] { width:110px; } .yv .yv-market-table th > button { width:100%; padding:4px 2px; border:0; text-align:left; white-space:nowrap; font-size:11px; min-height:28px; } .yv .yv-market-table th small { display:inline; font-size:11px; } .yv-column-filter { display:flex; flex-direction:column; gap:3px; } .yv .yv-column-filter input { min-width:0; width:100%; padding:4px; font-size:11px; height:28px; } .yv-market-table td { height:38px; box-sizing:border-box; padding:0 6px; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; } .yv-market-table td.yv-table-number { text-align:right; font-family:var(--mono); } .yv-market-table tr[data-market-id] { cursor:pointer; } .yv-market-table tr[data-market-id]:hover td,.yv-market-table tr.is-selected td { background:color-mix(in srgb,var(--accent) 14%,var(--surface)); box-shadow:inset 0 -1px var(--accent); } .yv .yv-market-table td > button { display:block; width:100%; min-height:32px; padding:4px 2px; border:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .yv-market-table td:first-child { position:sticky; left:0; background:var(--surface); } .yv-market-table th:first-child { left:0; z-index:2; } .yv-market-table tr.is-selected td:first-child { box-shadow:inset 3px 0 var(--accent); } .yv-market-table tr[data-market-id]:hover td:first-child,.yv-market-table tr.is-selected td:first-child { background:color-mix(in srgb,var(--accent) 14%,var(--surface)); } .yv .yv-market-table tr[data-market-id]:is(:hover,.is-selected) td > button.yv-market-row { background:transparent; } .yv-more { width:100%; margin-top:8px; } /* Which market these figures belong to stays on screen while they are read: the rail now scrolls the leverage answer into view (#1627), and without this the name goes with it. The wrapper carries the stick, not the heading, because `top` is measured to the MARGIN box and the heading's own 8px would leave a strip for content to pass through. `top` is the NEGATIVE of .yv-detail-body's padding-top for the same reason: sticky pins to the scroller's CONTENT box, so at 0 a 14px band of scrolling text shows above the pinned name. */ .yv-detail-id { position:sticky; top:-14px; z-index:3; background:var(--surface); display:flow-root; padding-bottom:2px; } .yv-detail-name { overflow-wrap:anywhere; margin:8px 0 2px !important; font-size:17px; text-wrap:balance; } .yv-map-mode .yv-detail-name { font-size:16px; } .yv-detail-sub { font-size:11px; line-height:1.5; } .yv-detail-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr)); gap:10px; margin:12px 0 10px; } .yv dt { color:var(--ink-2); font-size:11px; } .yv dd { font:500 13px var(--mono); margin:4px 0 0; overflow-wrap:anywhere; } .yv-detail-metrics dd { white-space:nowrap; font-size:18px; letter-spacing:-.04em; color:var(--accent); font-family:var(--font); font-variant-numeric:tabular-nums;} .yv-detail-metrics .yv-fact:first-child dd { font-size:21px; } /* In the detail panel the figures read as aligned label–value rows, net first and largest. */ .yv-detail .yv-detail-metrics { grid-template-columns:none; gap:4px; margin:10px 0 6px; } .yv-detail .yv-detail-metrics .yv-fact { display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-width:0; } .yv-detail .yv-detail-metrics dt { font-size:12px; } .yv-detail .yv-detail-metrics dd { margin:0; font-size:15px; letter-spacing:-.02em; } .yv-detail .yv-detail-metrics .yv-fact:first-child dd { font-size:22px; letter-spacing:-.04em; } .yv-detail .yv-metrics-after { margin-top:0; } /* A market's rate sits in the same box as a loop's (#2392): the rate that leads, then net in accent. Both boxes bleed their padding and border into the gutter so their values share the panel's right edge. */ .yv-detail .yv-lev-card { margin-inline:-11px; } .yv-detail .yv-key { gap:2px; padding:8px 10px; margin:8px -11px 6px; border:1px solid var(--accent); border-radius:6px; background:var(--accent-soft); } .yv-detail .yv-key dt { font-size:11px; color:var(--muted); } .yv-detail .yv-key dd,.yv-detail .yv-key .yv-fact:first-child dd { font:600 17px var(--font); font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1.2; color:var(--ink); } .yv-detail .yv-key .yv-fact:last-child:not(:first-child) dd { color:var(--accent); } .yv-detail .yv-key dd.neg,.yv-detail .yv-key .yv-fact:last-child dd.neg { color:#e57d78; } .yv-detail .yv-metrics-after .yv-fact:first-child dd { font-size:15px; letter-spacing:-.02em; } .yv-detail .yv-detail-metrics + .yv-split { margin:-2px 0 4px; } /* Sparkline: the stroke is the only mark, so the eye reads shape, not chrome. */ .yv-hist { display:grid; gap:4px; margin:6px 0 4px; } .yv-hist-head { display:flex; justify-content:space-between; gap:8px; align-items:center; min-height:24px; } .yv-hist-plot { position:relative; min-width:0; } .yv-hist-status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-2); font-size:11px; } .yv-hist-status .yv-hist-state { margin:0; padding:4px 8px; max-height:100%; overflow:auto; text-align:center; } .yv-hist-state { margin:6px 0; color:var(--ink-2); font-size:11px; } .yv-hist-plot[data-history-points] { touch-action:pan-y; cursor:crosshair; } .yv-hist-plot:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .yv-hist-crosshair { stroke:var(--ink-1); stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; } .yv-hist-reading { position:absolute; top:4px; left:4px; padding:3px 5px; font:11px var(--mono); color:var(--ink-1); background:var(--surface); border:1px solid var(--line); border-radius:3px; pointer-events:none; } .yv-hist-range { font:11px var(--mono); color:var(--ink-2); } .yv-hist svg { display:block; width:100%; height:56px; border:1px solid var(--line); border-radius:4px; background:var(--inset); } .yv-hist-tall svg { height:120px; } .yv-hist path { fill:none; stroke:var(--accent); stroke-width:1.5; vector-effect:non-scaling-stroke; } /* The loop card, built like the unlevered one: the slider, gross, a bar whose hatched tail is the loop risk, then total earn, total borrow and capacity, each on one line (owner, 2026-09-30). */ .yv-lev-card { padding:8px 10px 6px; margin:4px 0 8px; border:1px solid var(--line); border-radius:6px; } .yv-lev-card .yv-lev-field { margin:0 0 2px !important; } .yv-lev-headline { display:grid; } .yv-lev-headline .yv-lev-return { margin-top:2px; } .yv-lev-headline .yv-lev-riskbar { margin:8px 0 6px; } .yv-lev-headline .yv-lev-riskbar-key { margin-bottom:6px; } .yv-lev-side { display:grid; gap:2px; margin:0; padding-top:6px; border-top:1px solid var(--line); } .yv-lev-side div { display:flex; align-items:center; justify-content:space-between; gap:10px; } .yv-lev-side dt { font-size:11px; color:var(--muted); white-space:nowrap; } .yv-incentives-end { color:var(--muted); } .yv-lev-side dd { margin:0; font:500 12px var(--mono); letter-spacing:-.02em; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; } .is-pending { opacity:.55; transition:opacity .15s; } .yv-lev-field { margin-bottom:8px !important; } .yv-lev-field { display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:10px; } .yv-lev-field > small { grid-column:1 / -1; } .yv-lev-field [data-lev-live] { font:500 13px var(--mono); color:var(--ink); } .yv-lev-field input[type=range] { height:24px; } .yv-route { margin:8px 0 !important; } label.yv-route { display:grid !important; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:10px; } .yv-route-one { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } label.yv-route select { min-width:0; text-overflow:ellipsis; } .yv-facts-tight { gap:8px 12px; margin:6px 0; } .yv-facts-tight dd { font-size:12px; } .yv-facts-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .yv-more { margin:6px 0 2px; } .yv-more summary { cursor:pointer; font-size:11px; color:var(--ink-2); padding:4px 0; } .yv-more summary:hover { color:var(--accent); } .yv .yv-secondary { border-color:var(--accent); color:var(--accent); } .yv-provenance { font-size:11px; color:var(--ink-2); margin-bottom:14px !important; } .yv-outside { font-size:11px; color:var(--warn); margin:6px 0 !important; text-wrap:pretty; } .yv-facts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; } .yv .yv-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; } .yv .yv-primary:hover:not([aria-disabled=true]) { background:var(--accent); color:var(--accent-ink); filter:brightness(1.1); } .yv-full { width:100%; margin:4px 0 8px; } .yv-loop { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); } .yv-loop .yv-section-heading { margin-bottom:6px; } .yv-loop .yv-field { margin-top:6px; } .yv-table-empty { position:sticky; left:0; width:100%; box-sizing:border-box; } .yv-empty { padding:18px 8px; color:var(--ink-2); } .yv-basket { border-top:1px solid var(--line-strong); } .yield-active .yv-basket { display:flex; flex-direction:column; flex:0 1 auto; min-height:0; } .yv-basket-header,.yv-total-notes,.yv-capital-note,.yv-draft-status { flex:none; } .yv-basket-header { display:flex; align-items:center; gap:20px; height:44px; padding:0 16px; background:var(--raised); border-bottom:1px solid var(--line); } /* Tabs pad their labels so the underline runs past the text; the negative margin keeps the first label on the header's 16px edge. */ .yv-basket-header > .yv-chips { height:100%; gap:0; margin-left:-10px; flex:none; align-items:stretch; } .yv-basket-header > .yv-chips button { position:relative; border:0; border-radius:0; padding:0 10px; background:transparent; color:var(--ink-2); } .yv-basket-header > .yv-chips button[aria-pressed=true] { color:var(--ink); background:transparent; } .yv-basket-header > .yv-chips button[aria-pressed=true]::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent); } /* Underlined tabs hover like tabs, not chips: the label brightens and an idle tab previews a muted underline on the same line, instead of the global hover fill. */ .yv .yv-basket-header > .yv-chips button:hover:not(:disabled):not([aria-disabled=true]) { color:var(--ink); background:transparent; } .yv-basket-header > .yv-chips button[aria-pressed=false]:hover::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--line-strong); } .yv-basket-header .yv-count { margin-left:4px; border:0; background:transparent; color:var(--ink-2); } .yv-size-box { position:relative; display:flex; align-items:center; gap:4px; width:23ch; font:13px var(--mono); } .yv .yv-input > .yv-size-display { position:absolute; left:22px; right:8px; pointer-events:none; color:var(--ink); } .yv-size-box:not(:focus-within) input { color:transparent; } .yv-size-box:focus-within .yv-size-display { display:none; } /* Capital reads like its neighbours; a dotted underline and a text cursor say it can be edited. */ .yv-totals .yv-capital label { cursor:text; } .yv-capital-box { position:relative; display:inline-flex; align-items:baseline; cursor:text; border-bottom:1px dotted var(--ink-2); } .yv-capital-box:hover { border-bottom-color:var(--accent); } .yv-capital-box:focus-within { border-bottom:1px solid var(--accent); } .yv .yv-totals .yv-capital input { position:absolute; inset:-7px 0 -7px 1ch; width:auto; min-width:0; height:auto; min-height:0; padding:0; border:0; border-radius:0; background:transparent; font:inherit; font-variant-numeric:tabular-nums; color:transparent; outline:0; box-shadow:none; appearance:textfield; } .yv-totals .yv-capital input::-webkit-inner-spin-button,.yv-totals .yv-capital input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } .yv-capital-box:focus-within { min-width:14ch; } .yv-capital-box:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; } .yv-capital-box:has(input:invalid) { border-color:var(--bad); border-bottom-style:solid; } .yv-capital-box:has(input:disabled) { opacity:.45; } .yv .yv-totals .yv-capital-box:focus-within input { color:var(--ink); } .yv-capital-box:focus-within .yv-capital-display { visibility:hidden; } /* Below 1280px six totals share one row, so Capital reads short ($25M); focus shows every digit. */ @media (max-width:1279px) { .yv-capital-box:not(:focus-within) .yv-capital-display { display:none; } .yv-capital-box:not(:focus-within) .yv-capital-unit::after { content:attr(data-short); } } .yv-capital-note { margin:0; padding:4px 16px; text-align:right; font-size:11px; color:var(--warn); } .yv-totals { display:flex; align-items:center; gap:0; margin:0 0 0 auto; } .yv-totals .yv-fact { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:0 16px; border-left:1px solid var(--line); white-space:nowrap; } .yv-totals .yv-fact:first-child { border-left:0; } .yv-totals dt { font-size:11px; font-weight:500; line-height:13px; } .yv-totals dd { margin:0; font-size:14px; font-weight:600; line-height:18px; font-variant-numeric:tabular-nums; } .yv-totals .yv-net-value { color:var(--accent); } .yv-totals .yv-net-value.neg { color:#e57d78; } .yv-totals .yv-eb-open { position:relative; min-height:0; min-width:0; padding:0; border:0; border-radius:0; line-height:18px; vertical-align:top; } .yv-totals .yv-eb-open::after { content:""; position:absolute; top:50%; left:50%; width:max(100%, 24px); height:max(100%, 24px); transform:translate(-50%, -50%); } .yv-basket-actions { display:flex; align-items:center; gap:12px; flex:none; } .yv-basket-actions button { white-space:nowrap; } .yv-basket-actions [data-action=basketToggle] { background:transparent; border:0; color:var(--ink-2); padding:5px 8px; margin-right:-8px; font-size:11px; } .yv .yv-basket-actions [data-action=basketToggle]:hover:not(:disabled):not([aria-disabled=true]) { color:var(--ink); background:transparent; } .yv-total-notes { display:flex; flex-wrap:wrap; gap:4px 20px; margin:0; padding:4px 16px; color:var(--ink-2); font-size:11px; } /* One row down to 901px (owner, 2026-09-29): tighter gaps instead of a second header row. */ @media (min-width:761px) and (max-width:1023px) { .yv-basket-header { gap:4px; padding:0 12px; } .yv-basket-header > .yv-chips { margin-left:-6px; } .yv-basket-header > .yv-chips button { padding:0 6px; } .yv-basket-header .yv-count { margin-left:2px; } .yv-totals .yv-fact { padding:0 3px; } .yv-basket-actions [data-action=basketToggle] { padding:5px 4px; margin-right:-4px; } .yv-basket-header .yv-label-long { display:none; } } @media not all and (min-width:761px) and (max-width:1023px) { .yv-basket-header .yv-label-short { display:none; } } /* Six totals share one row from 1024px; full padding leaves no slack for platform font metrics there. */ @media (min-width:1024px) and (max-width:1151px) { .yv-totals .yv-fact { padding:0 4px; } } .yv-drawer { display:flex; flex-direction:column; flex:1; min-height:0; border-top:1px solid var(--line); } .yv-drawer-panels { display:grid; grid-template-rows:minmax(0,1fr); flex:1; min-height:0; max-height:max(112px,calc(56dvh - 225px)); } .yv-drawer-content { grid-area:1 / 1; min-height:0; padding:12px 16px; overflow:auto; scrollbar-width:thin; } .yv-drawer-content[inert] { visibility:hidden; } @media screen and (min-width:1101px) { /* With its tabs and capital row, the drawer is a quarter shorter than with 255px and 360px panels (owner, 2026-10-08): the map gets the room and the drawer scrolls sooner. */ .yield-active .yv-drawer-panels { flex:none; height:min(168px,19dvh); } /* Fixed, not content-sized, so the plane holds still as positions are added. */ .yield-active .yv-basket:has(.yv-position) .yv-drawer-panels { height:min(246px,calc(100dvh - 400px)); max-height:none; } } .yield-active .yv-hist-tall svg { height:96px; } .yv-evidence,.yv-allocation { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; } .yv-drawer-content { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-content:start; align-items:start; } .yv-evidence { display:contents; } .yv-allocation { display:block; } .yv-unconnected,.yv-basket-summary { min-width:0; border-left:1px solid var(--line); padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:12px; } .yv-basket-summary > h3 { min-height:28px; display:flex; align-items:center; } .yv-basket-summary .yv-facts { grid-template-columns:1fr; margin:0; } .yv-basket-summary .yv-facts dd { font-size:18px; font-family:var(--font); font-variant-numeric:tabular-nums;} .yv-basket-summary > button { align-self:flex-start; } .yv-basket-summary .yv-corr { overflow:auto; } .yv-band { display:grid; grid-template-columns:auto minmax(80px,1fr); align-items:center; gap:10px; max-width:100%; } .yv-band-word { font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; } .yv-band-track { position:relative; height:8px; border-radius:4px; background:linear-gradient(90deg,var(--good),var(--warn),var(--crit)); } .yv-band-mark { position:absolute; top:-4px; width:3px; height:16px; margin-left:-1.5px; border-radius:1px; background:var(--ink); box-shadow:0 0 0 1px var(--page); } /* Figures line up in columns, which is the whole point of a basket table. */ .yv-alloc-head,.yv-position { display:grid; grid-template-columns:minmax(100px,1.2fr) minmax(60px,1fr) 72px 144px 148px 74px 30px; gap:8px; align-items:center; } .yv-alloc-head { font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); padding-bottom:6px; border-bottom:1px solid var(--line-strong); } .yv-alloc-head span:nth-child(n+4) { text-align:right; } .yv-position { padding:8px 0; border-bottom:1px solid var(--line); } .yv-pos-name { min-width:0; } .yv-pos-name strong { overflow-wrap:anywhere; } .yv .yv-pos-name button.yv-pos-open { min-width:0; min-height:0; margin:0 -4px; padding:1px 4px; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } .yv .yv-pos-name button.yv-pos-open:is(:hover,:focus-visible,[aria-pressed=true]) { border:0; color:inherit; background:color-mix(in srgb, var(--ink-3) 20%, transparent); } .yv-pos-debt { white-space:nowrap; } .yv-position input[type=number] { font-family:var(--mono); text-align:right; } .yv-position input[type=range] { height:24px; } .yv-cap { font:11px var(--mono); color:var(--ink-2); text-align:right; } .yv-count { font:11px var(--mono); border:1px solid var(--line-strong); padding:1px 4px; border-radius:3px; } .yv-cash { font:12px var(--mono); color:var(--ink-2); margin-top:12px !important; } .yv-collapsed .yv-workspace { --detail-width:0px; } .yv-filters-collapsed .yv-workspace { --filter-width:0px; } .yv-explore { grid-column:2; } .yv button.yv-panel-toggle { width:32px; height:32px; padding:7px; flex:none; line-height:0; } @media(max-width:760px) { .yv-workspace { --filter-width:180px; grid-template-columns:var(--filter-width) minmax(300px,1fr); } .yv-detail { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); } .yv-detail .yv-facts { grid-template-columns:repeat(4,minmax(0,1fr)); } .yv-detail-body { padding:14px 14px 4px; } } @media(max-width:760px) { .yield-active .main { height:auto; } .yield-active #yieldWorkspace,.yield-active .yv-workspace { flex:none; } .yv-workspace { height:auto; } .yv-filters,.yv-detail,.yv-detail-body { overflow:visible; } /* The rail stops scrolling here and the page scrolls instead, so a sticky identity would pin itself to the VIEWPORT and ride over the workspace. Nothing is scrolled past on this layout, so there is nothing to pin. */ .yv-detail-id { position:static; } .yv-detail { display:block; } .yv-detail .yv-facts-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .yield-active .yv-workspace { overflow:auto; align-content:start; grid-template-rows:max-content max-content; } .yield-active .yv-filters { contain:size; min-height:0; overflow:hidden; } } @media screen and (min-width:761px) { .yv-map-mode .yv-workspace { position:relative; display:block; overflow:hidden; } .yv-map-mode .yv-explore { position:absolute; inset:0; } /* The panels float over the map like a game HUD: see-through enough that no bubble behind them is missed, inside the plane's border and clear of the y-axis labels in its right gutter, with the chart tools on the same edge. */ .yv-map-mode .yv-filters,.yv-map-mode .yv-detail { position:absolute; top:68px; z-index:8; display:flex; flex-direction:column; overflow:hidden; border:1px solid color-mix(in srgb,var(--line-strong) 60%,transparent); border-radius:8px; background:color-mix(in srgb,var(--surface) 58%,transparent); backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px); box-shadow:0 6px 24px rgba(0,0,0,.14); } /* What the reader clicks stays near-solid over the see-through panels. */ .yv-map-mode { --panel-control:color-mix(in srgb,var(--surface) 94%,transparent); } .yv-map-mode :is(.yv-filters,.yv-detail) :where(button:not(.yv-grip,.yv-primary,.yv-dot)) { background-color:var(--panel-control); } .yv.yv-map-mode :is(.yv-filters,.yv-detail) :where(button:not(.yv-grip,.yv-primary,.yv-dot))[aria-pressed=true], .yv.yv-map-mode :is(.yv-filters,.yv-detail) :where(button:not(.yv-grip,.yv-primary,.yv-dot)):hover:not(:disabled):not([aria-disabled=true]) { background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--panel-control); } .yv-map-mode .yv-filters { left:24px; width:206px; contain:none; max-height:calc(100% - 122px - var(--filters-dy,0px)); transform:translate(var(--filters-dx,0px),var(--filters-dy,0px)); } /* Axis names sit where no panel reaches: yield atop its own gutter, drag under the panels. */ .yv-map-mode .yv-edge-y { top:6px; right:4px; white-space:nowrap; } /* Clears the one-line yield name (owner, 2026-09-23). */ .yv-map-mode .yv-chart-tools { right:94px; } .yv-map-mode .yv-detail { right:72px; width:clamp(248px,22vw,320px); max-height:calc(100% - 122px - var(--detail-dy,0px)); transform:translate(var(--detail-dx,0px),var(--detail-dy,0px)); } .yv-map-mode .yv-detail-body { overflow:auto; } .yv-map-mode .yv-detail-foot { background:transparent; } /* Label and value share a line; short pairs share a row and long ones take their own. */ .yv-map-mode .yv-detail .yv-facts { display:flex; flex-wrap:wrap; gap:5px 18px; } .yv-map-mode .yv-detail .yv-facts .yv-fact { flex:1 1 auto; display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-width:0; } .yv-map-mode .yv-detail .yv-facts dd { margin:0; text-align:right; } .yv-map-mode .yv-detail .yv-captured-facts .yv-fact { flex-basis:100%; } /* Each panel's toggle holds one spot, open or tucked: a minimize bar in the heading's outer corner, then a chip in the same place naming what is tucked. */ .yv-map-mode[data-front=filters] .yv-filters,.yv-map-mode[data-front=detail] .yv-detail { z-index:9; } .yv-map-mode .yv-rail-tools { z-index:10; } .yv-map-mode .yv-glyph-edge { display:none; } .yv-map-mode .yv-glyph-map { display:inline; } .yv-map-mode .yv-rail-tools .yv-panel-toggle { top:82px; border:1px solid transparent; border-radius:6px; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--ink-3); } .yv-map-mode .yv-rail-tools .yv-panel-toggle:hover { color:var(--ink-1); background:color-mix(in srgb,var(--ink-1) 8%,transparent); } .yv-map-mode .yv-rail-tools .yv-panel-toggle[aria-expanded=false] { width:43px; height:43px; padding:10.75px; cursor:grab; border-color:color-mix(in srgb,var(--line-strong) 60%,transparent); border-radius:8px; background:var(--panel-control); color:var(--ink-1); box-shadow:0 4px 14px rgba(0,0,0,.14); } .yv-map-mode .yv-rail-tools .yv-panel-toggle[aria-expanded=false] svg { width:19.5px; height:19.5px; } .yv.yv-map-mode .yv-rail-tools .yv-panel-toggle[aria-expanded=false]:hover { background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--panel-control); } .yv-map-mode .yv-rail-tools [data-action=filterToggle] { left:32px; transform:translate(var(--filters-dx,0px),var(--filters-dy,0px)); } .yv-map-mode .yv-rail-tools [data-action=collapse] { right:80px; transform:translate(var(--detail-dx,0px),var(--detail-dy,0px)); } .yv-map-mode .yv-rail-tools [data-action=filterToggle][aria-expanded=false] { left:24px; top:68px; } .yv-map-mode .yv-rail-tools [data-action=collapse][aria-expanded=false] { right:72px; top:68px; } /* #3187: Fill out my portfolio sits under the tucked detail chip and shares its slot. */ .yv-map-mode .yv-fill:not([hidden]) { position:absolute; top:119px; right:72px; z-index:8; width:clamp(272px,24vw,340px); max-height:calc(100% - 173px - var(--detail-dy,0px)); transform:translate(var(--detail-dx,0px),var(--detail-dy,0px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid color-mix(in srgb,var(--line-strong) 60%,transparent); border-radius:8px; background:color-mix(in srgb,var(--surface) 58%,transparent); backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px); box-shadow:0 6px 24px rgba(0,0,0,.14); } .yv-map-mode .yv-rail-tools .yv-fill-toggle { right:80px; top:133px; transform:translate(var(--detail-dx,0px),var(--detail-dy,0px)); } .yv-map-mode .yv-rail-tools .yv-fill-toggle[aria-expanded=false] { right:72px; top:119px; } .yv-map-mode [data-drag] { cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; } .yv-map-mode [data-drag]:active { cursor:grabbing; } .yv-map-mode .yv-grip { margin-left:auto; margin-right:4px; padding:2px 6px; border:0; background:transparent; color:var(--ink-3); font-size:14px; line-height:1; } .yv-map-mode .yv-grip:hover,.yv-map-mode .yv-grip:focus-visible { color:var(--ink-1); } .yv-map-mode .yv-filters > .yv-grip { position:absolute; top:16px; right:10px; z-index:1; } .yv-map-mode .yv-results [data-count] { min-height:32px; padding:0 26px 0 30px; display:flex; align-items:center; } .yv-map-mode .yv-detail-head { min-height:32px; padding-right:46px; } } /* The map and basket share one screen here as they do above 1100px; only the list view pages. */ @media screen and (min-width:761px) and (max-width:1100px) { .yield-active:has(.yv-map-mode) .main { height:100dvh; } .yield-active:has(.yv-map-mode) #yieldWorkspace { flex:1; } .yield-active .yv-map-mode .yv-workspace { flex:1; height:auto; min-height:320px; } .yield-active .yv-map-mode .yv-drawer-panels { flex:none; height:min(168px,19dvh); max-height:none; } .yield-active .yv-map-mode .yv-basket:has(.yv-position) .yv-drawer-panels { height:max(150px,min(246px,calc(100dvh - 400px))); } } @media print { .yv { max-width:none; } .yv-plane { height:auto; min-height:420px; overflow:visible; } .yv-chart-tools,.yv-list-panel { display:none; } .yv-market-list { overflow:visible; max-height:none; } } .nav-soon { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; color:var(--ink-th,var(--ink-2)); opacity:.6; cursor:not-allowed; font-size:13px; white-space:nowrap; } .nav-soon svg { width:16px; height:16px; flex:none; } .nav-soon em { margin-left:auto; font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; } /* Full-bleed: in Designer mode the card chrome is the window itself. */ .yield-active #yieldWorkspace { padding:0; } /* A phone gets the raw Designer: the plane alone, and a tapped market's detail as a full page with Back. Building a basket stays on desktop, so its button there is greyed with a note. */ .yv-phone-back,.yv-phone-add,.yv-phone-note { display:none; } @media(max-width:760px) { .shell.yield-active { display:block; } .yield-active :is(.side,#universeLoad) { display:none; } .yield-active .main { width:100vw; height:100dvh; margin:0; padding:0; overflow:hidden; } .yield-active #yieldWorkspace { display:block; height:100dvh; padding:0; } .yield-active :is(.yv,.yv-workspace) { display:block; height:100dvh; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; } .yield-active :is(.yv-filters,.yv-basket,.yv-chart-tools,.yv-rail-tools,.yv-axis-control,.yv-offchart,.yv-panel-toggle,.yv-discover-phone,.yv-zoomtag) { display:none !important; } .yield-active :is(.yv-explore,.yv-explore > div,.yv-plane) { position:relative; inset:0; width:100vw; height:100dvh; margin:0; padding:0; border:0; border-radius:0; } .yield-active .yv-detail { display:none; } .yield-active .yv.yv-picked:not(.yv-collapsed) .yv-detail:has(.yv-detail-id) { display:flex; flex-direction:column; position:fixed; inset:0; z-index:40; width:auto; max-height:none; transform:none; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); border:0; border-radius:0; background:var(--page); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .yield-active .yv-detail-head { padding:12px 16px 0; } .yield-active .yv-detail [data-action="graphOpen"] { display:none; } .yield-active .yv-detail-head :is(.yv-eyebrow,.yv-expand,.yv-grip) { display:none; } .yield-active .yv-detail .yv-phone-back { display:inline-flex; align-items:center; gap:6px; height:36px; margin-left:-8px; padding:0 10px; border:0; border-radius:6px; background:none; color:var(--ink); font-size:15px; } .yield-active .yv-detail .yv-phone-back::before { content:"\2039"; font-size:24px; line-height:1; margin-top:-3px; } .yield-active .yv-detail > .yv-detail-id { margin:4px 16px 0; padding-bottom:12px; } .yield-active .yv-detail-name { font-size:26px; line-height:1.15; } .yield-active .yv-detail-body { padding:12px 16px 16px; overflow:auto; } .yield-active .yv-detail-foot { display:block; padding:12px 16px 16px; background:var(--page); } .yield-active .yv-detail-foot > :not(.yv-phone-add,.yv-phone-note) { display:none; } .yield-active .yv-detail-foot .yv-phone-add { display:block; width:100%; height:46px; font-size:15px; opacity:.45; cursor:not-allowed; } .yield-active .yv-detail-foot .yv-phone-note { display:block; margin:8px 0 0; text-align:center; font-size:13px; color:var(--ink-2); } .yield-active .yv-detail :is(.yv-facts,.yv-facts-4) { grid-template-columns:1fr 1fr; } .yield-active .yv-limit-note { display:none; } } /* Print is a sheet, not a window: no nav column, no viewport-height column, nothing clipped. */ @media print { .shell.yield-active { grid-template-columns:1fr; } .yield-active .side,.yield-active .yv-chart-tools { display:none; } .yield-active .main { height:auto; } .yield-active .yv,.yield-active .yv-workspace { height:auto; min-height:0; display:block; } .yield-active .yv-plane { height:auto; min-height:420px; flex:none; overflow:visible; } .yield-active .yv-basket,.yield-active .yv-drawer,.yv-drawer-panels,.yv-drawer-content { height:auto; max-height:none; overflow:visible; } .yv-drawer-content[inert] { display:none; } } /* The frontier line's overlay spans the whole field without taking pointer events. */ .yv-lev-link { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; } /* #1010: the pairwise grid behind the effective-bets number. Colour carries magnitude only; the cell's own title says which basis produced it. */ .yv-corr { margin:8px 0; display:grid; gap:4px; } .yv-corr-table { border-collapse:collapse; font:11px var(--mono); } .yv-corr-table th { font-weight:400; color:var(--ink-2); text-align:left; padding:2px 6px; white-space:nowrap; } .yv-corr-table td { padding:3px 6px; text-align:right; border:1px solid var(--line); color:var(--ink); background:color-mix(in srgb, var(--accent) calc(var(--r,0) * 55%), transparent); } .yv-corr-table td.is-structural { border-style:dashed; } .yv-corr-table td.is-neg { background-image:repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ink) 22%, transparent) 3px 4px); } /* #1007: a weight is typed, not nudged. Spin buttons take the space the figure needs and invite a click that changes an allocation by 0.1. */ .yv input.yv-num { appearance:textfield; -moz-appearance:textfield; text-align:right; } .yv input.yv-num::-webkit-outer-spin-button,.yv input.yv-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .yv input[type=number]::-webkit-outer-spin-button,.yv input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .yv input[type=number] { appearance:textfield; -moz-appearance:textfield; } @media (min-width:1152px) and (max-width:1439px) { .yv-drawer-content { grid-template-columns:minmax(0,1fr) 260px; } } @media (min-width:761px) and (max-width:1151px) { .yv-drawer-content { grid-template-columns:1fr; } .yv-unconnected,.yv-basket-summary { border-left:0; border-top:1px solid var(--line); padding:12px 0 0; } .yv-basket-summary { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,2fr); gap:8px 20px; } .yv-basket-summary > h3,.yv-basket-summary > .yv-facts,.yv-basket-summary > p,.yv-basket-summary > button,.yv-basket-summary > .yv-band { grid-column:1; } .yv-basket-summary > button { justify-self:start; } .yv-basket-summary .yv-corr { grid-column:2; grid-row:1 / span 5; margin:0; } } @media screen and (min-width:761px) and (max-width:1100px) { .yv-drawer-panels { max-height:calc(100dvh - 120px); } } @media (min-width:761px) and (max-width:1200px) { .yv-alloc-head,.yv-position { grid-template-columns:minmax(90px,1fr) 72px 132px 142px 66px 30px; gap:8px; } .yv-position input[type=range],.yv-alloc-head span:nth-child(2) { display:none; } } /* ── Market detail: yield and risk as two blocks ────────────────────────────────────────── They were one undifferentiated row of three numbers, with nothing saying that the net yield is the reported APY with the drag taken out. A rule between them is the cheapest way to say these answer two different questions. */ .yv-block { padding-top:12px; } .yv-block + .yv-block { margin-top:14px; border-top:1px solid var(--line); } .yv-block-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; } than always splitting in three and leaving a dead column. */ /* `min(100%, …)` so three metrics drop to fewer columns in a narrow pane instead of each getting ~100px and hyphenating "Unavailable" across two lines. Scoped to every place the metric row is used — the detail panel AND the graph card, which is narrower still. */ .yv-block .yv-detail-metrics, .yv-graph-card .yv-detail-metrics { grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr)); } /* An ABSENT value is drawn as an absence: muted, small, and never the accent a real number gets. A missing figure must not out-shout a present one. */ .yv-fact-none dd { font-size:13px !important; color:var(--ink-3); letter-spacing:0; } .yv-basis { font:11px var(--mono); color:var(--ink-2); } .yv-split { display:grid; gap:2px; margin:2px 0 8px; padding-left:8px; border-left:2px solid var(--line); } .yv-split div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .yv-split dd { margin:0; font-size:12px; color:var(--ink-1); text-align:right; } /* An unrated market states what is missing; it must read as a gap, not as a warning about the market itself — the market is not riskier for not having been scored yet. */ .yv-unrated { margin:2px 0 10px; padding:9px 11px; font-size:12px; line-height:1.55; color:var(--ink-2); background:var(--inset); border-radius:8px; border-left:2px solid var(--ink-3); } /* The explanations and the anchor table. Both are
so they are on screen and keyboard reachable without a hover, and closed by default so the three numbers stay the headline. */ .yv-scoring { margin-top:8px; font-size:12px; } .yv-scoring > summary { cursor:pointer; color:var(--accent); padding:4px 0; font:12px var(--font); list-style-position:outside; } .yv-scoring > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .yv-explain-list { margin:6px 0 2px; } .yv-explain-list dt { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:10px; color:var(--ink); font-weight:600; } .yv-explain-v { font:12px var(--mono); color:var(--accent); white-space:nowrap; } /* PROSE, so it reads as prose. The panel's default dd is 13px mono, which is right for a figure and wrong for four sentences of explanation. */ .yv-explain-list dd { margin:3px 0 0; font:400 12px/1.6 var(--font); color:var(--ink-2); } .yv-scoring .yv-note, .yv-unrated { font-family:var(--font); } .yv-anchors { width:100%; border-collapse:collapse; margin:8px 0 2px; font-size:12px; } .yv-anchors th, .yv-anchors td { text-align:left; padding:6px 8px 6px 0; border-bottom:1px solid var(--line); } .yv-anchors thead th { color:var(--ink-3); text-transform:uppercase; font:10px var(--mono); letter-spacing:.07em; } .yv-anchors tbody th { font-weight:500; color:var(--ink); } .yv-anchors td { color:var(--ink-2); font-variant-numeric:tabular-nums; } .yv-anchor-score { white-space:nowrap; } /* The 1-5 is an ORDINAL, so it is drawn as a number and not as a colour that would imply a threshold nobody set. Weight alone separates a 5 from a 1. */ .yv-score { font:600 13px var(--mono); color:var(--ink); } /* ── The dependency graph ───────────────────────────────────────────────────────────────── Drawn as a TREE rather than a node-link diagram on purpose: the answer is a small directed graph a few edges deep, a nested list is the shape it actually has, and at 390 a forced node-link layout would be a picture of a graph rather than a readable one. It is a real