html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Profile menu in header */
.profile-name {
    font-size: 0.85rem;
    color: var(--rz-base-50);
}

.profile-avatar {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin-left: 8px;
    object-fit: cover;
    background-color: var(--rz-primary-darker);
}

.profile-avatar.anon {
    opacity: 0.7;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e51230;
}

.validation-message {
    color: #e51230;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ?? Financials Panel - Sankey Diagram ???????????????????????????????????????? */
.sankey-container {
    position: relative;
    width: 100%;
    min-height: 400px;
    margin: 1rem 0;
}

/* Income statement table — the alternative to the Sankey in the financials panel.
   Six periods of figures do not fit a phone, so the grid scrolls sideways while the line-item
   column stays put; without that anchor a reader scrolling right loses track of which row is
   which. Figures are tabular-nums so digits line up column to column. */
.financials-table-scroll {
    overflow-x: auto;
}

.financials-table {
    min-width: 100%;
    white-space: nowrap;
}

.financials-table td,
.financials-table th {
    font-variant-numeric: tabular-nums;
    font-size: .875rem;
}

.financials-table-label {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    text-align: left;
    min-width: 12rem;
    /* A hairline instead of a border: it marks where the frozen column ends without adding a
       column's worth of width to a table that is already too wide for the viewport. */
    box-shadow: 1px 0 0 var(--bs-border-color);
}

/* Only the TTM heading carries a second line, so every other heading — "Breakdown" included —
   has to sit on the first one or the row reads as ragged. */
.financials-table thead th {
    vertical-align: top;
    background: var(--bs-body-bg);
}

.financials-table tbody th {
    font-weight: 400;
}

.financials-table-subhead {
    font-size: .7rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.financials-table .financials-row-anchor > * {
    font-weight: 600;
}

.financials-table .financials-row-subtotal > * {
    border-top: 1px solid var(--bs-border-color);
}

.growth-indicator {
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ?? Treemap tooltip ??????????????????????????????????????????????????????????? */
.treemap-tooltip {
    position:         absolute;
    pointer-events:   none;
    background:       rgba(15, 15, 20, 0.92);
    border:           1px solid rgba(255,255,255,0.15);
    border-radius:    6px;
    padding:          10px 14px;
    color:            #f0f0f0;
    font-size:        13px;
    min-width:        180px;
    box-shadow:       0 4px 16px rgba(0,0,0,0.5);
    z-index:          100;
    backdrop-filter:  blur(4px);
}

.treemap-tooltip .tt-symbol {
    font-size:   17px;
    font-weight: 700;
    color:       #fff;
    margin-bottom: 2px;
}

.treemap-tooltip .tt-name {
    font-size:     12px;
    color:         #aaa;
    margin-bottom: 8px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     220px;
}

.treemap-tooltip .tt-row {
    display:         flex;
    justify-content: space-between;
    gap:             16px;
    padding:         2px 0;
}

.treemap-tooltip .tt-label {
    color:       #888;
    font-size:   12px;
    white-space: nowrap;
}

.treemap-tooltip .tt-up   { color: #4caf50; font-weight: 600; }
.treemap-tooltip .tt-down { color: #ef5350; font-weight: 600; }
.treemap-tooltip .tt-warn { color: #ffa726; font-weight: 600; }

.treemap-tooltip .tt-divider {
    border-top:  1px solid rgba(255,255,255,0.12);
    margin:      6px 0 4px;
}

.treemap-tooltip .tt-progress-track {
    display:          inline-block;
    width:            80px;
    height:           6px;
    background:       rgba(255,255,255,0.15);
    border-radius:    3px;
    overflow:         hidden;
    vertical-align:   middle;
}

.treemap-tooltip .tt-progress-fill {
    display:       block;
    height:        100%;
    border-radius: 3px;
    transition:    width 0.2s ease;
}

/* AI score breakdown, in the hover panel's own idiom */
.treemap-tooltip.tt-breakdown {
    min-width:  260px;
    max-width:  320px;
    max-height: 70vh;
    overflow-y: auto;
}

.treemap-tooltip .tt-metric .tt-metric-figures {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.treemap-tooltip .tt-progress-track--sm {
    width: 44px;
}

.treemap-tooltip .tt-metric-pct {
    color:      #888;
    font-size:  11px;
    width:      34px;
    text-align: right;
}

/* ── Stock list: the row's regions ─────────────────────────────────────────────
   On touch the symbol is the only part of the row that navigates, so it has to read as
   a link rather than as bold text that happens to sit in the first column. */
.stocklist-symbol {
    color: var(--bs-primary);
}

#stocklist-grid .rz-data-row {
    cursor: pointer;
}

/* ── Bottom sheet ──────────────────────────────────────────────────────────────
   The touch stand-in for a hover panel. Fixed to the bottom edge, above everything,
   with the safe-area inset respected so it clears the home indicator on iOS. */
.sheet-backdrop {
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, .45);
    z-index:    1090;
    animation:  sheet-fade-in .15s ease-out;
}

.sheet {
    position:      fixed;
    left:          0;
    right:         0;
    bottom:        0;
    z-index:       1091;
    display:       flex;
    flex-direction: column;
    max-height:    80vh;
    overflow-y:    auto;
    overscroll-behavior: contain;
    background:    rgba(15, 15, 20, .98);
    color:         #f0f0f0;
    border-top-left-radius:  14px;
    border-top-right-radius: 14px;
    box-shadow:    0 -6px 24px rgba(0, 0, 0, .5);
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation:     sheet-slide-up .2s ease-out;
    transition:    transform .2s ease-out;
}

.sheet-grip {
    width:         38px;
    height:        4px;
    border-radius: 2px;
    background:    rgba(255, 255, 255, .3);
    margin:        8px auto 4px;
    flex-shrink:   0;
}

.sheet-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         4px 16px 8px;
    border-bottom:   1px solid rgba(255, 255, 255, .12);
}

.sheet-title {
    font-size:   16px;
    font-weight: 700;
}

.sheet-close {
    background:  none;
    border:      none;
    color:       #aaa;
    font-size:   16px;
    line-height: 1;
    padding:     8px;
    cursor:      pointer;
}

.sheet-close:hover { color: #fff; }

.sheet-body {
    padding:    10px 16px 14px;
    flex:       1 1 auto;
}

.sheet-footer {
    padding:    10px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* The conviction line's tooltip is a hover panel. Radzen keeps the positioning — and moves the
   popup to <body>, so this cannot be scoped to the chart — while the panel keeps its own dark
   shell and rows. :has() confines the reset to tooltips that actually carry a panel, leaving
   every other chart's tooltip alone. */
.rz-chart-tooltip:has(.treemap-tooltip),
.rz-chart-tooltip-content:has(.treemap-tooltip) {
    background: none;
    border:     none;
    box-shadow: none;
    padding:    0;
    color:      inherit;
}

/* Needs no :has(): a chart tooltip with no panel inside has nothing here to match. */
.rz-chart-tooltip .treemap-tooltip {
    position:       static;
    pointer-events: none;
}

.rz-chart-tooltip .treemap-tooltip.tt-breakdown {
    max-height: 320px;
    max-width:  300px;
}

/* Inside a sheet the panel is the sheet: it fills the width and drops the floating chrome. */
.sheet .treemap-tooltip {
    position:        static;
    background:      none;
    border:          none;
    box-shadow:      none;
    padding:         0;
    min-width:       0;
    max-width:       none;
    max-height:      none;
    backdrop-filter: none;
}

@keyframes sheet-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes sheet-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sheet, .sheet-backdrop { animation: none; }
}

/* ?? Stock detail: volume chart label + chart spacing ?????????????????????????? */
.volume-chart-label {
    font-size:    11px;
    color:        #888;
    margin-top:   -4px;
}

/* Remove the top padding Radzen adds to the volume chart so it sits flush */
.volume-chart-label + .rz-chart {
    margin-top: 0 !important;
}


.timeline-bar {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     8px 12px;
    background:  #f8f9fa;
    border:      1px solid rgba(0,0,0,.125);
    border-radius: 6px;
    flex-wrap:   wrap;
    position:    relative; /* anchor for the slider tooltip */
}

.timeline-play-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          none;
    background:      #1b6ec2;
    color:           #fff;
    font-size:       16px;
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background 0.15s;
}

.timeline-play-btn:hover {
    background: #155a9e;
}

.timeline-slider {
    flex:        1;
    min-width:   120px;
    accent-color: #1b6ec2;
    cursor:      grab;
}

.timeline-slider:active {
    cursor: grabbing;
}

/* Floating date tooltip that appears above the slider thumb */
.slider-date-tip {
    display:          none;
    position:         absolute;
    top:              6px;
    transform:        translateY(-100%);
    background:       #fff;
    border:           1px solid rgba(0,0,0,.15);
    border-radius:    5px;
    padding:          4px 9px;
    color:            #333;
    font-size:        12px;
    font-weight:      600;
    white-space:      nowrap;
    pointer-events:   none;
    z-index:          300;
    box-shadow:       0 2px 6px rgba(0,0,0,0.12);
}

/* Small downward arrow on the tooltip */
.slider-date-tip::after {
    content:      '';
    position:     absolute;
    top:          100%;
    left:         50%;
    transform:    translateX(-50%);
    border:       5px solid transparent;
    border-top-color: rgba(0,0,0,.15);
}

/* ?? Weight slider drag tooltip (AI Score Settings) ?????????????????????????????? */
.weight-slider-tip {
    display:        none;
    position:       absolute;
    bottom:         calc(100% + 6px);
    background:     #1b1b2e;
    color:          #fff;
    border-radius:  5px;
    padding:        3px 10px;
    font-size:      12px;
    font-weight:    700;
    white-space:    nowrap;
    pointer-events: none;
    z-index:        300;
    box-shadow:     0 2px 6px rgba(0,0,0,0.18);
    transition:     opacity 0.1s ease;
}

.weight-slider-tip::after {
    content:   '';
    position:  absolute;
    top:       100%;
    left:      50%;
    transform: translateX(-50%);
    border:    5px solid transparent;
    border-top-color: #1b1b2e;
}

.weight-slider-tip[data-sign="pos"]::after  { border-top-color: #198754; }
.weight-slider-tip[data-sign="neg"]::after  { border-top-color: #dc3545; }
.weight-slider-tip[data-sign="zero"]::after { border-top-color: #6c757d; }

.timeline-date {
    font-size:   13px;
    font-weight: 600;
    color:       #333;
    white-space: nowrap;
}

/* ?? Stock Screener Panel ??????????????????????????????????????????????????????? */
.screener-panel {
    border:        1px solid rgba(0,0,0,.125);
    border-radius: 6px;
    background:    #fff;
    margin-bottom: 12px;
    overflow:      hidden;
}

/* Header: expand button + enable checkbox sit side-by-side */
.screener-header {
    display:     flex;
    align-items: center;
    background:  #f8f9fa;
}

.screener-toggle {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex:        1;
    padding:     10px 14px;
    background:  #f8f9fa;
    border:      none;
    color:       #333;
    font-size:   14px;
    cursor:      pointer;
    text-align:  left;
    transition:  background 0.15s;
}
.screener-toggle:hover { background: #e9ecef; }

/* "Apply filters" checkbox — right side of the header */
.screener-enable-label {
    display:      flex;
    align-items:  center;
    gap:          6px;
    padding:      0 16px;
    color:        #555;
    font-size:    13px;
    cursor:       pointer;
    white-space:  nowrap;
    user-select:  none;
}
.screener-enable-cb {
    width:  15px;
    height: 15px;
    accent-color: #1b6ec2;
    cursor: pointer;
}

.screener-body {
    padding:    14px 16px 16px;
    border-top: 1px solid rgba(0,0,0,.08);
}

/* Fixed 4-column grid so all inputs align vertically */
.screener-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0 24px;
    margin-bottom:         14px;
    align-items:           start;
}
@media (max-width: 900px) {
    .screener-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
}
@media (max-width: 500px) {
    .screener-grid { grid-template-columns: 1fr; }
}

/* Each filter field: label (fixed height) + hint (fixed height) + input row */
.screener-field {
    display:               grid;
    grid-template-rows:    20px 18px auto;
    gap:                   4px;
}

.screener-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.screener-field-label {
    font-size:   12px;
    font-weight: 600;
    color:       #444;
    line-height: 20px;
}

.screener-field-enable {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    user-select: none;
}

.screener-hint {
    font-size:   11px;
    color:       #888;
    line-height: 18px;
}

.screener-range {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.screener-slider-group {
    display: grid;
    gap: 6px;
}

.screener-slider-group.is-disabled {
    opacity: .6;
}

.screener-slider-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 6px;
}

.screener-slider-tag {
    font-size: 11px;
    color: #666;
}

.screener-slider-row input[type="range"] {
    width: 100%;
}

.screener-slider-value {
    font-size: 11px;
    font-weight: 600;
    color: #444;
    min-width: 46px;
    text-align: right;
}

.screener-sep {
    color:     #666;
    font-size: 13px;
    flex-shrink: 0;
}

.screener-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     12px;
    border-top:      1px solid rgba(0,0,0,.08);
}

.screener-match-count {
    font-size: 13px;
    color:     #666;
}

/* ?? Stock detail: AI report cards ???????????????????????????????????????????? */
.report-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
    min-width:             0;
    width:                 100%;
}
@media (max-width: 768px) {
    .report-grid { grid-template-columns: 1fr; }
}

.report-card {
    border-radius: 6px;
    padding:       14px 16px;
    font-size:     13.5px;
    line-height:   1.6;
    min-width:     0;
    overflow:      hidden;
    word-break:    break-word;
    overflow-wrap: break-word;
    box-sizing:    border-box;
}
.report-card p { margin: 0; }
.report-card ul {
    margin:       0;
    padding-left: 18px;
}
.report-card ul li + li { margin-top: 5px; }

.report-card-title {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom:  8px;
}

.report-card--overview {
    background:  #ffffff;
    border-left: 3px solid #888;
    color:       #000000;
}
.report-card--overview .report-card-title { color: #000000; }

.report-card--bull {
    background:  #ffffff;
    border-left: 3px solid #4caf50;
    color:       #000000;
}
.report-card--bull .report-card-title { color: #000000; }

.report-card--bear {
    background:  #ffffff;
    border-left: 3px solid #ef5350;
    color:       #000000;
}
.report-card--bear .report-card-title { color: #000000; }

.report-card--perf {
    grid-column:  1 / -1;   /* spans full width */
    background:   #ffffff;
    border-left:  3px solid #42a5f5;
    color:       #000000;
}
.report-card--perf .report-card-title { color: #000000; }

/* ?? AI Score breakdown card ??????????????????????????????????????????????????? */
.report-card--aiscore {
    grid-column:  1 / -1;
    background:   #ffffff;
    border-left:  3px solid #7c4dff;
    color:        #000;
}
.report-card--aiscore .report-card-title { color: #5e35b1; }

.aiscore-header {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-bottom: 12px;
}
.aiscore-value {
    font-size:   1.6rem;
    font-weight: 800;
    line-height: 1;
    min-width:   44px;
}
.aiscore-bar-wrap {
    flex:         1;
    height:       8px;
    background:   #e9ecef;
    border-radius: 4px;
    overflow:     hidden;
}
.aiscore-bar-fill {
    height:        100%;
    border-radius: 4px;
    transition:    width 0.4s ease;
}
.aiscore-peer-note {
    font-size:   11px;
    color:       #888;
    white-space: nowrap;
}

.aiscore-metrics {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    margin-bottom:  10px;
}
.aiscore-metric-row {
    display:     grid;
    grid-template-columns: 160px 1fr 72px 70px 52px;
    align-items: center;
    gap:         8px;
    font-size:   12px;
    min-width:   0;
}
@media (max-width: 640px) {
    .aiscore-metric-row { grid-template-columns: 110px 1fr 58px; }
    .aiscore-metric-weight,
    .aiscore-metric-contrib { display: none; }
}
.aiscore-metric-name {
    font-weight: 600;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.aiscore-metric-bar-track {
    height:        6px;
    background:    #e9ecef;
    border-radius: 3px;
    overflow:      hidden;
}
.aiscore-metric-bar-fill {
    height:        100%;
    background:    #7c4dff;
    border-radius: 3px;
}
.aiscore-metric-pct {
    color:      #555;
    font-size:  11px;
    text-align: right;
    white-space: nowrap;
}
.aiscore-metric-weight {
    color:       #888;
    font-size:   11px;
    text-align:  right;
    white-space: nowrap;
}
.aiscore-metric-contrib {
    font-weight: 700;
    font-size:   12px;
    text-align:  right;
    white-space: nowrap;
}
.aiscore-footnote {
    margin:    0;
    font-size: 11px;
    color:     #999;
    font-style: italic;
}

.report-disclaimer {
    margin-top: 12px;
    font-size:  11px;
    color:      #888;
}

/* ?? Stock detail: ticker breadcrumb dropdown ?????????????????????????????????? */
.ticker-breadcrumb-dd .rz-dropdown {
    background:    transparent;
    border:        none;
    border-bottom: 1px dashed rgba(255,255,255,0.25);
    border-radius: 0;
    padding:       0 20px 0 0;  /* room for the chevron */
    font-weight:   700;
    font-size:     1rem;
    color:         inherit;
    box-shadow:    none;
    min-height:    unset;
    line-height:   1.4;
}
.ticker-breadcrumb-dd .rz-dropdown:hover {
    border-bottom-color: rgba(255,255,255,0.6);
}
.ticker-breadcrumb-dd .rz-dropdown .rz-dropdown-label {
    padding: 0;
    font-weight: 700;
}

/* ?? Stock detail: MA toggle checkbox ?????????????????????????????????????????? */
.ma-toggle-label {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   12px;
    color:       #c8c8c8;
    cursor:      pointer;
    user-select: none;
    padding:     0 2px;
}
.ma-toggle-label--active { color: #4da6ff; }
.ma-toggle-label input[type=checkbox] {
    width:        14px;
    height:       14px;
    accent-color: #1b6ec2;
    cursor:       pointer;
}

/* -- Stock detail: chart lines dropdown checklist ---------------------------- */
.chart-lines-dd { position: relative; flex-shrink: 0; }
.chart-lines-btn {
    display:       flex;
    align-items:   center;
    gap:           4px;
    background:    #fff;
    border:        1px solid #ced4da;
    border-radius: 4px;
    padding:       3px 8px;
    font-size:     12px;
    line-height:   1.4;
    color:         #495057;
    cursor:        pointer;
    transition:    background 0.12s, color 0.12s;
}
.chart-lines-btn:hover { background: #e9ecef; }
.chart-lines-btn.open  { background: #1b6ec2; border-color: #1b6ec2; color: #fff; }
.chart-lines-caret { font-size: 9px; }
.chart-lines-menu {
    min-width: 190px;
    z-index:   1050;
    padding:   4px;
}
.chart-lines-item {
    display:       flex;
    align-items:   center;
    gap:           8px;
    width:         100%;
    padding:       4px 8px;
    border-radius: 4px;
    font-size:     13px;
    cursor:        pointer;
    user-select:   none;
}
.chart-lines-item:hover { background: #e9ecef; }
.chart-lines-item input[type=checkbox] {
    width:        14px;
    height:       14px;
    accent-color: #1b6ec2;
    cursor:       pointer;
}
.chart-lines-item--off { opacity: .5; cursor: default; }
.chart-lines-item--off:hover { background: transparent; }
.chart-lines-item--off input[type=checkbox] { cursor: default; }
.chart-lines-swatch {
    width:         14px;
    height:        3px;
    border-radius: 2px;
    flex-shrink:   0;
}
.chart-lines-note { margin-left: auto; font-size: 11px; color: #6c757d; }

/* ?? Stock detail: drag-to-zoom overlay ???????????????????????????????????????? */
.chart-zoom-overlay {
    position:       absolute;
    inset:          0;
    z-index:        5;
    pointer-events: none;   /* inactive — passes all events to Radzen chart beneath */
    border-radius:  4px;
}
.chart-zoom-overlay--active {
    cursor:         crosshair;
    pointer-events: all;    /* active — captures drag events */
}
/* Hover crosshair + readout drawn by JS (the overlay swallows the mouse, so
   Radzen cannot draw a tooltip of its own) */
.czx {
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          1px;
    background:     rgba(0, 0, 0, 0.35);
    pointer-events: none;
    display:        none;
}
.chr {
    position:       absolute;
    top:            6px;
    display:        none;
    z-index:        6;
    background:     rgba(255, 255, 255, 0.97);
    border:         1px solid #dee2e6;
    border-radius:  4px;
    box-shadow:     0 2px 8px rgba(0, 0, 0, 0.12);
    padding:        5px 8px;
    font-size:      11px;
    line-height:    1.55;
    white-space:    nowrap;
    pointer-events: none;
}
.chr-date {
    font-weight:    600;
    color:          #495057;
    margin-bottom:  2px;
}
.chr-row {
    display:     flex;
    align-items: center;
    gap:         6px;
}
.chr-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
}
.chr-dot--none { background: transparent; }
.chr-lbl { color: #6c757d; }
.chr-val {
    margin-left: auto;
    padding-left: 10px;
    font-weight: 600;
    color:       #212529;
}

/* Rubber-band selection highlight drawn by JS */
.czs {
    position:     absolute;
    top:          0;
    bottom:       0;
    background:   rgba(27, 110, 194, 0.15);
    border-left:  2px solid rgba(77, 166, 255, 0.8);
    border-right: 2px solid rgba(77, 166, 255, 0.8);
    pointer-events: none;
}

/* ?? Stock detail: Line / Candle chart-type toggle ??????????????????????? */
.chart-type-group {
    display:       flex;
    border:        1px solid #ced4da;
    border-radius: 4px;
    overflow:      hidden;
    flex-shrink:   0;
}
.chart-type-btn {
    background:  #fff;
    border:      none;
    padding:     3px 10px;
    font-size:   12px;
    cursor:      pointer;
    color:       #495057;
    line-height: 1.4;
    transition:  background 0.12s, color 0.12s;
}
.chart-type-btn:hover:not(.active) { background: #e9ecef; }
.chart-type-btn.active {
    background: #1b6ec2;
    color:      #fff;
}


a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e51230;
}

.validation-message {
    color: #e51230;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Blog post body ──────────────────────────────────────────────────────────
   Typography for the one place on the site that is prose rather than figures.
   The measure is capped on the container, so what is set here is the vertical
   rhythm and the treatment of the elements a post can actually contain — which
   is a closed set, because the renderer escapes raw HTML. */

.blog-body {
    font-size: 1.05rem;
    line-height: 1.7;
}

.blog-body p {
    margin-bottom: 1.1rem;
}

/* Generous space above a heading and little below it, so a heading reads as
   belonging to what follows rather than floating between two sections. */
.blog-body h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 2.2rem;
    margin-bottom: 0.75rem;
}

.blog-body h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
}

.blog-body ul,
.blog-body ol {
    margin-bottom: 1.1rem;
    padding-left: 1.3rem;
}

.blog-body li {
    margin-bottom: 0.35rem;
}

.blog-body blockquote {
    border-left: 3px solid var(--bs-border-color);
    padding-left: 1rem;
    margin: 1.4rem 0;
    color: var(--bs-secondary-color);
}

/* A table of sector moves is the widest thing a post can contain and the one
   most likely to be read on a phone. Scrolls inside its own box so it cannot
   push the whole page sideways. */
.blog-body .table-wrapper,
.blog-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.blog-body table {
    margin-bottom: 1.2rem;
    border-collapse: collapse;
}

.blog-body th,
.blog-body td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    text-align: left;
    white-space: nowrap;
}

.blog-body th {
    font-weight: 600;
}

.blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* Cashtags are auto-linked, so a paragraph can carry several. Underlining only
   on hover keeps the sentence readable instead of striping it. */
.blog-body a {
    text-decoration: none;
}

.blog-body a:hover {
    text-decoration: underline;
}

/* The footnote rule the renderer emits above the notes, which is otherwise
   invisible against the page. */
.blog-body .footnotes {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

/* ── Help ──────────────────────────────────────────────────────────────────────
   Global rather than scoped to Help.razor on purpose. The articles are separate
   components, and the per-page help button renders one of them inside a Radzen
   dialog with no Help page around it at all — scoped styles reach neither. */

.help-page {
    max-width: 900px;
}

.help-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.help-hero__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.help-hero__title .bi {
    color: var(--bs-primary);
}

.help-hero__sub {
    max-width: 52ch;
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* The search box carries its own icon inside the field, so the input keeps the
   plain .form-control the integration tests reach for. */
.help-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 320px;
}

.help-search__icon {
    position: absolute;
    left: 0.7rem;
    color: var(--bs-secondary-color);
    pointer-events: none;
    font-size: 0.9rem;
}

.help-search__input {
    padding-left: 2.1rem;
    border-radius: 999px;
}

.help-search__input::-webkit-search-cancel-button {
    display: none;
}

.help-search__clear {
    border-radius: 999px;
    line-height: 1;
}

.help-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
}

.help-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.help-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    line-height: 1.4;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.help-chip:hover {
    border-color: #1b6ec2;
    color: #1b6ec2;
}

.help-chip--on {
    background: #1b6ec2;
    border-color: #1b6ec2;
    color: #fff;
}

.help-chip__n {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.help-expand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.2rem;
    border: 0;
    background: transparent;
    color: #006bb7;
    font-size: 0.82rem;
}

.help-expand:hover {
    text-decoration: underline;
}

.help-toolbar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.help-count {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.help-group {
    margin: 1.6rem 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--bs-secondary-color);
}

.help-group:first-of-type {
    margin-top: 1.2rem;
}

/* ── Article cards ─────────────────────────────────────────────────────────── */

.help-card {
    margin-bottom: 0.6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.help-card:hover {
    border-color: #b9d3ec;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.07);
}

.help-card--open {
    border-color: #b9d3ec;
}

.help-card__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 0;
    cursor: pointer;
    user-select: none;
}

.help-card--open .help-card__head {
    border-bottom: 1px solid var(--bs-border-color);
}

.help-card__head:focus-visible {
    outline: 2px solid #258cfb;
    outline-offset: -2px;
}

/* A tinted square rather than a bare glyph: at a glance the list reads as a set
   of things, and the eye has a column to run down. */
.help-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0.5rem;
    background: rgba(27, 110, 194, 0.09);
    color: #1b6ec2;
    font-size: 1rem;
}

.help-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.help-card__title {
    font-weight: 600;
    line-height: 1.3;
}

.help-card__summary {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    line-height: 1.35;
}

.help-card__chev {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.help-card--open .help-card__chev {
    transform: rotate(180deg);
}

.help-card__body {
    padding: 1rem 1.1rem 0.9rem;
}

.help-card__go {
    margin: 1.1rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.86rem;
}

.help-card__go a {
    text-decoration: none;
    font-weight: 500;
}

.help-card__go a:hover {
    text-decoration: underline;
}

.help-empty {
    border-radius: 0.6rem;
}

/* ── Article body ──────────────────────────────────────────────────────────────
   Shared by the /help page and the dialog the per-page help button opens. */

.help-article {
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--bs-body-color);
}

.help-article > :last-child {
    margin-bottom: 0;
}

.help-article .help-lead {
    margin-bottom: 1rem;
    padding-left: 0.85rem;
    border-left: 3px solid rgba(27, 110, 194, 0.35);
    font-size: 0.97rem;
    color: var(--bs-body-color);
}

.help-article .help-heading {
    margin: 1.4rem 0 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1b6ec2;
}

.help-article .help-heading:first-child {
    margin-top: 0;
}

.help-article ul {
    padding-left: 1.15rem;
    margin-bottom: 0.75rem;
}

.help-article li {
    margin-bottom: 0.3rem;
}

.help-article li::marker {
    color: var(--bs-secondary-color);
}

.help-article p {
    margin-bottom: 0.75rem;
}

/* An aside, not a step: the tips, caveats and disclaimers that would otherwise
   read as one more instruction in the sequence. */
.help-article .help-note {
    margin: 0.9rem 0;
    padding: 0.6rem 0.8rem;
    border-radius: 0.45rem;
    background: var(--bs-tertiary-bg, #f6f7f9);
    border-left: 3px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.88rem;
}

.help-article .help-swatch {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    margin-right: 0.45rem;
    border-radius: 0.2rem;
    vertical-align: baseline;
}

.help-article kbd {
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.8em;
}

.help-article code {
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    background: var(--bs-tertiary-bg, #f6f7f9);
}

@media (max-width: 575.98px) {
    .help-hero {
        align-items: stretch;
    }

    .help-search {
        flex: 1 1 100%;
    }

    .help-card__head {
        padding: 0.7rem 0.8rem;
        gap: 0.65rem;
    }

    .help-card__icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
}