/* /Pages/Admin.razor.rz.scp.css */ /* Ask Penelope conversation view — chat bubbles (lifted from MetisChat.razor). */ .ap-thread[b-6oxtp65j8m], .ap-qa[b-6oxtp65j8m] { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.25rem 0; } .ap-bubble[b-6oxtp65j8m] { max-width: 85%; border-radius: 0.75rem; padding: 0.5rem 0.8rem; margin-top: 0.35rem; } .ap-bubble-user[b-6oxtp65j8m] { align-self: flex-end; background: var(--bs-primary, #173746); color: #fff; } .ap-bubble-assistant[b-6oxtp65j8m] { align-self: flex-start; background: var(--bs-secondary-bg, #f1f3f5); color: inherit; } .ap-bubble-text[b-6oxtp65j8m] { white-space: pre-wrap; word-break: break-word; } .ap-bubble-meta[b-6oxtp65j8m] { font-size: 0.7rem; opacity: 0.7; margin-bottom: 0.15rem; } /* /Pages/AdminModelMetrics.razor.rz.scp.css */ /* Model Quality Studio (#500 phase 2) — scoped styles for the KPI strip, the best-model table, the model x symbol heatmap and the two canvas charts. Binding spec: "Penelope — Model Quality Studio, Fase 1 Design System + decisioni (05.08.2026)". Every colour below is a Penelope DS custom property (_penelope-tokens.scss / _tokens-metis.scss) — the mockup's private palette (--bg, --surface, --accent...) is deliberately NOT reproduced. Theme handling follows the app convention: [data-bs-theme="dark"] on , so the tokens swap themselves and only the two derivations of §1.2 need a dark rule. */ /* D.1.3: these panels are surface-elevated on a differently-toned page, so the tone separation is already there — no border and no shadow. Radius lg 16 and padding xl 24 per §1.5 / §1.10. */ .mqs-panel[b-l8jb4xawqm] { border-radius: 16px; box-shadow: none; } .mqs-panel-body[b-l8jb4xawqm] { padding: 24px; } .mqs-hint[b-l8jb4xawqm] { font-size: 12px; /* §1.4: 12px floor everywhere on this page */ color: var(--color-text-muted); margin-bottom: 12px; } /* ── KPI strip (§1.6) ───────────────────────────────────────────────────────── A real KpiStrip, not the mockup's 1px-gap background trick: tiles are separated by SPACE, never by a rule. Geometry mirrors Shared/Metis/Cockpit/KpiStrip.razor.css (the DS component for this role). */ .mqs-strip[b-l8jb4xawqm] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 768px) { .mqs-strip[b-l8jb4xawqm] { grid-template-columns: repeat(2, 1fr); } } .mqs-stat[b-l8jb4xawqm] { border-radius: 12px; /* KPI tile = md 12, not the lg 16 of a panel (§1.5) */ padding: 14px 16px; box-shadow: none; background: var(--metis-kpi-neutral-bg); color: var(--metis-kpi-neutral-text); display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mqs-stat-value[b-l8jb4xawqm] { font-size: 28px; font-weight: 600; line-height: 1.1; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .mqs-stat-label[b-l8jb4xawqm] { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; } /* §1.2 — the pos/neg pair for stat tiles in DARK is a DERIVATION by analogy with how the DS treats warn in dark, not something the DS states textually. Mauro: "implement as written for now, await confirmation before it enters the DS". PENDING DS CONFIRMATION — if confirmed these move into _tokens-metis.scss instead of living here; if corrected, only this block changes. Light keeps the universal semantic chips (--color-pos-bg / --color-pos-text). */ .mqs-stat-pos[b-l8jb4xawqm] { background: var(--color-pos-bg); color: var(--color-pos-text); } .mqs-stat-neg[b-l8jb4xawqm] { background: var(--color-neg-bg); color: var(--color-neg-text); } /* #805 — the dark pair is --color-pos-on-surface / --color-neg-on-surface, not a literal of its own (DS v2 §1.6, Mauro 09.09.2026: one value for fill and text). The tints stay literal rgba because rgba() cannot composite a var(); they are the token colours at 12%, so they move with the token. */ [data-bs-theme="dark"] .mqs-stat-pos[b-l8jb4xawqm] { background: rgba(17, 255, 170, 0.12); /* rgba(--color-pos-on-surface #11FFAA, .12) */ color: var(--color-pos-on-surface, #11FFAA); } [data-bs-theme="dark"] .mqs-stat-neg[b-l8jb4xawqm] { background: rgba(255, 48, 48, 0.12); /* rgba(--color-neg-on-surface #FF3030, .12) */ color: var(--color-neg-on-surface, #FF3030); } /* ── Tables — MatrixTable pattern (§1.9) ──────────────────────────────────── */ .mqs-table[b-l8jb4xawqm] { font-size: 13px; width: 100%; margin-bottom: 0; } .mqs-table th[b-l8jb4xawqm] { font-size: 12px; /* floor; the mockup had 10.5px */ text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: var(--color-text-muted); padding: 6px 10px; white-space: nowrap; } .mqs-table td[b-l8jb4xawqm] { padding: 6px 10px; white-space: nowrap; } .mqs-table .mqs-num[b-l8jb4xawqm] { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; } /* MatrixTable hover: a tint, not the mockup's solid --accent-tint fill, which is too heavy on a dense table. */ .mqs-table tbody tr:hover td[b-l8jb4xawqm] { background: rgba(17, 170, 255, 0.08); } .mqs-winner[b-l8jb4xawqm] { font-weight: 600; } .mqs-runner-up[b-l8jb4xawqm] { color: var(--color-text-muted); } /* ── Heatmap model x symbol (§1.7) ──────────────────────────────────────────── CorrelationHeatmap anatomy (grid geometry, low / neutral / high extremes on the --metis-corr-* tokens), rendered as a DOM grid rather than through the Highcharts component: that component is a symmetric m x m correlation matrix on a fixed -1..0..+1 axis, and bending it to a non-square model x symbol grid on a 0.40..0.70 accuracy axis would mean changing a shared Metis component. */ .mqs-heat-scroll[b-l8jb4xawqm] { overflow-x: auto; } .mqs-heat[b-l8jb4xawqm] { display: grid; gap: 2px; min-width: max-content; } .mqs-heat-corner[b-l8jb4xawqm], .mqs-heat-colhead[b-l8jb4xawqm], .mqs-heat-rowhead[b-l8jb4xawqm] { font-size: 12px; color: var(--color-text-muted); display: flex; align-items: center; padding: 0 6px; } .mqs-heat-colhead[b-l8jb4xawqm] { justify-content: center; text-transform: uppercase; letter-spacing: 0.04em; } .mqs-heat-cell[b-l8jb4xawqm] { font-size: 12px; /* floor; the mockup had 11.5px */ font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; color: var(--color-text-primary); min-width: 56px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; cursor: pointer; padding: 0; } /* D.2.1: a heatmap cell with no data is a 45 degree hatch, never a dash character. --metis-corr-missing is exactly that pattern in the DS tokens. */ .mqs-heat-missing[b-l8jb4xawqm] { background: var(--metis-corr-missing); cursor: default; } .mqs-heat-picked[b-l8jb4xawqm] { outline: 2px solid var(--color-interactive); outline-offset: -2px; } .mqs-heat-legend[b-l8jb4xawqm] { display: flex; align-items: center; gap: 8px; font-size: 12px; font-family: "IBM Plex Mono", monospace; color: var(--color-text-muted); margin-top: 12px; } .mqs-heat-legend-bar[b-l8jb4xawqm] { flex: 0 1 180px; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--metis-corr-neg), var(--metis-corr-neutral), var(--metis-corr-pos)); } /* Heatmap 1.1fr / trend 1fr, single column under 860px (§1.3). Bootstrap's own grid has no stop at 860, so this stays a local grid. */ .mqs-two-col[b-l8jb4xawqm] { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; } @media (max-width: 860px) { .mqs-two-col[b-l8jb4xawqm] { grid-template-columns: 1fr; } } /* ── Canvas charts (§1.8, §1.9) ───────────────────────────────────────────── */ /* Widths are fluid (the mockup's 600 / 1100 were a fixed-width page); the heights are the spec's and stay fixed, because both charts have a hard-coded Y range and a squashed one would misrepresent the spread. */ .mqs-canvas[b-l8jb4xawqm] { display: block; width: 100%; } .mqs-canvas-trend[b-l8jb4xawqm] { height: 180px; } .mqs-canvas-oracle[b-l8jb4xawqm] { height: 220px; } .mqs-legend[b-l8jb4xawqm] { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--color-text-muted); margin-top: 12px; } .mqs-legend-item[b-l8jb4xawqm] { display: flex; align-items: center; gap: 6px; } .mqs-legend-swatch[b-l8jb4xawqm] { width: 18px; height: 0; border-top-width: 2px; border-top-style: solid; } .mqs-legend-pos[b-l8jb4xawqm] { border-top-color: var(--color-pos-on-surface); } .mqs-legend-neg[b-l8jb4xawqm] { border-top-color: var(--color-neg-on-surface); } .mqs-legend-dashed[b-l8jb4xawqm] { border-top-style: dashed; } .mqs-gap[b-l8jb4xawqm] { font-size: 13px; margin-top: 8px; } .mqs-gap-value[b-l8jb4xawqm] { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 600; } /* /Pages/AdminSimulations.razor.rz.scp.css */ /* #490 — the simulations grid, styled to Design System section 6.8 "Tabelle dati": one data table for the system. Header 11px/600 uppercase with .04em tracking in text-secondary, sticky while the body scrolls; a hairline divider BETWEEN rows and nothing else — "niente zebra"; no border around the table, because the card is the container; 13px body. Telerik paints its own theme, so the rules below are ::deep overrides of the grid's own classes rather than a second table implementation. */ .sim-grid[b-jtd73eppwy] .k-grid { border: 0; background: transparent; font-size: 13px; } .sim-grid[b-jtd73eppwy] .k-grid-header, .sim-grid[b-jtd73eppwy] .k-grid-header-wrap, .sim-grid[b-jtd73eppwy] .k-grid-footer { border: 0; background: var(--color-bg-elevated); } .sim-grid[b-jtd73eppwy] .k-grid th.k-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); border-left: 0; border-bottom: 1px solid var(--color-divider); } /* No zebra: the rows are separated by the divider, never by a fill. */ .sim-grid[b-jtd73eppwy] .k-grid .k-table-row, .sim-grid[b-jtd73eppwy] .k-grid .k-table-row.k-alt, .sim-grid[b-jtd73eppwy] .k-grid tr.k-alt { background-color: transparent; } .sim-grid[b-jtd73eppwy] .k-grid .k-table-td, .sim-grid[b-jtd73eppwy] .k-grid td { border-left: 0; border-bottom: 1px solid var(--color-divider); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; } /* The row that is actually trading, and the ticked rows: tone, not a fill change that would read as zebra. */ .sim-live[b-jtd73eppwy] { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--color-pos-bg); color: var(--color-pos-text); } /* ── Selection strip (requirement 2) ──────────────────────────────────────── */ .sim-selection[b-jtd73eppwy] { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .sim-selection-count[b-jtd73eppwy] { font-weight: 600; } .sim-selection-hint[b-jtd73eppwy] { font-size: 12px; color: var(--color-text-muted); } .sim-selection-stat[b-jtd73eppwy] { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sim-selection-label[b-jtd73eppwy] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); } .sim-selection-value[b-jtd73eppwy] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; } /* /Pages/Index.razor.rz.scp.css */ /*.bxt-dashboard-headline { display: flex; flex-direction: row; } .headline-spacer { flex-shrink: 1; flex-basis: 200px; } .bxt-dashboard-recap { padding: 32px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .bxt-dashboard-recap-element { margin: 8px; background-color: #0a58ca; padding: 32px; border-radius: 64px; height: 300px; flex-basis: 350px; flex-grow: 0; display: flex; justify-content: center; flex-direction: column; align-items: center; text-align: center; color: white; } .bxt-dashboard-recap-element h1 { font-size: 5em; padding: 16px 0; }*/ .ad-loading-margin[b-8ivmda5tdz] { margin-top: 14rem; } .news-sentiment-badge[b-8ivmda5tdz] { display: inline-block; padding: 0.2em 0.6em; font-size: 0.75rem; font-weight: 600; /* #805 item 7 — DS v2 §3.2/§6.4: badge -> `pill 999`. */ border-radius: 999px; white-space: nowrap; } .news-sentiment-badge.sentiment-positive[b-8ivmda5tdz] { color: var(--color-pos-text, #068068); background-color: rgba(6, 128, 104, 0.15); } .news-sentiment-badge.sentiment-negative[b-8ivmda5tdz] { color: var(--color-neg-text, #AA2233); background-color: rgba(170, 34, 51, 0.15); } .news-sentiment-badge.sentiment-neutral[b-8ivmda5tdz] { color: #946A00; background-color: rgba(255, 193, 7, 0.2); } /* /Pages/UnifiedChat.razor.rz.scp.css */ /* Unified chat (#486 U5) — step-1 layout only. Clean and usable, nothing more: the final surface is step 2. Every colour is an existing design-system token from Styles/_penelope-tokens.scss, so both themes follow for free. */ .uc-shell[b-x7eji1rp17] { display: flex; gap: 1rem; height: calc(100vh - 4rem); padding: 0 1rem 1rem; color: var(--color-text-primary); } /* Sidebar top reserve. --uc-reserve is set inline from the RUNTIME height of the live .ad-pill-bar; it is 0 when that bar is absent or hidden (<1000px). Never a constant. --uc-sidebar-w is the live width: set inline from C# state, and overwritten by uc-windows.js for the duration of a resize drag so nothing re-renders per frame. */ .uc-sidebar[b-x7eji1rp17] { flex: 0 0 var(--uc-sidebar-w, 260px); width: var(--uc-sidebar-w, 260px); display: flex; flex-direction: column; gap: 0.5rem; padding-top: var(--uc-reserve, 0px); overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--color-divider); } /* Collapsed is just --uc-sidebar-w: 0px (button, or a drag that fell under the 50px floor — spec §2.2). The divider and the drag handle stay, so the sidebar can be pulled back out. */ .uc-sidebar-head[b-x7eji1rp17] { display: flex; justify-content: flex-start; } .uc-collapse[b-x7eji1rp17], .uc-sidebar-reopen[b-x7eji1rp17] { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 999px; background: none; color: var(--color-text-secondary); cursor: pointer; } .uc-collapse:hover[b-x7eji1rp17], .uc-sidebar-reopen:hover[b-x7eji1rp17] { background: var(--color-bg-elevated); } /* Floating reopen affordance, top-left of the chat body while the sidebar is closed. */ .uc-sidebar-reopen[b-x7eji1rp17] { position: absolute; top: var(--uc-reserve, 0px); left: 0; z-index: 3; background: var(--color-bg-sunken); box-shadow: var(--shadow-float); } /* Sidebar drag handle — 6px hit strip straddling the divider. */ .uc-sidebar-resizer[b-x7eji1rp17] { flex: 0 0 6px; margin: 0 -3px; cursor: col-resize; touch-action: none; z-index: 3; } .uc-sidebar-resizer:hover[b-x7eji1rp17] { background: var(--color-border); } /* Report-panel drag handle (spec §2.9) — same 6px hit strip as the sidebar's, straddling the joint between the chat column and the panel. The panel's seam gradient is pointer-events: none, so it never steals the gesture. */ .uc-panel-resizer[b-x7eji1rp17] { flex: 0 0 6px; margin: 0 -3px; cursor: col-resize; touch-action: none; z-index: 3; } .uc-panel-resizer:hover[b-x7eji1rp17] { background: var(--color-border); } .uc-show-more[b-x7eji1rp17] { align-self: flex-start; border: none; background: none; padding: 0.375rem 0.5rem; color: var(--color-interactive-hover); font-size: 0.8125rem; cursor: pointer; } .uc-new[b-x7eji1rp17] { border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text-primary); border-radius: 8px; padding: 0.5rem 0.75rem; text-align: left; transition: background var(--dur-fast, 150ms) var(--ease-standard, ease-in-out), color var(--dur-fast, 150ms) var(--ease-standard, ease-in-out); } /* Spec §2.3, filled buttons: the hover fill is interactive-hover and the label follows the contrast of THAT fill, never a fixed colour — white over the dark #1166AA of the light theme, dark over the light #77CCFF of the dark one. Same rule the send button follows. */ .uc-new:hover:not(:disabled)[b-x7eji1rp17] { background: var(--color-interactive-hover); color: #fff; } [data-bs-theme="dark"] .uc-new:hover:not(:disabled)[b-x7eji1rp17] { color: var(--icon-on-chat-send); } .uc-sessions[b-x7eji1rp17] { list-style: none; margin: 0; padding: 0; } .uc-session[b-x7eji1rp17] { display: flex; align-items: center; gap: 0.25rem; border-bottom: 1px solid var(--color-divider); } .uc-session-current[b-x7eji1rp17] { background: var(--color-bg-elevated); } .uc-session-open[b-x7eji1rp17] { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; padding: 0.5rem; color: inherit; text-align: left; } .uc-session-id[b-x7eji1rp17] { font-weight: 600; } .uc-session-date[b-x7eji1rp17], .uc-status[b-x7eji1rp17] { color: var(--color-text-muted); font-size: 0.8125rem; } .uc-status[b-x7eji1rp17] { padding: 0.5rem; } .uc-session-archive[b-x7eji1rp17] { background: none; border: 0; padding: 0.25rem 0.5rem; color: var(--color-text-secondary); font-size: 0.8125rem; } /* Thread ---------------------------------------------------------------- */ /* Chat column. Spec §2.9: ~860px centred by default, and it shrinks in proportion once the report panel takes its share — a flexible layout, not a fixed breakpoint. The max-width is dropped while the panel is open so the two columns simply split what is available. */ .uc-thread[b-x7eji1rp17] { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; max-width: 860px; margin: 0 auto; width: 100%; } .uc-shell-panel-open .uc-thread[b-x7eji1rp17] { max-width: none; margin: 0; } /* A column, so the empty state can claim the whole scroller and centre itself in it. Rows keep their natural height (flex would otherwise squeeze long answers). */ .uc-turns[b-x7eji1rp17] { flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; padding: 0.5rem 0; } .uc-row[b-x7eji1rp17] { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; } .uc-row-question[b-x7eji1rp17] { justify-content: flex-end; } .uc-row-answer[b-x7eji1rp17] { justify-content: flex-start; } /* Spec §2.8: body copy is 14px on both sides of the conversation. */ .uc-bubble[b-x7eji1rp17] { font-size: 0.875rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } /* Spec §2.3: the user bubble is the ONE filled surface of the thread — dedicated chat-bubble-bg (not the generic interactive fill), dark text, and every corner rounded except the bottom-right one, which squares off towards the avatar+dot column. */ .uc-bubble-question[b-x7eji1rp17] { max-width: 56ch; padding: 0.75rem 1rem; border-radius: 16px 16px 3px 16px; background: var(--chat-bubble-bg); color: var(--text-on-chat-bubble); } /* Spec §2.3: "Risposte Penelope: sempre senza sfondo, testo diretto su pagina." No background, no border, no radius — a background belongs to functional containers (report windows, system cards), never to the answer itself. */ .uc-bubble-answer[b-x7eji1rp17] { max-width: 68ch; padding: 0.125rem; color: var(--color-text-primary); } /* #575 increment 1 — markdown answers. ::deep is mandatory here: the HTML comes from a MarkupString, so it never carries this component's scope attribute. Values mirror the legacy surface (AskPenelopeChat.razor.css:166-207) so the two read the same; the answer still has NO container of its own (spec §2.3), only the blocks inside it are spaced. */ .uc-md[b-x7eji1rp17] p { margin: 0 0 0.5rem; } .uc-md[b-x7eji1rp17] p:last-child { margin-bottom: 0; } .uc-md[b-x7eji1rp17] h1, .uc-md[b-x7eji1rp17] h2, .uc-md[b-x7eji1rp17] h3, .uc-md[b-x7eji1rp17] h4 { font-size: 1.05rem; font-weight: 600; margin: 0.6rem 0 0.3rem; } .uc-md[b-x7eji1rp17] ul, .uc-md[b-x7eji1rp17] ol { margin: 0 0 0.5rem; padding-left: 1.2rem; } .uc-md[b-x7eji1rp17] table { border-collapse: collapse; margin: 0.5rem 0; width: 100%; } .uc-md[b-x7eji1rp17] th, .uc-md[b-x7eji1rp17] td { border: 1px solid var(--bs-border-color, #dee2e6); padding: 0.3rem 0.5rem; text-align: left; } .uc-md[b-x7eji1rp17] code { background: rgba(0, 0, 0, 0.06); padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.9em; } .uc-md[b-x7eji1rp17] pre { overflow-x: auto; } /* Avatars — 26px round plates, one per side (spec §2.3, mockup .av). */ .uc-av[b-x7eji1rp17] { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; font-size: 0.6875rem; font-weight: 800; overflow: hidden; } /* Penelope: the real brand mark on its themed plate (--p-avatar-bg/fg). The inset keeps the glyph off the plate's edge at 26px, matching the asset's own proportions. */ .uc-av-p[b-x7eji1rp17] { padding: 4px; background: var(--p-avatar-bg); color: var(--p-avatar-fg); } /* User: initials on a neutral surface — no brand colour on this side. */ .uc-av-user[b-x7eji1rp17] { background: var(--color-bg-elevated); color: var(--color-text-secondary); } /* Avatar + engine dot, stacked: spec §1.1 puts the dot UNDER the user avatar, so the indicator reads as a property of the turn rather than of the answer. */ .uc-av-col[b-x7eji1rp17] { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; } /* 7px engine dot. The colour comes from UnifiedChatPresentation.DotColor (a design-system token); the ring keeps the light-hued INV dot legible on the light page background. */ .uc-dot[b-x7eji1rp17] { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px var(--color-border-strong); } /* "Open as window" — unobtrusive per spec §2.9 ("azioni hover su ogni risposta"): invisible until the row is hovered, but always reachable by keyboard (focus-visible reveals it, and it is a real button in the tab order either way). */ .uc-row-action[b-x7eji1rp17] { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 999px; background: none; color: var(--color-text-muted); opacity: 0; cursor: pointer; transition: opacity var(--dur-fast, 150ms) var(--ease-standard, ease-in-out); } .uc-row-answer:hover .uc-row-action[b-x7eji1rp17], .uc-row-action:focus-visible[b-x7eji1rp17] { opacity: 1; } .uc-row-action:hover[b-x7eji1rp17] { background: var(--color-bg-elevated); color: var(--color-interactive-hover); } /* Help answer — prose with short bold emphases, never a row-card (spec §3). It is the one answer whose text is authored rather than engine-produced, so it renders as paragraphs instead of the pre-wrapped single block every other answer uses. */ .uc-help[b-x7eji1rp17] { white-space: normal; } .uc-help p[b-x7eji1rp17] { margin: 0 0 0.625rem; } .uc-help p:last-of-type[b-x7eji1rp17] { margin-bottom: 0; } /* Continuation suggestions (spec §2.10, DS §7.2): the Outline button — the system's only coloured border — laid out as a wrapping row under the answer. */ .uc-suggest-row[b-x7eji1rp17] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; } .uc-suggest[b-x7eji1rp17] { border: 1.5px solid var(--color-interactive-hover); border-radius: 999px; padding: 0.40625rem 0.875rem; background: transparent; color: var(--color-interactive-hover); font: inherit; font-size: 0.8125rem; cursor: pointer; transition: background var(--dur-fast, 150ms) var(--ease-standard, ease-in-out); } .uc-suggest:hover:not(:disabled)[b-x7eji1rp17] { background: var(--color-bg-elevated); } .uc-suggest:disabled[b-x7eji1rp17] { cursor: default; opacity: 0.6; } /* Body of an answer-detail report window (built by UnifiedChat.razor's AnswerDetail). */ .uc-report[b-x7eji1rp17] { display: flex; flex-direction: column; gap: 0.5rem; } .uc-report-meta[b-x7eji1rp17] { display: flex; gap: 0.5rem; justify-content: space-between; color: var(--color-text-muted); font-size: 0.75rem; } /* #575 increment 1: the report body is markdown now, so pre-wrap is gone — it would have preserved every source newline ON TOP of the block spacing Markdig already produces. */ .uc-report-answer[b-x7eji1rp17] { overflow-wrap: anywhere; } /* Meta lines under an answer — the "intake closed" confirmation (#508 item 2) and the back-office forward outcome (#508 item 3.d). Both reuse the secondary/muted text tokens the resume line already uses and add NO border: §2.4 already carries 5 border deviations, and neither of these is a card. Indented to the bubble's left edge (avatar column + gap), so they read as belonging to the answer above rather than to the thread. */ .uc-intake-closed[b-x7eji1rp17], .uc-row-note[b-x7eji1rp17] { padding: 0.125rem 0.5rem 0.375rem 2.5rem; color: var(--color-text-secondary); font-size: 0.8125rem; } .uc-row-note[b-x7eji1rp17] { color: var(--color-text-muted); } /* Intake / link / composer ---------------------------------------------- */ .uc-intake[b-x7eji1rp17] { padding: 0.375rem 0.5rem; color: var(--color-text-secondary); font-size: 0.8125rem; } .uc-intake-step[b-x7eji1rp17] { margin-left: 0.5rem; color: var(--color-text-muted); } .uc-link[b-x7eji1rp17] { border: 1px solid var(--color-border); border-radius: 10px; padding: 0.625rem 0.75rem; margin-bottom: 0.5rem; background: var(--color-bg-elevated); } .uc-link-title[b-x7eji1rp17] { font-weight: 600; } .uc-link-subject[b-x7eji1rp17] { color: var(--color-text-secondary); margin: 0.25rem 0 0.5rem; overflow-wrap: anywhere; } .uc-link-actions[b-x7eji1rp17] { display: flex; gap: 0.5rem; } .uc-link-confirm[b-x7eji1rp17], .uc-link-ignore[b-x7eji1rp17] { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.25rem 0.75rem; background: var(--color-bg-sunken); color: var(--color-text-primary); } .uc-error[b-x7eji1rp17] { border: 1px solid var(--color-neg-on-surface); color: var(--color-neg-on-surface); border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; } .uc-composer[b-x7eji1rp17] { padding-top: 0.5rem; } /* /Shared/AskPenelope/AskPenelopeChat.razor.rz.scp.css */ /* Native Ask Penelope chat. Theme-aware via Bootstrap CSS vars (inherits light/dark). */ .ap-chat[b-wpo4j8tlkm] { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* Composer row: history button anchored beside the input, so the entry point sits at the interaction point in both hosts (page + slide-over panel) and both states (hero + conversation). */ .ap-composer-row[b-wpo4j8tlkm] { display: flex; align-items: center; gap: 0.5rem; } .ap-composer-grow[b-wpo4j8tlkm] { flex: 1 1 auto; min-width: 0; } .ap-history-btn[b-wpo4j8tlkm] { flex-shrink: 0; border: 1px solid var(--bs-border-color, #e6e8eb); background: var(--bs-body-bg, #fff); color: var(--bs-secondary-color, #6c757d); border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 1rem; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); } .ap-history-btn:hover[b-wpo4j8tlkm] { color: var(--bs-body-color, #212529); background: var(--bs-secondary-bg, #f1f3f5); } .ap-history-body[b-wpo4j8tlkm] { display: flex; flex-direction: column; gap: 0.6rem; } .ap-history-new[b-wpo4j8tlkm] { align-self: flex-start; border: 1px solid var(--bs-border-color, #e6e8eb); background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border-radius: 20px; padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .ap-history-new:hover[b-wpo4j8tlkm] { background: var(--bs-secondary-bg, #f1f3f5); } .ap-history-status[b-wpo4j8tlkm] { color: var(--bs-secondary-color, #6c757d); text-align: center; padding: 1.5rem 0; } .ap-history-list[b-wpo4j8tlkm] { display: flex; flex-direction: column; gap: 0.4rem; } .ap-history-item[b-wpo4j8tlkm] { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; border: 1px solid var(--bs-border-color, #e6e8eb); background: var(--bs-body-bg, #fff); border-radius: 10px; padding: 0.55rem 0.75rem; cursor: pointer; } .ap-history-item:hover[b-wpo4j8tlkm] { background: var(--bs-secondary-bg, #f1f3f5); } .ap-history-current[b-wpo4j8tlkm] { border-color: var(--bs-primary, #173746); } .ap-history-q[b-wpo4j8tlkm] { font-weight: 600; font-size: 0.9rem; color: var(--bs-body-color, #212529); } .ap-history-meta[b-wpo4j8tlkm] { font-size: 0.76rem; color: var(--bs-secondary-color, #6c757d); } .ap-messages[b-wpo4j8tlkm] { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; padding: 1rem 1.25rem; gap: 0.75rem; width: 100%; max-width: 860px; margin: 0 auto; } .ap-row[b-wpo4j8tlkm] { display: flex; width: 100%; } .ap-row-user[b-wpo4j8tlkm] { justify-content: flex-end; } .ap-row-assistant[b-wpo4j8tlkm] { justify-content: flex-start; } .ap-bubble[b-wpo4j8tlkm] { max-width: 80%; padding: 0.7rem 0.95rem; border-radius: 16px; line-height: 1.5; word-wrap: break-word; } /* #575 B3.4 / DS §6.16: "la striscia vive dentro la bolla". A bubble that carries the answer's card strip takes the whole column instead of the 80% a sentence wants, so the strip measures the column and not a paragraph's worth of it. */ .ap-bubble-wide[b-wpo4j8tlkm] { max-width: 100%; width: 100%; } .ap-bubble-user[b-wpo4j8tlkm] { background: var(--bs-primary, #173746); color: #fff; border-bottom-right-radius: 4px; } .ap-bubble-assistant[b-wpo4j8tlkm] { background: var(--bs-secondary-bg, #f1f3f5); color: var(--bs-body-color, #212529); border-bottom-left-radius: 4px; } .ap-bubble-error[b-wpo4j8tlkm] { background: var(--bs-danger-bg-subtle, #f8d7da); color: var(--bs-danger-text-emphasis, #842029); border-bottom-left-radius: 4px; } .ap-text[b-wpo4j8tlkm] { white-space: pre-wrap; } /* Markdown answer rendering. ::deep reaches the MarkupString HTML (which doesn't carry the scope attribute). */ .ap-md[b-wpo4j8tlkm] p { margin: 0 0 0.5rem; } .ap-md[b-wpo4j8tlkm] p:last-child { margin-bottom: 0; } .ap-md[b-wpo4j8tlkm] table { border-collapse: collapse; margin: 0.5rem 0; width: 100%; } .ap-md[b-wpo4j8tlkm] th, .ap-md[b-wpo4j8tlkm] td { border: 1px solid var(--bs-border-color, #dee2e6); padding: 0.3rem 0.5rem; text-align: left; } .ap-md[b-wpo4j8tlkm] code { background: rgba(0, 0, 0, 0.06); padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.9em; } .ap-md[b-wpo4j8tlkm] h1, .ap-md[b-wpo4j8tlkm] h2, .ap-md[b-wpo4j8tlkm] h3, .ap-md[b-wpo4j8tlkm] h4 { font-size: 1.05rem; font-weight: 600; margin: 0.6rem 0 0.3rem; } .ap-md[b-wpo4j8tlkm] ul, .ap-md[b-wpo4j8tlkm] ol { margin: 0 0 0.5rem; padding-left: 1.2rem; } /* Per-answer action row (copy / feedback) */ .ap-actions[b-wpo4j8tlkm] { display: flex; gap: 0.25rem; margin-top: 0.4rem; } .ap-iconbtn[b-wpo4j8tlkm] { border: none; background: transparent; color: var(--bs-secondary-color, #6c757d); padding: 0.15rem 0.35rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; line-height: 1; } .ap-iconbtn:hover[b-wpo4j8tlkm] { background: rgba(0, 0, 0, 0.06); color: var(--bs-body-color, #212529); } .ap-iconbtn.ap-active[b-wpo4j8tlkm] { color: var(--bs-primary, #173746); } /* Thinking indicator */ .ap-thinking[b-wpo4j8tlkm] { display: inline-flex; gap: 0.25rem; align-items: center; } .ap-dot[b-wpo4j8tlkm] { width: 7px; height: 7px; border-radius: 50%; background: var(--bs-secondary-color, #6c757d); opacity: 0.5; animation: ap-blink-b-wpo4j8tlkm 1.2s infinite ease-in-out both; } .ap-dot:nth-child(2)[b-wpo4j8tlkm] { animation-delay: 0.2s; } .ap-dot:nth-child(3)[b-wpo4j8tlkm] { animation-delay: 0.4s; } @keyframes ap-blink-b-wpo4j8tlkm { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } } /* Empty state */ /* Empty state: a compact hero with the composer grouped right under the suggestions, near the top, so the input is immediately visible (not pinned to the page bottom). */ .ap-chat-empty[b-wpo4j8tlkm] { justify-content: flex-start; } .ap-hero[b-wpo4j8tlkm] { margin: 0 auto; padding: 2.5rem 1rem 1rem; max-width: 680px; width: 100%; text-align: center; } .ap-hero .ap-composer-wrap[b-wpo4j8tlkm] { margin-top: 1.25rem; text-align: left; } /* Intro line, disclaimer + full-disclosure modal */ .ap-intro[b-wpo4j8tlkm] { max-width: 620px; margin: 0 auto 1.1rem; text-align: center; line-height: 1.6; font-size: 1.02rem; color: var(--bs-body-color, #212529); } .ap-disclaimer[b-wpo4j8tlkm] { text-align: center; font-size: 0.74rem; color: var(--bs-secondary-color, #6c757d); padding: 0.5rem 1rem 0.25rem; } .ap-link[b-wpo4j8tlkm] { border: none; background: none; color: #1f6feb; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; } .ap-modal-backdrop[b-wpo4j8tlkm] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; } .ap-modal[b-wpo4j8tlkm] { background: var(--bs-body-bg, #fff); border-radius: 14px; width: min(680px, 100%); max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); } .ap-modal-head[b-wpo4j8tlkm] { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--bs-border-color, #e6e8eb); } .ap-modal-title[b-wpo4j8tlkm] { font-weight: 700; font-size: 1.1rem; } .ap-modal-close[b-wpo4j8tlkm] { border: none; background: none; cursor: pointer; color: var(--bs-secondary-color, #6c757d); font-size: 1rem; } .ap-modal-body[b-wpo4j8tlkm] { overflow-y: auto; padding: 1.25rem; } .ap-modal-body p[b-wpo4j8tlkm] { line-height: 1.6; margin-bottom: 1rem; font-size: 0.9rem; } .ap-empty-title[b-wpo4j8tlkm] { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.4rem; } .ap-empty-hint[b-wpo4j8tlkm] { color: var(--bs-secondary-color, #6c757d); margin-bottom: 1rem; } .ap-composer-wrap[b-wpo4j8tlkm] { padding: 0.5rem 1.25rem 0.75rem; width: 100%; max-width: 860px; margin: 0 auto; } /* Security cards under a carded answer (comparison view). Theme-aware via Bootstrap CSS vars like the rest of the chat. #575 B3.4: the row itself is now a HorizontalStrip (DS §6.16), which owns the track, the gutter and the wrapping grid it opens into (§6.17), so the grid that used to live on .ap-cards moved into that component with it. What stays here is the card. */ .ap-card[b-wpo4j8tlkm] { background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #e6e8eb); border-radius: 14px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); } .ap-card-head[b-wpo4j8tlkm] { display: flex; align-items: center; gap: 0.6rem; } .ap-card-logo[b-wpo4j8tlkm] { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--bs-border-color, #e6e8eb); flex-shrink: 0; } .ap-card-title[b-wpo4j8tlkm] { min-width: 0; } .ap-card-ticker[b-wpo4j8tlkm] { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .ap-card-name[b-wpo4j8tlkm] { color: var(--bs-secondary-color, #6c757d); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-card-badge[b-wpo4j8tlkm] { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; /* #805 item 7 — DS v2 §3.2/§6.4: every pastiglia is `pill 999`. 20px read round at this height but is not the token. */ border-radius: 999px; white-space: nowrap; } /* #805 item 16 — DS v2 §1.7, the qualitative scale. Two families plus the neutral, two intensities, and no value of their own: "il forte li inverte (fondo `*-text`, testo `*-bg`), il tenue li usa cosi come sono ... Nessun valore nuovo, nessun bianco, nessun composito". The invented tints (#1e7e34 / #c9303e) and the white text are both out. The pairs are identical in the two themes (Mauro, 09.09.2026), so there is no dark override below — as for DsSourceBadge's own pairs. Soft (tenue) is the default: DS §6.4 puts every grade badge on the soft step, and a card shows several of them at once. Strong is the .ap-badge-strong modifier and is reserved for a verdict word (High Edge / Low Edge), at most one per block. */ .ap-badge-pos[b-wpo4j8tlkm] { color: var(--color-pos-text, #068068); background: var(--color-pos-bg, #D3F9DD); } .ap-badge-neg[b-wpo4j8tlkm] { color: var(--color-neg-text, #AA2233); background: var(--color-neg-bg, #FDDDDF); } /* The neutral step is the opaque composite of DS §1.7: #EEF1F4 on neutral-3 #507090. Written as literals because the repo's 8-stop neutral scale carries neither value yet (#805 Q2, the text-muted migration, is a separate decision). */ .ap-badge-neutral[b-wpo4j8tlkm] { color: #507090; background: #EEF1F4; } /* Strong (forte): the same two colours, inverted. */ .ap-badge-pos.ap-badge-strong[b-wpo4j8tlkm] { color: var(--color-pos-bg, #D3F9DD); background: var(--color-pos-text, #068068); } .ap-badge-neg.ap-badge-strong[b-wpo4j8tlkm] { color: var(--color-neg-bg, #FDDDDF); background: var(--color-neg-text, #AA2233); } /* #573 / #805 E1 - where the source badge sits. The badge itself (geometry §6.4, the two §6.6 pairs, the external-source dot) is Shared/DS/DsSourceBadge and carries none of this: a component that positioned itself would only ever fit this one card head. What is left here is the slot - pushed to the right of the head, top-aligned, never squeezed. */ .ap-source-slot[b-wpo4j8tlkm] { margin-left: auto; align-self: flex-start; flex-shrink: 0; display: inline-flex; } .ap-card-prices[b-wpo4j8tlkm] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .ap-card-price[b-wpo4j8tlkm] { display: flex; flex-direction: column; } .ap-card-label[b-wpo4j8tlkm] { font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); } .ap-card-value[b-wpo4j8tlkm] { font-weight: 700; font-size: 1.05rem; } .ap-card-change[b-wpo4j8tlkm] { font-size: 0.8rem; font-weight: 600; } /* #575 P6 (18) - a range is two numbers in one cell; a step down from the close. */ .ap-card-value-sm[b-wpo4j8tlkm] { font-size: 0.9rem; } /* #575 P6 (21, 22) - the analyst badge: word, total and the DS distribution strip under them. #963 - the Analyst Ranking line under the strip shares the head's row shape. */ .ap-card-analysts[b-wpo4j8tlkm] { display: flex; flex-direction: column; gap: 0.3rem; } .ap-card-analysts-head[b-wpo4j8tlkm], .ap-card-analysts-ranking[b-wpo4j8tlkm] { display: flex; align-items: center; gap: 0.4rem; } .ap-card-analysts-total[b-wpo4j8tlkm] { font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); } /* #575 P6 (23) - the two threshold bars, stacked. */ .ap-card-strength[b-wpo4j8tlkm] { display: flex; flex-direction: column; gap: 0.35rem; } .ap-up[b-wpo4j8tlkm] { color: #068068; } .ap-down[b-wpo4j8tlkm] { color: #f23456; } .ap-card-scoreline[b-wpo4j8tlkm] { font-size: 0.85rem; line-height: 1.45; } .ap-card-bars[b-wpo4j8tlkm] { display: flex; flex-direction: column; gap: 0.3rem; } .ap-card-bar[b-wpo4j8tlkm] { display: grid; grid-template-columns: 5.5rem 1fr 2rem; align-items: center; gap: 0.5rem; font-size: 0.78rem; } .ap-card-bar-label[b-wpo4j8tlkm] { color: var(--bs-secondary-color, #6c757d); } .ap-card-bar-track[b-wpo4j8tlkm] { height: 6px; /* #805 item 4 — DS v2 §3.2/§6.9: a horizontal score bar is `pill 999`. */ border-radius: 999px; background: var(--bs-secondary-bg, #e9ecef); overflow: hidden; } .ap-card-bar-fill[b-wpo4j8tlkm] { display: block; height: 100%; /* #805 item 4 — the fill follows the track (DS v2 §3.2/§6.9). */ border-radius: 999px; background: var(--bs-primary, #173746); } .ap-card-bar-value[b-wpo4j8tlkm] { text-align: right; font-weight: 600; } .ap-card-report[b-wpo4j8tlkm] { border: none; background: none; color: #1f6feb; font-weight: 600; font-size: 0.9rem; cursor: pointer; padding: 0.2rem 0; margin-top: auto; align-self: center; } .ap-card-report:hover[b-wpo4j8tlkm] { text-decoration: underline; } /* Comparison chart under the cards */ .ap-cards-chartwrap[b-wpo4j8tlkm] { width: 100%; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #e6e8eb); border-radius: 14px; padding: 0.75rem 0.9rem; } .ap-cards-charttitle[b-wpo4j8tlkm] { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; } .ap-cards-chart[b-wpo4j8tlkm] { width: 100%; min-height: 260px; } /* #575 B3.4: the three tool-built blocks under an answer (report card, comparison table, news list). Design System v2: 16px radius on the containers, the card's own .ap-card-badge chip (20px, round at that height) so no new colour enters, --color-divider hairlines and 13px table body. 13px table body. Both themes come from the tokens themselves: --color-divider and the Bootstrap vars already flip on [data-theme] in _penelope-tokens.scss, which is why these blocks need no dark-theme rules of their own, exactly like the cards above. */ .ap-report[b-wpo4j8tlkm], .ap-comp[b-wpo4j8tlkm], .ap-news[b-wpo4j8tlkm] { width: 100%; background: var(--bs-body-bg, #fff); border: 1px solid var(--color-divider, #ccdbe2); border-radius: 16px; padding: 0.9rem 1rem; } .ap-report[b-wpo4j8tlkm] { display: flex; flex-direction: column; gap: 0.6rem; } .ap-report-head[b-wpo4j8tlkm] { display: flex; align-items: center; gap: 0.6rem; } .ap-report-title[b-wpo4j8tlkm] { min-width: 0; } .ap-report-sector[b-wpo4j8tlkm] { display: flex; gap: 0.4rem; align-items: baseline; font-size: 0.85rem; } /* #805 E5: the hairline above this block is a sibling now, so the border and the padding that stood off it both go. The spacing is unchanged: .ap-report's own column gap (0.6rem) falls on each side of the separator, where the gap plus the padding used to fall on one. */ .ap-report-scores[b-wpo4j8tlkm] { display: flex; flex-wrap: wrap; gap: 1.25rem; } .ap-report-score[b-wpo4j8tlkm] { display: flex; flex-direction: column; } .ap-report-score-value[b-wpo4j8tlkm] { font-weight: 700; font-size: 1.05rem; } .ap-report-score-max[b-wpo4j8tlkm] { font-weight: 400; font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); } .ap-report-rank[b-wpo4j8tlkm], .ap-report-asof[b-wpo4j8tlkm] { font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); } /* Comparison table. The wrapper scrolls on its own so a wide metric set never widens the chat column. */ .ap-comp-title[b-wpo4j8tlkm], .ap-news-title[b-wpo4j8tlkm] { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; } .ap-comp-scroll[b-wpo4j8tlkm] { overflow-x: auto; } .ap-comp-table[b-wpo4j8tlkm] { border-collapse: collapse; width: 100%; font-size: 13px; } .ap-comp-table th[b-wpo4j8tlkm], .ap-comp-table td[b-wpo4j8tlkm] { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid var(--color-divider, #ccdbe2); white-space: nowrap; } .ap-comp-table thead th[b-wpo4j8tlkm] { font-weight: 600; color: var(--bs-secondary-color, #6c757d); } .ap-comp-table tbody tr:last-child th[b-wpo4j8tlkm], .ap-comp-table tbody tr:last-child td[b-wpo4j8tlkm] { border-bottom: none; } .ap-comp-table tbody th[b-wpo4j8tlkm] { font-weight: 700; } .ap-comp-num[b-wpo4j8tlkm] { text-align: right; } .ap-comp-unit[b-wpo4j8tlkm] { margin-left: 0.25rem; font-weight: 400; opacity: 0.75; } /* News list */ .ap-news-item[b-wpo4j8tlkm] { padding: 0.55rem 0; border-bottom: 1px solid var(--color-divider, #ccdbe2); } .ap-news-item:last-child[b-wpo4j8tlkm] { padding-bottom: 0; border-bottom: none; } .ap-news-headline[b-wpo4j8tlkm] { display: block; font-size: 0.9rem; font-weight: 600; color: var(--bs-body-color, #212529); text-decoration: none; line-height: 1.4; } a.ap-news-headline:hover[b-wpo4j8tlkm] { text-decoration: underline; } .ap-news-meta[b-wpo4j8tlkm] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.76rem; color: var(--bs-secondary-color, #6c757d); } /* Mobile: keep the composer clear of the fixed bottom navmenu. */ @media (max-width: 768px) { .ap-chat[b-wpo4j8tlkm] { min-height: auto; } .ap-composer-wrap[b-wpo4j8tlkm] { padding-bottom: 5rem; } } /* /Shared/AskPenelope/AskPenelopePanel.razor.rz.scp.css */ .ap-panel-backdrop[b-a60dq69avx] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1050; } .ap-panel[b-a60dq69avx] { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 100%); background: var(--bs-body-bg, #fff); z-index: 1051; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2); animation: ap-panel-in-b-a60dq69avx 0.18s ease-out; } @keyframes ap-panel-in-b-a60dq69avx { from { transform: translateX(100%); } to { transform: translateX(0); } } .ap-panel-header[b-a60dq69avx] { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--bs-border-color, #dee2e6); flex: 0 0 auto; } .ap-panel-title[b-a60dq69avx] { font-weight: 600; font-size: 1.05rem; } .ap-panel-close[b-a60dq69avx] { border: none; background: transparent; cursor: pointer; color: var(--bs-secondary-color, #6c757d); padding: 0.25rem 0.4rem; border-radius: 6px; } .ap-panel-close:hover[b-a60dq69avx] { background: rgba(0, 0, 0, 0.06); color: var(--bs-body-color, #212529); } .ap-panel-body[b-a60dq69avx] { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; padding: 0 0.5rem; } @media (max-width: 768px) { .ap-panel[b-a60dq69avx] { width: 100%; } } /* /Shared/AskPenelope/AskPenelopeReport.razor.rz.scp.css */ /* Native stock report — card-per-section design (matches the Bridgewise Stockwise look). */ .ap-report[b-0l3k5wqsdi] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; background: var(--bs-secondary-bg, #f4f5f7); font-size: 0.9rem; } .ap-report-state[b-0l3k5wqsdi] { display: flex; gap: 0.3rem; justify-content: center; align-items: center; padding: 2.5rem; } .ap-report-state .ap-dot[b-0l3k5wqsdi] { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-secondary-color, #6c757d); opacity: 0.5; animation: ap-blink-b-0l3k5wqsdi 1.2s infinite ease-in-out both; } .ap-report-state .ap-dot:nth-child(2)[b-0l3k5wqsdi] { animation-delay: 0.2s; } .ap-report-state .ap-dot:nth-child(3)[b-0l3k5wqsdi] { animation-delay: 0.4s; } @keyframes ap-blink-b-0l3k5wqsdi { 0%,80%,100% { opacity:0.3; transform:scale(0.85);} 40% { opacity:1; transform:scale(1);} } /* Header */ .ap-report-head[b-0l3k5wqsdi] { padding: 0.25rem 0.25rem 0.85rem; } .ap-report-name[b-0l3k5wqsdi] { font-size: 1.35rem; font-weight: 700; line-height: 1.15; } .ap-report-sub[b-0l3k5wqsdi] { color: var(--bs-secondary-color, #6c757d); font-size: 0.85rem; margin-top: 0.15rem; } .ap-report-price[b-0l3k5wqsdi] { margin-left: 0.5rem; font-weight: 700; color: var(--bs-body-color, #212529); } /* #963 - the price's kind and its date, after the price on the same line; the gaps are margins because the @if blocks around the two spans drop Razor's whitespace. */ .ap-report-price-kind[b-0l3k5wqsdi] { margin-left: 0.35rem; } .ap-report-asof[b-0l3k5wqsdi] { margin-left: 0.3rem; } /* Cards */ .ap-card[b-0l3k5wqsdi] { background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #e6e8eb); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 0.85rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .ap-card-head[b-0l3k5wqsdi] { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem; } .ap-ico[b-0l3k5wqsdi] { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; flex: 0 0 auto; } .ap-ico-blue[b-0l3k5wqsdi] { background: #e7f0fe; color: #1f6feb; } .ap-ico-green[b-0l3k5wqsdi] { background: #e3f5ec; color: #0f9d58; } .ap-pill-head[b-0l3k5wqsdi] { margin-left: auto; } /* #867 - the slot the card's source badge sits in. The badge is the DS-wide DsSourceBadge (#805 E1); this is only its placement, copied from AskPenelopeChat.razor.css:476-481, which CSS isolation scopes to that component and so cannot be shared. */ .ap-source-slot[b-0l3k5wqsdi] { margin-left: auto; align-self: flex-start; flex-shrink: 0; display: inline-flex; } /* Two heads already carry a rating/sentiment pill with margin-left:auto (.ap-pill-head). Two auto margins among flex siblings SPLIT the free space, which pushes that pill off the right edge and parks it mid-head. The source slot keeps the auto, the pill before it gives its own up, so the pair stays flush right with the source badge last. #867: a general sibling, not an adjacent one - the per-value mark of the rating pill now sits between the two, and an adjacent selector would silently stop matching and split the head. */ .ap-pill-head ~ .ap-source-slot[b-0l3k5wqsdi] { margin-left: 0; } /* #867 - the per-value mark of Mauro's second pill. Same badge as the section's, placed beside the value instead of at the edge of the head, so it takes NO auto margin: the only difference between the two slots is where they sit. */ .ap-source-inline[b-0l3k5wqsdi] { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 0.35rem; } /* Striped label/value rows */ .ap-rows[b-0l3k5wqsdi] { display: flex; flex-direction: column; } .ap-row2[b-0l3k5wqsdi] { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.88rem; } .ap-row2:nth-child(odd)[b-0l3k5wqsdi] { background: var(--bs-secondary-bg, #f4f5f7); } .ap-row-accent[b-0l3k5wqsdi] { background: #e3f5ec !important; } .ap-row-val[b-0l3k5wqsdi] { font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; } .ap-of100[b-0l3k5wqsdi] { font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); font-weight: 400; } /* Pills */ .ap-pill[b-0l3k5wqsdi] { display: inline-flex; align-items: center; padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; } .ap-pill-sm[b-0l3k5wqsdi] { padding: 0.05rem 0.45rem; font-size: 0.68rem; } .ap-pill-pos[b-0l3k5wqsdi] { background: #d3f1e0; color: #0f6b43; } .ap-pill-neg[b-0l3k5wqsdi] { background: #fbdbd8; color: #a52217; } .ap-pill-neutral[b-0l3k5wqsdi] { background: #e9ecef; color: #495057; } .ap-pos[b-0l3k5wqsdi] { color: #1a8754; } .ap-neg[b-0l3k5wqsdi] { color: #dc3545; } /* Text */ .ap-report-text[b-0l3k5wqsdi] { line-height: 1.55; margin: 0 0 0.5rem; } .ap-report-meta[b-0l3k5wqsdi] { font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); margin-top: 0.4rem; } /* #963 - the Analyst Ranking line under the distribution strip: label left, pill + total right, the row shape of .ap-row2 without its striping (it is not a row of a list). */ .ap-analyst-ranking[b-0l3k5wqsdi] { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.88rem; } .ap-analyst-ranking .ap-report-meta[b-0l3k5wqsdi] { margin-top: 0; } /* #637 decision 37 (DS §9.2-bis) - the call's context line, right under the card's title (the head already leaves its margin, so none on top), and the tone bar under it, held off whatever comes next (the recap tabs or the summary's subtitle). */ .ap-call-context[b-0l3k5wqsdi] { margin: -0.35rem 0 0.5rem; } .ap-call-tone[b-0l3k5wqsdi] { margin: 0 0 0.6rem; } /* #575 P6 (38) - the freshness footer under the last card. */ .ap-report-footer[b-0l3k5wqsdi] { margin: 0.25rem 0.15rem 0.5rem; } .ap-report-subtitle[b-0l3k5wqsdi] { font-weight: 600; font-size: 0.85rem; margin: 0.85rem 0 0.4rem; } .ap-link[b-0l3k5wqsdi] { border: none; background: none; color: #1f6feb; cursor: pointer; padding: 0; font-size: 0.85rem; font-weight: 600; } /* Scores */ .ap-scores[b-0l3k5wqsdi] { display: flex; flex-direction: column; gap: 0.55rem; } .ap-score-top[b-0l3k5wqsdi] { display: flex; justify-content: space-between; font-size: 0.84rem; margin-bottom: 0.15rem; } /* #805 item 4 — DS v2 §3.2/§6.9: score bars are `pill 999`, track and fill. */ .ap-score-bar[b-0l3k5wqsdi] { height: 7px; border-radius: 999px; background: var(--bs-secondary-bg, #e9ecef); overflow: hidden; } .ap-score-fill[b-0l3k5wqsdi] { height: 100%; background: #1f6feb; border-radius: 999px; } /* Tabs */ .ap-tabs[b-0l3k5wqsdi] { display: inline-flex; gap: 0.25rem; background: var(--bs-secondary-bg, #eef0f3); border-radius: 10px; padding: 0.2rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .ap-tab[b-0l3k5wqsdi] { border: none; background: transparent; padding: 0.3rem 0.85rem; border-radius: 8px; font-size: 0.82rem; cursor: pointer; color: var(--bs-secondary-color, #6c757d); } .ap-tab-on[b-0l3k5wqsdi] { background: #1f6feb; color: #fff; } /* Earnings recaps */ .ap-recaps[b-0l3k5wqsdi] { display: flex; flex-direction: column; gap: 0.4rem; } .ap-recap[b-0l3k5wqsdi] { border-radius: 8px; padding: 0.55rem 0.7rem; } .ap-recap-pos[b-0l3k5wqsdi] { background: #e8f7ef; } .ap-recap-neg[b-0l3k5wqsdi] { background: #fdeceb; } .ap-recap-head[b-0l3k5wqsdi] { font-weight: 600; font-size: 0.88rem; } .ap-recap-text[b-0l3k5wqsdi] { font-size: 0.83rem; line-height: 1.45; margin-top: 0.2rem; color: var(--bs-secondary-color, #495057); } /* Momentum sub-cards */ .ap-mom[b-0l3k5wqsdi] { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; } .ap-mom-card[b-0l3k5wqsdi] { border: 1px solid var(--bs-border-color, #e6e8eb); border-radius: 10px; padding: 0.55rem 0.7rem; } .ap-mom-name[b-0l3k5wqsdi] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bs-secondary-color, #6c757d); } .ap-mom-val[b-0l3k5wqsdi] { font-size: 1.2rem; font-weight: 700; } .ap-mom-rate[b-0l3k5wqsdi] { font-size: 0.75rem; font-weight: 600; } /* Price spark */ .ap-spark[b-0l3k5wqsdi] { width: 100%; height: 110px; color: #1f6feb; } .ap-spark polyline[b-0l3k5wqsdi] { stroke: currentColor; } /* Financials */ .ap-fin-head[b-0l3k5wqsdi] { display: flex; justify-content: space-between; align-items: baseline; margin: 0.4rem 0 0.3rem; } .ap-fin-name[b-0l3k5wqsdi] { font-weight: 600; } .ap-fin-table[b-0l3k5wqsdi] { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .ap-fin-table td[b-0l3k5wqsdi] { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--bs-border-color, #eef0f3); } .ap-fin-val[b-0l3k5wqsdi] { text-align: right; font-weight: 600; white-space: nowrap; } .ap-fin-chg[b-0l3k5wqsdi] { text-align: right; white-space: nowrap; width: 60px; } /* News */ .ap-news[b-0l3k5wqsdi] { display: flex; flex-direction: column; } .ap-news-item[b-0l3k5wqsdi] { padding: 0.55rem 0; border-bottom: 1px solid var(--bs-border-color, #eef0f3); } .ap-news-item:last-child[b-0l3k5wqsdi] { border-bottom: none; } .ap-news-title[b-0l3k5wqsdi] { display: block; font-weight: 600; color: var(--bs-body-color, #212529); text-decoration: none; margin: 0.2rem 0 0.1rem; line-height: 1.35; } .ap-news-title:hover[b-0l3k5wqsdi] { color: #1f6feb; text-decoration: underline; } .ap-news-meta[b-0l3k5wqsdi] { font-size: 0.74rem; color: var(--bs-secondary-color, #6c757d); } .ap-news-row[b-0l3k5wqsdi] { cursor: pointer; } .ap-news-row:hover .ap-news-title[b-0l3k5wqsdi] { color: #1f6feb; } .ap-news-body[b-0l3k5wqsdi] { margin-top: 0.45rem; font-size: 0.85rem; line-height: 1.5; color: var(--bs-secondary-color, #495057); } .ap-news-body p[b-0l3k5wqsdi] { margin: 0 0 0.5rem; } /* Price chart + pager */ .ap-chartbox[b-0l3k5wqsdi] { width: 100%; height: 220px; } /* #575 decision 36 - the EPS consensus history: the price chart's box, shorter. */ .ap-est-chart[b-0l3k5wqsdi] { height: 160px; } /* #575 decision 36 - the consensus spread beside its average, on the value's line. */ .ap-est-range[b-0l3k5wqsdi] { margin: 0 0 0 0.4rem; } /* #575 decision 29 - the ADR line sits between the news head and the list. */ .ap-news-symbol[b-0l3k5wqsdi] { margin: 0 0 0.35rem; } .ap-pager[b-0l3k5wqsdi] { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-top: 0.7rem; } .ap-pager-btn[b-0l3k5wqsdi] { border: 1px solid var(--bs-border-color, #e6e8eb); background: var(--bs-body-bg, #fff); border-radius: 8px; width: 32px; height: 28px; cursor: pointer; color: var(--bs-body-color, #212529); } .ap-pager-btn:disabled[b-0l3k5wqsdi] { opacity: 0.4; cursor: default; } .ap-pager-info[b-0l3k5wqsdi] { font-size: 0.82rem; color: var(--bs-secondary-color, #6c757d); } /* Key developments */ .ap-devs[b-0l3k5wqsdi] { display: flex; flex-direction: column; } .ap-dev[b-0l3k5wqsdi] { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--bs-border-color, #eef0f3); font-size: 0.85rem; } .ap-dev:last-child[b-0l3k5wqsdi] { border-bottom: none; } .ap-dev-dot[b-0l3k5wqsdi] { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-secondary-color, #adb5bd); flex: 0 0 auto; } .ap-dev-dot.ap-pos[b-0l3k5wqsdi] { background: #1a8754; } .ap-dev-dot.ap-neg[b-0l3k5wqsdi] { background: #dc3545; } .ap-dev-head[b-0l3k5wqsdi] { flex: 1 1 auto; } .ap-dev-type[b-0l3k5wqsdi] { color: var(--bs-secondary-color, #6c757d); font-size: 0.76rem; white-space: nowrap; } /* Peers */ .ap-peers[b-0l3k5wqsdi] { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .ap-peers td[b-0l3k5wqsdi] { padding: 0.4rem 0.4rem; border-bottom: 1px solid var(--bs-border-color, #eef0f3); } .ap-peers-head td[b-0l3k5wqsdi] { font-size: 0.7rem; text-transform: uppercase; color: var(--bs-secondary-color, #6c757d); } .ap-peer-row[b-0l3k5wqsdi] { cursor: pointer; } .ap-peer-row:hover td[b-0l3k5wqsdi] { background: var(--bs-secondary-bg, #f4f5f7); } .ap-peer-ticker[b-0l3k5wqsdi] { font-weight: 700; white-space: nowrap; } .ap-peer-name[b-0l3k5wqsdi] { color: var(--bs-secondary-color, #6c757d); } .ap-peer-num[b-0l3k5wqsdi] { text-align: right; white-space: nowrap; } /* ============================================================================ Dark-mode legibility fixes. A few sections hard-code a LIGHT tint background (the Fundamental-rating accent row and the Earnings-call recap cards). In dark mode the body text flips to light while those fills stayed light — light text on a light fill, unreadable. Re-tint them with translucent fills that read correctly over the dark card, and lift the small green/red semantic values so they keep enough contrast on dark. Light mode is unchanged. ============================================================================ */ [data-bs-theme="dark"] .ap-row-accent[b-0l3k5wqsdi] { background: rgba(15, 157, 88, 0.18) !important; } [data-bs-theme="dark"] .ap-recap-pos[b-0l3k5wqsdi] { background: rgba(15, 157, 88, 0.15); } [data-bs-theme="dark"] .ap-recap-neg[b-0l3k5wqsdi] { background: rgba(220, 53, 69, 0.15); } [data-bs-theme="dark"] .ap-pos[b-0l3k5wqsdi] { color: #3ddc84; } [data-bs-theme="dark"] .ap-neg[b-0l3k5wqsdi] { color: #ff6b6b; } [data-bs-theme="dark"] .ap-dev-dot.ap-pos[b-0l3k5wqsdi] { background: #3ddc84; } [data-bs-theme="dark"] .ap-dev-dot.ap-neg[b-0l3k5wqsdi] { background: #ff6b6b; } /* /Shared/AskPenelope/AskPenelopeTeaser.razor.rz.scp.css */ /* Native Ask Penelope dashboard teaser — mirrors the layout of the original Bridgewise teaser it replaces: branded header, intro line, prompt composer, then a left-aligned stack of suggestion chips. The white surface comes from .bg-brand-card (theme-aware: white in light, dark elevated in dark). */ .ap-teaser[b-0zzwcoxhmr] { /* small top gap from the card header (the card body is pt-0) */ margin-top: 0.25rem; /* design-docs #1: vertical padding trimmed (was 1.15rem / 1.3rem) so the teaser's intrinsic height still fits the shorter .ad-dash-card-top. */ padding: 0.85rem 1.35rem 0.95rem; } .ap-teaser-head[b-0zzwcoxhmr] { margin-bottom: 0.35rem; } .ap-teaser-logo[b-0zzwcoxhmr] { width: 30px; height: 30px; border-radius: 50%; flex: none; } .ap-teaser-title[b-0zzwcoxhmr] { font-size: 1.15rem; font-weight: 600; line-height: 1.2; } .ap-teaser-hint[b-0zzwcoxhmr] { font-size: 0.9rem; /* design-docs #1: was 1rem */ margin-bottom: 0.65rem; } .ap-teaser-chips[b-0zzwcoxhmr] { /* design-docs #1: was 0.9rem */ margin-top: 0.7rem; } /* Stack the chips vertically and left-align them (the shared component centres them in a wrapping row by default — we only change it inside the teaser). */ .ap-teaser-chips[b-0zzwcoxhmr] .metis-quick-actions { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.5rem; } .ap-teaser-chips[b-0zzwcoxhmr] .metis-action-chip { max-width: 100%; text-align: left; white-space: normal; } /* /Shared/DS/DsDistributionBar.razor.rz.scp.css */ /* Segmented distribution bar - GH #805 E4. Geometry from the sector-bar of Design System v2 §6.x (LeafBasketPanel row): "sector-bar a segmenti alta 10px, `pill 999` come la ScoreBar, e legenda a punti 8px" - the DS already has a segmented horizontal bar with a dotted legend, and this is that shape with Mauro's contents. §3.2 puts every horizontal score-and-share bar on `pill 999`. ── The colours ─────────────────────────────────────────────────────────────────────────────── The five steps of §1.7, used as SURFACES: `neg-text #AA2233` (negative strong), `neg-bg #FDDDDF` (negative soft), the neutral composite `#EEF1F4` (neutral), `pos-bg #D3F9DD` (positive soft), `pos-text #068068` (positive strong). They are the backgrounds of the qualitative scale, identical in the two themes by Mauro's 09.09.2026 decision, so there is no dark branch in this file and there must not be one. Two intensities are what make four adjacent classes of the same sign readable as four and not as one long block; the 1px cut between segments (below) is what keeps two of them apart when the eye is close to the boundary. */ .ds-dbar[b-9yiynhj7ux] { display: flex; flex-direction: column; gap: 0.4rem; } .ds-dbar-track[b-9yiynhj7ux] { display: flex; height: 10px; border-radius: 999px; overflow: hidden; /* Nothing counted never reaches here (the component does not render), so the track carries no background of its own: every pixel of it belongs to a class. */ } .ds-dbar-seg[b-9yiynhj7ux] { height: 100%; min-width: 2px; /* The cut between two segments, in the sunken surface: a class that scores one out of forty must still be visible as a class, and two soft neighbours must not merge into one band. */ box-shadow: 1px 0 0 0 var(--color-bg-sunken, #FFFFFF); } .ds-dbar-seg:last-child[b-9yiynhj7ux] { box-shadow: none; } .ds-dbar-legend[b-9yiynhj7ux] { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; margin: 0; padding: 0; list-style: none; } .ds-dbar-key[b-9yiynhj7ux] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 13px; color: var(--color-text-secondary); } /* "Legenda a punti 8px". */ .ds-dbar-dot[b-9yiynhj7ux] { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; } .ds-dbar-count[b-9yiynhj7ux] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text-primary); } /* ── The five steps of §1.7 ───────────────────────────────────────────────────────────────── */ .ds-dbar-neg-strong[b-9yiynhj7ux] { background: var(--color-neg-text, #AA2233); } .ds-dbar-neg-soft[b-9yiynhj7ux] { background: var(--color-neg-bg, #FDDDDF); } /* The neutral composite #EEF1F4: a literal for the same reason `.ap-badge-neutral` and `.ds-badge-neutral` write theirs - the repo's 8-stop neutral scale carries no value at that step, and moving the scale (#805 Q2) is a decision Mauro took OUT of this issue on 16.09. */ .ds-dbar-neutral[b-9yiynhj7ux] { background: #EEF1F4; } .ds-dbar-pos-soft[b-9yiynhj7ux] { background: var(--color-pos-bg, #D3F9DD); } .ds-dbar-pos-strong[b-9yiynhj7ux] { background: var(--color-pos-text, #068068); } /* /Shared/DS/DsDivider.razor.rz.scp.css */ /* The two dividers - GH #805 E5. Design System v2 §1.5: `border` / `divider` is the ONE border of the system, #C0C8D0 light / #105070 dark. Both variants are that colour and 1px; the only thing that differs is the stroke, because the two say different things and not different amounts of the same thing. No new colour enters with this component: it reads --color-divider, which the theme already flips on [data-theme], so there is no dark rule here. (The token's current values are the repo's #CCDBE2 / #2D4A58 rather than the DS's #C0C8D0 / #105070 - that gap is a token item, not a component one, and moving it from inside a component would change every hairline on the site from a file nobody would think to look in.) Bootstrap's own hr reset gives the element opacity .25 and a border of its own, which is why both are overridden explicitly rather than left to inherit. */ .ds-divider[b-r3sapdsqrx] { width: 100%; margin: 0; border: 0; border-top-width: 1px; border-top-color: var(--color-divider, #CCDBE2); opacity: 1; } /* Structural: one section of a card from the next. */ .ds-divider-section[b-r3sapdsqrx] { border-top-style: solid; } /* "Cio che sopravvive allo spegnimento del fornitore da cio che cade con esso." The dashes are the browser's default rhythm for a 1px border - a hand-tuned dash pattern would be a value the DS has not declared. */ .ds-divider-vendor[b-r3sapdsqrx] { border-top-style: dashed; } /* /Shared/DS/DsGradientBar.razor.rz.scp.css */ /* Gradient bar - DS §6.9, «Barra a gradiente dell'Analyst Ranking» (Mauro, 23.09.2026), in the extended ScoreBar layout of the same section: "etichetta e valore in riga, barra a piena larghezza sotto". First used for the call's tone, #637 decision 37 (DS §9.2-bis, 7b0a47d). The geometry is the threshold bar's (DsThresholdBar.razor.css): label `text-secondary` 13px, value Geist Mono 13px (--font-mono on the web), track 6 high on `pill 999`. What differs is the spec's own: the track is the gradient itself, with no fill and no bands, and on the value sits a round cursor of 10 "col colore del punto in cui si trova" and "l'anello `surface-elevated` che lo stacca". The track and the cursor colours are inline (DsGradientBarRules), because the cursor's is computed from where it sits. */ .ds-gbar[b-8ws7xj7aqz] { display: flex; flex-direction: column; gap: 0.3rem; } .ds-gbar-head[b-8ws7xj7aqz] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .ds-gbar-label[b-8ws7xj7aqz] { font-size: 13px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* DS §9.2-bis: the word "accanto all'etichetta, in minuscolo e in `text-secondary`, così com'è arriva". A margin, because Razor drops the whitespace between the two spans. */ .ds-gbar-word[b-8ws7xj7aqz] { margin-left: 0.4rem; text-transform: lowercase; color: var(--color-text-secondary); } .ds-gbar-value[b-8ws7xj7aqz] { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* §6.9: height 6, `pill 999`. Not `overflow: hidden` like the threshold track: the cursor is taller than the track and must not be clipped by it. The margin leaves room for the cursor's half that stands above and below the track. */ .ds-gbar-track[b-8ws7xj7aqz] { position: relative; height: 6px; margin: 2px 0; border-radius: 999px; } /* The cursor: 10 across, centred on the value, with a ring in the card's own surface so it reads against the gradient under it. The ring colour is a custom property because the card is not the same surface everywhere; on the report it is the card's --bs-body-bg. The background here is only the fallback for a browser without color-mix: the inline one wins wherever it parses. */ .ds-gbar-cursor[b-8ws7xj7aqz] { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--ds-gbar-ring, var(--bs-body-bg, #FFFFFF)); background: var(--regime-lateral, #C0C8D0); transition: left var(--dur-med, 250ms) var(--ease-standard, ease-in-out); } /* ── The number's colour, on the caller's cuts ────────────────────────────────────────────── The same on-surface pair as the threshold bar (§6.3), which the theme flips. */ .ds-gbar-pos .ds-gbar-value[b-8ws7xj7aqz] { color: var(--color-pos-on-surface, #068068); } .ds-gbar-neg .ds-gbar-value[b-8ws7xj7aqz] { color: var(--color-neg-on-surface, #AA2233); } /* The middle band as TEXT: `neutral-3 #507090` on light, where the grey fill as text does not pass AA (§6.9: "il grigio di riempimento della banda come testo non passa AA"); on dark the fill itself is the legible one. The same two values, and the same reason, as DsThresholdBar. */ .ds-gbar-neutral .ds-gbar-value[b-8ws7xj7aqz] { color: #507090; } [data-bs-theme="dark"] .ds-gbar-neutral .ds-gbar-value[b-8ws7xj7aqz] { color: var(--regime-lateral, #C0C8D0); } /* §5.1, Mauro 10.09.2026: with the system setting on, the transitions become instant. */ @media (prefers-reduced-motion: reduce) { .ds-gbar-cursor[b-8ws7xj7aqz] { transition: none; } } /* /Shared/DS/DsSourceBadge.razor.rz.scp.css */ /* Provenance badge - Design System v2 §6.4 (geometry) + §6.6 (the four Alert pairs) + §1.7 (the neutral step). GH #805 E1. §6.4, verbatim: "etichetta 11px/600 uppercase, letter-spacing .04em; padding 2x8; pill 999; nowrap; nessun bordo". The one deliberate departure is the uppercase: the DS writes the qualitative words (Bad, Leader, High Edge) in capitals, and Mauro wrote the chat's two lane labels lowercase in the same breath (#573, 10.09.2026). A text-transform here would overrule whatever the caller passes, so the casing stays the caller's and the geometry stays the DS's. The pairs are IDENTICAL in the two themes (Mauro, 26.08/09.09.2026: "l'Alert e una superficie chiara che si posa sulla pagina in entrambi i temi"), so there is no dark override in this file and there must not be one: a dark branch here measured 1,15 on Conferma. */ .ds-srcbadge[b-pno8sib9p4] { display: inline-flex; align-items: center; /* sm 8 would push the dot far enough to read as a separate object; the dot belongs TO the badge without being IN it, which is what half a step says. */ gap: 6px; } .ds-badge[b-pno8sib9p4] { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.4; padding: 2px 8px; border: 0; border-radius: 999px; white-space: nowrap; } /* §6.6 "Nota": neutral information. #E7F6FF is the opaque composite of rgba(interactive, .10) on white that the DS requires to be written out - an rgba would composite on the dark card in dark theme and stop being this colour. The repo carries no token for it yet (the same reason .ap-badge-neutral writes its two literals: #805 Q2, the muted-scale migration, is its own decision), so it is a literal with its source named rather than a token that does not exist. */ .ds-badge-note[b-pno8sib9p4] { background: #E7F6FF; color: var(--color-interactive-hover, #1166AA); } /* §6.6 "Conferma": a closed decision - in the chat, the content is ours. */ .ds-badge-confirm[b-pno8sib9p4] { background: var(--color-pos-bg, #D3F9DD); color: var(--color-pos-text, #068068); } /* §6.6 "Avviso": attention, nothing to correct - in the chat, the vendor lane on its way out. */ .ds-badge-warning[b-pno8sib9p4] { background: var(--color-warn-bg, #FFF6CC); color: var(--color-warn-text, #946A00); } /* §6.6 "Errore": something to correct, a deprecated value. */ .ds-badge-error[b-pno8sib9p4] { background: var(--color-neg-bg, #FDDDDF); color: var(--color-neg-text, #AA2233); } /* §1.7 neutral: the opaque composite #EEF1F4 on neutral-3 #507090, identical in both themes. Literals for the same reason as .ds-badge-note above. */ .ds-badge-neutral[b-pno8sib9p4] { background: #EEF1F4; color: #507090; } /* The external-source dot. #8898A8 is Mauro's neutral-5 and enters the web with this component: the repo's 8-stop neutral scale has no value at that step, so it is written here and nowhere else until the scale itself is migrated. 6x6 is the DS's own dot measure (§6.16, "pallino spento 6x6"): next to an 11px label a 7px dot - the chat lane marker of §5.3 - reads as a second badge rather than a mark on this one. It takes no interactive state (§5.2: an informative mark reacts to nothing). */ .ds-srcbadge-dot[b-pno8sib9p4] { flex-shrink: 0; width: 6px; height: 6px; border-radius: 999px; background: #8898A8; } /* /Shared/DS/DsThresholdBar.razor.rz.scp.css */ /* Threshold mini-bar - GH #805 E2 (the bar) + E3 (the colour of the value). Geometry from Design System v2 §6.9, the ScoreBar "estesa": "etichetta - valore su una riga, barra a piena larghezza sotto", track 6 high, `pill 999`, label `text-secondary`, value Geist Mono 13px, value change at `dur-med`/`ease-standard`. What this bar adds to the ScoreBar is Mauro's own (10.09.2026): the steps on the track where the meaning changes, no numeric scale under it, and a DECLARED truncation when the axis is a cut of a continuous range. ── The colour, and one declared departure from §6.9 ────────────────────────────────────────── §6.9 fills the ScoreBar with `interactive` whatever the judgement, "una barra rossa accanto a un badge rosso darebbe due allarmi per un fatto solo". This bar is the opposite case by Mauro's own specification: it carries no badge, and the colour IS the judgement ("Semantica di colore per i valori. Verde, giallo, rosso su un numero", 10.09.2026). So the fill and the number take the band's colour - one colour for both, per §6.3: "Senza contenitore (testo diretto su card o pagina, bande, barre): pos-on-surface / neg-on-surface, un solo colore per riempimento e testo." The ScoreBar itself is untouched by this file. ── The middle band ─────────────────────────────────────────────────────────────────────────── Mauro, 16.09.2026 (issue comment 5692567263), answering the question PR 3a held this component for: "Banda centrale delle barre a soglia: il colore dei valori neutral/hold. Non la coppia degli avvisi e non il giallo del vincolo - la banda di mezzo e un giudizio neutro e deve usare il colore che gia diciamo 'ne positivo ne negativo', lo stesso di un hold. Cosi la barra si legge con la stessa grammatica del resto della piattaforma invece di introdurre un terzo significato per il giallo." That colour is the neutral of sign of §1.6 - `#C0C8D0`, identical in both themes, which the web carries as `--regime-lateral` (#805 item 15, already on main) and which §1.7 gives to the neutral step a Hold / Flat rating wears. `warn-bg`/`warn-text` and `binding #E0A800` are both OUT, by his word. */ .ds-tbar[b-ac6y1aii34] { display: flex; flex-direction: column; gap: 0.15rem; /* The truncation marker is positioned against this box, not against the track: a marker inside an `overflow: hidden` track would be clipped by the thing it is describing. */ position: relative; } .ds-tbar-head[b-ac6y1aii34] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } /* §6.9: "etichetta `text-secondary`". */ .ds-tbar-label[b-ac6y1aii34] { font-size: 13px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* §6.9: "valore Geist Mono 13px" - the web's mono face is --font-mono (Appendix B row 827 records the family itself as debt, and is out of #805's scope). The colour is the band's, set below. */ .ds-tbar-value[b-ac6y1aii34] { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* §6.9: track `subtle`, height 6, `pill 999`. The web's name for the §1.5 subtle surface is `bg-elevated` (dark #1E4255 is the DS value exactly; light is the repo's #E0E5E9 against the DS's #E0E8F0 - a token gap, not a component one). */ .ds-tbar-track[b-ac6y1aii34] { position: relative; height: 6px; border-radius: 999px; background: var(--color-bg-elevated, #E0E5E9); overflow: hidden; } .ds-tbar-fill[b-ac6y1aii34] { height: 100%; border-radius: 999px; /* §3 motion table: "cambio valore della ScoreBar" is `dur-med`/`ease-standard`. */ transition: width var(--dur-med, 250ms) var(--ease-standard, ease-in-out); } /* The steps: "traccia con gradini visibili nei punti in cui cambia il significato, nessuna scala numerica sotto". A notch in the page's own sunken colour rather than a hairline, because the mark has to read on the track AND on all three fills: at 6px tall a `border`-coloured line disappears into the neutral fill, which is the band the steps bound. */ .ds-tbar-step[b-ac6y1aii34] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--color-bg-sunken, #FFFFFF); } /* The declared truncation - "la differenza fra una barra onesta e una che suggerisce una scala inesistente". Two short strokes past the cut end of the track, in `text-secondary`: the axis stops here, the number above does not. */ .ds-tbar-cut[b-ac6y1aii34] { position: absolute; right: 0; bottom: 0; width: 5px; height: 6px; background: repeating-linear-gradient( to right, var(--color-text-secondary) 0, var(--color-text-secondary) 1px, transparent 1px, transparent 3px); } /* ── The three bands ───────────────────────────────────────────────────────────────────────── Positive and negative take the on-surface pair of §6.3, which the theme already flips (#068068 / #11FFAA and #AA2233 / #FF3030 after #805 PR 1). */ .ds-tbar-pos .ds-tbar-fill[b-ac6y1aii34] { background: var(--color-pos-on-surface, #068068); } .ds-tbar-pos .ds-tbar-value[b-ac6y1aii34] { color: var(--color-pos-on-surface, #068068); } .ds-tbar-neg .ds-tbar-fill[b-ac6y1aii34] { background: var(--color-neg-on-surface, #AA2233); } .ds-tbar-neg .ds-tbar-value[b-ac6y1aii34] { color: var(--color-neg-on-surface, #AA2233); } /* The neutral of sign as a FILL: `#C0C8D0`, the same in both themes (§1.6, Mauro 09.09.2026), read here through the token #805 item 15 already put on main. */ .ds-tbar-neutral .ds-tbar-fill[b-ac6y1aii34] { background: var(--regime-lateral, #C0C8D0); } /* ...and as TEXT, where §1.6 is explicit that the fill does not carry over: "Come testo su superficie chiara usa `neutral-3 #507090` (5,17): il fill puro come testo non regge". On a dark surface the fill itself is the legible one (9,98 on a dark card) and neutral-3 is not, so this is the one place in the component with a dark branch - and it is a contrast rule, not a second colour. #507090 is a literal for the same reason `.ap-badge-neutral` writes it: the repo's 8-stop neutral scale carries no value at that step (#805 Q2 is a separate decision, and Mauro removed it from this issue on 16.09). */ .ds-tbar-neutral .ds-tbar-value[b-ac6y1aii34] { color: #507090; } [data-bs-theme="dark"] .ds-tbar-neutral .ds-tbar-value[b-ac6y1aii34] { color: var(--regime-lateral, #C0C8D0); } /* §5.1, Mauro 10.09.2026: with the system setting on, the transitions of the motion table become instant - "nessun componente si esenta". */ @media (prefers-reduced-motion: reduce) { .ds-tbar-fill[b-ac6y1aii34] { transition: none; } } /* /Shared/HorizontalStrip.razor.rz.scp.css */ /* Horizontal strip - Design System v2 §6.16 + §6.17 (#575 B3.4). The two DS measures the caller chooses arrive as custom properties on .hstrip: --hstrip-min (item minimum, 200 by default) and --hstrip-gutter (12 between cards, 8 between chips). Everything else here is a fixed DS value: arrow box 28, glyph 16, peek 24, dot 6x6 / 18x6 / 4x4. Snapping, the axis lock of the first pixels of a gesture and the vertical wheel all stay with the browser: scroll-snap does the first, native horizontal scrolling does the second, and nothing here captures a wheel event. #805 S1: audited value by value against the §6.16 table. The geometry was already right (28 / 16 / 24 / 200, dots 6-18-4 capped at seven, snap + overscroll containment + hidden scrollbar, arrows at opacity 0 and never display:none, one tab stop above five items), and so was the §5.1 reduced-motion branch at the foot of this file. What was off: the arrow box was 28 SQUARE rather than 28 by the strip's height, the dots wore a grey pair of their own instead of `border` and `interactive` and moved in 150ms instead of `dur-med`, the pressed dimming of §5.2 was missing, the focus ring was 2px instead of 1,5, and three durations were literals where the motion tokens exist. Each is fixed below with the DS line that asks for it. */ .hstrip[b-m0jf089ghu] { width: 100%; } .hstrip-row[b-m0jf089ghu] { display: flex; align-items: center; gap: 4px; } /* The track. overflow-x rather than a transform, so a trackpad flick, a drag and the keyboard all move the same thing and the browser keeps the scrollbar semantics. */ .hstrip-track[b-m0jf089ghu] { display: flex; flex: 1 1 auto; min-width: 0; gap: var(--hstrip-gutter, 12px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .hstrip-track[b-m0jf089ghu]::-webkit-scrollbar { display: none; } /* DS §5.2 / §6.16: the focus ring is `interactive` at 1,5px, the same ring as an input field. sm 8 is the radius of a scroll-box (§3.2). */ .hstrip-track:focus-visible[b-m0jf089ghu] { outline: 1.5px solid var(--color-interactive, #11AAFF); outline-offset: 2px; border-radius: 8px; } /* DS §6.16: "l'elemento non si stira" - no grow, no shrink, a floor and no ceiling. */ .hstrip-item[b-m0jf089ghu] { flex: 0 0 auto; min-width: var(--hstrip-min, 200px); scroll-snap-align: start; } /* The 24px peek: where the arrows are not drawn, the next item always shows a strip of itself, which is what says "this row continues" when there is no chevron to say it. */ .hstrip-item[b-m0jf089ghu] { max-width: calc(100% - 24px); } /* Arrows: DS §6.16 - "Area della freccia 28 in larghezza per TUTTA L'ALTEZZA della striscia, glifo chevron 16", only where the pointer is precise. The height is align-self: stretch and not a number: a 28px box next to a 200px card leaves most of the strip's edge dead to the pointer, which is the opposite of what a 28-wide column is for. */ .hstrip-arrow[b-m0jf089ghu] { display: none; flex: 0 0 auto; align-self: stretch; width: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-secondary, #6c757d); cursor: pointer; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: opacity var(--dur-fast, 150ms) var(--ease-standard, ease-in-out); } .hstrip-arrow:hover[b-m0jf089ghu] { color: var(--color-interactive-hover, #1166AA); } /* DS §5.2: pressed is a 6% dimming, never a ripple. */ .hstrip-arrow:active[b-m0jf089ghu] { opacity: 0.94; } /* End of travel, and the case where everything fits: the arrows stay exactly where they are at opacity 0. NEVER display: none - the row would jump sideways by 2x28 the moment the strip reached an end. */ .hstrip-arrow-off[b-m0jf089ghu] { opacity: 0; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .hstrip-arrow[b-m0jf089ghu] { display: inline-flex; } /* With the arrows drawn, the peek is theirs to provide. */ .hstrip-item[b-m0jf089ghu] { max-width: none; } .hstrip-row-peek .hstrip-item[b-m0jf089ghu] { max-width: calc(100% - 24px); } } /* Indicators (DS §6.16, always both): dots centred on every platform, counter at the right of the dots' row where a pointer is precise and centred below them on touch. */ .hstrip-indicators[b-m0jf089ghu] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; } .hstrip-dots[b-m0jf089ghu] { display: flex; align-items: center; justify-content: center; gap: 6px; } /* DS §6.16: "pallino spento 6x6, acceso 18x6 pill 999, transizione dur-med", and the colour table of the same section - spento is `border`, acceso is `interactive` (whose 2,56 on a light card is the limit the DS declares for it and accepts). The neutral-2/neutral-4 pair this used to carry was a grey of its own next to an interactive one. */ .hstrip-dot[b-m0jf089ghu] { width: 6px; height: 6px; border-radius: 999px; background: var(--color-border, #CCDBE2); transition: width var(--dur-med, 250ms) var(--ease-standard, ease-in-out), background-color var(--dur-med, 250ms) var(--ease-standard, ease-in-out); } .hstrip-dot-on[b-m0jf089ghu] { width: 18px; background: var(--color-interactive, #11AAFF); } /* Beyond seven items the window of seven scrolls and its two edge dots shrink: a 4x4 dot means the sequence continues past it. */ .hstrip-dot-small[b-m0jf089ghu] { width: 4px; height: 4px; } .hstrip-counter[b-m0jf089ghu] { font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; line-height: 1.4; color: var(--color-text-muted, #6c757d); white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .hstrip-indicators[b-m0jf089ghu] { flex-direction: row; justify-content: center; } .hstrip-counter[b-m0jf089ghu] { position: absolute; right: 0; top: 0; } } /* §6.17 open: the wrapping grid the block had before there was a strip around it. */ .hstrip-grid[b-m0jf089ghu] { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--hstrip-min, 200px), 1fr)); gap: var(--hstrip-gutter, 12px); width: 100%; } /* §6.17 button, styled like §6.11: Body small, interactive-hover, 600, no chevron. Shape taken from the chat's own .ap-link (borderless, padding-free button); the colour and the weight are §6.11's, and there is deliberately no underline and no icon. */ .hstrip-showall-row[b-m0jf089ghu] { display: flex; justify-content: flex-start; margin-top: 8px; } .hstrip-showall[b-m0jf089ghu] { border: none; background: none; padding: 0; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--color-interactive-hover, #1166AA); text-decoration: none; } .hstrip-showall:hover[b-m0jf089ghu] { text-decoration: underline; } /* DS §5.1 reduced motion: instant, and no transitions. There is no automatic advance to stop - a strip never moves on its own. */ @media (prefers-reduced-motion: reduce) { .hstrip-track[b-m0jf089ghu] { scroll-behavior: auto; } .hstrip-dot[b-m0jf089ghu], .hstrip-arrow[b-m0jf089ghu] { transition: none; } } /* /Shared/Metis/BlViewsPanel.razor.rz.scp.css */ /* #510 — the Black-Litterman views panel: geometry only. No new colours. The surface, the border and the radius are the tokens the drill overlay already uses (MetisDrillOverlay.razor.css), and everything inside the body is Bootstrap vocabulary the "Vincoli" panel of /metis/optimize already speaks — this file exists to put the panel on the right-hand edge and keep it scrollable, nothing else. */ .blv-backdrop[b-klgoemjgzt] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1070; } .blv-panel[b-klgoemjgzt] { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1080; width: min(720px, 96vw); display: flex; flex-direction: column; background: var(--color-bg-elevated, #fff); border-left: 1px solid var(--color-border, #dee2e6); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3); } .blv-head[b-klgoemjgzt] { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border, #dee2e6); flex: none; } .blv-title[b-klgoemjgzt] { font-weight: 600; } .blv-subtitle[b-klgoemjgzt] { font-size: 0.82rem; opacity: 0.7; } .blv-close[b-klgoemjgzt] { margin-left: auto; flex: none; text-decoration: none; } .blv-body[b-klgoemjgzt] { padding: 1rem; overflow-y: auto; } /* The book is empty far more often than not while the editor is new — the state deserves a sentence, not a blank area. */ .blv-empty[b-klgoemjgzt] { border: 1px dashed var(--color-border, #dee2e6); /* #805 item 8 — DS v2 §3.2: an inner block, so `md 12`. */ border-radius: 12px; padding: 0.85rem 1rem; } .blv-table code[b-klgoemjgzt], .blv-assets[b-klgoemjgzt] { font-size: 0.82rem; } .blv-preview[b-klgoemjgzt] { border: 1px solid var(--color-border, #dee2e6); border-radius: 12px; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; } /* A reason the engine refused the view for, under the field it is about. Uses the same danger colour Bootstrap gives every other form error on this page. */ .blv-field-error[b-klgoemjgzt] { color: var(--bs-danger, #dc3545); margin-top: 0.15rem; } /* /Shared/Metis/ChatComposer.razor.rz.scp.css */ /* Pill composer (#207 area B). Tokens from _penelope-tokens.scss (WS-A) — they re-bind under [data-bs-theme="dark"], so the dark variant is automatic. */ .metis-composer[b-aajdbv3uso] { display: flex; align-items: flex-end; gap: 0.5rem; width: 100%; padding: 0.5rem 0.6rem 0.5rem 1.25rem; /* DS zero-border: a riposo nessun bordo visibile — la separazione è data dalla superficie (sunken) + ombra. Il bordo trasparente 1.5px riserva lo spazio del bordo a gradiente del focus, così il pill non "salta". */ border: 1.5px solid transparent; border-radius: 28px; background: var(--color-bg-sunken, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: box-shadow .12s ease; } /* DS §7.2 (eccezione nominata): al focus il composer prende un bordo 1.5px a gradiente giallo→verde. Tecnica double-background: il primo layer riempie il padding-box con la superficie (token theme-aware → funziona light e dark), il secondo dipinge il border-box col gradiente, che resta visibile solo dove il bordo è trasparente. Nessun cambio di sfondo, nessun alone: un solo segnale. Compone dagli ENDPOINT del design system (--gradient-yellow-green-*, DS §9 in _tokens-metis.scss) invece di usare --gradient-yellow-green: quel token è a 90deg, il composer è sempre stato a 135deg. Prendere il gradiente pronto cambierebbe l'angolo del bordo su Metis e Ask Penelope — i colori vengono dal DS, la geometria resta quella di questo componente. */ .metis-composer:focus-within[b-aajdbv3uso] { background: linear-gradient(var(--color-bg-sunken, #fff), var(--color-bg-sunken, #fff)) padding-box, linear-gradient(135deg, var(--gradient-yellow-green-from, #EBFF5F), var(--gradient-yellow-green-to, #6AFFA6)) border-box; } .metis-composer-disabled[b-aajdbv3uso] { opacity: .7; } .metis-composer-input[b-aajdbv3uso] { flex: 1; border: none; outline: none; resize: none; background: transparent; color: var(--color-text-primary, #173746); font: inherit; line-height: 1.5; /* one row by default; JS grows height up to this cap, then scrolls. */ max-height: 9rem; padding: 0.55rem 0; overflow-y: auto; } .metis-composer-input[b-aajdbv3uso]::placeholder { color: var(--color-text-muted, #8698A0); } .metis-composer-send[b-aajdbv3uso] { flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--color-interactive, #11AAFF); /* #207 R3 — sky-blue send button */ color: var(--icon-on-chat-send, #152025); /* DS §1.5-bis: mai bianco */ display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s ease, transform .06s ease; } /* DS §1.5: sull'hover il fill passa a interactive-hover e l'icona segue il contrasto del tema — light #1166AA (scuro) → icona bianca; dark #77CCFF (chiaro) → icona scura. Il colore dell'icona non è mai fisso. */ .metis-composer-send:hover:not(:disabled)[b-aajdbv3uso] { background: var(--color-interactive-hover, #1166AA); color: #fff; } [data-bs-theme="dark"] .metis-composer-send:hover:not(:disabled)[b-aajdbv3uso] { color: var(--icon-on-chat-send, #152025); } .metis-composer-send:active:not(:disabled)[b-aajdbv3uso] { transform: scale(.94); } .metis-composer-send:disabled[b-aajdbv3uso] { background: var(--color-neutral-4, #CCDBE2); cursor: default; } .metis-composer-arrow[b-aajdbv3uso] { font-size: 1.15rem; line-height: 1; } /* /Shared/Metis/Cockpit/AllocationTree.razor.rz.scp.css */ /* #207 R16 / Patch-8g — allocation tree (section 5). Indentation + a borderless row toggle that reads like a tree, not a button bar. */ .metis-alloc-tree th[b-kuuflxmkq3], .metis-alloc-tree td[b-kuuflxmkq3] { vertical-align: middle; } .metis-alloc-toggle[b-kuuflxmkq3] { background: none; border: none; padding: 0; text-align: left; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; } .metis-alloc-toggle:hover[b-kuuflxmkq3] { color: var(--bs-primary); } .metis-alloc-toggle .bi[b-kuuflxmkq3] { font-size: 0.7rem; opacity: 0.7; } /* Leaf rows are not buttons — just indented bullets. */ .metis-alloc-indent-1[b-kuuflxmkq3] { padding-left: 1.4rem; } .metis-alloc-indent-2[b-kuuflxmkq3] { padding-left: 2.8rem; } .metis-alloc-indent-3[b-kuuflxmkq3] { padding-left: 4.2rem; } /* L0 macro root (#207 Patch-9d): a stronger separator than the L1 rows below it. */ .metis-alloc-l0 > td[b-kuuflxmkq3] { border-top: 2px solid var(--bs-border-color, #dee2e6); } .metis-alloc-l1 > td[b-kuuflxmkq3] { border-top: 1px solid var(--bs-border-color, #dee2e6); } .metis-alloc-leaf td[b-kuuflxmkq3] { color: var(--bs-secondary-color, #6c757d); } /* WS-E UI-B (#285): a Bridgewise-mapped leaf renders as a drill link to its single-name basket — same borderless look as the tree toggles. */ .metis-alloc-leaf-drill[b-kuuflxmkq3] { background: none; border: none; padding: 0; text-align: left; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; } .metis-alloc-leaf-drill:hover[b-kuuflxmkq3] { color: var(--bs-primary); text-decoration: underline; } .metis-alloc-leaf-drill .bi[b-kuuflxmkq3] { font-size: 0.75rem; opacity: 0.7; } /* #285 UX-2b — inline L4 rows: the single-name basket nested under its leaf. */ .metis-alloc-indent-4[b-kuuflxmkq3] { padding-left: 5.6rem; } .metis-alloc-leaf-zoom[b-kuuflxmkq3] { background: none; border: none; padding: 0 0 0 0.4rem; color: inherit; cursor: pointer; opacity: 0.6; } .metis-alloc-leaf-zoom:hover[b-kuuflxmkq3] { color: var(--bs-primary); opacity: 1; } .metis-alloc-l4 td[b-kuuflxmkq3] { color: var(--bs-secondary-color, #6c757d); font-size: 0.85em; border-top: none; } .metis-alloc-l4-head td[b-kuuflxmkq3] { padding-top: 0.3rem; } .metis-alloc-l4-rank[b-kuuflxmkq3] { display: inline-block; min-width: 1.4rem; text-align: right; margin-right: 0.35rem; opacity: 0.6; } .metis-alloc-l4-name[b-kuuflxmkq3] { margin-left: 0.35rem; } .metis-alloc-l4-scores[b-kuuflxmkq3] { white-space: nowrap; } .metis-alloc-l4-click[b-kuuflxmkq3] { cursor: pointer; } .metis-alloc-l4-click:hover td[b-kuuflxmkq3] { color: var(--bs-primary); } /* Mauro 04/07 (T-6): la L4 espansa embedda ora l'intero (headline + sector breakdown + tabella completa + footer) come sub- accordion inline nell'albero. La riga host NON deve avere border-top che la separi dalla leaf che la produce (visualmente sono un blocco), e la cella deve dare respiro al panel embedded senza cornici extra. */ .metis-alloc-l4-basket-row > td[b-kuuflxmkq3] { padding: 0.25rem 0.5rem 0.75rem; border-top: none; background: var(--bs-body-bg, #fff); } .metis-alloc-l4-basket[b-kuuflxmkq3] { padding-top: 0.35rem; } /* /Shared/Metis/Cockpit/CockpitDashboard.razor.rz.scp.css */ /* WS-E UI-B (#285): Bridgewise-mapped leaf rows in the Tabella view render as a drill link into the single-name basket overlay. */ .metis-leaf-drill-link[b-0yxac1praf] { background: none; border: none; padding: 0; text-align: left; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; } .metis-leaf-drill-link:hover[b-0yxac1praf] { color: var(--bs-primary); text-decoration: underline; } .metis-leaf-drill-link .bi[b-0yxac1praf] { font-size: 0.75rem; opacity: 0.7; } /* /Shared/Metis/Cockpit/CoMovementNavPills.razor.rz.scp.css */ /* #207 Patch-10c / R22 — drill nav per il pannello co-movement. Mauro 04/07 (M-2): breadcrumb compatto in bottom position. Small text, segmenti cliccabili UP-only, dropdown peer inline sui livelli L2/L3. */ .metis-comov-breadcrumb[b-gjfjlleh77] { row-gap: 0.25rem; font-size: 0.78rem; } .metis-comov-crumb-label[b-gjfjlleh77] { font-weight: 500; color: #6c757d; } .metis-comov-crumb[b-gjfjlleh77] { display: inline-flex; align-items: center; background: transparent; border: none; padding: 0.1rem 0.4rem; /* #805 item 3 — DS v2 §3.2: "crumb del breadcrumb" -> `pill 999`. */ border-radius: 999px; color: var(--color-interactive, #11AAFF); font-size: 0.78rem; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .metis-comov-crumb:hover:not(.active):not(:disabled)[b-gjfjlleh77] { background: rgba(17, 170, 255, 0.08); } .metis-comov-crumb.active[b-gjfjlleh77] { color: #173746; font-weight: 600; cursor: default; } .metis-comov-sep[b-gjfjlleh77] { color: #adb5bd; padding: 0 0.15rem; } .metis-comov-crumb-wrap[b-gjfjlleh77] { display: inline-flex; align-items: center; gap: 0.15rem; } /* Dropdown peer inline: piccolo caret senza chrome. Sostituisce il default browser con un compact select che sta bene inline nel breadcrumb. */ .metis-comov-peer[b-gjfjlleh77] { border: 1px solid transparent; background: transparent; color: #6c757d; font-size: 0.72rem; padding: 0 0.15rem; cursor: pointer; /* #805 item 3 — the peer selector is part of the same crumb, so it takes the same `pill 999` (DS v2 §3.2); the issue names both lines of this file. */ border-radius: 999px; max-width: 11rem; } .metis-comov-peer:hover[b-gjfjlleh77], .metis-comov-peer:focus[b-gjfjlleh77] { border-color: var(--color-border, #dee2e6); background: #fff; outline: none; } /* /Shared/Metis/Cockpit/CorrelationHeatmap.razor.rz.scp.css */ .metis-heatmap[b-sa44qyhj4i] { width: 100%; min-height: 320px; } /* /Shared/Metis/Cockpit/CovarianceHeatmap.razor.rz.scp.css */ .metis-heatmap[b-x5j3ci1xjq] { width: 100%; min-height: 320px; } /* /Shared/Metis/Cockpit/GroupCapBullets.razor.rz.scp.css */ .metis-bullets[b-4zmoqw9yxm] { width: 100%; } /* /Shared/Metis/Cockpit/KpiStrip.razor.rz.scp.css */ .metis-kpi-strip[b-oph9e61fl1] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 1rem; } @media (max-width: 768px) { .metis-kpi-strip[b-oph9e61fl1] { grid-template-columns: repeat(2, 1fr); } } .metis-kpi-tile[b-oph9e61fl1] { /* #805 item 1 — DS v2 §3.2: the KPI tile is a container with its own surface, so it takes the container radius `lg 16`, "sempre". */ border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; /* dd#2 D.8: no hairline — the tile is already separated from the page by its own semantic tone (--metis-kpi-*-bg below). */ /* #805 item 2 — DS v2 §5.1: `dur-med` 250ms / `ease-standard`, and the properties are named ("Mai `transition: all`"). Only the semantic tone changes on this tile. */ transition: background-color var(--dur-med, 250ms) var(--ease-standard, ease-in-out), color var(--dur-med, 250ms) var(--ease-standard, ease-in-out); } .metis-kpi-value[b-oph9e61fl1] { font-size: 28px; font-weight: 600; line-height: 1.1; font-family: "IBM Plex Mono", monospace; /* #447 C4 */ } .metis-kpi-label[b-oph9e61fl1] { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; } /* #207 Patch-8b / R11: ≤3-word micro-description under the number, so a non-quant reader knows what ENB / HHI mean without hovering. The full explanation is the tile's title tooltip. */ .metis-kpi-blurb[b-oph9e61fl1] { font-size: 11px; line-height: 1.2; opacity: 0.65; margin-top: 2px; } .metis-kpi-tile[b-oph9e61fl1] { cursor: help; } .metis-kpi-pos[b-oph9e61fl1] { background: var(--metis-kpi-pos-bg); color: var(--metis-kpi-pos-text); } .metis-kpi-neg[b-oph9e61fl1] { background: var(--metis-kpi-neg-bg); color: var(--metis-kpi-neg-text); } .metis-kpi-warn[b-oph9e61fl1] { background: var(--metis-kpi-warn-bg); color: var(--metis-kpi-warn-text); } .metis-kpi-neutral[b-oph9e61fl1] { background: var(--metis-kpi-neutral-bg); color: var(--metis-kpi-neutral-text); } /* #626 W0-02 / BUG-23: the unit qualifier next to a cover KPI's label. Sized and weighted below the label on purpose: it qualifies the number, it is not a second label competing with it. Same chip tokens as the Metis info chips (WS-A). */ .metis-kpi-unit[b-oph9e61fl1] { display: inline-block; margin-left: 6px; padding: 1px 6px; /* #805 item 7 — DS v2 §3.2: chip -> `pill 999`. */ border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; background: var(--metis-chip-info-bg); color: var(--metis-chip-info-text); cursor: help; vertical-align: middle; } /* #626 W0-02: the horizon-native (period) view and the 1m/12m tail-risk table, both under the cover strip. Quieter than the tiles by design: the cover is the default view, these are the reconciliation the reader drops to when the annual number surprises them. */ .metis-kpi-views[b-oph9e61fl1] { margin-top: -0.5rem; margin-bottom: 1rem; padding: 12px 16px; border-radius: 12px; background: var(--metis-kpi-neutral-bg); color: var(--metis-kpi-neutral-text); } .metis-kpi-views-head[b-oph9e61fl1] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .metis-kpi-views-title[b-oph9e61fl1] { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; cursor: help; } .metis-kpi-views-badge[b-oph9e61fl1] { padding: 1px 6px; /* #805 item 7 — DS v2 §3.2/§6.4: badge -> `pill 999`. */ border-radius: 999px; font-size: 11px; font-family: "IBM Plex Mono", monospace; /* #447 C4 */ background: var(--metis-chip-info-bg); color: var(--metis-chip-info-text); } .metis-kpi-views-note[b-oph9e61fl1] { font-size: 11px; line-height: 1.2; opacity: 0.65; } .metis-kpi-views-grid[b-oph9e61fl1] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 768px) { .metis-kpi-views-grid[b-oph9e61fl1] { grid-template-columns: repeat(2, 1fr); } } .metis-kpi-views-value[b-oph9e61fl1] { font-size: 18px; font-weight: 600; line-height: 1.1; font-family: "IBM Plex Mono", monospace; /* #447 C4 */ } .metis-kpi-views-label[b-oph9e61fl1] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; margin-top: 2px; } .metis-kpi-tail-table[b-oph9e61fl1] { width: 100%; border-collapse: collapse; font-size: 12px; } .metis-kpi-tail-table th[b-oph9e61fl1], .metis-kpi-tail-table td[b-oph9e61fl1] { padding: 4px 8px; border-bottom: 1px solid var(--color-border); } .metis-kpi-tail-table th[b-oph9e61fl1] { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; } .metis-kpi-tail-table td[b-oph9e61fl1] { font-family: "IBM Plex Mono", monospace; /* #447 C4 */ } .metis-kpi-tail-table tr:last-child td[b-oph9e61fl1] { border-bottom: none; } /* /Shared/Metis/Cockpit/MatrixTable.razor.rz.scp.css */ /* #207 R15 / Patch-8f — numeric ρ/Σ matrix tables (Tabella view). Compact cells. Mauro 04/07 (M-1): rimosso cross-filter dim/highlight; row header + cella sono clickable per drill row-based. */ .metis-matrix-wrap[b-04hia2vggo] { overflow-x: auto; } .metis-matrix[b-04hia2vggo] { font-family: "IBM Plex Mono", monospace; /* #447 C4 */ font-size: 0.8rem; } .metis-matrix-rowhead[b-04hia2vggo], .metis-matrix-cell[b-04hia2vggo] { cursor: pointer; white-space: nowrap; } .metis-matrix-rowhead:hover[b-04hia2vggo], .metis-matrix-cell:hover[b-04hia2vggo] { background: rgba(17, 170, 255, 0.08); } .metis-matrix-rowhead:hover[b-04hia2vggo] { color: var(--bs-primary); } /* /Shared/Metis/Cockpit/RiskContributionMultiLevel.razor.rz.scp.css */ .metis-treemap[b-3syekbbnp5] { width: 100%; min-height: 280px; } /* #207 R13 / Patch-8d: drill breadcrumb above the risk treemap. */ .metis-rc-breadcrumb[b-3syekbbnp5] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; /* #805 item 5 — the issue lists this 0.85rem among the siblings that converge on the DS v2 §6.8 body size of 13px (was 13.6px). */ font-size: 13px; } .metis-rc-crumb[b-3syekbbnp5] { padding: 0; border: 0; background: none; } .metis-rc-crumb.link[b-3syekbbnp5] { color: var(--bs-link-color, #0d6efd); cursor: pointer; text-decoration: none; } .metis-rc-crumb.link:hover[b-3syekbbnp5] { text-decoration: underline; } .metis-rc-crumb.active[b-3syekbbnp5] { font-weight: 600; color: var(--bs-emphasis-color, #212529); } .metis-rc-sep[b-3syekbbnp5] { color: var(--bs-secondary-color, #6c757d); } /* /Shared/Metis/Cockpit/WeightSunburst.razor.rz.scp.css */ .metis-sunburst[b-orf60xfhi9] { width: 100%; min-height: 320px; } /* /Shared/Metis/LeafBasketPanel.razor.rz.scp.css */ .metis-basket[b-g1fpar1tcp] { width: 100%; } .metis-basket-headline[b-g1fpar1tcp] { font-weight: 600; margin-bottom: 0.4rem; } .metis-basket-sectors[b-g1fpar1tcp] { margin-bottom: 0.5rem; } .metis-basket-sector-bar[b-g1fpar1tcp] { display: flex; width: 100%; height: 10px; /* #805 item 4 — DS v2 §3.2: "barre orizzontali di punteggio e ripartizione (ScoreBar, sector-bar)" -> `pill 999`. */ border-radius: 999px; overflow: hidden; margin-bottom: 0.3rem; } .metis-basket-sector-seg[b-g1fpar1tcp] { height: 100%; } .metis-basket-sector-legend[b-g1fpar1tcp] { display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem; font-size: 0.75rem; } .metis-basket-sector-pill[b-g1fpar1tcp] { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .metis-basket-sector-dot[b-g1fpar1tcp] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .metis-basket-scroll[b-g1fpar1tcp] { max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border, #dee2e6); border-radius: 0.5rem; } .metis-basket-table[b-g1fpar1tcp] { /* #805 item 5 — DS v2 §6.8: table body is 13px (was 0.85rem = 13.6px). */ font-size: 13px; } .metis-basket-table thead th[b-g1fpar1tcp] { position: sticky; top: 0; background: var(--color-bg-elevated, #fff); z-index: 1; white-space: nowrap; } .metis-basket-footer[b-g1fpar1tcp] { font-size: 0.75rem; margin-top: 0.3rem; } .metis-basket-row-click[b-g1fpar1tcp] { cursor: pointer; } .metis-basket-row-click:hover td[b-g1fpar1tcp] { background: var(--color-bg-hover, rgba(13, 110, 253, 0.08)); } /* /Shared/Metis/LeafBasketsIndexView.razor.rz.scp.css */ .metis-basket-index[b-4yq5r2wa3n] { width: 100%; display: flex; flex-direction: column; gap: 0.35rem; } .metis-basket-index-headline[b-4yq5r2wa3n] { font-weight: 600; } .metis-basket-index-sub[b-4yq5r2wa3n] { font-size: 0.75rem; margin-bottom: 0.2rem; } .metis-basket-leaf[b-4yq5r2wa3n] { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; width: 100%; text-align: left; padding: 0.4rem 0.6rem; /* dd#2 D.8: fully flat — no resting hairline (elevated background separates the row) and no hover border either (Mauro 06.08: residue, not a needed signal). */ border: none; border-radius: 0.5rem; background: var(--color-bg-elevated, #fff); cursor: pointer; /* #805 item 5 — DS v2 §6.8: the basket list is a data table body, 13px (was 0.85rem = 13.6px); the issue names this sibling explicitly. */ font-size: 13px; } .metis-basket-leaf:disabled[b-4yq5r2wa3n] { opacity: 0.55; cursor: default; } .metis-basket-leaf-fund[b-4yq5r2wa3n] { font-weight: 500; } .metis-basket-leaf-meta[b-4yq5r2wa3n] { margin-left: auto; font-size: 0.75rem; white-space: nowrap; } /* /Shared/Metis/LeafRankingsTable.razor.rz.scp.css */ .metis-ranking[b-s19esvmvgp] { width: 100%; } .metis-ranking-headline[b-s19esvmvgp] { font-weight: 600; margin-bottom: 0.4rem; } .metis-ranking-scroll[b-s19esvmvgp] { max-height: 320px; overflow-y: auto; /* dd#2 D.8: no hairline — the scroll area sits on its own elevated surface. */ border-radius: 0.5rem; } .metis-ranking-table[b-s19esvmvgp] { /* #805 item 5 — DS v2 §6.8: table body is 13px (was 0.85rem = 13.6px). */ font-size: 13px; } .metis-ranking-table thead th[b-s19esvmvgp] { position: sticky; top: 0; background: var(--color-bg-elevated, #fff); z-index: 1; white-space: nowrap; } .metis-ranking-footer[b-s19esvmvgp] { font-size: 0.75rem; margin-top: 0.3rem; } /* /Shared/Metis/MetisDrillOverlay.razor.rz.scp.css */ .metis-drill-backdrop[b-53x40b266s] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .metis-drill-elevated[b-53x40b266s] { z-index: 1080; } .metis-drill-panel[b-53x40b266s] { background: var(--color-bg-elevated, #fff); /* #805 item 8 — DS v2 §3.2 container rule: the drill panel is a container with its own surface, so `lg 16` (was 0.75rem = 12px). */ border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); width: min(960px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } /* Mauro 04/07 (L-9): fullscreen mode — il pannello espande a tutta la viewport (con un padding minimo sui bordi per staccarsi visivamente). Il backdrop resta pieno-schermo con opacity ridotta. */ .metis-drill-fullscreen-backdrop[b-53x40b266s] { padding: 0; } .metis-drill-panel-fullscreen[b-53x40b266s] { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } .metis-drill-head[b-53x40b266s] { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--color-border, #dee2e6); background: linear-gradient(180deg, #f5f6f7 0%, #ececed 100%); /* toolbar bar stile macOS */ position: relative; } .metis-drill-title[b-53x40b266s] { font-weight: 600; /* Centrato assoluto — indipendente dalla larghezza dei macbtns a sinistra */ position: absolute; left: 50%; transform: translateX(-50%); color: #333; } .metis-drill-body[b-53x40b266s] { padding: 1rem; overflow-y: auto; } /* Mauro 04/07 (L-9): trio di pulsanti "semaforo" macOS in alto a sinistra. Colori RGB firmati: - Chiudi: rgb(236, 103, 101) — rosso - Riduci a icona: rgb(242, 202, 68) — giallo - Schermo intero: rgb(101, 196, 102) — verde L'icona interna appare in hover per coerenza con macOS reale (di default i pallini sono solo colorati, l'icona compare a mouseover del gruppo). Al click sul gruppo l'icona resta comunque visibile per accessibilità. */ .metis-drill-macbtns[b-53x40b266s] { display: flex; align-items: center; gap: 0.5rem; flex: none; } .metis-drill-macbtn[b-53x40b266s] { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; transition: filter 0.12s ease, transform 0.12s ease; } .metis-drill-macbtn:hover[b-53x40b266s] { filter: brightness(0.92); } .metis-drill-macbtn:active[b-53x40b266s] { transform: scale(0.94); } .metis-drill-macbtn-close[b-53x40b266s] { background: rgb(236, 103, 101); } .metis-drill-macbtn-min[b-53x40b266s] { background: rgb(242, 202, 68); } .metis-drill-macbtn-full[b-53x40b266s] { background: rgb(101, 196, 102); } .metis-drill-macbtn-icon[b-53x40b266s] { font-size: 8px; color: rgba(0, 0, 0, 0.65); opacity: .35; /* #447 D8/a11y: affordance non solo-colore -- icone sempre percepibili */ transition: opacity 0.12s ease; } .metis-drill-macbtns:hover .metis-drill-macbtn-icon[b-53x40b266s] { opacity: 1; } /* Mauro 04/07 (L-9): pill floating quando minimizzato. Fixed in basso a destra della viewport, apparenza a barra con icona + titolo troncato. */ .metis-drill-minpill[b-53x40b266s] { position: fixed; bottom: 1rem; right: 1rem; z-index: 1070; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.9rem; background: var(--color-bg-elevated, #fff); color: #333; border: 1px solid var(--color-border, #dee2e6); border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); cursor: pointer; max-width: 320px; transition: transform 0.12s ease, box-shadow 0.12s ease; } .metis-drill-minpill:hover[b-53x40b266s] { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); } .metis-drill-minpill-elevated[b-53x40b266s] { bottom: 4rem; /* stagliato sopra la pill "primo livello" se coesistono */ } .metis-drill-minpill-icon[b-53x40b266s] { color: rgb(242, 202, 68); /* tinta gialla coerente col macbtn minimize */ font-size: 1rem; flex: none; } .metis-drill-minpill-title[b-53x40b266s] { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .metis-drill-minpill-cheveron[b-53x40b266s] { font-size: 0.75rem; opacity: 0.55; flex: none; } /* /Shared/Metis/QuickActionChips.razor.rz.scp.css */ .metis-quick-actions[b-0rqsvlrs9c] { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; } .metis-chip[b-0rqsvlrs9c] { /* #805 item 7 — DS v2 §3.2: selection chips are `pill 999`, like every button. */ border-radius: 999px; } .metis-action-chip[b-0rqsvlrs9c] { border-color: var(--color-interactive, #11AAFF); color: var(--color-interactive, #11AAFF); background: transparent; } .metis-action-chip:hover:not(:disabled)[b-0rqsvlrs9c] { background: var(--color-interactive, #11AAFF); /* DS 1.5-bis: never white text on an interactive fill (~1.8:1) */ color: #152025; } /* /Shared/Metis/RegimeHistoryChart.razor.rz.scp.css */ .metis-regime[b-aivg7limp1] { width: 100%; } .metis-regime-headline[b-aivg7limp1] { font-weight: 600; margin-bottom: 0.5rem; } .metis-regime-block[b-aivg7limp1] { margin-top: 0.6rem; } .metis-regime-caption[b-aivg7limp1] { font-size: 0.8rem; /* DS §2.2 — captions / methodological notes use IBM Plex Mono 400. */ font-family: "IBM Plex Mono", monospace; color: var(--color-text-secondary, #6c757d); margin-bottom: 0.25rem; } .metis-regime-chart[b-aivg7limp1] { width: 100%; min-height: 120px; } .metis-regime-note[b-aivg7limp1] { font-size: 0.75rem; margin-top: 0.25rem; } /* #463 F4 — per-node L2 regime chips */ .metis-regime-l2-grid[b-aivg7limp1] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.4rem; } .metis-regime-l2-chip[b-aivg7limp1] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0.55rem; border: 1px solid var(--color-border, #dee2e6); border-radius: 0.375rem; min-width: 0; } .metis-regime-l2-label[b-aivg7limp1] { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .metis-regime-l2-prefix[b-aivg7limp1] { font-size: 0.65rem; color: var(--color-text-secondary, #6c757d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metis-regime-l2-suffix[b-aivg7limp1] { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metis-regime-l2-state[b-aivg7limp1] { font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; } .metis-regime-l2-state-bull[b-aivg7limp1] { color: var(--regime-bull, #068068); background: var(--regime-bull-subtle, rgba(6, 128, 104, 0.14)); } .metis-regime-l2-state-lateral[b-aivg7limp1] { /* #805 item 15 — fallbacks track the token: sign neutral #C0C8D0 (DS §1.6/§1.8.1). */ color: var(--regime-lateral, #C0C8D0); background: var(--regime-lateral-subtle, rgba(192, 200, 208, 0.16)); } .metis-regime-l2-state-bear[b-aivg7limp1] { color: var(--regime-bear, #AA2233); background: var(--regime-bear-subtle, rgba(170, 34, 51, 0.14)); } .metis-regime-l2-state-zirp[b-aivg7limp1] { color: var(--color-text-secondary, #6c757d); background: var(--color-surface-muted, rgba(108, 117, 125, 0.12)); } /* /Shared/NavMenu.Razor.rz.scp.css */ .bxt-navbar[b-nfgv1zss74] { width: 100%; display: flex; flex-direction: row; justify-content: space-around; padding: 10px; background-color: #173746; align-items: center; } .bxt-navbar-title[b-nfgv1zss74] { color: white; } .bxt-navbar-spacer[b-nfgv1zss74] { flex: 2 2 auto; } .bxt-navbar-sides[b-nfgv1zss74] { flex: 1 1 auto; } .menu[b-nfgv1zss74] { padding: 16px; display: block; position: absolute; top: 100px; width: 200px; background-color: #173746; border-radius: 8px; box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2); z-index: 999; } .menu a[b-nfgv1zss74] { color: white; text-decoration: none; } .menu ul[b-nfgv1zss74] { padding: 0; margin: 0; list-style-type: none; } .menu li[b-nfgv1zss74] { padding: 8px 0 8px 0; } /* /Shared/UnifiedChat/UcBrandMark.razor.rz.scp.css */ /* The mark fills whatever plate the consumer gives it; colour comes from the consumer too (currentColor on the glyph). */ .uc-mark[b-y7qv2lo2yl] { display: block; width: 100%; height: 100%; } /* /Shared/UnifiedChat/UcDock.razor.rz.scp.css */ /* Dock of minimized report windows (#334 step 2, spec §2.9). Pill chips, radius 999 (DS §4 "pillole flottanti"), no border — the floating-panel shadow replaces it (spec §2.4). Stacked to the right, immediately above the composer. */ .uc-dock[b-910u4y9k2d] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-bottom: 0.5rem; } .uc-dock-chip[b-910u4y9k2d] { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 6px 12px 6px 8px; border: none; border-radius: 999px; background: var(--color-bg-sunken); box-shadow: var(--shadow-float); color: var(--color-text-primary); font-size: 0.75rem; font-weight: 600; cursor: pointer; } .uc-dock-chip:focus-visible[b-910u4y9k2d] { outline: 2px solid var(--color-interactive); outline-offset: 2px; } .uc-dock-dot[b-910u4y9k2d] { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px var(--color-border-strong); } .uc-dock-title[b-910u4y9k2d] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* /Shared/UnifiedChat/UcEmptyState.razor.rz.scp.css */ /* Empty state (spec §3, mockup lines 264-288). Zero borders throughout (§2.4): the cards read as cards because of the surface step, not because of an outline. */ .uc-empty[b-8v74c26mq6] { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem 1.5rem; } .uc-empty-head[b-8v74c26mq6] { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; } /* The round brand plate, same colours as the thread avatar at a larger size (§2.3). */ .uc-empty-mark[b-8v74c26mq6] { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 0.25rem; padding: 8px; border-radius: 50%; background: var(--p-avatar-bg); color: var(--p-avatar-fg); } /* H2 40px (§2.8) — semantic level 2, the app owns the page's H1. */ .uc-empty-head h2[b-8v74c26mq6] { margin: 0; font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } .uc-empty-head p[b-8v74c26mq6] { margin: 0; font-size: 0.875rem; color: var(--color-text-secondary); } .uc-empty-grid[b-8v74c26mq6] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; max-width: 640px; } /* Quick-action card: radius lg 16 (§2.7), surface step instead of a border (§2.4). */ .uc-qc[b-8v74c26mq6] { display: flex; flex-direction: column; padding: 0.75rem; border-radius: 16px; background: var(--color-bg-surface); } .uc-qc-head[b-8v74c26mq6] { display: flex; align-items: center; gap: 0.625rem; padding: 2px 4px 0.5rem; } .uc-qc-icon[b-8v74c26mq6] { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--color-bg-elevated); color: var(--color-interactive-hover); } .uc-qc-head strong[b-8v74c26mq6] { font-size: 0.8125rem; font-weight: 700; } /* Each example is its own target (§3) — never the whole card. */ .uc-qc-example[b-8v74c26mq6] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.4375rem 0.5rem; border: none; border-radius: 8px; background: none; color: var(--color-text-secondary); font: inherit; font-size: 0.78125rem; text-align: left; cursor: pointer; } .uc-qc-example:hover:not(:disabled)[b-8v74c26mq6] { background: var(--color-bg-elevated); color: var(--color-text-primary); } .uc-qc-example:disabled[b-8v74c26mq6] { cursor: default; opacity: 0.6; } /* The chevron is decoration: it appears on hover and never carries meaning on its own. */ .uc-qc-example i[b-8v74c26mq6] { flex: 0 0 auto; color: var(--color-text-muted); opacity: 0; transition: opacity var(--dur-fast, 150ms) var(--ease-standard, ease-in-out); } .uc-qc-example:hover:not(:disabled) i[b-8v74c26mq6] { opacity: 1; } /* Help trigger — plain text on the page, deliberately NOT a card (§3). */ .uc-empty-help[b-8v74c26mq6] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem; border: none; background: none; color: var(--color-text-secondary); font: inherit; font-size: 0.84375rem; font-weight: 600; cursor: pointer; } .uc-empty-help:hover:not(:disabled)[b-8v74c26mq6] { color: var(--color-interactive-hover); } .uc-empty-help:disabled[b-8v74c26mq6] { cursor: default; opacity: 0.6; } @media (max-width: 640px) { .uc-empty-grid[b-8v74c26mq6] { grid-template-columns: 1fr; } .uc-empty-head h2[b-8v74c26mq6] { font-size: 2rem; } } /* /Shared/UnifiedChat/UcReportPanel.razor.rz.scp.css */ /* Report panel (#334 step 2, spec §2.9). The component renders only while at least one window is open, so "closed to 0" is closed by absence. While it IS on screen it takes at least half the viewport and can be widened from there, and the chat column shrinks proportionally against it. */ .uc-panel[b-3lh2khglve] { flex: 1 1 50%; /* Spec §2.9: "occupa sempre almeno il 50% della larghezza schermo (l'utente può allargarlo oltre, mai restringerlo sotto)". --uc-panel-w is the width the user dragged to, set on the shell — by C# between gestures, by uc-windows.js during one. Until they drag it is unset, and both bounds collapse to the defaults this panel has always had: a 50vw floor and no ceiling, i.e. the proportional split with the chat column. Once it IS set the two bounds meet on it, which is what pins the panel to the dragged width instead of letting flex-grow push it back out. The floor wins either way — max() can only widen. */ min-width: max(50vw, var(--uc-panel-w, 0px)); max-width: max(50vw, var(--uc-panel-w, 100%)); position: relative; /* Same token as the rest of the page — the panel is not a surface of its own, it is the page continuing to the right (spec §2.9 "seamless"). */ background: var(--color-bg-page); /* The spec's open/close animation clips here; the inner box below is what keeps window shadows away from this edge. */ overflow: hidden; } /* Seamless joint with the chat column: flat 5% of solid page colour, THEN the fade to transparent from 5% to 100%. Full height, under the windows. */ .uc-panel[b-3lh2khglve]::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 90px; pointer-events: none; z-index: 1; background: linear-gradient(to right, var(--color-bg-page) 0%, var(--color-bg-page) 5%, transparent 100%); } /* Same recipe on the bottom edge, behind the dock. */ .uc-panel[b-3lh2khglve]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; z-index: 1; background: linear-gradient(to top, var(--color-bg-page) 0%, var(--color-bg-page) 5%, transparent 100%); } /* The positioning context for the windows. Its inset IS the panel padding of spec §2.9, and it is 48px — deliberately ≥ the 40px blur radius of --shadow-window, so a window parked against the edge still casts a complete shadow instead of one sliced off by the overflow:hidden above. Bottom gets 56px, clearing the dock band. */ .uc-panel-inner[b-3lh2khglve] { position: absolute; top: 48px; right: 48px; bottom: 56px; left: 48px; z-index: 2; } /* On while at least one window is fullscreen (spec §2.9). position:fixed on the window is not enough on its own: positioned + z-index makes THIS box a stacking context, so everything inside it paints at ITS level — 2 — and the fixed navbar (.ad-pill-bar / .ad-fixed-side, z-index 999) would still cover a "fullscreen" window. Raising the box for the duration of the state is what puts the window over the navbar; the ordinary windows it also lifts are opaque-covered by the fullscreen one and clipped by .uc-panel's overflow anyway. */ .uc-panel-inner-full[b-3lh2khglve] { z-index: var(--z-window-fullscreen); } /* /Shared/UnifiedChat/UcReportWindow.razor.rz.scp.css */ /* Report window (#334 step 2, spec §2.9) — D8 macOS signature. Every colour is a design-system token from Styles/_penelope-tokens.scss, so the window follows the theme; the mockup's fixed #F2F3F4 title bar would be unreadable on dark, and the nearest theme-aware pair (elevated chrome over sunken body) keeps the same tonal step in both themes. Radius 12px is the D8 value the spec pins explicitly (§2.7). */ .uc-window[b-5eabx7w4ss] { position: absolute; display: flex; flex-direction: column; background: var(--color-bg-sunken); border-radius: 12px; box-shadow: var(--shadow-window); overflow: hidden; color: var(--color-text-primary); } /* Fullscreen — the green traffic light (spec §2.9: "100vw × 100vh, radius 0"), the mockup's .mac-window.fullscreen verbatim. position:fixed, so the window escapes the panel's inner box and its overflow:hidden and covers the WHOLE viewport, navbar included; no ancestor of this element sets transform / filter / perspective / will-change / contain, which are the only things that would turn one of them into the containing block and shrink "the viewport" back to a panel-sized rect. Declared after .uc-window on purpose: same specificity, source order is what overrides position:absolute and the 12px radius. */ .uc-window-full[b-5eabx7w4ss] { position: fixed; inset: 0; width: 100vw; height: 100vh; border-radius: 0; } .uc-window:focus-visible[b-5eabx7w4ss] { outline: 2px solid var(--color-interactive); outline-offset: 2px; } /* Title bar — flat colour, never a gradient (spec §2.9). */ .uc-window-chrome[b-5eabx7w4ss] { position: relative; flex: 0 0 auto; display: flex; align-items: center; padding: 0.5rem 0.75rem; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-divider); cursor: grab; touch-action: none; } .uc-window-chrome:active[b-5eabx7w4ss] { cursor: grabbing; } .uc-window-btns[b-5eabx7w4ss] { display: flex; align-items: center; gap: 8px; z-index: 2; } /* Traffic lights, verbatim from the D8 signature in app.scss (.stockwise-tool): 13px dot, subtle inset rim, invisible halo for the hit target, glyph revealed on group hover or keyboard focus. */ .uc-window-btn[b-5eabx7w4ss] { position: relative; width: 13px; height: 13px; padding: 0; border: none; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } .uc-window-btn[b-5eabx7w4ss]::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; } .uc-window-btn i[b-5eabx7w4ss] { font-size: 8px; line-height: 1; opacity: 0; transition: opacity var(--dur-fast, 150ms) var(--ease-standard, ease-in-out); } .uc-window-btns:hover .uc-window-btn i[b-5eabx7w4ss], .uc-window-btn:focus-visible i[b-5eabx7w4ss] { opacity: 1; } .uc-window-btn:active[b-5eabx7w4ss] { filter: brightness(0.85); } .uc-window-btn:focus-visible[b-5eabx7w4ss] { outline: 2px solid var(--color-interactive); outline-offset: 2px; } .uc-window-btn-close[b-5eabx7w4ss] { background: var(--color-winctl-close); color: var(--color-winctl-close-glyph); } .uc-window-btn-min[b-5eabx7w4ss] { background: var(--color-winctl-min); color: var(--color-winctl-min-glyph); } .uc-window-btn-full[b-5eabx7w4ss] { background: var(--color-winctl-expand); color: var(--color-winctl-expand-glyph); } /* Fullscreen: the rect is the viewport, so the title bar stops being a grip — the JS module refuses the gesture (it keys off .uc-window-full), this makes the cursor say so too. */ .uc-window-full .uc-window-chrome[b-5eabx7w4ss] { cursor: default; } /* Centred over the whole bar, clearing the controls on both sides so a long title ellipsises instead of colliding with them. */ .uc-window-title[b-5eabx7w4ss] { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0 56px; pointer-events: none; font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); } .uc-window-title-text[b-5eabx7w4ss] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Same 7px engine dot as the thread rows, same ring so the light INV hue stays visible. */ .uc-window-dot[b-5eabx7w4ss] { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px var(--color-border-strong); pointer-events: auto; } .uc-window-body[b-5eabx7w4ss] { flex: 1 1 auto; padding: 16px; overflow: auto; font-size: 0.875rem; } /* South-east grip. Kept transparent: the corner reads as resizable from the cursor, and spec §2.4 wants no decorative borders on floating panels. */ .uc-window-resize[b-5eabx7w4ss] { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; }