/* /Components/Layout/SetupShell.razor.rz.scp.css */
.p1-setup-shell[b-7pzexjqnx1] {
display: flex;
flex-direction: column;
min-height: 100vh;
background: transparent;
color: var(--p1-text-primary);
font-family: var(--p1-font-family);
}
.p1-setup-shell__sidebar[b-7pzexjqnx1] {
display: none;
}
.p1-setup-shell__main[b-7pzexjqnx1] {
flex: 1;
display: flex;
flex-direction: column;
}
.p1-setup-shell__topbar[b-7pzexjqnx1] {
display: flex;
align-items: center;
gap: 12px;
/* Same box as the main shell's header — see --p1-header-height. */
min-height: var(--p1-header-height);
padding: var(--p1-header-top) 20px 0;
flex-shrink: 0;
}
.p1-setup-shell__back[b-7pzexjqnx1] {
background: none;
border: none;
color: var(--p1-text-primary);
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
}
.p1-setup-shell__logo-mobile[b-7pzexjqnx1] {
height: 32px;
object-fit: contain;
}
/* Pushes the theme toggle (and the avatar after it) to the right-hand end of the bar. */
.p1-setup-shell__topbar .shell-theme-btn[b-7pzexjqnx1] {
margin-left: auto;
}
.p1-setup-shell__content[b-7pzexjqnx1] {
flex: 1;
overflow-y: auto;
}
.p1-setup-shell__content-inner[b-7pzexjqnx1] {
padding: 0;
}
@media (min-width: 768px) {
.p1-setup-shell[b-7pzexjqnx1] {
flex-direction: row;
height: 100vh;
overflow: hidden;
}
.p1-setup-shell__sidebar[b-7pzexjqnx1] {
display: flex;
flex-direction: column;
width: 340px;
background: var(--p1-surface);
border-right: 1px solid var(--p1-border);
}
.p1-setup-shell__logo-container[b-7pzexjqnx1] {
padding: 32px;
}
.p1-setup-shell__logo[b-7pzexjqnx1] {
height: 28px;
mix-blend-mode: screen;
}
.p1-setup-shell__stages[b-7pzexjqnx1] {
flex: 1;
padding: 24px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.p1-setup-shell__stages-header[b-7pzexjqnx1] {
font-size: var(--p1-text-2xs);
font-weight: 600;
color: var(--p1-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0 16px 8px;
}
.p1-setup-shell__stage[b-7pzexjqnx1] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-radius: 12px;
transition: background 0.2s;
}
.p1-setup-shell__stage.is-current[b-7pzexjqnx1] {
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
}
.p1-setup-shell__stage-icon[b-7pzexjqnx1] {
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--p1-surface-inner);
color: var(--p1-text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--p1-text-2xs);
font-weight: 700;
flex-shrink: 0;
}
.p1-setup-shell__stage.is-complete .p1-setup-shell__stage-icon[b-7pzexjqnx1] {
background: var(--p1-success-desktop);
color: var(--p1-bg);
}
.p1-setup-shell__stage-label[b-7pzexjqnx1] {
font-size: var(--p1-text-base);
font-weight: 500;
color: var(--p1-text-muted);
}
.p1-setup-shell__stage.is-complete .p1-setup-shell__stage-label[b-7pzexjqnx1] {
color: var(--p1-success-desktop);
}
.p1-setup-shell__stage.is-current .p1-setup-shell__stage-label[b-7pzexjqnx1] {
color: var(--p1-text-primary);
}
.p1-setup-shell__footer[b-7pzexjqnx1] {
padding: 24px 32px;
border-top: 1px solid var(--p1-border);
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
line-height: 1.6;
}
.p1-setup-shell__topbar[b-7pzexjqnx1] {
height: 52px;
padding: 0 32px;
justify-content: flex-end;
border-bottom: 1px solid var(--p1-border);
background: var(--p1-bg);
}
.p1-setup-shell__back[b-7pzexjqnx1], .p1-setup-shell__logo-mobile[b-7pzexjqnx1] {
display: none;
}
.p1-setup-shell__desktop-avatar[b-7pzexjqnx1] {
display: flex;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
align-items: center;
justify-content: center;
font-size: var(--p1-text-xs);
font-weight: 700;
}
.p1-setup-shell__content-inner[b-7pzexjqnx1] {
padding: 32px 48px;
max-width: 560px;
margin: 0 auto;
}
}
/* Same breathing room the main shell gives a page under its header bar. */
.p1-setup-shell__content-inner[b-7pzexjqnx1] {
padding-top: 0.5rem;
}
/* /Components/Pages/Account/Activity.razor.rz.scp.css */
.activity-page[b-ij1o4d2rrm] {
padding: 1rem 1.25rem;
}
.activity-header .header-main[b-ij1o4d2rrm] {
display: flex;
justify-content: space-between;
align-items: center;
}
/* .chip-btn, .pending-toggle-box, .toggle-switch, .toggle-thumb, .badge-amber, .search-bar,
.filter-chip(s) all live in global components.css now. They were duplicated here, which is
how the account-level activity tab ended up rendering unstyled while this page looked right —
it used the same class names but could never see this file's scoped selectors. */
.search-section[b-ij1o4d2rrm] {
margin-top: 1rem;
}
.summary-cards[b-ij1o4d2rrm] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
}
.summary-card[b-ij1o4d2rrm] {
padding: 1rem;
background: var(--p1-surface);
border-radius: 0.75rem;
}
.summary-card .label[b-ij1o4d2rrm] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
margin-bottom: 0.25rem;
}
.summary-card .value[b-ij1o4d2rrm] {
font-size: var(--p1-text-2xl);
font-weight: 700;
}
.summary-card .subtext[b-ij1o4d2rrm] {
font-size: var(--p1-text-2xs);
margin-top: 0.125rem;
}
.group-title[b-ij1o4d2rrm] {
font-size: var(--p1-text-sm);
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-secondary);
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
margin-bottom: 0.5rem;
padding-left: 0.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.group-title[b-ij1o4d2rrm]::after {
content: "";
flex: 1;
height: 1px;
background: var(--p1-border);
}
/* ── Timeline: card list on mobile, table on desktop ── */
.timeline-card[b-ij1o4d2rrm] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
overflow: hidden;
}
/* The mobile design has no rule beside the month heading (desktop does). */
.group-title.no-rule[b-ij1o4d2rrm]::after {
content: none;
}
.pending-dot[b-ij1o4d2rrm] {
position: absolute;
bottom: -0.25rem;
right: -0.25rem;
width: 0.75rem;
height: 0.75rem;
background: var(--p1-accent-amber);
border: 2px solid var(--p1-surface);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Deliberately off the type scale: this sizes a dot glyph, not text. */
.pending-dot i[b-ij1o4d2rrm] {
font-size: 0.375rem;
color: var(--p1-text-primary);
}
.badge-pending[b-ij1o4d2rrm] {
font-size: var(--p1-text-2xs);
font-weight: 700;
text-transform: uppercase;
background: rgba(var(--p1-accent-amber-rgb), 0.15);
color: var(--p1-accent-amber-soft);
padding: 0.125rem 0.375rem;
border-radius: 9999px;
}
.status-dot[b-ij1o4d2rrm] {
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
}
.bg-success[b-ij1o4d2rrm] { background-color: var(--p1-success); }
.bg-amber[b-ij1o4d2rrm] { background-color: var(--p1-accent-amber); }
/* Table elements, hidden below the breakpoint. Uses table-header-group / table-cell — NOT the
global .desktop-only utility, which forces display:block !important and would collapse the
table into a stack of divs. */
.tbl-head[b-ij1o4d2rrm],
.tbl-cell[b-ij1o4d2rrm] { display: none; }
@media (min-width: 768px) {
.tbl-head[b-ij1o4d2rrm] { display: table-header-group; }
.tbl-cell[b-ij1o4d2rrm] { display: table-cell; }
.activity-header .header-main[b-ij1o4d2rrm] { display: flex; }
.activity-header .header-actions[b-ij1o4d2rrm] { display: flex; gap: 0.75rem; }
.search-section[b-ij1o4d2rrm] {
flex-direction: row;
align-items: center;
}
.search-bar[b-ij1o4d2rrm] {
width: 18rem;
}
.summary-cards[b-ij1o4d2rrm] {
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
}
.summary-card .value[b-ij1o4d2rrm] {
font-size: var(--p1-text-2xl);
}
}
/* ── Date-range picker (the "Last 3 months" pill opens this) ── */
.range-picker[b-ij1o4d2rrm] {
position: relative;
display: inline-flex;
}
.range-menu[b-ij1o4d2rrm] {
position: absolute;
left: 0;
top: 100%;
margin-top: 0.375rem;
min-width: 11rem;
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
border-radius: 0.75rem;
overflow: hidden;
z-index: 30;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.range-option[b-ij1o4d2rrm] {
display: block;
width: 100%;
text-align: left;
padding: 0.625rem 1rem;
background: transparent;
border: none;
font-family: inherit;
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
cursor: pointer;
white-space: nowrap;
}
.range-option:hover[b-ij1o4d2rrm],
.range-option.active[b-ij1o4d2rrm] {
background: var(--p1-border);
color: var(--p1-text-primary);
}
/* ═══ DESKTOP — additive only. Same markup, same day-grouped timeline, more room. ═══ */
@media (min-width: 768px) {
.activity-page[b-ij1o4d2rrm] {
max-width: var(--p1-page-max);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
.p1-title[b-ij1o4d2rrm] { font-size: var(--p1-text-4xl); }
.activity-header .header-main[b-ij1o4d2rrm] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.activity-header .header-actions[b-ij1o4d2rrm] {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Money in / Money out side by side. */
.summary-cards[b-ij1o4d2rrm] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
max-width: 720px;
}
/* Search and the chips share a line — there is room for both. */
.search-section[b-ij1o4d2rrm] {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
.search-bar[b-ij1o4d2rrm] { width: 20rem; flex-shrink: 0; }
}
/* /Components/Pages/Account/Help.razor.rz.scp.css */
/* Same page gutter as Activity and Notifications. */
.help-page[b-kwjrjjlfh3] {
padding: 1rem 1.25rem 2rem;
}
.help-heading[b-kwjrjjlfh3] {
margin: 1.5rem 0 0.75rem;
font-size: var(--p1-text-sm);
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-secondary);
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
}
.help-empty[b-kwjrjjlfh3] {
padding: 1.5rem 0.25rem;
font-size: var(--p1-text-base);
color: var(--p1-text-muted);
}
/* ── FAQ ── */
.faq-list[b-kwjrjjlfh3] {
margin-top: 1.5rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
overflow: hidden;
}
.faq + .faq[b-kwjrjjlfh3] {
border-top: 1px solid var(--p1-border-subtle);
}
.faq__q[b-kwjrjjlfh3] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
.faq__q:hover[b-kwjrjjlfh3] {
background: var(--p1-surface-inner);
}
.faq__chevron[b-kwjrjjlfh3] {
display: flex;
flex-shrink: 0;
color: var(--p1-text-muted);
transition: transform 0.18s ease;
}
.faq.is-open .faq__chevron[b-kwjrjjlfh3] {
transform: rotate(180deg);
}
/* The answer had no top padding, so it sat flush against the question it belongs to. */
.faq__a[b-kwjrjjlfh3] {
padding: 0.75rem 1rem 1.25rem;
}
.faq__a p[b-kwjrjjlfh3] {
margin: 0 0 0.625rem;
font-size: var(--p1-text-md);
line-height: 1.55;
color: var(--p1-text-secondary);
}
.faq__a p:last-child[b-kwjrjjlfh3] {
margin-bottom: 0;
}
/* /Components/Pages/Account/NotificationDetail.razor.rz.scp.css */
/* Notification detail. Token-driven so it themes with the rest of the app. */
.notif-detail-page[b-kvqh87jn9i] {
padding: 1rem 1.25rem 2.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.back-link[b-kvqh87jn9i] {
display: flex;
align-items: center;
gap: 0.25rem;
background: none;
border: none;
padding: 0;
color: var(--p1-text-secondary);
font-family: inherit;
font-size: var(--p1-text-base);
cursor: pointer;
align-self: flex-start;
transition: color 0.15s;
}
.back-link:hover[b-kvqh87jn9i] {
color: var(--p1-text-primary);
}
/* ── Header ── */
.header-card[b-kvqh87jn9i] {
padding: 1.25rem;
}
.header-row[b-kvqh87jn9i] {
display: flex;
align-items: flex-start;
gap: 0.875rem;
}
.header-icon[b-kvqh87jn9i] {
width: 3rem;
height: 3rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.header-text[b-kvqh87jn9i] {
flex: 1;
min-width: 0;
padding-top: 0.125rem;
}
/* No colour here — the .text-* tone class on the element supplies it, and a scoped rule would
outrank the global class and win. */
.header-title[b-kvqh87jn9i] {
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
line-height: 1.35;
}
.header-meta[b-kvqh87jn9i] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.375rem;
}
.meta-account[b-kvqh87jn9i] {
font-size: var(--p1-text-xs);
font-weight: 500;
color: var(--p1-text-secondary);
}
.meta-sep[b-kvqh87jn9i] {
font-size: var(--p1-text-2xs);
color: var(--p1-border);
}
.meta-time[b-kvqh87jn9i] {
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
}
/* ── Body ── */
.body-card[b-kvqh87jn9i] {
padding: 1rem 1.25rem;
}
.body-para[b-kvqh87jn9i] {
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
line-height: 1.65;
margin: 0 0 0.75rem;
}
.body-para:last-child[b-kvqh87jn9i] {
margin-bottom: 0;
}
.body-bullets[b-kvqh87jn9i] {
list-style: none;
padding: 0 0 0 0.25rem;
margin: 0 0 0.75rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.body-bullets li[b-kvqh87jn9i] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
line-height: 1.65;
}
.bullet[b-kvqh87jn9i] {
color: var(--p1-text-muted);
flex-shrink: 0;
line-height: 1.4;
}
/* ── Attached document ── */
.doc-row[b-kvqh87jn9i] {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 1rem;
}
.doc-icon[b-kvqh87jn9i] {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
background: rgba(var(--p1-accent-purple-rgb), 0.15);
color: var(--p1-accent-purple-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.doc-text[b-kvqh87jn9i] {
flex: 1;
min-width: 0;
}
.doc-name[b-kvqh87jn9i] {
font-size: var(--p1-text-md);
font-weight: 600;
color: var(--p1-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-meta[b-kvqh87jn9i] {
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
margin-top: 0.125rem;
}
.doc-action[b-kvqh87jn9i] {
padding: 0 1rem 1rem;
}
.doc-btn[b-kvqh87jn9i] {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem;
border-radius: 0.75rem;
background: rgba(var(--p1-accent-purple-rgb), 0.15);
color: var(--p1-accent-purple-soft);
font-size: var(--p1-text-md);
font-weight: 600;
text-decoration: none;
transition: background 0.15s;
}
.doc-btn:hover[b-kvqh87jn9i] {
background: rgba(var(--p1-accent-purple-rgb), 0.22);
}
/* ── Mark unread ── */
.mark-unread-btn[b-kvqh87jn9i] {
width: 100%;
padding: 0.75rem;
border-radius: 0.75rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
color: var(--p1-text-secondary);
font-family: inherit;
font-size: var(--p1-text-md);
font-weight: 600;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.mark-unread-btn:hover[b-kvqh87jn9i] {
color: var(--p1-text-primary);
border-color: var(--p1-text-muted);
}
.not-found[b-kvqh87jn9i] {
color: var(--p1-text-secondary);
}
@media (min-width: 768px) {
.notif-detail-page[b-kvqh87jn9i] {
padding: 1.5rem 2rem 3rem;
max-width: 800px;
}
}
/* ═══ DESKTOP — the shared container. Additive: nothing here exists at mobile widths. ═══ */
@media (min-width: 768px) {
.notification-detail[b-kvqh87jn9i] {
max-width: var(--p1-page-narrow);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
}
/* /Components/Pages/Account/Notifications.razor.rz.scp.css */
/* .search-bar and .filter-chip(s) live in global components.css — they were duplicated here and
had begun to drift. Only the spacing between them is this page's business. */
/* Notifications list. Token-driven throughout so light/dark both work.
Search + filter chips are shown on mobile too (they used to be desktop-only). */
.notifications-page[b-vtqo3g61b7] {
padding: 1rem 1.25rem 2rem;
}
.notifications-header[b-vtqo3g61b7] {
display: flex;
align-items: center;
gap: 1rem;
}
/* Same 1rem gap Activity puts between its chips and its search bar. */
.search-section[b-vtqo3g61b7] {
margin-top: 1rem;
}
.mark-read-btn[b-vtqo3g61b7] {
flex-shrink: 0;
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
background: var(--p1-surface);
border: 1px solid var(--p1-border);
padding: 0.5rem 0.875rem;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
transition: color 0.15s, border-color 0.15s;
}
.mark-read-btn:hover[b-vtqo3g61b7] {
color: var(--p1-text-primary);
border-color: var(--p1-text-muted);
}
/* ── Filter chips ── */
/* ── "Showing notifications for [This year]" ── */
.range-row[b-vtqo3g61b7] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1rem;
}
.range-label[b-vtqo3g61b7] {
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
}
.range-picker[b-vtqo3g61b7] {
position: relative;
flex-shrink: 0;
}
.range-btn[b-vtqo3g61b7] {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
color: var(--p1-text-primary);
font-family: inherit;
font-size: var(--p1-text-md);
font-weight: 500;
padding: 0.625rem 0.875rem;
border-radius: 0.875rem;
cursor: pointer;
}
.range-menu[b-vtqo3g61b7] {
position: absolute;
right: 0;
top: 100%;
margin-top: 0.25rem;
min-width: 11rem;
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
border-radius: 0.75rem;
overflow: hidden;
z-index: 20;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.range-option[b-vtqo3g61b7] {
display: block;
width: 100%;
text-align: left;
padding: 0.625rem 1rem;
background: transparent;
border: none;
font-family: inherit;
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
cursor: pointer;
}
.range-option:hover[b-vtqo3g61b7],
.range-option.active[b-vtqo3g61b7] {
background: var(--p1-border);
color: var(--p1-text-primary);
}
/* ── Groups ── */
.notifications-content[b-vtqo3g61b7] {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.group-header[b-vtqo3g61b7] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0 0.25rem;
}
.group-title[b-vtqo3g61b7] {
font-size: var(--p1-text-sm);
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-secondary);
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
}
.count-badge[b-vtqo3g61b7] {
background: var(--p1-accent-active);
color: var(--p1-text-on-accent);
font-size: var(--p1-text-2xs);
font-weight: 700;
line-height: 1;
padding: 0.25rem 0.4375rem;
border-radius: 9999px;
}
/* ── Rows ── */
.notif-list[b-vtqo3g61b7] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
overflow: hidden;
}
.notif-row[b-vtqo3g61b7] {
width: 100%;
text-align: left;
display: flex;
/* Centred against the row, not pinned to the first line of the title. */
align-items: center;
gap: 0.875rem;
padding: 1rem;
background: transparent;
border: none;
border-bottom: 1px solid var(--p1-border-subtle);
font-family: inherit;
cursor: pointer;
transition: background 0.15s;
}
.notif-row:last-child[b-vtqo3g61b7] {
border-bottom: none;
}
.notif-row:hover[b-vtqo3g61b7] {
background: var(--p1-surface-inner);
}
/* Rounded-square tinted tile (not a circle) */
.notif-icon[b-vtqo3g61b7] {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.notif-body[b-vtqo3g61b7] {
flex: 1;
min-width: 0;
}
.notif-title[b-vtqo3g61b7] {
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
line-height: 1.3;
}
.notif-account[b-vtqo3g61b7] {
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
margin-top: 0.25rem;
}
.notif-time[b-vtqo3g61b7] {
font-size: var(--p1-text-md);
color: var(--p1-text-muted);
margin-top: 0.25rem;
}
.notif-end[b-vtqo3g61b7] {
display: flex;
align-items: center;
gap: 0.625rem;
flex-shrink: 0;
}
.unread-dot[b-vtqo3g61b7] {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background: var(--p1-accent-active);
flex-shrink: 0;
}
/* ── Tone tiles ── */
/* ── Empty ── */
.empty-state[b-vtqo3g61b7] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
}
.empty-icon[b-vtqo3g61b7] {
width: 3.5rem;
height: 3.5rem;
border-radius: 1rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
color: var(--p1-text-muted);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.empty-state h3[b-vtqo3g61b7] {
font-size: var(--p1-text-lg);
font-weight: 600;
color: var(--p1-text-primary);
margin: 0 0 0.25rem;
}
.empty-state p[b-vtqo3g61b7] {
font-size: var(--p1-text-base);
color: var(--p1-text-secondary);
margin: 0;
}
@media (min-width: 768px) {
.notifications-page[b-vtqo3g61b7] {
padding: 1.5rem 2rem 3rem;
max-width: 900px;
}
}
/* ═══ DESKTOP — the shared container. Additive: nothing here exists at mobile widths. ═══ */
@media (min-width: 768px) {
.notifications-page[b-vtqo3g61b7] {
max-width: var(--p1-page-narrow);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
}
/* /Components/Pages/Account/PersonalDetails.razor.rz.scp.css */
.personal-details-page[b-k9qdpean5k] {
padding: 1rem 1.25rem 2rem;
}
.pd-back[b-k9qdpean5k] {
display: inline-flex;
align-items: center;
gap: 0.125rem;
margin-bottom: 0.5rem;
font-size: var(--p1-text-base);
font-weight: 500;
color: var(--p1-text-secondary);
text-decoration: none;
}
.pd-back:hover[b-k9qdpean5k] {
color: var(--p1-text-primary);
}
@media (min-width: 768px) {
.personal-details-page[b-k9qdpean5k] {
padding: 2rem 1.5rem;
max-width: 640px;
}
}
/* ═══ DESKTOP — the shared container. Additive: nothing here exists at mobile widths. ═══ */
@media (min-width: 768px) {
.personal-details-page[b-k9qdpean5k] {
max-width: var(--p1-page-narrow);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
}
/* /Components/Pages/Account/Profile.razor.rz.scp.css */
/* Profile. Every value is a theme token so light and dark both work.
Shared primitives (.p1-card, .p1-list, .p1-list-row, .p1-section-label, .p1-title) come from
the global design-system layer in wwwroot/css/components.css — this file holds only what is
genuinely Profile-specific. */
.profile-page[b-gkzcz8k03j] {
padding: 1rem 1.25rem 2rem;
}
.profile-grid[b-gkzcz8k03j] {
display: flex;
flex-direction: column;
}
.main-column[b-gkzcz8k03j] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* ── Identity ── */
.identity-top[b-gkzcz8k03j] {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
}
.identity-info[b-gkzcz8k03j] {
flex: 1;
min-width: 0;
}
.identity-name[b-gkzcz8k03j] {
font-size: var(--p1-text-2xl);
font-weight: 700;
color: var(--p1-text-primary);
margin: 0;
}
.identity-email[b-gkzcz8k03j] {
font-size: var(--p1-text-base);
color: var(--p1-text-secondary);
margin-top: 0.125rem;
}
.identity-meta[b-gkzcz8k03j] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
margin-top: 0.125rem;
}
.sign-out-wrapper[b-gkzcz8k03j] {
border-top: 1px solid var(--p1-border-subtle);
padding: 1rem 1.25rem;
}
.sign-out-btn[b-gkzcz8k03j] {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem;
font-size: var(--p1-text-base);
font-weight: 600;
font-family: inherit;
color: #ef4444;
background: transparent;
border: 1px solid rgba(var(--p1-accent-red-rgb), 0.3);
border-radius: 0.75rem;
cursor: pointer;
transition: background 0.15s;
}
.sign-out-btn:hover[b-gkzcz8k03j] { background: rgba(var(--p1-accent-red-rgb), 0.06); }
.sign-out-btn:active[b-gkzcz8k03j] { background: rgba(var(--p1-accent-red-rgb), 0.12); }
/* ── Adviser ── */
.adviser-content[b-gkzcz8k03j] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.adviser-info[b-gkzcz8k03j] {
flex: 1;
min-width: 0;
}
.adviser-name[b-gkzcz8k03j] {
font-size: var(--p1-text-base);
font-weight: 700;
color: var(--p1-text-primary);
}
.adviser-firm[b-gkzcz8k03j] {
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
margin-top: 0.125rem;
}
.email-btn[b-gkzcz8k03j] {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.75rem;
background: rgba(var(--p1-accent-purple-rgb), 0.1);
border: 1px solid rgba(var(--p1-accent-purple-rgb), 0.2);
color: var(--p1-accent-purple-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-decoration: none;
transition: background 0.15s;
}
.email-btn:hover[b-gkzcz8k03j] { background: rgba(var(--p1-accent-purple-rgb), 0.18); }
/* Under the firm, inside the same block — it used to be a separate row below a divider, which read
as a second card. */
.adviser-email[b-gkzcz8k03j] {
margin-top: 0.125rem;
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
word-break: break-all;
}
/* ── Outstanding actions (amber callout) ── */
.actions-box[b-gkzcz8k03j] {
background: var(--p1-warning-bg);
border: 1px solid var(--p1-warning-border);
border-radius: var(--p1-radius-card);
overflow: hidden;
}
.actions-header[b-gkzcz8k03j] {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 1rem 1rem 0.75rem;
border-bottom: 1px solid var(--p1-warning-border);
}
.actions-header-icon[b-gkzcz8k03j] {
width: 1.75rem;
height: 1.75rem;
border-radius: 0.5rem;
background: var(--p1-warning-tint);
color: var(--p1-warning-strong);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.actions-title[b-gkzcz8k03j] {
flex: 1;
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-warning-text);
}
.actions-count[b-gkzcz8k03j] {
font-size: var(--p1-text-sm);
font-weight: 700;
color: var(--p1-warning-strong);
background: rgba(var(--p1-accent-amber-rgb), 0.2);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
}
.action-row[b-gkzcz8k03j] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--p1-warning-border);
}
.action-row:last-child[b-gkzcz8k03j] { border-bottom: none; }
.action-icon[b-gkzcz8k03j] {
width: 2rem;
height: 2rem;
border-radius: 0.75rem;
background: var(--p1-warning-tint);
color: var(--p1-warning-strong);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 0.125rem;
}
.action-body[b-gkzcz8k03j] {
flex: 1;
min-width: 0;
}
.action-title[b-gkzcz8k03j] {
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
.action-desc[b-gkzcz8k03j] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
line-height: 1.45;
margin: 0.25rem 0 0;
}
.action-btn[b-gkzcz8k03j] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.5rem;
padding: 0;
background: none;
border: none;
font-family: inherit;
font-size: var(--p1-text-md);
font-weight: 600;
color: var(--p1-warning-strong);
cursor: pointer;
}
.dismiss-btn[b-gkzcz8k03j] {
background: none;
border: none;
color: var(--p1-text-muted);
cursor: pointer;
padding: 0.25rem;
flex-shrink: 0;
display: flex;
}
.dismiss-btn:hover[b-gkzcz8k03j] { color: var(--p1-text-primary); }
/* ── Settings ── */
.settings-sections[b-gkzcz8k03j] {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-top: 0.5rem;
}
.settings-column[b-gkzcz8k03j] {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* ── Footer ── */
.profile-footer[b-gkzcz8k03j] {
text-align: center;
margin-top: 1.5rem;
}
.footer-text[b-gkzcz8k03j] {
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
line-height: 1.6;
}
/* ── Desktop ── */
@media (min-width: 768px) {
.profile-page[b-gkzcz8k03j] {
padding: 1.5rem 2rem 3rem;
max-width: 1000px;
}
.settings-sections[b-gkzcz8k03j] {
flex-direction: row;
align-items: flex-start;
gap: 1.5rem;
}
.settings-column[b-gkzcz8k03j] {
flex: 1;
}
}
/* ── Colour-vision picker (sheet) ── */
.cv-lede[b-gkzcz8k03j] {
font-size: var(--p1-text-md);
line-height: 1.5;
color: var(--p1-text-secondary);
margin: 0 0 1rem;
}
/* Two half-discs showing the mode's gain and loss colours side by side. */
.cv-swatch[b-gkzcz8k03j] {
display: flex;
width: 2rem;
height: 2rem;
border-radius: 9999px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--p1-border);
}
.cv-swatch span[b-gkzcz8k03j] { flex: 1; }
.cv-desc[b-gkzcz8k03j] {
display: block;
font-size: var(--p1-text-xs);
font-weight: 400;
line-height: 1.4;
color: var(--p1-text-muted);
margin-top: 0.125rem;
}
/* The rows carry two lines of text, so they need to breathe. */
.cv-swatch ~ .p1-list-row__label[b-gkzcz8k03j] { padding: 0.125rem 0; }
/* ═══ DESKTOP — the shared container. Additive: nothing here exists at mobile widths. ═══ */
@media (min-width: 768px) {
.profile-page[b-gkzcz8k03j] {
max-width: var(--p1-page-max);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
}
/* /Components/Pages/Accounts/AccountDetail.razor.rz.scp.css */
.account-detail[b-7mtrmw83l0] {
padding-bottom: 3rem;
}
.container[b-7mtrmw83l0] {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Breadcrumbs */
.breadcrumbs[b-7mtrmw83l0] {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 1rem 0 1.5rem 0;
font-size: var(--p1-text-base);
color: var(--p1-text-secondary);
}
.breadcrumbs a[b-7mtrmw83l0] {
color: var(--p1-text-secondary);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumbs a:hover[b-7mtrmw83l0] { color: var(--p1-text-primary); }
.breadcrumbs i[b-7mtrmw83l0] { font-size: var(--p1-text-sm); color: var(--p1-text-muted); }
.breadcrumbs span[b-7mtrmw83l0] { color: var(--p1-text-primary); font-weight: 500; }
/* Header Section */
.account-header[b-7mtrmw83l0] {
margin-bottom: 2rem;
}
.header-main[b-7mtrmw83l0] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
.header-main[b-7mtrmw83l0] { flex-direction: column; gap: 1rem; }
}
.account-name[b-7mtrmw83l0] {
font-size: var(--p1-text-5xl);
font-weight: 700;
color: var(--p1-text-primary);
margin-bottom: 0.25rem;
}
.account-meta[b-7mtrmw83l0] {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: var(--p1-text-base);
color: var(--p1-text-secondary);
}
.account-meta .divider[b-7mtrmw83l0] {
width: 1px;
height: 1rem;
background-color: var(--p1-border);
}
.status-active[b-7mtrmw83l0] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--p1-pos);
font-weight: 500;
}
.status-active .dot[b-7mtrmw83l0] {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background-color: var(--p1-pos);
}
.actions[b-7mtrmw83l0] { display: flex; gap: 0.75rem; }
.action-btn.primary:hover[b-7mtrmw83l0] { background-color: #dc2626; }
.action-btn.secondary[b-7mtrmw83l0] {
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
color: var(--p1-text-primary);
}
.action-btn.secondary:hover[b-7mtrmw83l0] { border-color: var(--p1-text-muted); }
.value-strip[b-7mtrmw83l0] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1.5rem;
}
@media (min-width: 768px) {
.value-strip[b-7mtrmw83l0] { grid-template-columns: repeat(4, 1fr); }
}
.value-item .label[b-7mtrmw83l0] {
font-size: var(--p1-text-sm);
text-transform: uppercase;
color: var(--p1-text-secondary);
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.value-item .value[b-7mtrmw83l0] {
font-size: var(--p1-text-2xl);
font-weight: 700;
color: var(--p1-text-primary);
}
.value-item.primary .value[b-7mtrmw83l0] { font-size: var(--p1-text-3xl); }
.value-item .value.positive[b-7mtrmw83l0] { color: var(--p1-pos); }
/* Detail Grid */
.detail-grid[b-7mtrmw83l0] {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.detail-grid[b-7mtrmw83l0] { grid-template-columns: repeat(12, 1fr); }
.left-col[b-7mtrmw83l0] { grid-column: span 8; }
.right-col[b-7mtrmw83l0] { grid-column: span 4; }
}
.card[b-7mtrmw83l0] {
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.card-header[b-7mtrmw83l0] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.card-header .title[b-7mtrmw83l0] {
font-size: var(--p1-text-xl);
font-weight: 600;
color: var(--p1-text-primary);
}
.chart-container[b-7mtrmw83l0] {
height: 300px;
background-color: var(--p1-bg);
border-radius: 0.75rem;
border: 1px solid var(--p1-border);
display: flex;
align-items: center;
justify-content: center;
}
.mock-chart[b-7mtrmw83l0] { color: var(--p1-text-muted); }
.holdings-table[b-7mtrmw83l0] {
display: flex;
flex-direction: column;
}
.table-header[b-7mtrmw83l0] {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
padding: 0.75rem 0;
border-bottom: 1px solid var(--p1-border);
font-size: var(--p1-text-sm);
text-transform: uppercase;
color: var(--p1-text-secondary);
letter-spacing: 0.05em;
font-weight: 600;
}
.table-row[b-7mtrmw83l0] {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
padding: 1rem 0;
border-bottom: 1px solid var(--p1-surface-inner);
align-items: center;
}
.table-row:last-child[b-7mtrmw83l0] { border-bottom: none; }
.col-name .asset-name[b-7mtrmw83l0] { font-weight: 600; color: var(--p1-text-primary); font-size: var(--p1-text-base); }
.col-name .asset-ticker[b-7mtrmw83l0] { font-size: var(--p1-text-sm); color: var(--p1-text-muted); }
.col-units[b-7mtrmw83l0], .col-price[b-7mtrmw83l0], .col-value[b-7mtrmw83l0], .col-return[b-7mtrmw83l0] { font-size: var(--p1-text-base); color: var(--p1-text-secondary); }
.col-return.positive[b-7mtrmw83l0] { color: var(--p1-pos); }
.col-return.negative[b-7mtrmw83l0] { color: var(--p1-neg); }
/* Right Column Cards */
.model-info[b-7mtrmw83l0] {
background-color: var(--p1-bg);
border-radius: 0.75rem;
padding: 1.25rem;
border: 1px solid var(--p1-border);
}
.model-name[b-7mtrmw83l0] { font-size: var(--p1-text-lg); font-weight: 600; color: var(--p1-text-primary); margin-bottom: 1rem; }
.model-status[b-7mtrmw83l0] {
display: flex;
justify-content: space-between;
font-size: var(--p1-text-base);
margin-bottom: 1rem;
}
.model-status span:first-child[b-7mtrmw83l0] { color: var(--p1-text-secondary); }
.model-status .val[b-7mtrmw83l0] { color: var(--p1-pos); font-weight: 600; }
.model-allocation[b-7mtrmw83l0] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.alloc-label[b-7mtrmw83l0] { font-size: var(--p1-text-sm); color: var(--p1-text-secondary); text-transform: uppercase; }
.alloc-val[b-7mtrmw83l0] { font-size: var(--p1-text-base); font-weight: 700; color: var(--p1-text-primary); text-align: right; }
.settings-list[b-7mtrmw83l0] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.setting-item[b-7mtrmw83l0] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background-color: var(--p1-bg);
border-radius: 0.75rem;
border: 1px solid var(--p1-border);
}
.setting-item .label[b-7mtrmw83l0] { font-size: var(--p1-text-sm); color: var(--p1-text-secondary); text-transform: uppercase; margin-bottom: 0.125rem; }
.setting-item .val[b-7mtrmw83l0] { font-size: var(--p1-text-base); font-weight: 600; color: var(--p1-text-primary); }
.setting-item .toggle[b-7mtrmw83l0] {
width: 2.5rem;
height: 1.25rem;
background-color: #1e1e20;
border-radius: 9999px;
position: relative;
}
.setting-item .toggle.active[b-7mtrmw83l0] { background-color: var(--p1-pos); }
.setting-item .toggle.active[b-7mtrmw83l0]::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 1rem;
height: 1rem;
background-color: var(--p1-text-primary);
border-radius: 9999px;
}
.actions-list[b-7mtrmw83l0] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* ── Page scaffolding ──
These replace 102 inline style= attributes that used to live in the markup. */
.detail-notice[b-7mtrmw83l0] { margin: 1rem 1rem 0; }
.detail-tabs[b-7mtrmw83l0] { margin: 1rem 1rem 0; }
.detail-body[b-7mtrmw83l0] {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1rem 1rem 0;
padding-bottom: 2rem;
}
.detail-grid[b-7mtrmw83l0] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.detail-stack[b-7mtrmw83l0] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.detail-sortbar[b-7mtrmw83l0] {
display: flex;
align-items: center;
justify-content: space-between;
}
.detail-sort[b-7mtrmw83l0] {
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
font-size: var(--p1-text-sm);
font-weight: var(--p1-weight-medium);
color: var(--p1-text-secondary);
}
.detail-count[b-7mtrmw83l0] {
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
}
.detail-empty[b-7mtrmw83l0] {
padding: 2rem 1rem;
text-align: center;
font-size: var(--p1-text-base);
color: var(--p1-text-muted);
}
/* ═══ DESKTOP — additive only. Same markup: hero, actions, tabs, content. ═══ */
@media (min-width: 768px) {
.account-detail[b-7mtrmw83l0] {
max-width: var(--p1-page-max);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
/* The quick actions don't need to span the full width on a desktop screen. */
.quick-actions[b-7mtrmw83l0] {
max-width: 40rem;
}
}
/* /Components/Pages/Accounts/Accounts.razor.rz.scp.css */
.accounts-page[b-6bdasostkb] {
padding-bottom: 2rem;
}
/* Mobile Styles */
@media (max-width: 767px) {
/* Top padding matches the 1rem used by Activity/Notifications/Profile so every page
title lands in the same place. */
.page-header[b-6bdasostkb] {
padding: 1rem 1.25rem 0.75rem;
}
/* .p1-title carries a 1rem bottom margin globally; the summary line belongs tight under
the heading, so tighten it here. */
.page-header .p1-title[b-6bdasostkb] {
margin-bottom: 0.25rem;
}
.page-header .title[b-6bdasostkb] {
font-size: var(--p1-text-3xl);
font-weight: 700;
color: var(--p1-text-primary);
margin-bottom: 0.25rem;
}
.page-header .summary[b-6bdasostkb] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.total-value[b-6bdasostkb] {
color: var(--p1-text-secondary);
font-size: var(--p1-text-base);
}
.count-badge[b-6bdasostkb] {
background-color: var(--p1-surface-inner);
color: var(--p1-text-primary);
font-size: var(--p1-text-sm);
font-weight: 500;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
}
.actions[b-6bdasostkb] {
padding: 0 1rem;
margin-bottom: 1rem;
}
.open-account-btn[b-6bdasostkb] {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 0.875rem 1rem;
transition: border-color 0.2s;
}
.open-account-btn:hover[b-6bdasostkb] { border-color: var(--p1-border); }
.icon-box[b-6bdasostkb] {
width: 2rem;
height: 2rem;
border-radius: 0.75rem;
background-color: rgba(var(--p1-pos-rgb), 0.1);
border: 1px solid rgba(var(--p1-pos-rgb), 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--p1-pos);
}
.btn-text[b-6bdasostkb] {
flex: 1;
text-align: left;
font-size: var(--p1-text-md);
font-weight: 600;
color: var(--p1-text-primary);
}
.arrow[b-6bdasostkb] { color: var(--p1-text-muted); }
.account-list[b-6bdasostkb] {
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.account-card[b-6bdasostkb] {
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1.25rem;
position: relative;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.card-bar[b-6bdasostkb] {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
}
/* flex-start, not center: the title group is now two lines (name + sub-accounts), and the
type pill belongs beside the name rather than floating to the middle of the pair. */
.card-header[b-6bdasostkb] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.card-title-group[b-6bdasostkb] {
min-width: 0;
}
/* carries the browser's default ~1em heading margin — that was the big gap between
the account name and the sub-accounts line. */
.acc-name[b-6bdasostkb] {
margin: 0;
font-size: var(--p1-text-xl);
font-weight: 600;
color: var(--p1-text-primary);
line-height: 1.2;
}
.acc-tag[b-6bdasostkb] {
font-size: var(--p1-text-2xs);
font-weight: 500;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
text-transform: uppercase;
flex-shrink: 0;
}
.acc-info[b-6bdasostkb] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
}
/* Sits directly under the title. */
.sub-acc[b-6bdasostkb] {
display: block;
margin-top: 0.125rem;
font-size: var(--p1-text-md);
color: var(--p1-text-muted);
}
.child-tag[b-6bdasostkb] {
display: flex;
align-items: center;
gap: 0.25rem;
background-color: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-size: var(--p1-text-2xs);
font-weight: 600;
color: var(--p1-text-primary);
text-transform: uppercase;
}
.acc-value[b-6bdasostkb] {
font-size: var(--p1-text-4xl);
font-weight: 700;
color: var(--p1-text-primary);
margin-bottom: 0.75rem;
}
.stats-grid[b-6bdasostkb] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.stat .label[b-6bdasostkb] { font-size: var(--p1-text-sm); color: var(--p1-text-muted); margin-bottom: 0.25rem; }
/* Flex with a gap, exactly like .acct-hero__perf — NOT a margin. As a plain block the markup's
own whitespace rendered as a space AND the margin applied on top, so the gap here was wider
than the same figure in the hero. Flex swallows the whitespace, so 0.25rem means 0.25rem.
nowrap keeps the percentage on the amount's line; the stat column is narrow and it wrapped. */
.stat .val[b-6bdasostkb] {
display: flex;
align-items: baseline;
gap: 0.25rem;
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
white-space: nowrap;
}
.stat .val.positive[b-6bdasostkb] { color: var(--p1-pos); }
.stat .val.negative[b-6bdasostkb] { color: var(--p1-neg); }
/* Same treatment as .change-percent on the dashboard: part of the same figure as the gain, so
it takes the gain's colour at 80% rather than a separate grey. */
.return-pct[b-6bdasostkb] {
font-size: var(--p1-text-sm);
font-weight: 600;
}
.stat .val.positive .return-pct[b-6bdasostkb] { color: rgba(var(--p1-pos-rgb), 0.8); }
.stat .val.negative .return-pct[b-6bdasostkb] { color: rgba(var(--p1-neg-rgb), 0.8); }
.card-action[b-6bdasostkb] {
margin-top: 1rem;
font-size: var(--p1-text-base);
font-weight: 500;
color: var(--p1-brand-accent);
display: flex;
align-items: center;
gap: 0.25rem;
}
}
/* Desktop Styles */
/* ═══ DESKTOP — additive only. The MARKUP is the mobile markup; only the layout differs. ═══ */
@media (min-width: 768px) {
.accounts-page[b-6bdasostkb] {
max-width: var(--p1-page-max);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
.page-header[b-6bdasostkb] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.page-header .p1-title[b-6bdasostkb] { font-size: var(--p1-text-4xl); }
.summary[b-6bdasostkb] { display: flex; align-items: center; gap: 0.75rem; }
.actions[b-6bdasostkb] { margin-bottom: 1.5rem; }
.open-account-btn[b-6bdasostkb] { width: auto; }
/* Cards in a grid rather than a single column. */
.account-list[b-6bdasostkb] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
gap: 1.25rem;
}
.account-card[b-6bdasostkb] {
transition: transform 0.15s, border-color 0.15s;
}
.account-card:hover[b-6bdasostkb] {
border-color: var(--p1-text-muted);
transform: translateY(-2px);
}
}
/* /Components/Pages/Accounts/ProductAccount.razor.rz.scp.css */
.product-page[b-xfauh1tfxs] {
padding-bottom: 2rem;
}
.product-page__empty[b-xfauh1tfxs] {
padding: 2rem 1rem;
text-align: center;
color: var(--p1-text-muted);
font-size: var(--p1-text-base);
}
/* ── Hero ── */
.product-hero__holder[b-xfauh1tfxs] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: var(--p1-text-2xs);
font-weight: 600;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
color: var(--p1-text-primary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ── Cards ── */
.product-card[b-xfauh1tfxs] {
margin: 0.75rem 1rem 0;
padding: 1rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
}
.product-card__title[b-xfauh1tfxs] {
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
margin-bottom: 0.875rem;
}
.product-block[b-xfauh1tfxs] {
margin: 0.75rem 1rem 0;
}
/* ── Allowance bars ── */
.allowance + .allowance[b-xfauh1tfxs] { margin-top: 1rem; }
.allowance__head[b-xfauh1tfxs] {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.allowance__name[b-xfauh1tfxs] { font-size: var(--p1-text-md); font-weight: 500; color: var(--p1-text-secondary); }
.allowance__pct[b-xfauh1tfxs] { font-size: var(--p1-text-md); font-weight: 700; color: var(--p1-text-primary); }
.allowance__track[b-xfauh1tfxs] {
height: 0.5rem;
border-radius: 9999px;
background: var(--p1-surface-inner);
overflow: hidden;
}
/* Solid, in the product's own colour (set inline from Product.Hex) — so the bar matches the type
pill above it. The old gradient ran warm→cool as if it were showing "how much is LEFT", when the
bar actually fills with how much is USED. */
.allowance__fill[b-xfauh1tfxs] {
height: 100%;
border-radius: 9999px;
background: var(--allowance-accent, var(--p1-accent-blue));
}
.allowance__foot[b-xfauh1tfxs] {
display: flex;
justify-content: space-between;
margin-top: 0.375rem;
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
}
.allowance__note[b-xfauh1tfxs] {
margin-top: 0.25rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
/* ── Provider details ── */
.provider__row[b-xfauh1tfxs] {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--p1-border-subtle);
}
.provider__row:last-child[b-xfauh1tfxs] { border-bottom: none; }
.provider__label[b-xfauh1tfxs] { font-size: var(--p1-text-md); color: var(--p1-text-secondary); }
.provider__value[b-xfauh1tfxs] { font-size: var(--p1-text-md); font-weight: 600; color: var(--p1-text-primary); text-align: right; }
/* ── Row button (Cash movement) ── */
.product-row-btn[b-xfauh1tfxs] {
width: 100%;
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 0.75rem;
cursor: pointer;
font-family: inherit;
}
.product-row-btn__icon[b-xfauh1tfxs] {
width: 1.75rem;
height: 1.75rem;
border-radius: 0.5rem;
background: rgba(var(--p1-pos-rgb), 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.product-row-btn__label[b-xfauh1tfxs] {
flex: 1;
text-align: left;
font-size: var(--p1-text-base);
font-weight: 500;
color: var(--p1-text-primary);
}
/* ── Tabs ── */
.product-tabs[b-xfauh1tfxs] {
display: flex;
margin: 1rem 1rem 0;
padding: 0.25rem;
background: var(--p1-surface-inner);
border-radius: 0.75rem;
}
.product-tab[b-xfauh1tfxs] {
flex: 1;
padding: 0.5rem 0;
border: none;
border-radius: 0.5rem;
background: transparent;
color: var(--p1-text-muted);
font-family: inherit;
font-size: var(--p1-text-2xs);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.product-tab.is-active[b-xfauh1tfxs] {
background: var(--p1-brand-accent);
color: var(--p1-text-on-accent); /* on brand red — white in both themes */
font-weight: 500;
}
/* ── Tab body ── */
.product-body[b-xfauh1tfxs] {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1rem 1rem 0;
}
/* The cards inside a tab body already have the page's side margin from their parent. */
.product-body .product-card[b-xfauh1tfxs] { margin: 0; }
.tile-grid[b-xfauh1tfxs] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.tile[b-xfauh1tfxs] {
padding: 0.875rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 0.75rem;
}
.tile__label[b-xfauh1tfxs] { font-size: var(--p1-text-sm); color: var(--p1-text-secondary); margin-bottom: 0.25rem; }
.tile__value[b-xfauh1tfxs] { font-size: var(--p1-text-base); font-weight: 600; color: var(--p1-text-primary); }
/* ── Allocation legend ── */
/* ── Sector bars ── */
/* ── Desktop ── */
@media (min-width: 768px) {
.product-page[b-xfauh1tfxs] {
max-width: 720px;
}
}
/* ── Unrealised gains (GIA) ── */
.unrealised[b-xfauh1tfxs] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.unrealised__title[b-xfauh1tfxs] {
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
}
.unrealised__meta[b-xfauh1tfxs] {
margin-top: 0.125rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
.unrealised__value[b-xfauh1tfxs] {
font-size: var(--p1-text-lg);
font-weight: 700;
white-space: nowrap;
}
.unrealised__value.is-pos[b-xfauh1tfxs] { color: var(--p1-pos); }
.unrealised__value.is-neg[b-xfauh1tfxs] { color: var(--p1-neg); }
/* ═══ DESKTOP — the shared container. Additive: nothing here exists at mobile widths. ═══ */
@media (min-width: 768px) {
.product-page[b-xfauh1tfxs] {
max-width: var(--p1-page-narrow);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
}
/* /Components/Pages/Clients/ClientDetail.razor.rz.scp.css */
.client-page[b-wmqh4d1fs3] {
padding-bottom: 2rem;
}
.client-page__empty[b-wmqh4d1fs3] {
padding: 2rem 1rem;
text-align: center;
color: var(--p1-text-muted);
font-size: var(--p1-text-base);
}
/* ── Hero ── */
.client-hero[b-wmqh4d1fs3] {
margin: 0.75rem 1rem 0;
padding: 1rem 1.25rem 1.25rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1.5rem;
}
.client-hero__back[b-wmqh4d1fs3] {
display: inline-block;
margin-bottom: 0.75rem;
font-size: var(--p1-text-base);
font-weight: 500;
color: var(--p1-text-secondary);
text-decoration: none;
}
.client-hero__back:hover[b-wmqh4d1fs3] { color: var(--p1-text-primary); }
.client-hero__badges[b-wmqh4d1fs3] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.client-hero__type[b-wmqh4d1fs3] {
font-size: var(--p1-text-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.1875rem 0.5rem;
border-radius: 0.375rem;
}
.client-hero__status[b-wmqh4d1fs3] {
font-size: var(--p1-text-2xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.1875rem 0.625rem;
border-radius: 9999px;
background: rgba(var(--p1-pos-rgb), 0.12);
color: var(--p1-pos);
border: 1px solid rgba(var(--p1-pos-rgb), 0.25);
}
.client-hero__name[b-wmqh4d1fs3] {
margin: 0.625rem 0 0;
font-size: var(--p1-text-2xl);
font-weight: 700;
color: var(--p1-text-primary);
}
.client-hero__ref[b-wmqh4d1fs3] {
margin-top: 0.125rem;
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
}
.client-hero__label[b-wmqh4d1fs3] {
margin-top: 1rem;
font-size: var(--p1-text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--p1-text-secondary);
}
.client-hero__value[b-wmqh4d1fs3] {
margin-top: 0.25rem;
font-size: var(--p1-text-5xl);
font-weight: 700;
line-height: 1;
letter-spacing: -0.025em;
color: var(--p1-text-primary);
}
.client-hero__perf[b-wmqh4d1fs3] {
display: flex;
align-items: baseline;
gap: 0.25rem;
margin-top: 0.5rem;
}
.client-hero__gain[b-wmqh4d1fs3] { font-size: var(--p1-text-lg); font-weight: 600; }
.client-hero__gain.is-pos[b-wmqh4d1fs3] { color: var(--p1-pos); }
.client-hero__gain.is-neg[b-wmqh4d1fs3] { color: var(--p1-neg); }
.client-hero__pct[b-wmqh4d1fs3] { font-size: var(--p1-text-base); color: var(--p1-text-secondary); }
.client-hero__since[b-wmqh4d1fs3] { font-size: var(--p1-text-sm); color: var(--p1-text-muted); margin-left: 0.125rem; }
.client-hero__stats[b-wmqh4d1fs3] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--p1-border-subtle);
}
.client-hero__stat-label[b-wmqh4d1fs3] { font-size: var(--p1-text-xs); color: var(--p1-text-muted); }
.client-hero__stat-value[b-wmqh4d1fs3] {
margin-top: 0.125rem;
font-size: var(--p1-text-base);
font-weight: 700;
color: var(--p1-text-primary);
}
.client-hero__stat-value.is-pos[b-wmqh4d1fs3] { color: var(--p1-pos); }
.client-hero__stat-value.is-neg[b-wmqh4d1fs3] { color: var(--p1-neg); }
/* ── Accounts ── */
.client-section[b-wmqh4d1fs3] {
margin: 1.5rem 1rem 0.75rem;
font-size: var(--p1-text-lg);
font-weight: 700;
color: var(--p1-text-primary);
}
.client-accounts[b-wmqh4d1fs3] {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0 1rem;
}
.client-account[b-wmqh4d1fs3] {
display: flex;
overflow: hidden;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
text-decoration: none;
}
.client-account__bar[b-wmqh4d1fs3] {
width: 4px;
flex-shrink: 0;
}
.client-account__body[b-wmqh4d1fs3] {
flex: 1;
min-width: 0;
padding: 1rem;
}
.client-account__top[b-wmqh4d1fs3] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.client-account__label[b-wmqh4d1fs3] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
}
.client-account__pill[b-wmqh4d1fs3] {
font-size: var(--p1-text-2xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
}
.client-account__value[b-wmqh4d1fs3] {
margin-top: 0.375rem;
font-size: var(--p1-text-2xl);
font-weight: 700;
color: var(--p1-text-primary);
}
.client-account__meta[b-wmqh4d1fs3] {
margin-top: 0.125rem;
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
}
.client-account__perf[b-wmqh4d1fs3] {
margin-top: 0.375rem;
font-size: var(--p1-text-md);
font-weight: 600;
}
.client-account__perf.is-pos[b-wmqh4d1fs3] { color: var(--p1-pos); }
.client-account__perf.is-neg[b-wmqh4d1fs3] { color: var(--p1-neg); }
/* ── Chart ── */
.client-chart[b-wmqh4d1fs3] {
margin: 1rem 1rem 0;
}
@media (min-width: 768px) {
.client-page[b-wmqh4d1fs3] { max-width: 720px; }
}
/* ═══ DESKTOP — the shared container. Additive: nothing here exists at mobile widths. ═══ */
@media (min-width: 768px) {
.client-page[b-wmqh4d1fs3] {
max-width: var(--p1-page-narrow);
margin-inline: auto;
padding: 1rem var(--p1-page-gutter) 3rem;
}
}
/* /Components/Pages/Dev/Preview.razor.rz.scp.css */
.preview[b-2b46tpk3a4] {
/* Exactly the viewport, not min-height. With min-height the element grows past the screen and
the backdrop is then sized to the ELEMENT, which crops it. */
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
/* cover — fills the page edge to edge. It crops whatever doesn't fit the window's aspect ratio
(a maximised browser viewport is ~2:1, wider than this 16:9 image, so a little is trimmed off
the top and bottom). Fine for a backdrop; see the note in chat about a 2560×1440 export with
a centred safe zone if you want the logo guaranteed in frame at every window size. */
background-color: #000;
background-image: url('/images/p1portalmobilebackground.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
/* Fixed dark chrome regardless of the app's theme — this is the studio, not the product. */
color: #f5f5f7;
font-family: var(--p1-font-family);
}
/* ── Toolbar ── */
.preview-bar[b-2b46tpk3a4] {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1.25rem;
padding: 0.875rem 1.25rem;
background: #000;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}
.preview-bar__logo[b-2b46tpk3a4] {
height: 26px;
object-fit: contain;
}
.preview-bar[b-2b46tpk3a4] {
position: relative;
}
/* Pinned left; the controls stay centred in the bar because the brand is out of the flow. */
.preview-bar__brand[b-2b46tpk3a4] {
position: absolute;
left: 1.25rem;
display: flex;
align-items: center;
gap: 0.625rem;
}
.preview-bar__divider[b-2b46tpk3a4] {
color: rgba(255, 255, 255, 0.3);
font-size: var(--p1-text-base);
}
.preview-bar__product[b-2b46tpk3a4] {
font-size: var(--p1-text-base);
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
}
.preview-bar__group[b-2b46tpk3a4] {
display: flex;
gap: 0.25rem;
padding: 0.1875rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 9999px;
}
.preview-chip[b-2b46tpk3a4] {
padding: 0.3125rem 0.75rem;
border: none;
border-radius: 9999px;
background: transparent;
color: rgba(255, 255, 255, 0.85);
font-family: inherit;
font-size: var(--p1-text-sm);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.preview-chip:hover[b-2b46tpk3a4] {
color: var(--p1-text-on-accent);
background: rgba(255, 255, 255, 0.1);
}
.preview-chip.is-active[b-2b46tpk3a4] {
background: #ef4444;
color: var(--p1-text-on-accent);
}
/* ── Stage ── */
.preview-stage[b-2b46tpk3a4] {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem 1rem 1.25rem;
}
/* Takes the frame's SCALED footprint. A transform doesn't affect layout size, so without this the
desktop frame would still reserve 1440×900 and shove the caption off the screen. */
.preview-slot[b-2b46tpk3a4] {
position: relative;
flex-shrink: 0;
}
.preview-frame[b-2b46tpk3a4] {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08),
0 40px 80px -20px rgba(0, 0, 0, 0.75),
0 0 60px -10px rgba(0, 0, 0, 0.5);
}
.preview-frame.is-phone[b-2b46tpk3a4] {
border-radius: 44px;
padding: 10px;
background: linear-gradient(160deg, #3a3d44 0%, #16181c 40%, #0b0c0e 100%);
}
.preview-frame.is-desktop[b-2b46tpk3a4] {
border-radius: 12px;
padding: 8px;
background: linear-gradient(160deg, #2c2f35 0%, #16181c 60%, #0b0c0e 100%);
}
/* No notch: the app has no status-bar strip to hide it in, so a notch could only sit ON TOP
of the header and cover the logo — which is exactly what it was doing. */
.preview-frame__screen[b-2b46tpk3a4] {
display: block;
width: 100%;
height: 100%;
border: none;
background: #0a0a0b;
}
.preview-frame.is-phone .preview-frame__screen[b-2b46tpk3a4] { border-radius: 34px; }
.preview-frame.is-desktop .preview-frame__screen[b-2b46tpk3a4] { border-radius: 6px; }
.preview-caption[b-2b46tpk3a4] {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: var(--p1-text-sm);
/* Was 0.55 — too faint against the backdrop photo, which is busy behind it. */
color: rgba(255, 255, 255, 0.85);
flex-shrink: 0;
}
.preview-reload[b-2b46tpk3a4] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
background: transparent;
color: rgba(255, 255, 255, 0.9);
font-family: inherit;
font-size: var(--p1-text-xs);
font-weight: 600;
cursor: pointer;
}
.preview-reload:hover[b-2b46tpk3a4] {
color: var(--p1-text-on-accent);
border-color: rgba(255, 255, 255, 0.35);
}
/* Names the chip group it sits beside — Device / Brand / Screen. The groups had aria-labels, so a
screen reader knew what they were and a sighted user didn't. */
.preview-bar__field[b-2b46tpk3a4] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.preview-bar__label[b-2b46tpk3a4] {
font-size: var(--p1-text-2xs);
font-weight: var(--p1-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
color: rgba(255, 255, 255, 0.55);
margin-right: 0.125rem;
white-space: nowrap;
}
/* /Components/Pages/Home/Home.razor.rz.scp.css */
.home-page[b-nxbj8za783] {
padding-bottom: 2rem;
}
/* Mobile styles (< 768px) */
/* Outside the media queries on purpose: both the mobile list and the desktop grid render this
pill. It used to live in the mobile-only block, so on desktop the class did nothing and the
inline style on the element was the only thing holding it up. */
/* MOBILE-FIRST: these are the base rules — the shared design. Desktop LAYOUT is layered on
in the min-width block below. Moved out of a max-width:767 wrapper so desktop stops
falling back to unstyled defaults (grey role pills, flat cards). Mobile renders
identically: a rule here applies at mobile width exactly as it did inside max-width:767. */
.portfolio-hero[b-nxbj8za783] {
margin: 0.75rem 1rem 0.25rem 1rem;
background-color: var(--p1-surface);
border-radius: 1.5rem;
padding: 1.5rem;
border: 1px solid var(--p1-border);
}
.hero-header[b-nxbj8za783] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.client-name[b-nxbj8za783] {
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
.client-id[b-nxbj8za783] {
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
margin-top: 0.125rem;
}
.status-badge[b-nxbj8za783] {
background-color: rgba(var(--p1-pos-rgb), 0.1);
border: 1px solid rgba(var(--p1-pos-rgb), 0.2);
color: var(--p1-pos);
font-size: var(--p1-text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
}
.hero-label[b-nxbj8za783] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
.portfolio-value[b-nxbj8za783] {
font-size: var(--p1-text-4xl);
font-weight: 700;
line-height: 1.25;
margin-top: 0.25rem;
color: var(--p1-text-primary);
}
.portfolio-change[b-nxbj8za783] {
display: flex;
align-items: baseline;
margin-top: 0.25rem;
}
.change-value[b-nxbj8za783] {
color: var(--p1-pos);
font-weight: 600;
font-size: var(--p1-text-base);
}
.change-percent[b-nxbj8za783] {
color: rgba(var(--p1-pos-rgb), 0.8);
font-size: var(--p1-text-base);
margin-left: 0.25rem;
}
.since-inception[b-nxbj8za783] {
color: var(--p1-text-muted);
font-size: var(--p1-text-sm);
margin-left: 0.5rem;
}
.divider[b-nxbj8za783] {
height: 1px;
background-color: var(--p1-border);
margin: 1rem 0;
}
.stats-grid[b-nxbj8za783] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.stat-label[b-nxbj8za783] {
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
margin-bottom: 0.125rem;
}
.stat-value[b-nxbj8za783] {
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
.stat-value.positive[b-nxbj8za783] {
color: var(--p1-pos);
}
.section[b-nxbj8za783] {
margin-top: 1.25rem;
}
.alloc-section[b-nxbj8za783] { margin: 0 1rem; }
/* The chart component root has no horizontal margin of its own, so inset the
section to match the 1rem gutter used by the hero and account cards. */
.chart-section[b-nxbj8za783] {
margin-left: 1rem;
margin-right: 1rem;
}
/* : the browser's default margin-top was dropping the title below the "See all"
link it sits beside. Reset it and set spacing explicitly. */
.section-title[b-nxbj8za783] {
margin: 0 0 0.75rem;
line-height: 1.2;
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
padding: 0 1rem;
}
.scroll-container[b-nxbj8za783] {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding: 0 1rem 0.25rem 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroll-container[b-nxbj8za783]::-webkit-scrollbar {
display: none;
}
.relationship-card[b-nxbj8za783] {
flex-shrink: 0;
width: 11rem;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1rem;
}
.rel-header[b-nxbj8za783] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.rel-type[b-nxbj8za783] {
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* Same treatment as the account type pills — 10% tint, accent text, 20% border. */
.rel-role[b-nxbj8za783] {
font-size: var(--p1-text-2xs);
font-weight: 600;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
}
.role-violet[b-nxbj8za783] {
background-color: color-mix(in srgb, var(--p1-accent-violet) 10%, transparent);
color: var(--p1-accent-violet);
border: 1px solid color-mix(in srgb, var(--p1-accent-violet) 20%, transparent);
}
.role-amber[b-nxbj8za783] {
background-color: color-mix(in srgb, var(--p1-accent-amber) 10%, transparent);
color: var(--p1-accent-amber);
border: 1px solid color-mix(in srgb, var(--p1-accent-amber) 20%, transparent);
}
.role-blue[b-nxbj8za783] {
background-color: color-mix(in srgb, var(--p1-accent-blue) 10%, transparent);
color: var(--p1-accent-blue);
border: 1px solid color-mix(in srgb, var(--p1-accent-blue) 20%, transparent);
}
.rel-name[b-nxbj8za783] {
font-size: var(--p1-text-md);
font-weight: 700;
color: var(--p1-text-primary);
line-height: 1.25;
margin-bottom: 0.25rem;
}
.rel-id[b-nxbj8za783] {
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
}
.section-header[b-nxbj8za783] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
margin-bottom: 0.75rem;
}
.section-header .section-title[b-nxbj8za783] {
padding: 0;
margin: 0;
}
.card-header[b-nxbj8za783] {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.open-account-cta[b-nxbj8za783] {
margin: 0.75rem 1rem 0 1rem;
width: calc(100% - 2rem);
display: flex;
align-items: center;
gap: 0.75rem;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 0.875rem 1rem;
transition: background-color 0.2s;
}
.cta-icon[b-nxbj8za783] {
width: 2rem;
height: 2rem;
border-radius: 0.75rem;
background-color: rgba(var(--p1-pos-rgb), 0.1);
border: 1px solid rgba(var(--p1-pos-rgb), 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--p1-pos);
}
.cta-text[b-nxbj8za783] {
flex: 1;
text-align: left;
font-size: var(--p1-text-md);
font-weight: 600;
color: var(--p1-text-primary);
}
.cta-arrow[b-nxbj8za783] {
color: var(--p1-text-muted);
}
.performance-chart-mock[b-nxbj8za783] {
margin: 0 1rem;
height: 200px;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Applies to BOTH the Allocations and Recent activity cards. The activity card had no
.card-title rule at all, so its fell back to the browser default — oversized, with a
default top margin that pushed it below the "View all" link instead of beside it. */
.activity-card .card-header[b-nxbj8za783] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.activity-card .card-title[b-nxbj8za783] {
margin: 0;
line-height: 1.2;
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
color: var(--p1-text-primary);
}
.activity-card[b-nxbj8za783] {
margin: 0 1rem;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
overflow: hidden;
}
/* The header gets the inset; the ActivityRows below go edge-to-edge with their own padding, so the
rows and dividers match the Activity page exactly. */
.activity-card .card-header[b-nxbj8za783] {
padding: 1rem 1rem 0.25rem;
}
/* Rounded square, matching the "Open account" (.cta-icon) tile — not a circle. */
.activity-icon[b-nxbj8za783] {
width: 2rem;
height: 2rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Same tint + border treatment as .cta-icon: 10% fill, 20% border. */
.bg-green-10[b-nxbj8za783] {
background-color: rgba(var(--p1-pos-rgb), 0.1);
border: 1px solid rgba(var(--p1-pos-rgb), 0.2);
color: var(--p1-pos);
}
.bg-blue-10[b-nxbj8za783] {
background-color: rgba(var(--p1-accent-blue-rgb), 0.1);
border: 1px solid rgba(var(--p1-accent-blue-rgb), 0.2);
color: var(--p1-accent-blue);
}
.activity-info[b-nxbj8za783] {
flex: 1;
margin-left: 0.75rem;
min-width: 0;
}
.act-label[b-nxbj8za783] {
font-size: var(--p1-text-base);
font-weight: 500;
color: var(--p1-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.act-sub[b-nxbj8za783] {
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
margin-top: 0.125rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.act-amount[b-nxbj8za783] {
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
.act-amount.positive[b-nxbj8za783] {
color: var(--p1-pos);
}
/* ── Mobile carousel controls (dots + arrows) ── */
.carousel-controls[b-nxbj8za783] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem 0;
}
.carousel-controls .dots[b-nxbj8za783] {
display: flex;
align-items: center;
gap: 0.375rem;
}
.carousel-controls .dot[b-nxbj8za783] {
width: 0.375rem;
height: 0.375rem;
border-radius: 9999px;
background: var(--p1-border);
border: none;
padding: 0;
cursor: pointer;
transition: width 0.2s, background 0.2s;
}
.carousel-controls .dot.active[b-nxbj8za783] {
width: 1.25rem;
background: var(--p1-brand-accent);
}
.carousel-controls .arrows[b-nxbj8za783] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.carousel-controls .nav-arrow[b-nxbj8za783] {
width: 2rem;
height: 2rem;
border-radius: 9999px;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
color: var(--p1-text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.carousel-controls .nav-arrow:hover[b-nxbj8za783] {
color: var(--p1-text-primary);
border-color: var(--p1-text-muted);
}
/* Desktop styles (>= 768px) */
@media (min-width: 768px) {
.desktop-hero[b-nxbj8za783] {
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.hero-info[b-nxbj8za783] {
flex: 1;
}
.desktop-hero .status-badge[b-nxbj8za783] {
background-color: rgba(var(--p1-pos-rgb), 0.1);
border: 1px solid rgba(var(--p1-pos-rgb), 0.2);
color: var(--p1-pos);
font-size: var(--p1-text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
width: fit-content;
margin-bottom: 0.5rem;
}
.desktop-hero .client-name[b-nxbj8za783] {
font-size: var(--p1-text-3xl);
font-weight: 700;
color: var(--p1-text-primary);
}
.desktop-hero .client-id[b-nxbj8za783] {
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
margin-top: 0.125rem;
}
.hero-totals[b-nxbj8za783] {
text-align: right;
margin-right: 1.5rem;
}
.hero-totals .hero-label[b-nxbj8za783] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.hero-totals .portfolio-value[b-nxbj8za783] {
font-size: var(--p1-text-5xl);
font-weight: 700;
color: var(--p1-text-primary);
}
.hero-totals .portfolio-change[b-nxbj8za783] {
display: flex;
align-items: baseline;
justify-content: flex-end;
margin-top: 0.25rem;
}
.hero-divider[b-nxbj8za783] {
width: 1px;
height: 4rem;
background-color: var(--p1-border);
margin: 0 1.5rem;
}
.hero-stats[b-nxbj8za783] {
display: flex;
gap: 2rem;
}
.hero-stats .stat-item[b-nxbj8za783] {
text-align: left;
}
.hero-stats .stat-label[b-nxbj8za783] {
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.hero-stats .stat-value[b-nxbj8za783] {
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
/* The TODAY figure keeps its gain colour — the plain .stat-value rule above was flattening it. */
.hero-stats .stat-value.positive[b-nxbj8za783] { color: var(--p1-pos); }
.hero-stats .stat-value.negative[b-nxbj8za783] { color: var(--p1-neg); }
.desktop-section[b-nxbj8za783] {
margin-bottom: 1.5rem;
}
.section-title[b-nxbj8za783] {
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
margin-bottom: 0.75rem;
}
.relationships-carousel[b-nxbj8za783], .accounts-carousel[b-nxbj8za783] {
display: flex;
gap: 1rem;
overflow-x: auto;
padding-bottom: 0.5rem;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
}
.relationships-carousel[b-nxbj8za783]::-webkit-scrollbar, .accounts-carousel[b-nxbj8za783]::-webkit-scrollbar {
display: none;
}
.carousel-wrapper[b-nxbj8za783] {
position: relative;
}
.carousel-arrow[b-nxbj8za783] {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 1.75rem;
height: 1.75rem;
background-color: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
color: var(--p1-text-secondary);
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
opacity: 0;
}
.group-hover-parent:hover .carousel-arrow[b-nxbj8za783] {
opacity: 1;
}
.carousel-arrow:hover[b-nxbj8za783] {
color: var(--p1-text-primary);
border-color: var(--p1-border);
}
.carousel-arrow.left[b-nxbj8za783] {
left: 0;
transform: translate(-50%, -50%);
}
.carousel-arrow.right[b-nxbj8za783] {
right: 0;
transform: translate(50%, -50%);
}
.carousel-dots-nav[b-nxbj8za783] {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.625rem;
}
.carousel-dots-nav .dots[b-nxbj8za783] {
display: flex;
align-items: center;
gap: 0.375rem;
}
.carousel-dots-nav .dot[b-nxbj8za783] {
width: 6px;
height: 6px;
border-radius: 9999px;
background-color: var(--p1-border);
cursor: pointer;
transition: all 0.2s;
}
.carousel-dots-nav .dot:hover[b-nxbj8za783] {
background-color: var(--p1-border);
}
.carousel-dots-nav .dot.active[b-nxbj8za783] {
width: 1rem;
background-color: var(--p1-brand-accent);
}
.carousel-dots-nav .arrows[b-nxbj8za783] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-arrow[b-nxbj8za783] {
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--p1-text-primary);
cursor: pointer;
transition: opacity 0.2s;
}
.nav-arrow:disabled[b-nxbj8za783] {
opacity: 0.3;
cursor: not-allowed;
}
.relationships-carousel .relationship-card[b-nxbj8za783] {
width: 260px;
flex-shrink: 0;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1rem;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
}
.relationships-carousel .relationship-card:hover[b-nxbj8za783] {
border-color: var(--p1-border);
background-color: var(--p1-surface-inner);
}
.open-account-card[b-nxbj8za783] {
width: 130px;
flex-shrink: 0;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
}
/* .cta-text carries flex:1 + text-align:left from the mobile row; centre it here. */
.open-account-card .cta-text[b-nxbj8za783] {
flex: initial;
text-align: center;
}
.open-account-card:hover[b-nxbj8za783] {
border-color: var(--p1-border);
background-color: var(--p1-surface-inner);
}
.accounts-carousel .account-card[b-nxbj8za783] {
width: 320px;
flex-shrink: 0;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1.25rem;
position: relative;
overflow: hidden;
cursor: pointer;
transition: border-color 0.2s;
}
.accounts-carousel .account-card:hover[b-nxbj8za783] {
border-color: var(--p1-border);
}
.accounts-carousel .acc-name[b-nxbj8za783] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
}
.accounts-carousel .acc-value[b-nxbj8za783] {
font-size: var(--p1-text-3xl);
font-weight: 700;
margin-top: 0.75rem;
color: var(--p1-text-primary);
}
.accounts-carousel .acc-footer[b-nxbj8za783] {
margin-top: 0.75rem;
}
.desktop-grid[b-nxbj8za783] {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.grid-left[b-nxbj8za783] {
grid-column: span 7;
}
.grid-right[b-nxbj8za783] {
grid-column: span 5;
display: flex;
flex-direction: column;
gap: 1rem;
}
.performance-chart-container[b-nxbj8za783] {
height: 100%;
min-height: 360px;
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.mock-chart-placeholder[b-nxbj8za783] {
color: var(--p1-text-muted);
}
.allocation-card[b-nxbj8za783] {
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1.25rem;
}
/* Rows flush, header inset — matching the Activity page (and the mobile fix). */
.activity-card[b-nxbj8za783] {
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
overflow: hidden;
}
.activity-card .card-header[b-nxbj8za783] {
padding: 1.25rem 1.25rem 0.5rem;
}
.allocation-card .card-title[b-nxbj8za783], .activity-card .card-title[b-nxbj8za783] {
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
}
}
/* ═══ DESKTOP — put the dashboard on the shared container so it lines up with every other
screen. The layout itself (chart left, allocations + activity right) already matches the
design; this only constrains and centres it. ═══ */
@media (min-width: 768px) {
/* Full-bleed: the dashboard fills the shell's content area, gutter aside — it is NOT capped at
the shared container width like the reading pages. */
.home-page[b-nxbj8za783] {
padding: 1rem var(--p1-page-gutter) 3rem;
}
}
/* /Components/Pages/Login.razor.rz.scp.css */
.p1-login[b-ew0xr3w8y2] {
display: flex;
min-height: 100vh;
background: transparent;
color: var(--p1-text-primary);
font-family: var(--p1-font-family);
}
.p1-login__branding[b-ew0xr3w8y2] {
display: none;
}
.p1-login__form-panel[b-ew0xr3w8y2] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 16px;
position: relative;
z-index: 1;
}
.p1-login__form-container[b-ew0xr3w8y2] {
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
}
.p1-login__mobile-header[b-ew0xr3w8y2] {
display: flex;
flex-direction: column;
items-center: center;
padding: 96px 0 32px;
}
.p1-login__logo-mobile[b-ew0xr3w8y2] {
width: 220px;
margin: 0 auto 20px;
mix-blend-mode: screen;
}
.p1-login__mobile-subtitle[b-ew0xr3w8y2] {
text-align: center;
font-size: var(--p1-text-base);
color: var(--p1-text-secondary);
}
.p1-login__form-card[b-ew0xr3w8y2] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 24px;
padding: 24px;
}
.p1-login__form-title[b-ew0xr3w8y2] {
font-size: var(--p1-text-2xl);
font-weight: 600;
margin-bottom: 4px;
}
.p1-login__form-subtitle[b-ew0xr3w8y2] {
color: var(--p1-text-muted);
font-size: var(--p1-text-base);
margin-bottom: 24px;
}
.p1-login__form-group[b-ew0xr3w8y2] {
margin-bottom: 12px;
}
.p1-login__label-row[b-ew0xr3w8y2] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.p1-login__label[b-ew0xr3w8y2] {
font-size: var(--p1-text-sm);
font-weight: 500;
color: var(--p1-text-muted);
margin-bottom: 6px;
display: block;
}
.p1-login__input[b-ew0xr3w8y2] {
width: 100%;
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
border-radius: 12px;
padding: 14px 16px;
color: var(--p1-text-primary);
font-size: var(--p1-text-base);
outline: none;
transition: border-color 0.2s;
}
.p1-login__input:focus[b-ew0xr3w8y2] {
border-color: var(--p1-accent-active);
}
.p1-login__forgot[b-ew0xr3w8y2] {
background: none;
border: none;
color: var(--p1-brand-accent);
font-size: var(--p1-text-sm);
font-weight: 500;
cursor: pointer;
padding: 0;
}
.p1-login__password-wrapper[b-ew0xr3w8y2] {
position: relative;
}
.p1-login__password-toggle[b-ew0xr3w8y2] {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--p1-text-muted);
cursor: pointer;
padding: 4px;
}
.p1-login__submit[b-ew0xr3w8y2] {
width: 100%;
background: var(--p1-brand-btn);
color: var(--p1-text-on-accent);
border: none;
border-radius: 12px;
padding: 14px;
font-weight: 600;
font-size: var(--p1-text-base);
margin-top: 8px;
cursor: pointer;
transition: background 0.2s;
}
.p1-login__submit:hover[b-ew0xr3w8y2] {
background: var(--p1-brand-btn-hover);
}
.p1-login__divider-line[b-ew0xr3w8y2] {
flex: 1;
height: 1px;
background: var(--p1-border);
}
.p1-login__mobile-footer[b-ew0xr3w8y2] {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 32px;
}
.p1-login__new-user[b-ew0xr3w8y2] {
display: flex;
align-items: center;
gap: 12px;
}
.p1-login__new-user-text[b-ew0xr3w8y2] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
}
.p1-login__create-account[b-ew0xr3w8y2] {
width: 100%;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 12px;
padding: 14px;
color: var(--p1-text-primary);
font-weight: 600;
font-size: var(--p1-text-base);
cursor: pointer;
}
.p1-login__security[b-ew0xr3w8y2] {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
.p1-login__desktop-only[b-ew0xr3w8y2] {
display: none;
}
.p1-login__mobile-only[b-ew0xr3w8y2] {
display: inline;
}
@media (min-width: 768px) {
.p1-login__desktop-only[b-ew0xr3w8y2] {
display: inline;
}
.p1-login__mobile-only[b-ew0xr3w8y2] {
display: none;
}
.p1-login__branding[b-ew0xr3w8y2] {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 480px;
background: linear-gradient(160deg, var(--p1-surface) 55%, var(--p1-surface-inner) 100%);
border-right: 1px solid var(--p1-border);
padding: 48px;
position: relative;
}
.p1-login__branding-content[b-ew0xr3w8y2] {
position: relative;
z-index: 1;
}
.p1-login__glow[b-ew0xr3w8y2] { display: none; }
.p1-login__logo[b-ew0xr3w8y2] {
display: block;
height: 32px;
margin-bottom: 64px;
}
/* The dark-mode logo defaults to display:inline (img), the light one is block — that inline/block
difference is a baseline gap that shifted the text below when switching theme. Force block. */
html[data-theme="dark"] .p1-login__logo.logo-dark[b-ew0xr3w8y2] { display: block; }
.p1-login__title[b-ew0xr3w8y2] {
font-size: var(--p1-text-5xl);
font-weight: 700;
line-height: 1.2;
margin-bottom: 16px;
}
.p1-login__subtitle[b-ew0xr3w8y2] {
font-size: var(--p1-text-base);
color: var(--p1-text-secondary);
line-height: 1.6;
max-width: 320px;
margin-bottom: 40px;
}
.p1-login__branding-footer[b-ew0xr3w8y2] {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
line-height: 1.6;
}
.p1-login__branding-footer p[b-ew0xr3w8y2] { margin: 0; }
.p1-login__form-panel[b-ew0xr3w8y2] {
justify-content: center;
padding: 0 64px;
}
.p1-login__form-panel[b-ew0xr3w8y2]::before {
display: none;
}
.p1-login__mobile-header[b-ew0xr3w8y2], .p1-login__mobile-footer[b-ew0xr3w8y2] {
display: none;
}
.p1-login__form-card[b-ew0xr3w8y2] {
background: none;
border: none;
padding: 0;
box-shadow: none;
}
.p1-login__form-title[b-ew0xr3w8y2] {
font-size: var(--p1-text-3xl);
font-weight: 700;
margin-bottom: 4px;
}
.p1-login__form-subtitle[b-ew0xr3w8y2] {
margin-bottom: 32px;
}
.p1-login__label[b-ew0xr3w8y2] {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.p1-login__input[b-ew0xr3w8y2] {
background: var(--p1-surface);
padding: 12px 16px;
}
.p1-login__security[b-ew0xr3w8y2] {
justify-content: center;
font-size: var(--p1-text-xs);
}
}
/* ── Theme toggle (top-right of the sign-in panel) ──
The button's own styling is global (.shell-theme-btn, shared with the app and setup shells);
only its placement is page-specific. */
.p1-login__form-panel[b-ew0xr3w8y2] {
position: relative;
}
.p1-login__theme-toggle[b-ew0xr3w8y2] {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
}
/* ── Regulatory footer ── */
.p1-login__legal[b-ew0xr3w8y2] {
margin-top: 20px;
text-align: center;
}
.p1-login__legal p[b-ew0xr3w8y2] {
margin: 0 0 6px;
font-size: var(--p1-text-xs);
line-height: 1.5;
color: var(--p1-text-muted);
}
.p1-login__legal p:last-child[b-ew0xr3w8y2] {
margin-bottom: 0;
}
/* SSO block — desktop only. (.p1-login__desktop-only is display:inline, meant for spans of text;
this wraps block content, so it needs its own rule.) */
@media (min-width: 768px) {
}
/* /Components/Pages/Setup/SetupBankDetails.razor.rz.scp.css */
.p1-setup-bank[b-6ds5rn8ihq] {
padding: 0 20px 32px;
}
.p1-setup-bank__section[b-6ds5rn8ihq] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 20px;
padding: 16px;
margin-bottom: 12px;
}
.p1-setup-bank__section-header[b-6ds5rn8ihq] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.p1-setup-bank__section-icon[b-6ds5rn8ihq] {
color: var(--p1-text-secondary);
}
.p1-setup-bank__section-title[b-6ds5rn8ihq] {
font-size: var(--p1-text-md);
font-weight: 600;
color: var(--p1-text-primary);
}
.p1-setup-bank__fields[b-6ds5rn8ihq] {
display: flex;
flex-direction: column;
gap: 12px;
}
.p1-setup-bank__field-label[b-6ds5rn8ihq] {
font-size: var(--p1-text-2xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--p1-text-muted);
margin-bottom: 4px;
}
.p1-setup-bank__field-value[b-6ds5rn8ihq] {
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
border-radius: 12px;
padding: 10px 14px;
font-size: var(--p1-text-md);
font-weight: 500;
color: var(--p1-text-primary);
}
.p1-setup-bank__grid[b-6ds5rn8ihq] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.p1-setup-bank__ddi-card[b-6ds5rn8ihq] {
background: #fff;
border-radius: 12px;
padding: 12px;
margin-bottom: 12px;
}
/* The mandate is a fixed white panel in BOTH themes, so its text must be fixed too — the theme
tokens turn white in dark mode and the whole thing rendered blank. */
.p1-setup-bank__ddi-card[b-6ds5rn8ihq],
.p1-setup-bank__ddi-card .p1-setup-bank__ddi-value[b-6ds5rn8ihq] {
color: #111827;
}
.p1-setup-bank__ddi-card .p1-setup-bank__ddi-header[b-6ds5rn8ihq],
.p1-setup-bank__ddi-card .p1-setup-bank__ddi-label[b-6ds5rn8ihq],
.p1-setup-bank__ddi-card .p1-setup-bank__ddi-note[b-6ds5rn8ihq] {
color: #6b7280;
}
.p1-setup-bank__ddi-card .p1-setup-bank__ddi-content[b-6ds5rn8ihq],
.p1-setup-bank__ddi-card .p1-setup-bank__ddi-footer[b-6ds5rn8ihq],
.p1-setup-bank__ddi-card .p1-setup-bank__ddi-note[b-6ds5rn8ihq] {
border-color: #d1d5db;
}
.p1-setup-bank__ddi-header[b-6ds5rn8ihq] {
font-size: var(--p1-text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--p1-text-muted);
margin-bottom: 8px;
}
.p1-setup-bank__ddi-content[b-6ds5rn8ihq] {
border: 1px solid var(--p1-border);
border-radius: 8px;
padding: 10px;
}
.p1-setup-bank__ddi-grid[b-6ds5rn8ihq] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.p1-setup-bank__ddi-label[b-6ds5rn8ihq] {
font-size: var(--p1-text-2xs);
color: var(--p1-text-secondary);
margin-bottom: 2px;
}
.p1-setup-bank__ddi-value[b-6ds5rn8ihq] {
font-size: var(--p1-text-2xs);
font-weight: 600;
color: var(--p1-text-primary);
}
.p1-setup-bank__ddi-value.is-mono[b-6ds5rn8ihq] {
font-family: monospace;
font-weight: 700;
font-size: var(--p1-text-2xs);
}
.p1-setup-bank__ddi-footer[b-6ds5rn8ihq] {
border-top: 1px solid var(--p1-border);
padding-top: 8px;
margin-bottom: 8px;
}
.p1-setup-bank__ddi-note[b-6ds5rn8ihq] {
border-top: 1px solid var(--p1-border);
padding-top: 8px;
font-size: var(--p1-text-2xs);
color: var(--p1-text-secondary);
line-height: 1.4;
}
.p1-setup-bank__info-text[b-6ds5rn8ihq] {
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
line-height: 1.4;
}
.p1-setup-bank__guarantee[b-6ds5rn8ihq] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 20px;
padding: 16px;
margin-bottom: 12px;
}
.p1-setup-bank__guarantee-title[b-6ds5rn8ihq] {
font-size: var(--p1-text-sm);
font-weight: 600;
color: var(--p1-text-secondary);
margin-bottom: 6px;
}
.p1-setup-bank__guarantee-text[b-6ds5rn8ihq] {
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
line-height: 1.4;
}
.p1-setup-bank__confirmation[b-6ds5rn8ihq] {
display: flex;
justify-content: space-between;
/* Centred, like every other confirmation row in the flow. This one had no align-items at all. */
align-items: center;
gap: 12px;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 16px;
padding: 16px;
cursor: pointer;
}
.p1-setup-bank__checkbox[b-6ds5rn8ihq] {
width: 20px;
height: 20px;
border: 2px solid var(--p1-border);
border-radius: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.p1-setup-bank__confirmation.is-confirmed .p1-setup-bank__checkbox[b-6ds5rn8ihq] {
background: var(--p1-brand-btn);
border-color: var(--p1-brand-btn);
}
.p1-setup-bank__check-icon[b-6ds5rn8ihq] {
width: 12px;
height: 9px;
}
.p1-setup-bank__confirmation-text[b-6ds5rn8ihq] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
line-height: 1.5;
padding-right: 12px;
}
.p1-setup-bank__continue[b-6ds5rn8ihq] {
/* 24px between the last content block and the primary button — the same gap
the Welcome screen uses. */
margin-top: 24px;
width: 100%;
border: none;
border-radius: 12px;
padding: 14px;
font-size: var(--p1-text-base);
font-weight: 600;
transition: all 0.2s;
cursor: pointer;
}
.p1-setup-bank__continue.is-active[b-6ds5rn8ihq] {
background: var(--p1-brand-btn);
color: var(--p1-text-on-accent);
}
.p1-setup-bank__continue.is-active:hover[b-6ds5rn8ihq] {
background: var(--p1-brand-btn-hover);
}
.p1-setup-bank__continue.is-disabled[b-6ds5rn8ihq] {
background: var(--p1-surface-inner);
color: var(--p1-text-muted);
cursor: not-allowed;
}
.p1-setup-bank__skip[b-6ds5rn8ihq] {
display: block;
width: 100%;
background: none;
border: none;
color: var(--p1-text-muted);
font-size: var(--p1-text-md);
margin-top: 8px;
padding: 10px;
cursor: pointer;
transition: color 0.2s;
}
.p1-setup-bank__skip:hover[b-6ds5rn8ihq] {
color: var(--p1-text-secondary);
}
@media (min-width: 768px) {
.p1-setup-bank[b-6ds5rn8ihq] {
padding: 0;
}
.p1-setup-bank__section[b-6ds5rn8ihq] {
padding: 20px;
border-color: var(--p1-border);
}
.p1-setup-bank__section-title[b-6ds5rn8ihq] {
font-size: var(--p1-text-base);
color: var(--p1-text-primary);
}
.p1-setup-bank__field-label[b-6ds5rn8ihq] {
letter-spacing: 0.1em;
}
.p1-setup-bank__field-value[b-6ds5rn8ihq] {
font-size: var(--p1-text-base);
padding: 10px 16px;
}
.p1-setup-bank__ddi-card[b-6ds5rn8ihq] {
padding: 16px;
}
.p1-setup-bank__ddi-grid[b-6ds5rn8ihq] {
gap: 12px;
}
.p1-setup-bank__ddi-value[b-6ds5rn8ihq] {
font-size: var(--p1-text-xs);
}
.p1-setup-bank__ddi-note[b-6ds5rn8ihq] {
font-size: var(--p1-text-2xs);
}
.p1-setup-bank__guarantee[b-6ds5rn8ihq] {
padding: 20px;
border-color: var(--p1-border);
}
.p1-setup-bank__guarantee-title[b-6ds5rn8ihq] {
font-size: var(--p1-text-base);
color: var(--p1-text-primary);
}
.p1-setup-bank__guarantee-text[b-6ds5rn8ihq] {
font-size: var(--p1-text-sm);
}
.p1-setup-bank__confirmation[b-6ds5rn8ihq] {
padding: 20px;
border-color: var(--p1-border);
margin-bottom: 24px;
}
.p1-setup-bank__checkbox[b-6ds5rn8ihq] {
border-color: var(--p1-border);
}
.p1-setup-bank__confirmation-text[b-6ds5rn8ihq] {
font-size: var(--p1-text-base);
color: var(--p1-text-secondary);
}
.p1-setup-bank__skip[b-6ds5rn8ihq] {
font-size: var(--p1-text-base);
}
}
/* /Components/Pages/Setup/SetupComplete.razor.rz.scp.css */
.p1-setup-complete[b-gitsdycdxx] {
padding: 0 20px 32px;
}
.p1-setup-complete__hero[b-gitsdycdxx] {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0 20px;
}
/* Same solid disc the transaction confirmation screens use (.done-check) — a tinted circle with a
plain tick, not a check-circle icon sitting inside another circle. */
.p1-setup-complete__success-icon[b-gitsdycdxx] {
width: 64px;
height: 64px;
border-radius: 9999px;
background: var(--p1-success-bg);
border: 1px solid var(--p1-success-border);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: var(--p1-success);
}
.p1-setup-complete__title[b-gitsdycdxx] {
font-size: var(--p1-text-2xl);
font-weight: 700;
margin-bottom: 6px;
text-align: center;
}
.p1-setup-complete__subtitle[b-gitsdycdxx] {
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
text-align: center;
line-height: 1.4;
max-width: 280px;
}
.p1-setup-complete__summary[b-gitsdycdxx] {
display: flex;
flex-direction: column;
gap: 10px;
}
.p1-setup-complete__step[b-gitsdycdxx] {
display: flex;
align-items: center;
gap: 16px;
background: var(--p1-surface);
border: 1px solid rgba(106, 195, 85, 0.15);
border-radius: 20px;
padding: 14px 16px;
}
.p1-setup-complete__step-icon-wrapper[b-gitsdycdxx] {
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(106, 195, 85, 0.12);
color: var(--p1-pos);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p1-setup-complete__step-content[b-gitsdycdxx] {
flex: 1;
min-width: 0;
}
.p1-setup-complete__step-number[b-gitsdycdxx] {
font-size: var(--p1-text-2xs);
font-weight: 500;
text-transform: uppercase;
color: var(--p1-text-muted);
margin-bottom: 2px;
}
.p1-setup-complete__step-title[b-gitsdycdxx] {
font-size: var(--p1-text-md);
font-weight: 600;
color: var(--p1-text-primary);
}
.p1-setup-complete__step-desc[b-gitsdycdxx] {
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
line-height: 1.3;
}
.p1-setup-complete__step-badge[b-gitsdycdxx] {
font-size: var(--p1-text-2xs);
font-weight: 600;
padding: 4px 10px;
background: rgba(106, 195, 85, 0.1);
color: var(--p1-pos);
border-radius: 8px;
white-space: nowrap;
}
.p1-setup-complete__dashboard-btn[b-gitsdycdxx] {
/* 24px between the last content block and the button. The button owns this gap;
the section above owns nothing, so there is only ever one margin to read. */
margin-top: 24px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--p1-brand-btn);
color: var(--p1-text-on-accent);
border: none;
border-radius: 12px;
padding: 14px;
font-weight: 600;
font-size: var(--p1-text-base);
cursor: pointer;
}
@media (min-width: 768px) {
.p1-setup-complete[b-gitsdycdxx] {
padding: 0;
}
.p1-setup-complete__hero[b-gitsdycdxx] {
padding: 16px 0 32px;
}
.p1-setup-complete__success-icon[b-gitsdycdxx] {
width: 80px;
height: 80px;
}
.p1-setup-complete__title[b-gitsdycdxx] {
font-size: var(--p1-text-4xl);
}
.p1-setup-complete__subtitle[b-gitsdycdxx] {
font-size: var(--p1-text-base);
max-width: 100%;
}
.p1-setup-complete__summary[b-gitsdycdxx] {
gap: 12px;
margin-bottom: 32px;
}
.p1-setup-complete__step[b-gitsdycdxx] {
padding: 16px 20px;
}
.p1-setup-complete__step-icon-wrapper[b-gitsdycdxx] {
width: 40px;
height: 40px;
}
.p1-setup-complete__step-title[b-gitsdycdxx] {
font-size: var(--p1-text-base);
}
.p1-setup-complete__step-desc[b-gitsdycdxx] {
font-size: var(--p1-text-sm);
}
.p1-setup-complete__step-badge[b-gitsdycdxx] {
font-size: var(--p1-text-xs);
padding: 4px 12px;
}
.p1-setup-complete__dashboard-btn[b-gitsdycdxx] {
width: 100%;
}
}
/* /Components/Pages/Setup/SetupDeclarations.razor.rz.scp.css */
.p1-setup-declarations[b-s46e29yr0h] {
padding: 0 20px 32px;
}
.p1-setup-declarations__list[b-s46e29yr0h] {
display: flex;
flex-direction: column;
gap: 12px;
}
.p1-setup-declarations__item[b-s46e29yr0h] {
border: 1px solid var(--p1-border);
border-radius: 16px;
overflow: hidden;
}
.p1-setup-declarations__item-header[b-s46e29yr0h] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--p1-surface);
border: none;
cursor: pointer;
text-align: left;
}
.p1-setup-declarations__item-name[b-s46e29yr0h] {
font-size: var(--p1-text-md);
font-weight: 500;
color: var(--p1-text-primary);
}
.p1-setup-declarations__item-status[b-s46e29yr0h] {
display: flex;
align-items: center;
gap: 8px;
}
.p1-setup-declarations__status-dot[b-s46e29yr0h] {
width: 20px;
height: 20px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
}
.p1-setup-declarations__status-dot.is-success[b-s46e29yr0h] {
background: var(--p1-pos);
color: var(--p1-bg);
}
.p1-setup-declarations__status-dot.is-warning[b-s46e29yr0h] {
background: var(--p1-warning);
color: var(--p1-bg);
}
.p1-setup-declarations__chevron[b-s46e29yr0h] {
color: var(--p1-text-muted);
}
.p1-setup-declarations__item-body[b-s46e29yr0h] {
background: var(--p1-surface-inner);
border-top: 1px solid var(--p1-border);
}
.p1-setup-declarations__decl-text[b-s46e29yr0h] {
padding: 12px 16px 8px;
}
.p1-setup-declarations__decl-content[b-s46e29yr0h] {
/* Bumped from 10px: these are now the full legal declarations, and 10px was unreadable
for this much prose. */
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
line-height: 1.65;
}
/* Sub-headings within a declaration ("I authorise:", "Contribution Declarations", …) */
.p1-setup-declarations__decl-content h4[b-s46e29yr0h] {
font-size: var(--p1-text-xs);
font-weight: 700;
color: var(--p1-text-primary);
margin: 14px 0 6px;
}
.p1-setup-declarations__decl-content h4:first-child[b-s46e29yr0h] {
margin-top: 0;
}
/* Nested lists (e.g. the two limbs under the contribution limit) */
.p1-setup-declarations__decl-content ul ul[b-s46e29yr0h] {
margin-top: 4px;
margin-bottom: 0;
}
.p1-setup-declarations__note[b-s46e29yr0h] {
font-style: italic;
color: var(--p1-text-muted);
}
.p1-setup-declarations__decl-content p[b-s46e29yr0h] {
margin-bottom: 8px;
}
.p1-setup-declarations__decl-content ul[b-s46e29yr0h] {
/* The li::before below draws the bullet. Without this the browser's default disc marker
renders too, giving a double bullet. */
list-style: none;
margin-bottom: 8px;
padding-left: 8px;
}
.p1-setup-declarations__decl-content li[b-s46e29yr0h] {
position: relative;
padding-left: 12px;
margin-bottom: 4px;
}
.p1-setup-declarations__decl-content li[b-s46e29yr0h]::before {
content: '•';
position: absolute;
left: 0;
color: var(--p1-text-muted);
}
.p1-setup-declarations__kfd[b-s46e29yr0h] {
background: var(--p1-surface-inner);
border-top: 1px solid var(--p1-border);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.p1-setup-declarations__kfd-icon-wrapper[b-s46e29yr0h] {
width: 32px;
height: 32px;
background: var(--p1-surface-inner);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--p1-text-secondary);
}
.p1-setup-declarations__kfd-icon-wrapper.is-success[b-s46e29yr0h] {
background: rgba(var(--p1-pos-rgb), 0.15);
color: var(--p1-pos);
}
.p1-setup-declarations__kfd-info[b-s46e29yr0h] {
flex: 1;
min-width: 0;
}
.p1-setup-declarations__kfd-title-row[b-s46e29yr0h] {
display: flex;
align-items: center;
gap: 6px;
/* No wrap: the badge belongs beside the title, not under it. It used to drop to its own line
whenever the row was tight — which happened before download, because the "Download" button is
wider than "Open". */
flex-wrap: nowrap;
}
.p1-setup-declarations__kfd-name[b-s46e29yr0h] {
min-width: 0; /* may shrink, but the badge beside it may not */
font-size: var(--p1-text-sm);
font-weight: 500;
}
.p1-setup-declarations__optional-badge[b-s46e29yr0h] {
flex-shrink: 0;
white-space: nowrap;
font-size: var(--p1-text-2xs);
font-weight: 700;
text-transform: uppercase;
background: var(--p1-border);
color: var(--p1-text-secondary);
padding: 1px 6px;
border-radius: 999px;
}
.p1-setup-declarations__kfd-downloaded[b-s46e29yr0h] {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
color: var(--p1-pos);
font-size: var(--p1-text-2xs);
}
.p1-setup-declarations__kfd-btn[b-s46e29yr0h] {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
font-size: var(--p1-text-xs);
font-weight: 600;
text-decoration: none;
background: var(--p1-surface-inner);
color: var(--p1-text-secondary);
}
.p1-setup-declarations__kfd-btn.is-success[b-s46e29yr0h] {
background: rgba(var(--p1-pos-rgb), 0.15);
color: var(--p1-pos);
}
.p1-setup-declarations__agreement[b-s46e29yr0h] {
background: var(--p1-surface);
border-top: 1px solid var(--p1-border);
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.p1-setup-declarations__agreement-label[b-s46e29yr0h] {
font-size: var(--p1-text-sm);
color: var(--p1-text-primary);
line-height: 1.4;
padding-right: 12px;
}
.p1-setup-declarations__checkbox[b-s46e29yr0h] {
width: 20px;
height: 20px;
border: 2px solid var(--p1-border);
border-radius: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.p1-setup-declarations__agreement.is-agreed .p1-setup-declarations__checkbox[b-s46e29yr0h] {
background: var(--p1-brand-btn);
border-color: var(--p1-brand-btn);
}
.p1-setup-declarations__check-icon[b-s46e29yr0h] {
width: 10px;
height: 9px;
}
.p1-setup-declarations__confirm-btn[b-s46e29yr0h] {
/* 24px between the last content block and the primary button — the same gap
the Welcome screen uses. */
margin-top: 24px;
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
background: var(--p1-surface-inner);
color: var(--p1-text-muted);
font-size: var(--p1-text-base);
font-weight: 600;
cursor: not-allowed;
transition: all 0.2s;
}
.p1-setup-declarations__confirm-btn.is-ready[b-s46e29yr0h] {
background: var(--p1-pos);
color: var(--p1-bg);
cursor: pointer;
}
.p1-setup-declarations__confirm-btn.is-ready:hover[b-s46e29yr0h] {
background: var(--p1-pos);
}
@media (min-width: 768px) {
.p1-setup-declarations[b-s46e29yr0h] {
padding: 0;
}
.p1-setup-declarations__item[b-s46e29yr0h] {
border-color: var(--p1-border);
}
.p1-setup-declarations__item-header[b-s46e29yr0h] {
padding: 16px 20px;
}
.p1-setup-declarations__item-name[b-s46e29yr0h] {
font-size: var(--p1-text-base);
}
.p1-setup-declarations__decl-content[b-s46e29yr0h] {
font-size: var(--p1-text-sm);
padding: 16px 20px 12px;
}
.p1-setup-declarations__kfd[b-s46e29yr0h] {
padding: 14px 20px;
}
.p1-setup-declarations__kfd-name[b-s46e29yr0h] {
font-size: var(--p1-text-base);
}
.p1-setup-declarations__kfd-btn[b-s46e29yr0h] {
font-size: var(--p1-text-sm);
}
.p1-setup-declarations__agreement[b-s46e29yr0h] {
padding: 16px 20px;
}
.p1-setup-declarations__agreement-label[b-s46e29yr0h] {
font-size: var(--p1-text-base);
}
}
/* /Components/Pages/Setup/SetupPersonalDetails.razor.rz.scp.css */
.p1-setup-personal[b-efx2oygbdp] {
padding: 0 20px 32px;
}
.p1-setup-personal__details-card[b-efx2oygbdp] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 20px;
overflow: hidden;
margin-bottom: 12px;
}
.p1-setup-personal__row[b-efx2oygbdp] {
display: flex;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--p1-border);
}
.p1-setup-personal__row:last-child[b-efx2oygbdp] {
border-bottom: none;
}
.p1-setup-personal__label[b-efx2oygbdp] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
width: 120px;
flex-shrink: 0;
}
.p1-setup-personal__value[b-efx2oygbdp] {
font-size: var(--p1-text-sm);
font-weight: 500;
color: var(--p1-text-primary);
text-align: right;
line-height: 1.4;
}
.p1-setup-personal__confirmation[b-efx2oygbdp] {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 16px;
padding: 16px;
cursor: pointer;
}
.p1-setup-personal__checkbox[b-efx2oygbdp] {
width: 20px;
height: 20px;
border: 2px solid var(--p1-border);
border-radius: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.p1-setup-personal__confirmation.is-confirmed .p1-setup-personal__checkbox[b-efx2oygbdp] {
background: var(--p1-brand-btn);
border-color: var(--p1-brand-btn);
}
.p1-setup-personal__check-icon[b-efx2oygbdp] {
width: 12px;
height: 9px;
}
.p1-setup-personal__confirmation-text[b-efx2oygbdp] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
line-height: 1.5;
margin: 0; /*
default margin was skewing the checkbox row */
padding-right: 12px;
}
.p1-setup-personal__continue[b-efx2oygbdp] {
margin-top: 24px;
width: 100%;
border: none;
border-radius: 12px;
padding: 14px;
font-size: var(--p1-text-base);
font-weight: 600;
transition: all 0.2s;
cursor: pointer;
}
.p1-setup-personal__continue.is-active[b-efx2oygbdp] {
background: var(--p1-brand-btn);
color: var(--p1-text-on-accent);
}
.p1-setup-personal__continue.is-active:hover[b-efx2oygbdp] {
background: var(--p1-brand-btn-hover);
}
.p1-setup-personal__continue.is-disabled[b-efx2oygbdp] {
background: var(--p1-surface-inner);
color: var(--p1-text-muted);
cursor: not-allowed;
}
@media (min-width: 768px) {
.p1-setup-personal[b-efx2oygbdp] {
padding: 0;
}
.p1-setup-personal__details-card[b-efx2oygbdp] {
border-color: var(--p1-border);
margin-bottom: 16px;
}
.p1-setup-personal__row[b-efx2oygbdp] {
padding: 14px 20px;
font-size: var(--p1-text-base);
}
.p1-setup-personal__label[b-efx2oygbdp] {
width: 144px;
font-size: var(--p1-text-base);
}
.p1-setup-personal__value[b-efx2oygbdp] {
font-size: var(--p1-text-base);
color: var(--p1-text-primary);
}
.p1-setup-personal__confirmation[b-efx2oygbdp] {
padding: 20px;
border-color: var(--p1-border);
margin-bottom: 24px;
}
.p1-setup-personal__checkbox[b-efx2oygbdp] {
border-color: var(--p1-border);
}
.p1-setup-personal__confirmation-text[b-efx2oygbdp] {
font-size: var(--p1-text-base);
color: var(--p1-text-secondary);
}
}
/* /Components/Pages/Setup/SetupSuitability.razor.rz.scp.css */
.p1-setup-suitability[b-r38huqegaj] {
padding: 0 20px 32px;
}
.p1-setup-suitability__doc-card[b-r38huqegaj] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 20px;
padding: 16px;
margin-bottom: 12px;
transition: all 0.2s;
}
.p1-setup-suitability__doc-card.is-downloaded[b-r38huqegaj] {
border-color: rgba(var(--p1-pos-rgb), 0.3);
background: rgba(var(--p1-pos-rgb), 0.05);
}
.p1-setup-suitability__doc-info[b-r38huqegaj] {
display: flex;
gap: 14px;
margin-bottom: 16px;
}
.p1-setup-suitability__doc-icon-wrapper[b-r38huqegaj] {
width: 44px;
height: 44px;
background: var(--p1-surface-inner);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p1-setup-suitability__doc-card.is-downloaded .p1-setup-suitability__doc-icon-wrapper[b-r38huqegaj] {
background: rgba(var(--p1-pos-rgb), 0.15);
}
.p1-setup-suitability__doc-icon[b-r38huqegaj] {
color: var(--p1-text-secondary);
}
.p1-setup-suitability__doc-card.is-downloaded .p1-setup-suitability__doc-icon[b-r38huqegaj] {
color: var(--p1-pos);
}
.p1-setup-suitability__doc-details[b-r38huqegaj] {
flex: 1;
min-width: 0;
}
.p1-setup-suitability__doc-name[b-r38huqegaj] {
font-size: var(--p1-text-md);
font-weight: 600;
line-height: 1.3;
margin-bottom: 2px;
}
.p1-setup-suitability__doc-meta[b-r38huqegaj] {
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
}
.p1-setup-suitability__downloaded-badge[b-r38huqegaj] {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
color: var(--p1-pos);
font-size: var(--p1-text-xs);
font-weight: 500;
}
.p1-setup-suitability__download-btn[b-r38huqegaj] {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
border-radius: 12px;
font-size: var(--p1-text-md);
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
}
.p1-setup-suitability__download-btn.is-primary[b-r38huqegaj] {
background: var(--p1-brand-btn);
color: var(--p1-text-on-accent);
}
.p1-setup-suitability__download-btn.is-primary:hover[b-r38huqegaj] {
background: var(--p1-brand-btn-hover);
}
.p1-setup-suitability__download-btn.is-secondary[b-r38huqegaj] {
background: rgba(var(--p1-pos-rgb), 0.15);
color: var(--p1-pos);
}
.p1-setup-suitability__download-btn.is-tertiary[b-r38huqegaj] {
background: var(--p1-surface-inner);
color: var(--p1-text-secondary);
}
.p1-setup-suitability__hint[b-r38huqegaj] {
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
text-align: center;
margin-top: 0; /*
default top margin was adding stray space */
margin-bottom: 16px;
}
.p1-setup-suitability__confirmation[b-r38huqegaj] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 16px;
transition: opacity 0.2s;
}
.p1-setup-suitability__confirmation.is-disabled[b-r38huqegaj] {
opacity: 0.4;
cursor: not-allowed;
background: var(--p1-surface-inner);
border-color: var(--p1-surface-inner);
}
.p1-setup-suitability__confirmation.is-active[b-r38huqegaj] {
cursor: pointer;
}
.p1-setup-suitability__confirmation-label[b-r38huqegaj] {
font-size: var(--p1-text-sm);
font-weight: 500;
color: var(--p1-text-primary);
line-height: 1.4;
padding-right: 12px;
}
.p1-setup-suitability__checkbox[b-r38huqegaj] {
width: 22px;
height: 22px;
border: 2px solid var(--p1-border);
border-radius: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.p1-setup-suitability__confirmation.is-confirmed .p1-setup-suitability__checkbox[b-r38huqegaj] {
background: var(--p1-brand-btn);
border-color: var(--p1-brand-btn);
}
.p1-setup-suitability__check-icon[b-r38huqegaj] {
width: 12px;
height: 9px;
}
.p1-setup-suitability__confirm-btn[b-r38huqegaj] {
/* 24px between the last content block and the primary button — the same gap
the Welcome screen uses. */
margin-top: 24px;
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
background: var(--p1-surface-inner);
color: var(--p1-text-muted);
font-size: var(--p1-text-base);
font-weight: 600;
cursor: not-allowed;
transition: all 0.2s;
margin-bottom: 20px; /* was 0 — the optional Charges card butted straight up against it */
}
.p1-setup-suitability__confirm-btn.is-ready[b-r38huqegaj] {
background: var(--p1-pos);
color: var(--p1-bg);
cursor: pointer;
}
.p1-setup-suitability__confirm-btn.is-ready:hover[b-r38huqegaj] {
background: var(--p1-pos);
}
.p1-setup-suitability__optional-row[b-r38huqegaj] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.p1-setup-suitability__optional-badge[b-r38huqegaj] {
font-size: var(--p1-text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--p1-border);
color: var(--p1-text-secondary);
padding: 2px 6px;
border-radius: 999px;
}
@media (min-width: 768px) {
.p1-setup-suitability[b-r38huqegaj] {
padding: 0;
}
.p1-setup-suitability__doc-card[b-r38huqegaj] {
padding: 20px;
border-color: var(--p1-border);
}
.p1-setup-suitability__doc-info[b-r38huqegaj] {
align-items: center;
margin-bottom: 0;
}
.p1-setup-suitability__doc-details[b-r38huqegaj] {
margin-right: 16px;
}
.p1-setup-suitability__doc-name[b-r38huqegaj] {
font-size: var(--p1-text-base);
}
.p1-setup-suitability__doc-meta[b-r38huqegaj] {
font-size: var(--p1-text-sm);
}
.p1-setup-suitability__download-btn[b-r38huqegaj] {
width: auto;
padding: 10px 20px;
}
.p1-setup-suitability__confirmation[b-r38huqegaj] {
padding: 16px 20px;
border-color: var(--p1-border);
margin-bottom: 24px;
}
.p1-setup-suitability__confirmation-label[b-r38huqegaj] {
font-size: var(--p1-text-base);
}
.p1-setup-suitability__confirm-btn[b-r38huqegaj] {
font-size: var(--p1-text-base);
margin-bottom: 24px;
}
}
/* /Components/Pages/Setup/SetupWelcome.razor.rz.scp.css */
.p1-setup-welcome[b-9xigrvf6pk] {
padding: 0 20px 32px;
}
.p1-setup-welcome__steps[b-9xigrvf6pk] {
display: flex;
flex-direction: column;
gap: 10px;
}
.p1-setup-welcome__step[b-9xigrvf6pk] {
display: flex;
align-items: center;
gap: 16px;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 16px;
padding: 14px 16px;
}
.p1-setup-welcome__step-icon-wrapper[b-9xigrvf6pk] {
width: 36px;
height: 36px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p1-setup-welcome__step-icon-wrapper.is-warning[b-9xigrvf6pk] {
background: rgba(255, 184, 1, 0.1);
color: var(--p1-warning);
}
.p1-setup-welcome__step-icon-wrapper.is-pending[b-9xigrvf6pk] {
background: var(--p1-surface-inner);
color: var(--p1-text-muted);
}
.p1-setup-welcome__step-content[b-9xigrvf6pk] {
flex: 1;
min-width: 0;
}
.p1-setup-welcome__step-number[b-9xigrvf6pk] {
font-size: var(--p1-text-2xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--p1-text-muted);
margin-bottom: 2px;
}
.p1-setup-welcome__step-title[b-9xigrvf6pk] {
font-size: var(--p1-text-md);
font-weight: 600;
color: var(--p1-text-primary);
margin-bottom: 2px;
}
.p1-setup-welcome__step-desc[b-9xigrvf6pk] {
font-size: var(--p1-text-xs);
color: var(--p1-text-secondary);
line-height: 1.4;
}
.p1-setup-welcome__step-badge[b-9xigrvf6pk] {
font-size: var(--p1-text-2xs);
font-weight: 600;
padding: 4px 10px;
border-radius: 8px;
white-space: nowrap;
}
.p1-setup-welcome__step-badge.is-warning[b-9xigrvf6pk] {
background: rgba(255, 184, 1, 0.1);
color: var(--p1-warning);
}
.p1-setup-welcome__step-badge.is-pending[b-9xigrvf6pk] {
background: var(--p1-surface-inner);
color: var(--p1-text-muted);
}
.p1-setup-welcome__actions[b-9xigrvf6pk] {
/* 24px between the last content block and the button. The button owns this gap;
the section above owns nothing, so there is only ever one margin to read. */
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.p1-setup-welcome__actions[b-9xigrvf6pk] .p1-btn-primary {
width: 100%;
padding: 14px;
}
.p1-setup-welcome__save-later[b-9xigrvf6pk] {
display: none;
}
@media (min-width: 768px) {
.p1-setup-welcome[b-9xigrvf6pk] {
padding: 0;
}
.p1-setup-welcome__steps[b-9xigrvf6pk] {
gap: 12px;
margin-bottom: 32px;
}
.p1-setup-welcome__step[b-9xigrvf6pk] {
padding: 16px 20px;
border-color: var(--p1-border);
}
.p1-setup-welcome__step-icon-wrapper[b-9xigrvf6pk] {
width: 40px;
height: 40px;
}
.p1-setup-welcome__step-icon-wrapper.is-warning[b-9xigrvf6pk] {
color: var(--p1-warning-strong);
}
.p1-setup-welcome__step-title[b-9xigrvf6pk] {
font-size: var(--p1-text-base);
}
.p1-setup-welcome__step-desc[b-9xigrvf6pk] {
font-size: var(--p1-text-sm);
}
.p1-setup-welcome__step-badge[b-9xigrvf6pk] {
font-size: var(--p1-text-xs);
padding: 4px 12px;
}
.p1-setup-welcome__step-badge.is-warning[b-9xigrvf6pk] {
border: 1px solid rgba(251, 191, 36, 0.2);
}
.p1-setup-welcome__step-badge.is-pending[b-9xigrvf6pk] {
border: 1px solid var(--p1-border);
}
.p1-setup-welcome__actions[b-9xigrvf6pk] {
gap: 4px;
}
.p1-setup-welcome__save-later[b-9xigrvf6pk] {
display: block;
width: 100%;
background: none;
border: none;
color: var(--p1-text-muted);
font-size: var(--p1-text-base);
font-weight: 500;
padding: 12px;
cursor: pointer;
transition: color 0.2s;
}
.p1-setup-welcome__save-later:hover[b-9xigrvf6pk] {
color: var(--p1-text-secondary);
}
}
/* /Components/Pages/Transactions/PayIn.razor.rz.scp.css */
/* Transaction chrome now lives in wwwroot/css/components.css (global).
It is shared by five flows, and scoped copies left Invest/Sell unstyled. */
/* /Components/Pages/Transactions/Transfer.razor.rz.scp.css */
/* Transaction chrome now lives in wwwroot/css/components.css (global).
It is shared by five flows, and scoped copies left Invest/Sell unstyled. */
/* /Components/Shared/AccountHero.razor.rz.scp.css */
.acct-hero[b-tjqa967e5z] {
margin: 0.75rem 1rem 0;
padding: 1rem 1.25rem 1.25rem;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1.5rem;
}
/* No top margin — the badges are the first thing in the card now that the title lives in the
top bar. The product hero kept one and sat 0.5rem lower than the sub-account hero. */
.acct-hero__badges[b-tjqa967e5z] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.acct-hero__pill[b-tjqa967e5z] {
font-size: var(--p1-text-2xs);
font-weight: var(--p1-weight-semibold);
padding: 0.125rem 0.625rem;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
white-space: nowrap;
}
.acct-hero__note[b-tjqa967e5z] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
}
/* The reference, hard right. */
.acct-hero__trail[b-tjqa967e5z] {
margin-left: auto;
flex-shrink: 0;
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
}
.acct-hero__value[b-tjqa967e5z] {
margin-top: 0.75rem;
font-size: var(--p1-text-5xl);
font-weight: 700;
line-height: 1;
letter-spacing: -0.025em;
color: var(--p1-text-primary);
}
.acct-hero__perf[b-tjqa967e5z] {
display: flex;
align-items: baseline;
gap: 0.25rem;
margin-top: 0.5rem;
}
.acct-hero__gain[b-tjqa967e5z] { font-size: var(--p1-text-lg); font-weight: 600; }
.acct-hero__gain.is-pos[b-tjqa967e5z] { color: var(--p1-pos); }
.acct-hero__gain.is-neg[b-tjqa967e5z] { color: var(--p1-neg); }
/* Part of the same figure as the gain, so it takes the same colour — muted grey made it read as
metadata rather than as the percentage of that gain. */
.acct-hero__pct[b-tjqa967e5z] { font-size: var(--p1-text-base); }
.acct-hero__pct.is-pos[b-tjqa967e5z] { color: var(--p1-pos); opacity: 0.85; }
.acct-hero__pct.is-neg[b-tjqa967e5z] { color: var(--p1-neg); opacity: 0.85; }
.acct-hero__since[b-tjqa967e5z] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
margin-left: 0.125rem;
}
/* /Components/Shared/AccountSummaryCard.razor.rz.scp.css */
/* Outside any media query on purpose: both the mobile carousel and the desktop grid render this
card. Home's copy sat inside max-width:767px, so the desktop cards had no styling at all. */
.account-card[b-lhh51oxcfa] {
position: relative;
flex-shrink: 0;
width: 11rem;
height: 8rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
cursor: pointer;
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
}
.account-card__accent[b-lhh51oxcfa] {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
}
.account-card__head[b-lhh51oxcfa] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.account-card__name[b-lhh51oxcfa] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* The outline is what every other pill in the app has — these were the only filled-but-unbordered
ones, so they read as a different object. */
.account-card__type[b-lhh51oxcfa] {
flex-shrink: 0;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-size: var(--p1-text-2xs);
font-weight: var(--p1-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
white-space: nowrap;
}
.account-card__value[b-lhh51oxcfa] {
margin-top: 0.375rem;
font-size: var(--p1-text-2xl);
font-weight: var(--p1-weight-bold);
color: var(--p1-text-primary);
}
/* .acc-footer / .footer-label were in Home's markup and defined NOWHERE — a silent no-op, so the
"Since inception" label rendered unstyled. */
.account-card__label[b-lhh51oxcfa] {
margin-bottom: 0.125rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
/* Flex with a gap, like .acct-hero__perf — a margin would add the markup's whitespace on top. */
.account-card__perf[b-lhh51oxcfa] {
display: flex;
align-items: baseline;
gap: 0.25rem;
white-space: nowrap;
}
.account-card__gain[b-lhh51oxcfa] {
font-size: var(--p1-text-sm);
font-weight: var(--p1-weight-semibold);
}
.account-card__pct[b-lhh51oxcfa] {
font-size: var(--p1-text-sm);
font-weight: var(--p1-weight-medium);
}
.account-card__perf.is-pos .account-card__gain[b-lhh51oxcfa] { color: var(--p1-pos); }
.account-card__perf.is-neg .account-card__gain[b-lhh51oxcfa] { color: var(--p1-neg); }
.account-card__perf.is-pos .account-card__pct[b-lhh51oxcfa] { color: rgba(var(--p1-pos-rgb), 0.8); }
.account-card__perf.is-neg .account-card__pct[b-lhh51oxcfa] { color: rgba(var(--p1-neg-rgb), 0.8); }
/* Desktop: match the trust/relationship cards on the dashboard (260px). Additive, min-width, so
the mobile carousel keeps its 11rem card. */
@media (min-width: 768px) {
.account-card[b-lhh51oxcfa] { width: 260px; }
}
/* /Components/Shared/ActivityRow.razor.rz.scp.css */
/* Activity/timeline row — mirrors the P1 mobile design row spec. */
.arow[b-r8kkijv5qb] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--p1-surface-inner);
}
.arow:last-child[b-r8kkijv5qb] {
border-bottom: none;
}
/* Pending rows are NOT dimmed. Fading the whole row greyed the title, the account and the amount,
so a pending transaction looked like it was rendered in a different text colour than the one
above it. The PENDING pill and the dot on the icon say it, in words — that's enough. */
/* ── Icon tile (2.25rem / rounded-xl, tinted per activity type) ── */
.arow__icon[b-r8kkijv5qb] {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.arow__icon--success[b-r8kkijv5qb] { background: rgba(var(--p1-pos-rgb), 0.15); color: var(--p1-pos); }
.arow__icon--red[b-r8kkijv5qb] { background: rgba(var(--p1-neg-rgb), 0.15); color: var(--p1-neg); }
.arow__icon--blue[b-r8kkijv5qb] { background: rgba(var(--p1-accent-blue-rgb), 0.15); color: var(--p1-accent-blue); }
.arow__icon--amber[b-r8kkijv5qb] { background: rgba(var(--p1-accent-amber-rgb), 0.15); color: var(--p1-accent-amber); }
.arow__icon--muted[b-r8kkijv5qb] { background: var(--p1-surface-inner); color: var(--p1-text-muted); }
/* A plain dot, not an icon — a 7px clock glyph inside a 12px disc was unreadable. The "Pending"
pill next to the title carries the meaning in words, so the dot is a flag, not the only signal. */
.arow__pending-badge[b-r8kkijv5qb] {
position: absolute;
bottom: -0.25rem;
right: -0.25rem;
width: 0.625rem;
height: 0.625rem;
background: var(--p1-accent-amber);
border: 2px solid var(--p1-surface);
border-radius: 50%;
}
/* ── Text ── */
.arow__info[b-r8kkijv5qb] {
flex: 1;
min-width: 0;
}
.arow__label-line[b-r8kkijv5qb] {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
}
.arow__label[b-r8kkijv5qb] {
font-size: var(--p1-text-base);
font-weight: 500;
color: var(--p1-text-primary);
}
.arow__pending-pill[b-r8kkijv5qb] {
font-size: var(--p1-text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
background: rgba(var(--p1-accent-amber-rgb), 0.15);
color: var(--p1-accent-amber-soft);
padding: 0.125rem 0.375rem;
border-radius: 9999px;
flex-shrink: 0;
}
.arow__sub[b-r8kkijv5qb] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
margin-top: 0.125rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Amount + status dot ── */
.arow__right[b-r8kkijv5qb] {
text-align: right;
flex-shrink: 0;
}
.arow__amount[b-r8kkijv5qb] {
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
/* Amounts are always the primary text colour — the +/- sign carries the direction,
so colour is not doing any work here. */
/* Fund ISIN, shown on account-level rows. */
/* The account the transaction belongs to — its own line, so it can't be truncated away. */
.arow__acct[b-r8kkijv5qb] {
margin-top: 0.125rem;
font-size: var(--p1-text-xs);
font-weight: 500;
color: var(--p1-text-secondary);
}
.arow__isin[b-r8kkijv5qb] {
margin-top: 0.125rem;
font-size: var(--p1-text-xs);
color: var(--p1-text-muted);
}
/* /Components/Shared/ActivityTimeline.razor.rz.scp.css */
/* Day-grouped activity timeline. */
.timeline[b-l3pz41fyag] {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Matches the Notifications day heading exactly — same size, weight, casing and tracking. */
.day[b-l3pz41fyag] {
margin: 0 0 0.5rem 0.25rem;
font-size: var(--p1-text-sm);
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-secondary);
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
}
.card[b-l3pz41fyag] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
overflow: hidden;
}
.empty[b-l3pz41fyag] {
padding: 2.5rem 1rem;
text-align: center;
font-size: var(--p1-text-base);
color: var(--p1-text-muted);
}
/* /Components/Shared/AllocationsCard.razor.rz.scp.css */
.alloc-card[b-db50l5bt6o] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1rem;
}
.alloc-card__head[b-db50l5bt6o] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.alloc-card__title[b-db50l5bt6o] {
margin: 0;
line-height: 1.2;
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
}
.alloc-toggle[b-db50l5bt6o] {
display: flex;
background: var(--p1-surface-inner);
border-radius: 0.5rem;
padding: 2px;
}
.alloc-toggle button[b-db50l5bt6o] {
font-size: var(--p1-text-2xs);
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
font-weight: 500;
color: var(--p1-text-muted);
background: none;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.alloc-toggle button.is-active[b-db50l5bt6o] {
background: var(--p1-border);
color: var(--p1-text-primary);
}
.alloc-bar[b-db50l5bt6o] {
display: flex;
height: 0.75rem;
width: 100%;
border-radius: 9999px;
overflow: hidden;
background: var(--p1-surface-inner);
margin-bottom: 1rem;
}
.alloc-bar > div[b-db50l5bt6o] { height: 100%; }
/* Two columns — five asset classes in one column is a tall, thin list for no reason. */
.alloc-grid[b-db50l5bt6o] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1rem;
}
.alloc-item[b-db50l5bt6o] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
font-size: var(--p1-text-xs);
}
.alloc-item__label[b-db50l5bt6o] {
display: flex;
align-items: center;
gap: 0.375rem;
color: var(--p1-text-secondary);
}
.alloc-item__dot[b-db50l5bt6o] {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
flex-shrink: 0;
}
.alloc-item__value[b-db50l5bt6o] {
color: var(--p1-text-primary);
font-weight: 500;
}
/* Sector labels take the same size as the asset labels — it's one card now, so it has to be
one scale. */
.alloc-sector + .alloc-sector[b-db50l5bt6o] { margin-top: 0.625rem; }
.alloc-sector__head[b-db50l5bt6o] {
display: flex;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.25rem;
}
.alloc-sector__label[b-db50l5bt6o] { font-size: var(--p1-text-xs); color: var(--p1-text-secondary); }
.alloc-sector__value[b-db50l5bt6o] { font-size: var(--p1-text-xs); color: var(--p1-text-primary); font-weight: 500; }
.alloc-sector__track[b-db50l5bt6o] {
height: 6px;
background: var(--p1-surface-inner);
border-radius: 9999px;
overflow: hidden;
}
.alloc-sector__fill[b-db50l5bt6o] {
height: 100%;
border-radius: 9999px;
background: var(--p1-accent-blue);
}
/* /Components/Shared/Avatar.razor.rz.scp.css */
/* Gradient initials avatar. Matches the canvas design:
CW = 64px red gradient (#ef4444 -> #991b1b), JS = 44px purple gradient. */
.avatar[b-5by6z5plsx] {
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* Initials sit on a solid red/purple circle (see .tone-* below), so they stay white in
BOTH themes — this must not be tokenised. */
color: var(--p1-text-on-accent);
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
user-select: none;
}
.avatar.is-elevated[b-5by6z5plsx] {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
/* Solid fills — the house style is flat, not gradient. */
/* The client's own avatar takes the brand accent; the adviser's stays purple. */
.avatar--red[b-5by6z5plsx] { background: var(--p1-brand-accent); }
.avatar--purple[b-5by6z5plsx] { background: var(--p1-accent-purple); }
.avatar--blue[b-5by6z5plsx] { background: var(--p1-accent-blue); }
.avatar--green[b-5by6z5plsx] { background: var(--p1-pos); }
.avatar--neutral[b-5by6z5plsx] {
background: var(--p1-surface-inner);
color: var(--p1-text-primary);
border: 1px solid var(--p1-border);
}
/* /Components/Shared/ChargesPanel.razor.rz.scp.css */
.charges-panel[b-9xxotecf2t] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.charges-panel__total[b-9xxotecf2t] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1.25rem;
}
.charges-panel__total-label[b-9xxotecf2t] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
margin-bottom: 0.25rem;
}
.charges-panel__total-value[b-9xxotecf2t] {
font-size: var(--p1-text-4xl);
font-weight: var(--p1-weight-bold);
color: var(--p1-text-primary);
}
.charges-panel__total-note[b-9xxotecf2t] {
margin: 0.25rem 0 1rem;
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
}
.charges-panel__breakdown[b-9xxotecf2t] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
overflow: hidden;
}
.charges-panel__head[b-9xxotecf2t] {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--p1-surface-inner);
}
.charges-panel__row[b-9xxotecf2t] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--p1-surface-inner);
}
.charges-panel__row--total[b-9xxotecf2t] {
background: var(--p1-surface-inner);
border-bottom: none;
}
.charges-panel__swatch[b-9xxotecf2t] {
width: 4px;
align-self: stretch;
border-radius: 9999px;
flex-shrink: 0;
}
.charges-panel__swatch.is-total[b-9xxotecf2t] { background: var(--p1-border); }
.charges-panel__body[b-9xxotecf2t] {
flex: 1;
min-width: 0;
}
.charges-panel__label[b-9xxotecf2t] {
font-size: var(--p1-text-base);
font-weight: var(--p1-weight-medium);
color: var(--p1-text-primary);
}
.charges-panel__desc[b-9xxotecf2t],
.charges-panel__pa[b-9xxotecf2t] {
margin-top: 0.125rem;
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
}
.charges-panel__pa[b-9xxotecf2t] { font-size: var(--p1-text-xs); }
.charges-panel__pct[b-9xxotecf2t] {
flex-shrink: 0;
font-size: var(--p1-text-lg);
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-primary);
}
.charges-panel__pct.is-total[b-9xxotecf2t] { font-weight: var(--p1-weight-bold); }
/* ── Tiered adviser charge: expandable row + band breakdown ── */
.charges-panel__row.is-tiered[b-9xxotecf2t] {
cursor: pointer;
}
.charges-panel__row.is-tiered:hover[b-9xxotecf2t] {
background: var(--p1-surface-inner);
}
.charges-panel__chevron[b-9xxotecf2t] {
display: flex;
flex-shrink: 0;
color: var(--p1-text-muted);
transition: transform 0.18s ease;
}
.charges-panel__row.is-open .charges-panel__chevron[b-9xxotecf2t] {
transform: rotate(180deg);
}
.charges-panel__tiers[b-9xxotecf2t] {
background: var(--p1-surface-inner);
border-bottom: 1px solid var(--p1-surface-inner);
padding: 0.5rem 1rem 0.75rem;
}
/* Tier · From · To · Charge */
.charges-panel__tier[b-9xxotecf2t] {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 0.5rem;
align-items: center;
padding: 0.375rem 0;
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
}
.charges-panel__tier + .charges-panel__tier[b-9xxotecf2t] {
border-top: 1px solid var(--p1-border-subtle);
}
.charges-panel__tier--head[b-9xxotecf2t] {
font-size: var(--p1-text-2xs);
font-weight: var(--p1-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
color: var(--p1-text-muted);
border-bottom: 1px solid var(--p1-border-subtle);
}
.charges-panel__tier-rate[b-9xxotecf2t] {
text-align: right;
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-primary);
}
/* /Components/Shared/DateRangeSheet.razor.rz.scp.css */
/* Date-range sheet. Presets in a responsive grid, then an optional custom range. */
.presets[b-xyei85u73w] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
}
@media (min-width: 640px) {
.presets[b-xyei85u73w] {
grid-template-columns: repeat(3, 1fr);
}
}
.preset[b-xyei85u73w] {
padding: 0.875rem 0.75rem;
border-radius: 0.75rem;
border: 1px solid var(--p1-border);
background: var(--p1-surface-inner);
color: var(--p1-text-secondary);
font-family: inherit;
font-size: var(--p1-text-base);
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.preset:hover[b-xyei85u73w] {
border-color: var(--p1-text-muted);
color: var(--p1-text-primary);
}
/* Selected preset inverts — white on dark, dark on light. */
.preset.active[b-xyei85u73w] {
background: var(--p1-text-primary);
color: var(--p1-bg);
border-color: var(--p1-text-primary);
font-weight: 600;
}
/* ── "or custom range" rule ── */
.divider[b-xyei85u73w] {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.5rem 0;
color: var(--p1-text-muted);
font-size: var(--p1-text-sm);
}
.divider[b-xyei85u73w]::before,
.divider[b-xyei85u73w]::after {
content: "";
flex: 1;
height: 1px;
background: var(--p1-border);
}
/* ── Custom range ── */
/* Two fields, side by side. They used to be class="field", which the GLOBAL
`.field + .field { margin-top: 0.75rem }` rule in open-account.css then applied to — a rule for
STACKED fields — so the "To" field sat 12px lower than "From". */
.custom[b-xyei85u73w] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
align-items: start;
}
.range-field[b-xyei85u73w] {
display: flex;
flex-direction: column;
gap: 0.375rem;
min-width: 0;
}
.range-field__label[b-xyei85u73w] {
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
}
.range-field input[b-xyei85u73w] {
width: 100%;
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
border-radius: 0.75rem;
padding: 0.875rem 1rem;
color: var(--p1-text-primary);
font-family: inherit;
font-size: var(--p1-text-base);
outline: none;
}
.range-field input:focus[b-xyei85u73w] {
border-color: var(--p1-text-muted);
}
/* The native date picker glyph is black by default and vanishes on a dark surface. */
.range-field input[b-xyei85u73w]::-webkit-calendar-picker-indicator {
filter: invert(0.6);
cursor: pointer;
}
html[data-theme="light"] .range-field input[b-xyei85u73w]::-webkit-calendar-picker-indicator {
filter: none;
}
/* ── Apply ── */
.apply[b-xyei85u73w] {
width: 100%;
margin-top: 0.5rem;
padding: 1rem;
border: none;
border-radius: 0.875rem;
background: var(--p1-accent-active);
color: var(--p1-text-on-accent); /* on red — stays white in both themes */
font-family: inherit;
font-size: var(--p1-text-base);
font-weight: 700;
cursor: pointer;
}
.apply:hover[b-xyei85u73w] {
background: var(--p1-brand-btn-hover);
}
/* /Components/Shared/HoldingCard.razor.rz.scp.css */
.holding[b-q0olc05wob] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1rem;
}
.holding__head[b-q0olc05wob] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.holding__type[b-q0olc05wob] {
font-size: var(--p1-text-2xs);
font-weight: var(--p1-weight-semibold);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
}
.holding__alloc[b-q0olc05wob] {
background: var(--p1-surface-inner);
color: var(--p1-text-secondary);
font-size: var(--p1-text-2xs);
font-weight: var(--p1-weight-medium);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
}
.holding__name[b-q0olc05wob] {
font-size: var(--p1-text-base);
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.holding__isin[b-q0olc05wob] {
margin-top: 0.125rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
.holding__rule[b-q0olc05wob] {
border-top: 1px solid var(--p1-surface-inner);
margin: 0.75rem 0;
}
.holding__figures[b-q0olc05wob] {
display: flex;
justify-content: space-between;
}
.holding__return[b-q0olc05wob] { text-align: right; }
.holding__label[b-q0olc05wob] {
margin-bottom: 0.125rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
.holding__value[b-q0olc05wob] {
font-size: var(--p1-text-base);
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-primary);
}
.holding__value.is-pos[b-q0olc05wob] { color: var(--p1-pos); }
.holding__value.is-neg[b-q0olc05wob] { color: var(--p1-neg); }
.holding__bar[b-q0olc05wob] {
width: 100%;
height: 0.375rem;
margin-top: 0.75rem;
background: var(--p1-surface-inner);
border-radius: 9999px;
overflow: hidden;
}
.holding__bar-fill[b-q0olc05wob] {
height: 100%;
border-radius: 9999px;
}
/* /Components/Shared/Modal.razor.rz.scp.css */
/* Bottom sheet on mobile, centred dialog on desktop. Token-driven so it themes. */
.backdrop[b-vdk0n0jl3z] {
position: fixed;
inset: 0;
z-index: 500;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: flex-end;
justify-content: center;
animation: modal-fade-b-vdk0n0jl3z 0.15s ease-out;
}
.sheet[b-vdk0n0jl3z] {
width: 100%;
max-height: 88dvh;
overflow-y: auto;
background: var(--p1-bg);
border-top: 1px solid var(--p1-border);
border-radius: 1.25rem 1.25rem 0 0;
padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
animation: sheet-up-b-vdk0n0jl3z 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
/* ── Head ── */
.head[b-vdk0n0jl3z] {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.head-icon[b-vdk0n0jl3z] {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.625rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--p1-surface-inner);
color: var(--p1-text-secondary);
}
.head-text[b-vdk0n0jl3z] {
flex: 1;
min-width: 0;
}
.head-title[b-vdk0n0jl3z] {
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
line-height: 1.2;
}
.head-status[b-vdk0n0jl3z] {
font-size: var(--p1-text-sm);
font-weight: 600;
color: var(--p1-accent-active);
margin-top: 0.125rem;
}
.close[b-vdk0n0jl3z] {
width: 1.875rem;
height: 1.875rem;
border-radius: 0.5rem;
border: none;
background: none;
color: var(--p1-text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.close:hover[b-vdk0n0jl3z] {
background: var(--p1-surface-inner);
color: var(--p1-text-primary);
}
.body[b-vdk0n0jl3z] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@keyframes modal-fade-b-vdk0n0jl3z {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes sheet-up-b-vdk0n0jl3z {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* ── Desktop: centred dialog ── */
@media (min-width: 768px) {
.backdrop[b-vdk0n0jl3z] {
align-items: center;
}
.sheet[b-vdk0n0jl3z] {
max-width: 44rem;
border: 1px solid var(--p1-border);
border-radius: 1.25rem;
padding: 1.5rem 1.5rem 1.5rem;
animation: modal-fade-b-vdk0n0jl3z 0.15s ease-out;
}
.head[b-vdk0n0jl3z] {
margin-top: 0.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.backdrop[b-vdk0n0jl3z], .sheet[b-vdk0n0jl3z] { animation: none; }
}
/* /Components/Shared/PerformanceChart.razor.rz.scp.css */
.performance-chart[b-6druoce4si] {
background-color: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
padding: 1rem;
}
.chart-header[b-6druoce4si] {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.header-top[b-6druoce4si] {
display: flex;
align-items: center;
justify-content: space-between;
}
.chart-title[b-6druoce4si] {
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
margin: 0;
}
.mode-toggle[b-6druoce4si] {
display: flex;
align-items: center;
gap: 0.125rem;
background-color: var(--p1-surface-inner);
padding: 0.125rem;
border-radius: 0.5rem;
}
.toggle-btn[b-6druoce4si] {
font-size: var(--p1-text-2xs);
font-weight: 500;
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
transition: all 0.2s;
border: none;
background: transparent;
color: var(--p1-text-secondary);
cursor: pointer;
}
.toggle-btn.active[b-6druoce4si] {
background-color: var(--p1-border);
color: var(--p1-text-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.period-chips[b-6druoce4si] {
display: flex;
align-items: center;
gap: 0.25rem;
background-color: var(--p1-surface-inner);
padding: 0.125rem;
border-radius: 0.5rem;
align-self: flex-start;
}
.period-btn[b-6druoce4si] {
font-size: var(--p1-text-2xs);
font-weight: 500;
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
transition: all 0.2s;
border: none;
background: transparent;
color: var(--p1-text-secondary);
cursor: pointer;
}
.period-btn:hover[b-6druoce4si] {
color: var(--p1-text-primary);
background-color: var(--p1-border);
}
.period-btn.active[b-6druoce4si] {
background-color: var(--p1-brand-accent);
color: var(--p1-text-on-accent);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* The SVG's viewBox is 400 × 165. Give the box that same ratio and the chart scales uniformly at
any width — a fixed 120px height with a full-width SVG is what was squashing the plot and
smearing the axis labels. */
.chart-body[b-6druoce4si] {
width: 100%;
aspect-ratio: 400 / 165;
}
.chart-body svg[b-6druoce4si] {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* In Fill mode the parent hands us a height, so let it: no aspect ratio, and the SVG letterboxes
inside whatever it gets (preserveAspectRatio defaults to "meet", so it never distorts). */
.chart-body.flex-1[b-6druoce4si] {
aspect-ratio: auto;
min-height: 140px;
}
.axis-tick[b-6druoce4si] {
font-size: var(--p1-text-2xs);
fill: var(--p1-text-muted);
}
.chart-footer[b-6druoce4si] {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.75rem;
}
.total-return[b-6druoce4si] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-label[b-6druoce4si] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
}
.footer-value[b-6druoce4si] {
font-size: var(--p1-text-base);
font-weight: 700;
}
.value-range[b-6druoce4si] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.val-from[b-6druoce4si] {
font-size: var(--p1-text-sm);
font-weight: 500;
color: var(--p1-text-primary);
}
.val-to[b-6druoce4si] {
font-size: var(--p1-text-base);
font-weight: 700;
color: var(--p1-pos);
}
.icon-arrow-right[b-6druoce4si] {
font-size: var(--p1-text-sm);
color: var(--p1-text-muted);
}
/* Hover targets: full-height columns, one per point, so you don't have to hit the 1.8px line. */
.chart-body svg rect[tabindex][b-6druoce4si] {
cursor: crosshair;
outline: none;
}
/* /Components/Shared/PersonalDetailsCard.razor.rz.scp.css */
.pd-card[b-xtldvz09e2] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: var(--p1-radius-card);
overflow: hidden;
}
.pd-row[b-xtldvz09e2] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--p1-border-subtle);
}
.pd-row:last-child[b-xtldvz09e2] {
border-bottom: none;
}
.pd-label[b-xtldvz09e2] {
font-size: var(--p1-text-md);
color: var(--p1-text-secondary);
flex-shrink: 0;
}
.pd-value[b-xtldvz09e2] {
font-size: var(--p1-text-md);
font-weight: 600;
color: var(--p1-text-primary);
text-align: right;
}
/* /Components/Shared/PrimaryButton.razor.rz.scp.css */
.p1-btn-primary[b-qrwrhbc9v5] {
background: var(--p1-brand-btn);
color: var(--p1-text-on-accent);
border: none;
border-radius: var(--p1-radius-control);
padding: 12px 20px;
font-family: var(--p1-font-family);
font-weight: 600;
font-size: var(--p1-text-base);
cursor: pointer;
width: 100%;
}
.p1-btn-primary:disabled[b-qrwrhbc9v5] {
opacity: 0.4;
cursor: not-allowed;
}
.p1-btn-primary:hover:not(:disabled)[b-qrwrhbc9v5] {
background: var(--p1-brand-btn-hover);
}
@media (min-width: 768px) {
.p1-btn-primary[b-qrwrhbc9v5] {
width: auto;
}
}
/* /Components/Shared/ScheduledPaymentsCard.razor.rz.scp.css */
.sched[b-yvymvfre4w] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 1rem;
overflow: hidden;
}
.sched__head[b-yvymvfre4w] {
padding: 1rem 1rem 0.5rem;
font-size: var(--p1-card-title-size);
font-weight: var(--p1-card-title-weight);
color: var(--p1-text-primary);
}
.sched__row[b-yvymvfre4w] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--p1-surface-inner);
}
.sched__row:last-child[b-yvymvfre4w] { border-bottom: none; }
.sched__icon[b-yvymvfre4w] {
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sched__icon.is-in[b-yvymvfre4w] { background: rgba(var(--p1-pos-rgb), 0.1); }
.sched__icon.is-out[b-yvymvfre4w] { background: rgba(var(--p1-neg-rgb), 0.1); }
.sched__body[b-yvymvfre4w] {
flex: 1;
min-width: 0;
}
.sched__label[b-yvymvfre4w] {
font-size: var(--p1-text-base);
font-weight: var(--p1-weight-medium);
color: var(--p1-text-primary);
}
.sched__meta[b-yvymvfre4w] {
margin-top: 0.125rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
.sched__trail[b-yvymvfre4w] {
text-align: right;
flex-shrink: 0;
}
.sched__amount[b-yvymvfre4w] {
font-size: var(--p1-text-base);
font-weight: var(--p1-weight-semibold);
}
.sched__amount.is-pos[b-yvymvfre4w] { color: var(--p1-pos); }
.sched__amount.is-neg[b-yvymvfre4w] { color: var(--p1-neg); }
/* /Components/Shared/SegmentedBar.razor.rz.scp.css */
/* One continuous bar, not a row of pills. The gap + per-segment radius made the parts read as
separate items; the whole point is that they sum to a single total. The container's rounded
corners + overflow:hidden give the bar its capsule ends. */
.bar[b-yykn2xt7mf] {
display: flex;
width: 100%;
border-radius: 9999px;
overflow: hidden;
background: var(--p1-surface-inner);
}
.seg[b-yykn2xt7mf] {
height: 100%;
flex-shrink: 0;
}
/* /Components/Shared/SetupHeading.razor.rz.scp.css */
.setup-heading[b-pyxwrvv6ew] {
margin-bottom: 1.25rem;
}
.setup-heading__title[b-pyxwrvv6ew] {
margin: 0 0 0.375rem;
font-size: var(--p1-text-2xl);
font-weight: var(--p1-weight-bold);
line-height: var(--p1-leading-tight);
color: var(--p1-text-primary);
}
.setup-heading__subtitle[b-pyxwrvv6ew] {
margin: 0;
font-size: var(--p1-text-md);
line-height: 1.4;
color: var(--p1-text-secondary);
}
/* Centred, matching the Complete screen's hero — the two bookend the same flow. */
.setup-heading.is-centred[b-pyxwrvv6ew] {
padding-top: 1rem;
text-align: center;
}
/* /Components/Shared/StatTile.razor.rz.scp.css */
.stat-tile[b-pjpbnpc9lo] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 0.75rem;
padding: 0.875rem;
}
.stat-tile__label[b-pjpbnpc9lo] {
font-size: var(--p1-text-sm);
color: var(--p1-text-secondary);
margin-bottom: 0.25rem;
}
.stat-tile__value[b-pjpbnpc9lo] {
font-size: var(--p1-text-base);
font-weight: var(--p1-weight-semibold);
color: var(--p1-text-primary);
}
.stat-tile__value.is-pos[b-pjpbnpc9lo] { color: var(--p1-pos); }
.stat-tile__value.is-neg[b-pjpbnpc9lo] { color: var(--p1-neg); }
.stat-tile__note[b-pjpbnpc9lo] {
margin-top: 0.125rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
/* /Components/Shared/SubAccountCard.razor.rz.scp.css */
.sub-acct[b-4r7carv2ct] {
background: var(--p1-surface);
border: 1px solid var(--p1-border);
border-radius: 0.75rem;
padding: 1rem;
}
.sub-acct__head[b-4r7carv2ct] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.sub-acct__name[b-4r7carv2ct] {
flex: 1;
min-width: 0;
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
.sub-acct__meta[b-4r7carv2ct] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: 0.75rem;
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
}
.sub-acct__subtype[b-4r7carv2ct],
.sub-acct__holder[b-4r7carv2ct] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.375rem;
border-radius: 9999px;
background: var(--p1-surface-inner);
border: 1px solid var(--p1-border);
color: var(--p1-text-primary);
font-weight: var(--p1-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--p1-tracking-caps);
}
.sub-acct__grid[b-4r7carv2ct] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.sub-acct__label[b-4r7carv2ct] {
font-size: var(--p1-text-2xs);
color: var(--p1-text-muted);
margin-bottom: 0.125rem;
}
.sub-acct__value[b-4r7carv2ct] {
font-size: var(--p1-text-base);
font-weight: 600;
color: var(--p1-text-primary);
}
.sub-acct__value.is-pos[b-4r7carv2ct] { color: var(--p1-pos); }
.sub-acct__value.is-neg[b-4r7carv2ct] { color: var(--p1-neg); }
.sub-acct__link[b-4r7carv2ct] {
display: inline-flex;
align-items: center;
gap: 0.125rem;
margin-top: 0.75rem;
color: var(--p1-brand-accent);
font-size: var(--p1-text-sm);
font-weight: 500;
text-decoration: none;
}
.sub-acct__link:hover[b-4r7carv2ct] { opacity: 0.8; }
/* /Components/Shared/TabBar.razor.rz.scp.css */
.tabbar[b-8jrv5pjj12] {
display: flex;
gap: 0.25rem;
padding: 0.25rem;
background: var(--p1-surface-inner);
border-radius: 0.75rem;
}
.tabbar__tab[b-8jrv5pjj12] {
flex: 1;
padding: 0.5rem 0;
border: none;
border-radius: 0.5rem;
background: transparent;
color: var(--p1-text-muted);
font-family: inherit;
font-size: var(--p1-text-2xs);
font-weight: var(--p1-weight-medium);
text-align: center;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.tabbar__tab:hover[b-8jrv5pjj12] { color: var(--p1-text-secondary); }
/* The brand accent, not a literal red — this is chrome, so it re-brands. */
.tabbar__tab.is-active[b-8jrv5pjj12] {
background: var(--p1-brand-accent);
color: var(--p1-text-on-accent);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.shell[b-40rifk8pck] {
display: flex;
flex-direction: column;
min-height: 100dvh;
background: var(--p1-bg);
color: var(--p1-text-primary);
}
/* ── Mobile top header ── */
.shell-mobile-header[b-40rifk8pck] {
display: flex;
align-items: center;
justify-content: space-between;
/* Fixed height + centred, so the logo sits in exactly the same place as it does on the setup
and login shells. Padding-based spacing let the three drift apart. */
min-height: var(--p1-header-height);
padding: var(--p1-header-top) 20px 0;
background: var(--p1-nav-header-bg);
flex-shrink: 0;
}
/* The logo links home. Kept as a plain (not ) so CSS isolation still scopes it. */
.shell-logo-link[b-40rifk8pck] {
display: flex;
align-items: center;
text-decoration: none;
}
.shell-logo-full[b-40rifk8pck] {
height: 32px;
object-fit: contain;
mix-blend-mode: screen;
}
/* .shell-header-actions / .shell-theme-btn live in global components.css — SetupShell reuses the
toggle, and a scoped rule here could never reach it. */
/* .shell-avatar / .shell-avatar__dot live in global components.css — SetupShell renders the same
avatar, and a scoped rule here could never reach it. */
/* ── Desktop sidebar (hidden on mobile) ── */
.shell-sidebar[b-40rifk8pck] {
display: none;
}
/* ── Main body (takes remaining space) ── */
.shell-body[b-40rifk8pck] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
padding-bottom: 76px;
}
/* ── Desktop topbar (hidden on mobile) ── */
.shell-desktop-header[b-40rifk8pck] {
display: none;
}
/* ── Page content ── */
.shell-content[b-40rifk8pck] {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* ── Mobile bottom tab bar ── */
.shell-bottom-nav[b-40rifk8pck] {
display: flex;
/* Middle-aligned: the padding used to be 8px top / 20px bottom, which pushed the tabs
visibly above centre. Symmetric padding centres them; the iOS home-indicator gap is
added back via safe-area-inset so it only applies on devices that need it. */
align-items: center;
/* Four equal columns (the tabs are flex: 1), so each icon+label sits centred in its own
share of the bar rather than being bunched by space-around. */
justify-content: space-between;
min-height: 64px;
/* The brand owns this surface. Tokenised so it also still follows the theme when unbranded —
it used to be hardcoded dark and stayed black in light mode. */
background: var(--p1-nav-bottom-bg);
border-top: 1px solid var(--p1-nav-border);
padding: 10px 4px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
/* .shell-tab-btn styles live in global app.css — renders an that
Blazor CSS isolation's scoped [b-hash] selector can't reach. */
/* ── Desktop layout ── */
@media (min-width: 768px) {
.shell[b-40rifk8pck] {
flex-direction: row;
}
.shell-mobile-header[b-40rifk8pck] {
display: none;
}
.shell-sidebar[b-40rifk8pck] {
display: flex;
flex-direction: column;
align-items: center;
width: 56px;
min-height: 100vh;
background: var(--p1-nav-sidebar-bg);
border-right: 1px solid var(--p1-nav-border);
padding: 16px 0;
flex-shrink: 0;
position: sticky;
top: 0;
height: 100vh;
}
.shell-sidebar-logo[b-40rifk8pck] {
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.shell-icon-mark[b-40rifk8pck] {
width: 28px;
height: 28px;
object-fit: contain;
}
.shell-sidebar-nav[b-40rifk8pck] {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
/* .shell-nav-btn styles live in global app.css (see note above) */
.shell-body[b-40rifk8pck] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 0;
padding-bottom: 0;
}
/* No bar — transparent, borderless. Back+title top-left, actions top-right. */
.shell-desktop-header[b-40rifk8pck] {
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
margin-top: 4px;
padding: 0 var(--p1-page-gutter);
background: transparent;
flex-shrink: 0;
}
/* The desktop header sits on --p1-surface, so the badge ring must match that, not --p1-bg. */
.shell-desktop-header .shell-avatar__dot[b-40rifk8pck] {
border-color: var(--p1-surface);
}
/* Same flex column as mobile, so pages that stretch (transaction flows) fill the area
on desktop too rather than collapsing to content height. */
.shell-content[b-40rifk8pck] {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.shell-bottom-nav[b-40rifk8pck] {
display: none;
}
}
/* /Pages/NotFound.razor.rz.scp.css */
/* Centred both ways. flex: 1 lets the page fill .shell-content (a flex column), so "middle" is
the middle of the available area rather than the middle of the text block. */
.not-found[b-pphdm9oplf] {
flex: 1;
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem 1.5rem;
gap: 0.25rem;
}
.not-found__art[b-pphdm9oplf] {
width: 180px;
max-width: 60%;
height: auto;
margin-bottom: 1.5rem;
}
.not-found__title[b-pphdm9oplf] {
margin: 0;
font-size: var(--p1-text-2xl);
font-weight: 700;
color: var(--p1-text-primary);
}
.not-found__body[b-pphdm9oplf] {
margin: 0.5rem 0 0;
max-width: 22rem;
font-size: var(--p1-text-base);
line-height: 1.5;
color: var(--p1-text-secondary);
}
.not-found__btn[b-pphdm9oplf] {
margin-top: 1.75rem;
padding: 0.75rem 1.5rem;
border-radius: var(--p1-radius-control);
background: var(--p1-brand-btn);
color: var(--p1-text-on-accent); /* sits on brand red — white in both themes */
font-size: var(--p1-text-base);
font-weight: 600;
text-decoration: none;
transition: background 0.15s;
}
.not-found__btn:hover[b-pphdm9oplf] {
background: var(--p1-brand-btn-hover);
}
@media (min-width: 768px) {
.not-found__art[b-pphdm9oplf] {
width: 220px;
}
.not-found__title[b-pphdm9oplf] {
font-size: var(--p1-text-3xl);
}
}