/* ==========================================================================
   The Smart Investor Tool — overrides on top of Inspinia 4.2 (Bootstrap 5.3)
   --------------------------------------------------------------------------
   1. Layout fixes
   2. DataTables (1.13 / Bootstrap 5)
   3. Card loading state (replaces the old Inspinia v2 sk-spinner overlay)
   4. Small chat widget
   5. Legacy Inspinia v2 components still used by this site, ported to
      Bootstrap 5 theme tokens
   6. Site specific helpers
   ========================================================================== */

/* 1. Layout fixes
   -------------------------------------------------------------------------- */

/* The theme pulls the footer out of the page gutter; keep it aligned instead. */
.footer {
    margin-left: 0;
    margin-right: 0;
    padding: 0.625rem 1.25rem;
}

:root {
    /* background of the "chips" that frame the company logos */
    --tsit-logo-chip-bg: #f4f5f7;
}

html[data-bs-theme="dark"] {
    --tsit-logo-chip-bg: rgba(255, 255, 255, .92);
}

.authentication-bg {
    background-color: #f0f4f8;
}

html[data-bs-theme="dark"] .authentication-bg {
    background-color: var(--ins-secondary-bg);
}

/* Single top bar: brand + menu + search box + actions all on one row.
   The theme ships two bars (.app-topbar and .topnav); they are merged here.
   Below 1200px the menu collapses into a hamburger and drops to a second row. */

.app-topbar {
    height: auto;
    min-height: var(--ins-topbar-height);
}

/* The theme computes this padding from --ins-gutter-x, which only exists inside
   a .row: outside one the variable is invalid and the padding stays at 0. The
   theme's selector is repeated here so we can beat it on specificity. */
.app-topbar .topbar-menu,
html[data-layout=topnav] .app-topbar .topbar-menu {
    min-height: var(--ins-topbar-height);
    padding: 0 1.25rem;
    gap: .5rem;
    flex-wrap: wrap;
}

.app-topbar .navbar-brand {
    padding: 0;
    margin-right: .25rem;
    line-height: 1;
}

.app-topbar .logo-topbar img {
    max-height: 34px;
    width: auto;
}

.app-topbar .navbar-nav .nav-link {
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    padding: .5rem .6rem;
    border-radius: var(--ins-border-radius);
    color: var(--ins-body-color);
}

.app-topbar .navbar-nav .nav-link:hover,
.app-topbar .navbar-nav .nav-link:focus {
    color: var(--ins-primary);
}

.app-topbar .navbar-nav .nav-link.active,
.app-topbar .navbar-nav .nav-item.active > .nav-link {
    color: var(--ins-primary);
    font-weight: 600;
}

.app-topbar .navbar-nav .dropdown-menu {
    font-size: .8125rem;
}

/* Search box on the left, between the brand and the menu */
.app-topbar .topbar-search {
    flex: 0 0 auto;
    margin-right: .75rem;
}

.app-topbar .topbar-search .form-control {
    width: 210px;
}

.app-topbar .navbar-toggler:focus {
    box-shadow: none;
}

@media (min-width: 1200px) {
    /* visual order: brand, menu, actions (in the DOM the actions come before
       the menu so that on collapse the menu wraps to a new line and the actions do not) */
    .app-topbar .navbar-brand { order: 1; }
    .app-topbar .topbar-search { order: 2; }
    .app-topbar .navbar-collapse { order: 3; }
    .app-topbar .topbar-actions { order: 4; }

    .app-topbar .topbar-menu,
    html[data-layout=topnav] .app-topbar .topbar-menu {
        flex-wrap: nowrap;
    }
}

/* Laptops between 1200 and 1400: the search box is trimmed and the Premium
   button becomes icon-only so the row does not break apart. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .app-topbar .topbar-search .form-control {
        width: 150px;
    }

    .app-topbar .go_premium .premium-label {
        display: none;
    }

    .app-topbar .go_premium .ti {
        margin-right: 0 !important;
    }

    .app-topbar .navbar-nav .nav-link {
        padding-left: .45rem;
        padding-right: .45rem;
    }
}

@media (max-width: 1199.98px) {
    .app-topbar .navbar-collapse {
        order: 3;
        flex-basis: 100%;
    }

    .app-topbar .navbar-collapse .navbar-nav {
        padding-bottom: .5rem;
    }

    .app-topbar .navbar-nav .nav-link {
        padding-left: .25rem;
    }

    .app-topbar .navbar-nav .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding-left: 1rem;
        background-color: transparent;
    }
}

/* 2. DataTables
   --------------------------------------------------------------------------
   The tables use a custom `dom` string, so DataTables does not emit its own
   Bootstrap grid wrapper — these rules lay the controls out instead. */

.dataTables_wrapper .dataTables_length {
    float: left;
    margin-bottom: .5rem;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    margin-bottom: .5rem;
    margin-right: 1em;
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    display: inline-block;
    width: auto;
}

.html5buttons {
    float: right;
    margin-bottom: .5rem;
}

/* DataTables Buttons already renders Bootstrap 5 buttons; here they are kept
   compact and in a subdued style: they are secondary actions, and in solid blue
   they visually overpowered the table they go with. */
.html5buttons .dt-buttons .btn {
    --ins-btn-padding-y: .28rem;
    --ins-btn-padding-x: .6rem;
    --ins-btn-font-size: .75rem;
    --ins-btn-color: var(--ins-body-color);
    --ins-btn-bg: transparent;
    --ins-btn-border-color: var(--ins-border-color);
    --ins-btn-hover-color: var(--ins-primary);
    --ins-btn-hover-bg: transparent;
    --ins-btn-hover-border-color: var(--ins-primary);
    --ins-btn-active-color: var(--ins-primary);
    --ins-btn-active-bg: transparent;
    --ins-btn-active-border-color: var(--ins-primary);
}

@media (max-width: 768px) {
    .html5buttons {
        float: none;
        margin-top: 10px;
    }
}

/* 3. Card loading state
   --------------------------------------------------------------------------
   `$(card).children('.card-body').toggleClass('card-loading')` hides the body
   content and shows the spinner, the way `sk-loading` used to in Inspinia v2. */

.card-spinner {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.card-body.card-loading {
    position: relative;
    min-height: 160px;
}

.card-body.card-loading > *:not(.card-spinner) {
    visibility: hidden;
}

.card-body.card-loading .card-spinner {
    display: flex;
}

/* 4. Small chat widget
   -------------------------------------------------------------------------- */

#small-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

#small-chat .badge {
    position: absolute;
    top: -3px;
    right: -4px;
}

.open-small-chat {
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ins-primary);
    text-align: center;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.open-small-chat:hover {
    color: #fff;
    filter: brightness(0.95);
}

.small-chat-box {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 75px;
    background: var(--ins-card-bg, var(--ins-body-bg));
    border: 1px solid var(--ins-border-color);
    width: 260px;
    height: 340px;
    border-radius: var(--ins-border-radius-lg);
    box-shadow: var(--ins-box-shadow);
    z-index: 1001;
}

.small-chat-box.active {
    display: block;
}

.small-chat-box .heading {
    background: var(--ins-tertiary-bg);
    color: var(--ins-emphasis-color);
    padding: 8px 15px;
    font-weight: 600;
    border-radius: var(--ins-border-radius-lg) var(--ins-border-radius-lg) 0 0;
}

.small-chat-box .chat-date {
    opacity: 0.6;
    font-size: 10px;
    font-weight: normal;
}

.small-chat-box .content {
    padding: 15px;
    overflow-y: auto;
    height: calc(100% - 100px);
}

.small-chat-box .content > div {
    padding-bottom: 12px;
}

.small-chat-box .content .chat-message {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 16px;
    max-width: 85%;
    background: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
    margin-bottom: 10px;
}

.small-chat-box .content .chat-message.active {
    background: var(--ins-primary);
    color: #fff;
}

.small-chat-box .content .left {
    text-align: left;
    clear: both;
}

.small-chat-box .content .left .chat-message {
    float: left;
}

.small-chat-box .content .right {
    text-align: right;
    clear: both;
}

.small-chat-box .content .right .chat-message {
    float: right;
}

.small-chat-box .form-chat {
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* 5. Legacy Inspinia v2 components still used by this site
   -------------------------------------------------------------------------- */

/* Article / long form pages */
.article h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.article p {
    font-size: 1rem;
    line-height: 1.7;
}

.article .card-body {
    padding: 2rem;
}

.article-title {
    margin-bottom: 1.5rem;
}

/* Dashboard KPI widgets */
.widget {
    border-radius: var(--ins-border-radius-lg);
    padding: 15px 20px;
    margin: 10px 0;
}

.widget.style1 h2 {
    font-size: 30px;
}

.widget h2,
.widget h3 {
    margin-top: 5px;
    margin-bottom: 0;
}

.stats-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--ins-secondary-color);
}

.stat-percent {
    float: right;
}

.dashboard-header {
    border-top: 0;
    padding: 20px;
}

.dashboard-header h2 {
    margin-top: 10px;
    font-size: 26px;
}

/* Dashed separator used inside forms */
.hr-line-dashed {
    border-top: 1px dashed var(--ins-border-color);
    height: 1px;
    margin: 20px 0;
}

.navy-line {
    width: 60px;
    height: 1px;
    margin: 60px auto 0;
    border-bottom: 2px solid var(--ins-primary);
}

/* Tabs that used to be wrapped in .tabs-container */
/* Transparent on purpose: on the page it shows the body background (as in
   Inspinia 2.9) and inside a modal it shows the modal's white. With
   var(--ins-card-bg) it painted grey inside the modal, because that variable
   only exists on a .card and the fallback was the body grey. */
.tabs-container .tab-content {
    background: transparent;
    border: 1px solid var(--ins-border-color);
    border-top: none;
    border-radius: 0 0 var(--ins-border-radius) var(--ins-border-radius);
    padding: 1.25rem;
}

.tabs-container .nav-tabs {
    border-bottom: 1px solid var(--ins-border-color);
}

/* Activity feeds (articles, news, watchlist news)
   --------------------------------------------------------------------------
   The Inspinia v2 markup floated the thumbnail to the left and relied on
   `.media-body { margin-left: 50px }`. Here it is a flex row: the thumbnail
   does not shrink and the body can truncate without overlapping. */

.feed-activity-list .feed-element {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--ins-border-color);
}

.feed-activity-list .feed-element:last-child {
    border-bottom: none;
}

.feed-element .feed-avatar {
    flex: 0 0 40px;
    display: block;
    width: 40px;
    height: 40px;
}

.feed-element .feed-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--ins-tertiary-bg);
}

.feed-element .feed-body {
    flex: 1 1 auto;
    min-width: 0;
}

.feed-element .feed-date {
    float: right;
    margin-left: .75rem;
    font-size: 11px;
    white-space: nowrap;
    color: var(--ins-secondary-color);
}

.feed-element .feed-title {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ins-emphasis-color);
    text-decoration: none;
    cursor: pointer;
}

.feed-element .feed-title:hover {
    color: var(--ins-primary);
}

.feed-element .feed-meta {
    display: block;
    margin-top: .2rem;
    font-size: 11.5px;
    color: var(--ins-secondary-color);
}

.dropdown-messages-box img.rounded-circle {
    width: 38px;
    height: 38px;
}

/* Social feed boxes (news items) */
.social-feed-box {
    border: 1px solid var(--ins-border-color);
    background: var(--ins-card-bg, var(--ins-body-bg));
    border-radius: var(--ins-border-radius);
    margin-bottom: 15px;
}

.social-avatar {
    padding: 15px 15px 0 15px;
}

.social-avatar img {
    height: 40px;
    width: 40px;
    margin-right: 10px;
}

.social-body {
    padding: 15px;
}

.social-body img {
    margin-bottom: 10px;
}

/* Product boxes */
.product-box {
    padding: 15px;
}

.product-desc {
    padding-top: 5px;
}

.product-name {
    font-size: 90%;
    color: var(--ins-secondary-color);
}

/* Referral program timeline */
.vertical-container {
    position: relative;
    padding: 1rem 0;
}

.vertical-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
    width: 2px;
    background: var(--ins-border-color);
}

.vertical-timeline-block {
    position: relative;
    padding-left: 60px;
    margin-bottom: 2rem;
}

.vertical-timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--ins-primary);
}

.vertical-timeline-content {
    background: var(--ins-card-bg, var(--ins-body-bg));
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    padding: 1rem 1.25rem;
}

/* Landing page decoration */
.big-icon {
    font-size: 3.5rem !important;
    color: var(--ins-primary);
}

.team-member {
    text-align: center;
}

.team-member img {
    margin: auto;
}

/* Modal with an absolutely positioned close button */
.inmodal .modal-header {
    position: relative;
}

.inmodal .modal-header .modal-close {
    position: absolute;
    top: 20px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ins-emphasis-color);
    opacity: .5;
    cursor: pointer;
}

.inmodal .modal-header .modal-close:hover {
    opacity: .75;
}

/* Rotated play icons used as period selectors */
.ti-rotate-90 {
    display: inline-block;
    transform: rotate(90deg);
}

.ti-rotate-270 {
    display: inline-block;
    transform: rotate(270deg);
}

/* 5b. Dashboard: index and stock cards
   -------------------------------------------------------------------------- */

.dash-section {
    margin-bottom: 1.5rem;
}

.dash-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ins-emphasis-color);
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ins-border-color);
}

/* Index cards (S&P 500, Dow Jones, ...) */
.market-card {
    border-radius: var(--ins-border-radius-lg);
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.market-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ins-box-shadow);
}

.market-card .card-body {
    padding: 1rem 1.25rem;
}

.market-card-name {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ins-secondary-color);
    margin-bottom: .35rem;
}

.market-card-price {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ins-emphasis-color);
    font-variant-numeric: tabular-nums;
}

.market-card-change {
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: .15rem;
}

.market-card-change i {
    font-size: 1em;
    vertical-align: -1px;
}

.market-card-after {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--ins-border-color);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.market-card-after-label {
    color: var(--ins-secondary-color);
    margin-right: .35rem;
}

.market-card-after-value {
    font-weight: 600;
}

/* Popular Stocks cards: the whole card is the link */
.stock-tile {
    border-radius: var(--ins-border-radius-lg);
    text-decoration: none;
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}

.stock-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--ins-box-shadow);
    border-color: var(--ins-primary);
}

.stock-tile .card-body {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: .875rem 1rem;
}

.stock-tile-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

/* Fixed light background: many logos are black or white and need contrast
   in both themes. */
.stock-tile-logo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: var(--tsit-logo-chip-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stock-tile-logo img {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
}

.stock-tile-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stock-tile-symbol {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ins-emphasis-color);
}

.stock-tile-name {
    font-size: 11.5px;
    color: var(--ins-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-tile-cta {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ins-primary);
    align-self: flex-end;
}

.stock-tile-cta i {
    transition: transform .15s ease-in-out;
    vertical-align: -1px;
}

.stock-tile:hover .stock-tile-cta i {
    transform: translateX(3px);
}

/* Watchlist table in a half column: compact numbers and ranges that do not wrap */
.watchlist-table {
    font-size: .8125rem;
}

.watchlist-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ins-secondary-color);
    white-space: nowrap;
}

.watchlist-table td.num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.watchlist-table .watchlist-symbol {
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
}

.watchlist-table .range-cell {
    min-width: 120px;
}

.watchlist-table .range-values {
    font-size: 11.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ins-secondary-color);
    margin-bottom: .25rem;
}

/* 5c. Metrics: stock header and Summary cards
   -------------------------------------------------------------------------- */

.stock-header {
    margin-bottom: 1.25rem;
    padding-top: .5rem;
}

.stock-header-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--ins-emphasis-color);
}

.stock-header-quote {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}

.stock-header-currency {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ins-secondary-color);
}

.stock-header-price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ins-emphasis-color);
}

.stock-header-change {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stock-header-after {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .35rem;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.stock-header-after-label {
    color: var(--ins-secondary-color);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .6875rem;
    font-weight: 600;
}

.stock-header-after-price,
.stock-header-after-change {
    font-weight: 600;
}

.stock-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .875rem;
}

.stock-header-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background-color: var(--tsit-logo-chip-bg);
    overflow: hidden;
}

.stock-header-logo img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

/* Summary cards: equal height, single-line header and figures kept in bounds */
/* The Summary card row sat flush against the tab bar: the negative margin that
   Bootstrap puts on .row cancelled out the top padding of
   .tab-content. */
/* Uniform spacing between the Summary blocks: Bootstrap rows carry no bottom
   margin, so each block sat flush against the next one. */
.summary-cards {
    margin-top: 0;
    --ins-gutter-x: 1.5rem;
    --ins-gutter-y: 1.5rem;
}

/* Metric card header: fixed height for two lines of title, so that the value
   in every card of the row starts at the same height even when the titles
   are different lengths. */
.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* the theme forces flex-wrap: wrap !important on .card-header */
    flex-wrap: nowrap !important;
    gap: .5rem;
    min-height: 64px;
    padding-top: .625rem;
    padding-bottom: .625rem;
}

.summary-card-header .card-title,
.summary-card-header > h1,
.summary-card-header > h2,
.summary-card-header > h3,
.summary-card-header > h4,
.summary-card-header > h5,
.summary-card-header > h6 {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    /* two lines at most and never breaking a word in half */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
}

.summary-card-action {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--ins-primary);
    cursor: pointer;
    white-space: nowrap;
}

.summary-card-action a {
    text-decoration: none;
}

.summary-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .875rem 1rem;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.summary-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
    /* The label and the percentage sit on one line, but .summary-diff is
       nowrap, so a longer label ("Infravalorada" against "Undervalued") pushes
       the percentage out of the card instead of shrinking. Let the row wrap so
       the percentage drops to a second line when it no longer fits. */
    flex-wrap: wrap;
}

.summary-label {
    font-size: .75rem;
    color: var(--ins-secondary-color);
}

.summary-diff {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Card locked for non-premium users */
.summary-card-locked {
    position: relative;
    padding: 0;
    cursor: pointer;
    min-height: 86px;
    align-items: center;
    overflow: hidden;
}

.summary-card-locked img {
    width: 100%;
    height: 100%;
    max-height: 110px;
    object-fit: cover;
    opacity: .55;
}

.summary-locked-cta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ins-primary);
}

/* Indicator tables inside the cards */
.summary-card .card-body > .table {
    margin: 0;
    font-size: .75rem;
}

.summary-card .card-body > .table td {
    padding: .3rem .25rem;
    border-top: none;
    vertical-align: middle;
}

.summary-card .card-body > .table strong {
    font-weight: 600;
    color: var(--ins-secondary-color);
}

#stock_notes_text {
    font-size: .8125rem;
    line-height: 1.5;
}

/* Side summary panel (Market Cap, 52 Week Range, Beta, PER...)
   It matches the height of the chart card: the rows share out the leftover
   space so that the two columns end up symmetrical. */
.stock-summary-panel {
    display: flex;
    flex-direction: column;
}

.stock-summary-panel .summary-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.stock-summary-panel .summary-stat:last-child {
    border-bottom: none;
}

.stock-summary-panel .summary-stat-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .25rem;
}

.summary-stat-label {
    color: var(--ins-secondary-color);
    font-size: .8125rem;
    min-width: 0;
}

.summary-stat-value {
    font-size: .8125rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ins-emphasis-color);
}

.stock-summary-panel .summary-stat .progress {
    margin-top: .4rem;
}

/* Change over the last month / year / YTD: three columns on a single row */
.summary-perf-value {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.summary-perf-label {
    display: block;
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.stock-summary-panel .summary-stat td:first-child h3 {
    color: var(--ins-secondary-color);
    font-weight: 500;
    margin-left: 0 !important;
}

.stock-summary-panel .summary-stat td:last-child {
    text-align: right;
    white-space: nowrap;
}

.stock-summary-panel .summary-stat td:last-child h3 {
    font-variant-numeric: tabular-nums;
    color: var(--ins-emphasis-color);
}

.shared-note-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    object-fit: cover;
}

/* Headings of the price chart block */
.stock-price-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.stock-performance-title {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0;
}

/* 5d. Typography normalization inside cards
   --------------------------------------------------------------------------
   The legacy templates use h1..h5 as if they meant "numeric value" inside
   tables and cards. In Bootstrap 3 those headings were far smaller; with the
   Bootstrap 5 scale they turn into huge text. Here they get a data size back
   without having to touch hundreds of tags. */

.card td h1, .card th h1,
.card td h2, .card th h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}

.card td h3, .card th h3,
.card td h4, .card th h4,
.card td h5, .card th h5 {
    font-size: .875rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}

.card td p, .card th p {
    margin-bottom: 0;
}

/* Standalone KPI figure inside a card body */
.card-body > h1,
.card-body > h1.m-0 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.card-body > h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .25rem;
}

/* Label + value: the `<small class="stats-label">` pattern followed by a heading */
.card-body .stats-label {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ins-secondary-color);
    margin-bottom: .1rem;
}

.card-body .stats-label + h1,
.card-body .stats-label + h2,
.card-body .stats-label + h3,
.card-body .stats-label + h4,
.card-body .stats-label + h5 {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}

/* Card headers: inherited h2/h3 brought down to card-title size */
.card-header > h2,
.card-header > h3,
.card-header > h4,
.card-header > h5 {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}

/* Inspinia 2.9 "widgets" also came with oversized typography */
.widget.style1 h2 {
    font-size: 1.5rem;
}

/* 5e. Vertical rhythm between card rows
   --------------------------------------------------------------------------
   In Bootstrap 3 the cards (.ibox) carried their own bottom margin, so the
   templates stack several .row elements one after another with no spacing. In
   Bootstrap 5 the card has no margin, so the rows ended up flush together. */

/* Rows without cards (loose content blocks): these do get their spacing from a
   margin. Card rows get it from the column padding instead, see 5i. */
.content-page > .container-fluid > .row:not(:has(> [class*="col"] > .card)):not(:last-child),
.content-page > .container-fluid > .article > .row:not(:has(> [class*="col"] > .card)):not(:last-child),
.content-page > .container-fluid > form > .row:not(:has(> [class*="col"] > .card)):not(:last-child),
.tab-content > .tab-pane > .row:not(:has(> [class*="col"] > .card)):not(:last-child) {
    margin-bottom: 1.5rem;
}

/* 5f. Stock comparison: header tiles
   -------------------------------------------------------------------------- */

.compare-actions {
    height: 100%;
    align-content: start;
}

.compare-tile .card-body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .875rem;
    height: 100%;
}

.compare-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .35rem;
    min-width: 0;
}

.compare-tile-head > small {
    min-width: 0;
    font-size: .75rem;
    line-height: 1.25;
}

.compare-tile .close-stock {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ins-secondary-color);
    cursor: pointer;
}

.compare-tile .close-stock:hover {
    color: var(--ins-danger);
}

.compare-tile-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.compare-tile-symbol {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ins-emphasis-color);
}

.compare-tile-logo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: .5rem;
    background-color: var(--tsit-logo-chip-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.compare-tile-logo img {
    max-width: 26px;
    max-height: 26px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.compare-tile-quote {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.compare-tile-price {
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.compare-tile-change {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.compare-tile-cta {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
}

.compare-tile-add {
    border-style: dashed;
    border-color: var(--ins-border-color);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.compare-tile-add .card-body {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ins-secondary-color);
    gap: .25rem;
    min-height: 140px;
}

.compare-tile-add i {
    font-size: 1.5rem;
    line-height: 1;
}

.compare-tile-add span {
    font-size: .8125rem;
    font-weight: 600;
}

.compare-tile-add:hover {
    border-color: var(--ins-primary);
    color: var(--ins-primary);
}

.compare-tile-add:hover .card-body {
    color: var(--ins-primary);
}

/* 5g. Card headers with actions
   --------------------------------------------------------------------------
   The legacy templates align the header icons with float, but .card-header is
   now flex and the float does nothing: the icons ended up flush against the
   title. They are pushed over with margin-left auto. */

.card-header > .card-action,
.card-header > .float-end,
.card-header > .ibox-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    float: none !important;
}

.card-header > .card-action > a,
.card-header > .float-end > a,
.card-header > .ibox-tools > a {
    color: var(--ins-secondary-color);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.card-header > .card-action > a:hover,
.card-header > .float-end > a:hover,
.card-header > .ibox-tools > a:hover {
    color: var(--ins-primary);
}

.card-header > h1, .card-header > h2, .card-header > h3,
.card-header > h4, .card-header > h5, .card-header > h6 {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

/* 5h. Responsive behaviour of headers, toolbars and tables
   -------------------------------------------------------------------------- */

/* The theme forces flex-wrap:wrap!important on .card-header, so a badge or a
   button group dropped to a second line and knocked the body of the sibling
   cards out of alignment. Above mobile the header does not wrap and they all
   share a minimum height; below that it does wrap, so everything fits. */
.card-header {
    min-height: 54px;
    flex-wrap: nowrap !important;
    gap: .5rem;
}

.card-header > .card-action,
.card-header > .float-end,
.card-header > .ibox-tools {
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Indicator cards reserve room for a two-line title (see 5c). */
.card-header.summary-card-header {
    min-height: 64px;
}

/* Below 992px the header may split into two lines: the title on top and the
   controls (button groups, selects) underneath, with their own horizontal
   scrolling if they still do not fit. */
@media (max-width: 991.98px) {
    .card-header {
        flex-wrap: wrap !important;
        row-gap: .5rem;
    }

    .card-header > .card-action,
    .card-header > .float-end,
    .card-header > .ibox-tools {
        flex-wrap: wrap;
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
    }

    .card-header > .stock-price-group,
    .card-header > .mx-auto {
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex;
        gap: .5rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .card-header > .stock-price-group > .btn-group,
    .card-header > .mx-auto > .btn-group {
        flex: 0 0 auto;
    }

    .card-header > .stock-price-group > .btn-group.me-4 {
        margin-right: .5rem !important;
    }
}

/* Price chart header */
.card-header > .stock-price-group {
    flex-wrap: wrap;
    row-gap: .35rem;
}

/* Portfolio analyzer toolbar */
.portfolio-toolbar .portfolio-select {
    width: auto;
    min-width: 9rem;
    max-width: 14rem;
}

/* KPI strip: label/value pairs that wrap without breaking alignment */
.portfolio-kpis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 0;
}

.portfolio-kpis > .btn-group {
    margin-right: .5rem;
}

.portfolio-kpis .kpi-label {
    margin-left: .9rem;
    color: var(--ins-secondary-color);
    font-size: .8125rem;
}

.portfolio-kpis .kpi-value {
    margin-left: .3rem;
    font-weight: 600;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--ins-primary);
}

.portfolio-kpis > .btn-group + .kpi-label {
    margin-left: 0;
}

/* Transactions search box in the portfolio header */
.trades-search {
    width: auto;
    max-width: 15rem;
}

/* Compact tables in the dashboard's Markets section */
.markets-table > :not(caption) > * > * {
    padding: .4rem .45rem;
}

.markets-table th {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.markets-table td {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Wrapper for fixed-width third-party widgets (iframes) */
.embed-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.embed-scroll > iframe {
    display: block;
    border: 0;
    margin: 0 auto;
}

/* Editable note boxes (contenteditable) styled like a form field */
.editable-note {
    min-height: 100px;
    max-height: 320px;
    overflow-y: auto;
    padding: .5rem .75rem;
    color: var(--ins-body-color);
    background-color: var(--ins-secondary-bg);
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
}

.editable-note:focus {
    outline: 0;
    border-color: var(--ins-primary);
    box-shadow: 0 0 0 .15rem rgba(var(--ins-primary-rgb), .15);
}

/* ETF holdings cell: logo + symbol */
.holder-cell {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.holder-logo {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: .375rem;
    background-color: var(--tsit-logo-chip-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.holder-logo img {
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
}

/* Financial statement title (Income Statement, Balance Sheet...) */
.statement-title h2 {
    font-size: 1.25rem;
}

.statement-title h4 {
    font-size: .9375rem;
    color: var(--ins-secondary-color);
}

/* 5i-0. Breathing room between the top bar and the content
   --------------------------------------------------------------------------
   The content started flush against the bar; on top of that .row has a
   negative margin-top equal to its gutter, so a first row with g-3 slid 24px
   underneath the menu. */

.content-page > .container-fluid {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.content-page > .container-fluid.py-3 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.content-page > .container-fluid > .row:first-child,
.content-page > .container-fluid > *:first-child > .row:first-child {
    margin-top: 0;
}

/* 5i. Vertical rhythm of the cards
   --------------------------------------------------------------------------
   In Inspinia 2.9 every .ibox carried 25px of bottom margin; theme 4.2 leaves
   only 10px, so stacked cards ended up flush against each other.

   Note: .h-100 puts height:100% on the card, which resolves against the content
   box of its column. The column is a flex item of the .row, so its height is
   already resolved and the card's margin-bottom overflows without separating
   anything: the measured gap between stacked cards was 0 even though the margin
   was set. The spacing comes instead from the bottom padding of the column,
   which does count toward the height and falls outside that 100%. */

.card {
    margin-bottom: 1.5rem;
}

/* Only the last card in the column loses the margin: the gap below it comes
   from the column padding. A column with several stacked cards (the RSI
   screener has one per sector) does need the margin in between. */
.row > [class*="col"] > .card:last-child,
.card .card,
.card-body > .card,
.modal .card {
    margin-bottom: 0;
}

/* A card with d-none generates no box, but the one before it still counted as
   an intermediate card and kept its margin, which added to the column padding:
   the RSI screener alternates the S&P 500 cards with the full-list ones and
   left 48px at the end instead of 24. The margin is only applied when there is
   at least one visible card after it. */
.row > [class*="col"] > .card:not(:has(~ .card:not(.d-none))) {
    margin-bottom: 0;
}

/* In a card row the vertical gutter is no use either: the h-100 card overflows
   by exactly that amount and eats up the gap between lines. So card rows
   cancel the vertical gutter and the only thing responsible for the spacing
   is the bottom padding of the column. */
.content-page .row:has(> [class*="col"] > .card) {
    --ins-gutter-y: 0;
}

.content-page .row > [class*="col"]:has(> .card) {
    padding-bottom: 1.5rem;
}


/* 5j. Active state of the button groups (time ranges, chart type,
   portfolio views)
   --------------------------------------------------------------------------
   The theme leaves .btn-light.active with an almost white background and text
   at 50% opacity, so the selected button looked like the disabled one. */

.btn-group > .btn-light.active,
.btn-group > .btn-light.active:focus,
.btn-group > .btn.time.active,
.btn-group > .btn.button_view.active,
.btn-group-vertical > .btn-light.active {
    background-color: var(--ins-primary) !important;
    border-color: var(--ins-primary) !important;
    color: #fff !important;
    opacity: 1;
    z-index: 2;
}

.btn-group > .btn-light.active:hover {
    background-color: var(--ins-primary) !important;
    filter: brightness(.95);
}

/* Section title inside a card (valuation calculators, ratio blocks,
   intrinsic value...) */
.card-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}

/* Calculator fields: contained width, with the % on the same line */
.calc-input {
    display: inline-block;
    width: auto;
    max-width: 12rem;
}

/* Par etiqueta/valor centrado (crecimiento historico, estimado...) */
.kpi-inline-label {
    font-size: .8125rem;
    color: var(--ins-secondary-color);
}

.kpi-inline-value {
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fcf-input {
    max-width: 8rem;
    display: inline-block;
}

/* Ratio comparison tables: the values and the changes do not break across two
   lines; if they do not fit, the table scrolls inside its box. */
.ratio-compare-table th,
.ratio-compare-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.ratio-compare-table td:first-child,
.ratio-compare-table th:first-child {
    white-space: normal;
    min-width: 9rem;
}

/* Plan feature list: hanging indent when the text runs to more than one
   line */
.plan-feature {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    text-align: left;
}

.plan-feature > .ti {
    flex: 0 0 auto;
    margin-top: .2rem;
}

/* 5k. Spacing between a button's icon and its text
   --------------------------------------------------------------------------
   The theme defines .btn as inline-flex, and in a flex container the white
   space between <i> and the text generates no box: the icon ended up flush
   against the label. It is restored with gap, which works just as well with
   the icon before or after and does not affect icon-only buttons. */

.btn {
    gap: .375rem;
}

/* Icons that already carry their own margin must not add both spacings. */
.btn > .ti[class*="me-"],
.btn > .ti[class*="ms-"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* 5l. Modals
   --------------------------------------------------------------------------
   The modals came from Inspinia 2.9: a header with the logo sized in %, loose
   h3 titles in the body and buttons aligned with float, which does nothing in
   the header and the footer (now flex in Bootstrap 5). */

.modal-header {
    align-items: center;
    gap: .625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    min-width: 0;
}

/* Site brand in a modal header (contact form) */
.modal-brand {
    flex: 0 0 auto;
    height: 30px;
    width: auto;
}

/* The company logo in the header: a fixed-size chip, not a % of the width */
.modal-header > img:not(.modal-brand),
.modal-logo {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: .5rem;
    background-color: var(--tsit-logo-chip-bg);
    object-fit: contain;
    padding: 3px;
}

.modal-header .btn-close {
    margin-left: auto;
}

.modal-body {
    padding: 1.25rem;
}

/* Block title inside the modal body, scaled to the rest of the site */
.modal-body > h1,
.modal-body > h2,
.modal-body > h3,
.modal-body > h4,
.modal-body > h5 {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.modal-footer {
    gap: .5rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--ins-border-color);
}

.modal-footer > * {
    margin: 0;
}

/* In a flex container float does not apply: the destructive button is pushed
   to the left with margin auto. */
.modal-footer > .float-start {
    float: none !important;
    margin-right: auto;
}

/* A bare .row inside the body would eat up the padding with its negative
   margin. */
.modal-body > .row {
    margin-left: 0;
    margin-right: 0;
}

.modal-body > .row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
}

/* Quote summary in the alerts modal */
.alert-summary {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.alert-summary-quote {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .625rem;
    margin-bottom: .75rem;
}

.alert-summary-price {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ins-emphasis-color);
}

.alert-summary-change {
    font-size: .875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.alert-summary .summary-stat-line {
    padding: 0;
}

/* Tabs inside a modal do not need the page's framing */
.modal .tabs-container .tab-content {
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 1.25rem 0 0;
}

/* 5m. Analyst price target
   -------------------------------------------------------------------------- */

.price-target-header {
    flex-wrap: wrap !important;
    row-gap: .35rem;
}

.price-target-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.price-target-label {
    font-size: .75rem;
    color: var(--ins-secondary-color);
}

.price-target-value {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ins-emphasis-color);
}

.price-target-delta {
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.price-target-chart {
    height: 300px;
    width: 100%;
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .price-target-chart {
        height: 240px;
    }
}

/* 6. Site specific helpers
   -------------------------------------------------------------------------- */

.progress-small,
.progress-small .progress-bar {
    height: 6px;
}

/* Analysis tables (consensus, price target): a uniform border and cells
   instead of the borders and margins they carried inline. */
.stock_analysis_table {
    margin-bottom: 0;
    border: 1px solid var(--ins-border-color);
}

.stock_analysis_table > :not(caption) > * > * {
    padding: .65rem .75rem;
    vertical-align: middle;
}

.stock_analysis_table h2,
.stock_analysis_table h3,
.stock_analysis_table h4 {
    margin: 0;
}

.summary_left_pannel {
    padding-top: 5px !important;
    padding-bottom: 1px !important;
}

.w-60 { width: 60% !important; }
.w-68 { width: 68% !important; }
.w-69 { width: 69% !important; }
.w-70 { width: 70% !important; }

.tr_border {
    border-color: var(--ins-border-color);
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
}

@media only screen and (max-width: 1199px) {
    .non_visibility {
        visibility: hidden;
        height: 0;
    }
}

/* Rounded / lined nav variants used on the metrics page */
@media (min-width: 576px) {
    .rounded-nav,
    .rounded-nav .nav-link {
        border-radius: 50rem !important;
    }
}

.lined .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
}

.lined .nav-link:hover {
    border: none;
    border-bottom: 3px solid transparent;
}

.lined .nav-link.active {
    background: none;
    color: var(--ins-emphasis-color);
    border-color: var(--ins-primary);
}

.with-arrow .nav-link.active {
    position: relative;
}

.with-arrow .nav-link.active::after {
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--ins-primary);
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}

/* 7. Financial statement tables
   --------------------------------------------------------------------------
   The income statement, balance sheet, cash flow and comparison tables used
   table-striped + table-bordered. In Bootstrap 5 the zebra striping is painted
   with an inset box-shadow, which covered the background of the section rows:
   "Company Revenues" and "Growth" ended up the same grey and the hierarchy was
   lost. Here the hierarchy is carried by typography and a single line; color
   is reserved for the sections and the totals. */

.fin-table {
    --fin-section-bg: rgba(15, 23, 42, .035);
    --fin-total-bg: rgba(15, 23, 42, .018);
    margin-bottom: 0;
    border-color: var(--ins-border-color);
}

html[data-bs-theme="dark"] .fin-table {
    --fin-section-bg: rgba(255, 255, 255, .055);
    --fin-total-bg: rgba(255, 255, 255, .03);
}

/* No vertical lines: the column alignment already separates the data */
.fin-table > :not(caption) > * > * {
    border-left: 0;
    border-right: 0;
    padding: .5rem .75rem;
    vertical-align: middle;
}

/* Period header */
.fin-table > thead > tr > th {
    background-color: transparent;
    border-bottom: 1px solid var(--ins-border-color);
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ins-secondary-color);
    white-space: nowrap;
    text-align: right;
}

.fin-table > thead > tr > th:first-child {
    text-align: left;
}

/* Data cells: figures right-aligned with fixed-width digits */
.fin-table > tbody > tr > td {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    color: var(--ins-body-color);
}

/* First column: the line item, pinned left and always visible */
.fin-table > tbody > tr > th,
.fin-table > tbody > tr > td:first-child {
    text-align: left;
    font-weight: 500;
    font-size: .8125rem;
    white-space: nowrap;
    color: var(--ins-emphasis-color);
}

/* Section row: label in small caps, not one more block of grey */
.fin-table > tbody > tr.fin-section > * {
    background-color: var(--fin-section-bg);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ins-emphasis-color);
    border-bottom-color: var(--ins-border-color);
    padding-top: .45rem;
    padding-bottom: .45rem;
}

/* Total or subtotal row: it stands out through weight, not a heavy fill */
.fin-table > tbody > tr.fin-total > * {
    background-color: var(--fin-total-bg);
    font-weight: 600;
}

.fin-table > tbody > tr.fin-total > td,
.fin-table > tbody > tr.fin-total > th {
    color: var(--ins-emphasis-color);
}

/* A table of sections does not also need bold from the legacy render */
.fin-table > tbody > tr.fin-section strong {
    font-weight: inherit;
}

/* The first-column rule is more specific than the row-type ones, so the
   weight of the label is set explicitly here. */
.fin-table > tbody > tr.fin-section > th:first-child,
.fin-table > tbody > tr.fin-section > td:first-child {
    font-weight: 700;
}

.fin-table > tbody > tr.fin-total > th:first-child,
.fin-table > tbody > tr.fin-total > td:first-child {
    font-weight: 600;
}

/* Derived row (growth figures, ratios): one step down in the hierarchy */
.fin-table > tbody > tr.fin-sub > th,
.fin-table > tbody > tr.fin-sub > td:first-child {
    padding-left: 1.6rem;
    font-weight: 400;
    color: var(--ins-secondary-color);
}

.fin-table > tbody > tr.fin-sub > td:not(:first-child) {
    font-size: .78125rem;
}

/* Hover is the only tracking aid the row needs */
.fin-table > tbody > tr:not(.fin-section):hover > * {
    background-color: rgba(26, 179, 148, .06);
}

/* First column pinned when scrolling horizontally. DataTables in scroll mode
   splits the table in two (header and body), each with its own container. */
.dataTables_scrollHead,
.dataTables_scrollBody {
    overflow-x: auto;
}

.fin-table > thead > tr > th:first-child,
.fin-table > tbody > tr > th:first-child,
.fin-table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--ins-secondary-bg);
    background-clip: padding-box;
    box-shadow: 1px 0 0 var(--ins-border-color);
}

.fin-table > tbody > tr.fin-section > th:first-child,
.fin-table > tbody > tr.fin-section > td:first-child {
    background-image: linear-gradient(var(--fin-section-bg), var(--fin-section-bg));
}

.fin-table > tbody > tr.fin-total > th:first-child,
.fin-table > tbody > tr.fin-total > td:first-child {
    background-image: linear-gradient(var(--fin-total-bg), var(--fin-total-bg));
}


/* 8. Action links inside a card header
   ==========================================================================
   They are <a> elements with no href (the handler is jQuery's), so the browser
   does not give them the hand cursor and they were indistinguishable from
   plain text. The color was repeated in an inline style with !important on
   each of the 22 links in the RSI screener; it is centralized here. */
.show_more_stocks {
    cursor: pointer;
    color: #337cc5;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
}

.show_more_stocks:hover,
.show_more_stocks:focus-visible {
    color: #285f96;
    text-decoration: underline;
}

html[data-bs-theme="dark"] .show_more_stocks {
    color: #7fb3e8;
}

html[data-bs-theme="dark"] .show_more_stocks:hover,
html[data-bs-theme="dark"] .show_more_stocks:focus-visible {
    color: #a5cbf1;
}

/* An <a> with no href is a placeholder link as far as the browser is concerned
   and gets no hand cursor, but on this site they all carry a jQuery handler:
   DataTables pagination, the superinvestor names, the watchlist delete icons,
   the card header actions... The cursor is set on all of them instead of going
   case by case. */
a:not([href]) {
    cursor: pointer;
}

/* Except pagination when it is disabled, which does not lead anywhere */
.page-item.disabled .page-link,
.paginate_button.disabled .page-link,
a:not([href])[disabled],
a:not([href]).disabled {
    cursor: default;
}

/* Investor names in the superinvestors list: they open that portfolio */
.investor_name {
    cursor: pointer;
    text-decoration: none;
}

.investor_name:hover,
.investor_name:focus-visible {
    text-decoration: underline;
}


/* 9. Stock comparison tool
   ==========================================================================
   9a. Saved comparison lists (My Comparisons and Default Comparisons modals).
   The name sat inside an <h3>, that is 22px for a table row; it is brought
   down to the size of the rest of the content. */
.comparison-name {
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

.comparison-name:hover {
    text-decoration: underline;
}

.comparison-list-table > thead > tr > th {
    background-color: var(--tsit-table-head-bg);
    border-bottom: 1px solid var(--ins-border-color);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ins-secondary-color);
    text-align: left;
    white-space: nowrap;
}

.comparison-list-table > tbody > tr > td {
    vertical-align: middle;
    text-align: left;
}

/* 9b. Comparison tables on the page itself
   --------------------------------------------------------------------------
   Here the columns are the stocks and the rows are the fields, the opposite of
   a financial statement. With the data right-aligned and the header aligned to
   the left nothing lined up, so in this variant everything goes to the left,
   and the header and the field column carry a solid grey to separate the
   frame from the data.

   The grey has to be opaque, not an rgba: the first column is sticky and the
   data passes underneath it when scrolling horizontally. */
:root {
    --tsit-table-head-bg: #f4f5f7;
}

html[data-bs-theme="dark"] {
    --tsit-table-head-bg: #24252e;
}

.fin-table.fin-table-compare > thead > tr > th,
.fin-table.fin-table-compare > tbody > tr > th,
.fin-table.fin-table-compare > tbody > tr > td {
    text-align: left;
}

.fin-table.fin-table-compare > thead > tr > th {
    background-color: var(--tsit-table-head-bg);
}

/* The column holding the field names */
.fin-table.fin-table-compare > thead > tr > th:first-child,
.fin-table.fin-table-compare > tbody > tr > th:first-child,
.fin-table.fin-table-compare > tbody > tr > td:first-child {
    background-color: var(--tsit-table-head-bg);
    background-image: none;
    color: var(--ins-emphasis-color);
    font-weight: 600;
}

/* In scroll mode DataTables splits the table in two and the header lives in
   its own container: without this the grey cuts off where the last column ends
   if the table is narrower than the card. */
.dataTables_scrollHead:has(.fin-table-compare) {
    background-color: var(--tsit-table-head-bg);
}

/* Hover must not wipe out the grey of the field column */
.fin-table.fin-table-compare > tbody > tr:hover > td:first-child,
.fin-table.fin-table-compare > tbody > tr:hover > th:first-child {
    background-color: var(--tsit-table-head-bg);
}


/* 10. Full-width pages
   ==========================================================================
   The theme's topnav layout caps .container-fluid at max-width: 85%, that is
   7.5% of the width lost on each side. On pages with wide tables (the
   portfolio analyzer reaches 17 columns) that forces horizontal scrolling to
   see data that fits on screen with room to spare.

   It is applied through the container_class block of layouts/vertical.html, so
   that only the pages that ask for it are affected. */
html[data-layout=topnav] .content-page > .container-fluid.container-wide,
.content-page > .container-fluid.container-wide {
    max-width: 100%;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* With the container at full width, the side padding of the table cards is the
   only thing left between the data and the edge; it is trimmed a little. */
.container-wide .card > .card-body {
    padding-left: .875rem;
    padding-right: .875rem;
}

@media (max-width: 575.98px) {
    html[data-layout=topnav] .content-page > .container-fluid.container-wide,
    .content-page > .container-fluid.container-wide {
        padding-left: .25rem;
        padding-right: .25rem;
    }
}


/* 11. Stock logo inside a table cell
   ==========================================================================
   The logo used width: 24% and float: left, so its size depended on the width
   of the column: in the portfolio analyzer it came out at about 70px and
   stretched the row to 95px. And when the CDN does not have the image for a
   symbol, the alt text box stacked vertically and the row shot up to
   197px. With a fixed size neither of those can happen. */
.stock-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.stock-logo {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
    padding: 2px;
    border-radius: 4px;
    background-color: var(--tsit-logo-chip-bg);
}

.stock-cell-symbol {
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.stock-cell-symbol:hover {
    text-decoration: underline;
}

/* 12. RSI screener: card headers of equal height
   -------------------------------------------------------------------------
   The theme's .card-header is display:flex with flex-wrap: wrap !important, so
   when the sector name and the "show all" link together exceed the column
   width, the link drops onto a line of its own and that card grows taller than
   the three beside it. The English labels already produced ragged headers
   (54px next to 72px) and the longer Spanish ones made it worse.

   Keeping the two on a single row, with the title free to wrap inside its own
   column, means the header height depends on the title alone; the min-height
   then pins every header to the two-line case so the row stays aligned in any
   language. */
.card.snp_list > .card-header {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: .75rem;
    min-height: 72px;
}

.card.snp_list > .card-header h5 {
    flex: 1 1 auto;
    min-width: 0;
}

.card.snp_list > .card-header .card-action {
    flex: 0 0 auto;
}

/* 13. AI brief: earnings separator
   -------------------------------------------------------------------------
   This rule was built in JavaScript with a hardcoded #e7eaec, which is a light
   grey: invisible in the light theme and a bright line in the dark one. The
   theme already publishes a border colour that follows the active theme. */
.ai-brief-earnings-sep {
    border-top: 1px solid var(--ins-border-color);
    padding-top: 10px;
}

/* 14. AI panel in the portfolio analyzer
   -------------------------------------------------------------------------
   This block was written for Inspinia 2.9 on Bootstrap 3 and its markup used
   `well`, `label`, `btn-xs` and the `m-*-xs` spacing helpers, none of which
   exist in 4.2 — so the cards had no styling of their own and the buttons no
   spacing. What did survive was an inline `background:#fafafa`, which painted
   a white card in the dark theme while `text-muted` resolved to a light grey,
   leaving the text almost unreadable on it.

   The markup now carries these classes instead and every colour comes from the
   theme's own variables, so the panel follows whichever theme is active. */
.ai-pf-chip {
    display: inline-block;
    margin: 0 .5rem .5rem 0;
    padding: .375rem .625rem;
    font-weight: 500;
    border-radius: var(--ins-border-radius, .25rem);
    background: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
    border: 1px solid var(--ins-border-color);
}

.ai-pf-chip-key {
    margin-right: .375rem;
    color: var(--ins-secondary-color);
}

.ai-pf-heading {
    margin: .5rem 0;
    font-size: 1rem;
    color: var(--ins-body-color);
}

.ai-pf-action {
    margin-bottom: .625rem;
    padding: .75rem;
    border-radius: var(--ins-border-radius, .25rem);
    background: var(--ins-tertiary-bg);
    border: 1px solid var(--ins-border-color);
}

.ai-pf-action-title {
    font-weight: 600;
    color: var(--ins-emphasis-color, var(--ins-body-color));
}

.ai-pf-action-detail {
    margin-bottom: .5rem;
    font-size: .8125rem;
    color: var(--ins-secondary-color);
}

/* The old m-r-xs / m-b-xs helpers are gone, so the buttons were touching. */
.ai-pf-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ai-pf-changes-list {
    margin-top: .25rem;
    padding-left: 1.125rem;
    color: var(--ins-body-color);
}

/* 15. Application width matching the previous site
   -------------------------------------------------------------------------
   The theme caps `.container-fluid` at 85% under data-layout=topnav, which at
   1920px throws away about 255px: the content band ran from 161px to 176px
   from the edges and used 82.4% of the screen, where the previous site used
   95.7% with a 34px inset. Measured against production, 1.5rem of padding on a
   full-width container reproduces that inset exactly.

   This is deliberately not `container-wide`: that one keeps a 0.5rem padding
   because the portfolio analyzer's 17-column tables already overflow by 14px
   and 42px, and widening its padding to 1.5rem would push them to 46px and
   74px. Dense tables want every pixel; ordinary pages want the old margin. */
html[data-layout=topnav] .content-page > .container-fluid.container-app,
.content-page > .container-fluid.container-app {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 575.98px) {
    html[data-layout=topnav] .content-page > .container-fluid.container-app,
    .content-page > .container-fluid.container-app {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* 16. The chart picker on the historical ratios tab
   ------------------------------------------------------------------------
   Ninety checkboxes in a modal is a wall of text, and a bare `.form-check`
   gives the reader a two-pixel target and no sense of what is already on.
   Each option becomes a row the whole width of its column: the label fills it,
   so the click target is the row rather than the box, and a chosen one is
   tinted so the current selection reads at a glance instead of by squinting at
   the ticks.

   The colours are theme variables, not literals. An earlier panel in this
   project hardcoded `#fafafa` and became light grey text on a white card in
   dark mode. */
.ratio-chart-option .form-check {
    margin: 0;
    padding: .4rem .5rem .4rem 2rem;
    border: 1px solid transparent;
    border-radius: var(--ins-border-radius, .375rem);
}

.ratio-chart-option .form-check:hover {
    background-color: var(--ins-tertiary-bg);
}

.ratio-chart-option .form-check-label {
    display: block;
    cursor: pointer;
    font-size: .8125rem;
    line-height: 1.35;
}

.ratio-chart-option .form-check-input:checked ~ .form-check-label {
    font-weight: 600;
}

.ratio-chart-option:has(.form-check-input:checked) .form-check {
    background-color: var(--ins-tertiary-bg);
    border-color: var(--ins-border-color);
}

/* The daily / quarterly note is secondary to the name it follows, so it is
   pushed down a size rather than given a colour of its own. */
.ratio-chart-option .ratio-chart-cadence {
    color: var(--ins-secondary-color);
    font-size: .6875rem;
    font-weight: 400;
}

/* The controls above each chart. The chart is what the reader came for, so they
   stay out of the way until the pointer is somewhere near them. Always visible
   on a touch screen, where there is no hover to reveal them with. */
.ratio-chart-tools {
    min-height: 1.75rem;
    opacity: .25;
    transition: opacity .15s ease-in-out;
}

.ratio-chart-slot:hover .ratio-chart-tools,
.ratio-chart-tools:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .ratio-chart-tools {
        opacity: 1;
    }
}

/* 17. The Summary card rows fill the width they are given
   ------------------------------------------------------------------------
   Both rows are built out of `col-xl-2` columns, six of which make exactly one
   full row. But every card in them is conditional -- the price to book model
   only applies to a bank, the dividend discount model only to a company paying
   a real dividend, and the context row has three cards at most -- so the usual
   case is four cards filling two thirds of the width, or three filling half,
   with the rest of the line empty.

   Letting the columns grow fixes it without touching the markup or teaching
   the view to count its own cards: `col-xl-2` sets `flex: 0 0 auto` with a
   width of 16.667%, so adding flex-grow keeps that width as the starting point
   and hands the leftover space out equally. Four cards become a quarter each,
   three become a third, six stay exactly as they are.

   At the widest breakpoint it cannot overflow into a second line: those rows
   can never render more than six and eight cards respectively, and six is
   already the whole width, so nothing is left to wrap. (The rating that now
   sits beside the valuation models is in a column of its own outside this row,
   for exactly that reason -- inside it, the rating plus five models came to
   fourteen columns and the card pushed onto the second line grew to the full
   width of the page.)

   Narrower than that the row does wrap, three or two cards to a line, and a
   single card left over on the last line would grow to fill the whole of it.
   A card the width of the page is not a card, so the growth is capped at half
   the row. The cap starts at the breakpoint where the cards stop being full
   width in the first place: below it they are meant to be 100%, and capping
   them would cut them in half. */
.summary-cards > [class*="col-"] {
    flex-grow: 1;
}

@media (min-width: 768px) {
    .summary-cards > [class*="col-"] {
        max-width: 50%;
    }
}

/* 18. The rating on the stock comparison
   ------------------------------------------------------------------------
   The score is a number out of a hundred, and a number out of a hundred read
   five times across a row is work. The bar underneath it carries the same value
   as a length, which is the part the eye reads without counting, and the number
   stays for whoever wants the figure.

   Colours come from the theme variables, and the bar is filled with the primary
   colour rather than a red-to-green scale on purpose: the score is a position
   among the stocks compared, not a verdict on any of them, and a red cell would
   say the second best of four is bad. */
.compare-tile-rating {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .5rem;
}

.compare-rating-value {
    display: block;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.compare-rating-bar {
    display: block;
    height: 3px;
    margin-top: .25rem;
    border-radius: 2px;
    background-color: var(--ins-tertiary-bg);
    overflow: hidden;
}

.compare-rating-bar > span {
    display: block;
    height: 100%;
    background-color: var(--ins-primary);
}

.compare-rating-total {
    font-weight: 600;
}

.compare-rating-total .compare-rating-bar {
    height: 5px;
}

/* The tables below this one are DataTables, which gives every column 16.66% of
   the width. This one is plain markup, so it has to be told the same thing or
   its label column grows to fit the text and none of the stock columns line up
   with the tables underneath. */
.compare-rating {
    table-layout: fixed;
}

.compare-rating th,
.compare-rating td {
    width: 16.66%;
}

/* The winning cell of a ranked row. A tint rather than coloured text, because
   the text in these tables already uses colour to mean undervalued, overvalued
   and the analyst consensus, and a fourth meaning on the same channel would be
   unreadable. */
.compare-leader {
    background-color: color-mix(in srgb, var(--ins-primary) 12%, transparent);
    font-weight: 600;
}

/* 19. The ten year snapshot on the summary page
   ------------------------------------------------------------------------
   Six cards under the indicators: a figure, how it moved over the decade, and
   the shape of the decade. The point of the block is that the whole thing is
   readable without stopping, so the hierarchy is deliberate -- the figure is
   the largest thing in the card, the name above it is small and quiet, and the
   chart is a shape rather than a diagram, with no axis titles and no more
   gridline labels than it takes to place the years.

   Every colour is a theme variable. The chart series colours are literals in
   the template because CanvasJS is handed them, but nothing here is. */
.dash-card .card-body {
    padding: 1rem 1.125rem .75rem;
}

.dash-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.dash-card-title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ins-secondary-color);
    line-height: 1.25;
}

.dash-card-delta {
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    /* It carries a title attribute explaining what the number is, so it should
       look like something worth hovering. */
    cursor: help;
}

.dash-card-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ins-body-color);
    font-variant-numeric: tabular-nums;
    margin-top: .125rem;
}

.dash-card-note {
    font-size: .6875rem;
    color: var(--ins-secondary-color);
}

/* Fixed, and the same number CanvasJS is given for the chart height. A canvas
   with no height renders at the library's default and the six cards come out
   different sizes. */
.dash-card-chart {
    height: 132px;
    width: 100%;
    margin-top: .25rem;
}

@media (max-width: 575.98px) {
    .dash-card-value {
        font-size: 1.5rem;
    }
}

/* 20. The series switches on the summary price chart
   ---------------------------------------------------------------------------
   CanvasJS's legend has toggled a line on click since the moving averages were
   added, but a legend does not look like a control, so readers took the four
   averages as something they were stuck with. These are the same switch drawn
   as a checkbox, which does.

   The swatch is painted from the series colour in JavaScript rather than here,
   because the colours belong to the chart: a stylesheet copy of them is one
   more place to forget when a line is added. */
.chart-series-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
    /* Empty until the chart has been drawn, and an empty row must not leave a
       gap above the chart. */
    min-height: 0;
}

.chart-series-toggles:empty {
    margin-bottom: 0;
}

.chart-series-toggle {
    margin-bottom: 0;
    padding-left: 1.6em;
}

.chart-series-toggle .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: var(--ins-body-color);
    cursor: pointer;
}

.chart-series-toggle .form-check-input {
    cursor: pointer;
}

/* A dash rather than a dot: it reads as the line it stands for. */
.chart-series-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    /* The colour arrives inline from the series; this is only the fallback for
       a series that somehow has none. */
    background-color: var(--ins-secondary-color);
}

/* An unchecked series is still named, but quietly, so the row reads as a list
   of what is on rather than a list of everything. */
.chart-series-toggle .form-check-input:not(:checked) + .form-check-label {
    color: var(--ins-secondary-color);
}

.chart-series-toggle .form-check-input:not(:checked) + .form-check-label .chart-series-swatch {
    opacity: .35;
}


/* 21. The wide charts under the ten year snapshot
   ---------------------------------------------------------------------------
   Two to a row rather than three, because every one of them carries several
   series and a legend: at the width of the snapshot cards above, the legend
   alone would take the space the chart needs.

   The height is fixed and matches the number CanvasJS is given, for the same
   reason as the cards above -- a canvas with no height renders at the library's
   default and the six charts come out different sizes. */
.trend-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.trend-card-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ins-body-color);
}

.trend-card-span {
    font-size: .6875rem;
    color: var(--ins-secondary-color);
    white-space: nowrap;
}

/* Said once, quietly, under the title: why a series the reader might expect is
   not on the chart. Left out entirely when there is nothing to explain. */
.trend-card-note {
    font-size: .6875rem;
    line-height: 1.35;
    color: var(--ins-secondary-color);
    margin-top: .25rem;
}

.trend-card-chart {
    height: 250px;
    width: 100%;
    margin-top: .5rem;
}

@media (max-width: 575.98px) {
    .trend-card-chart {
        height: 220px;
    }
}


/* 22. The rating of a single stock, on the summary
   ---------------------------------------------------------------------------
   The score arrives as a number from the server and has to become an arc and
   four bars, so the widths and the dash offset are set from JavaScript. What is
   here is everything that is not the value itself: the geometry, the colours of
   the three bands and the transitions that make the card fill rather than
   appear.

   The three band colours are the theme's own primary, warning and danger, named
   here once so the arc, the score, the pillar bars and the breakdown rows all
   read the same scale. They are literals because the theme exposes its
   semantic colours only as component classes, and a bar is not a component. */
/* Laid out across rather than down. Stacked, this card ran about twice the
   height of a fair value card, and every card in that row carries h-100, so the
   whole row grew to match it and the fair value cards came out mostly empty
   space. Side by side the card lands within a few pixels of its neighbours and
   the row keeps the height it had. */
.rating-card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Two lines: the gauge beside the bars, then the footnote across the
       bottom. Spreading them puts the footnote on the floor of the card
       instead of leaving a gap under it. */
    align-content: space-between;
    gap: .5rem .875rem;
    padding-top: .5rem;
}

/* The figure sits inside the arc rather than under it, which is the other half
   of keeping this card short. */
.rating-gauge {
    position: relative;
    flex: 0 0 auto;
    width: 128px;
}

.rating-gauge svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.rating-arc-track,
.rating-arc-value {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
}

.rating-arc-track {
    stroke: var(--ins-tertiary-bg);
}

.rating-arc-value {
    stroke: var(--ins-secondary-color);
    transition: stroke-dashoffset 1.1s cubic-bezier(.22, .61, .36, 1);
}

.rating-gauge-figure {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    text-align: center;
    line-height: 1.1;
}

.rating-score {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.rating-verdict {
    display: block;
    font-size: .6875rem;
    color: var(--ins-secondary-color);
}

/* ---- the three bands ---- */
.rating-excellent,
.rating-good {
    stroke: #1ab394;
    color: #1ab394;
}

.rating-fair {
    stroke: #f8ac59;
    color: #f8ac59;
}

.rating-weak,
.rating-poor {
    stroke: #ed5565;
    color: #ed5565;
}

/* ---- the pillar rows ---- */
.rating-pillars {
    display: flex;
    flex-direction: column;
    gap: .3125rem;
    /* Takes what is left beside the gauge, and may wrap under it on a narrow
       card. min-width is what lets it shrink at all inside a flex row. */
    flex: 1 1 10rem;
    min-width: 0;
}

.rating-pillar {
    display: grid;
    /* The name column is fixed so the four bars start at the same place; a
       column sized to the content would step in and out with the translation. */
    grid-template-columns: 6.5rem 1fr 1.5rem;
    align-items: center;
    gap: .375rem;
    font-size: .6875rem;
}

.rating-pillar-name {
    color: var(--ins-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rating-pillar-score {
    text-align: right;
    font-weight: 600;
    color: var(--ins-body-color);
}

.rating-bar {
    display: block;
    height: 5px;
    border-radius: 3px;
    background-color: var(--ins-tertiary-bg);
    overflow: hidden;
}

.rating-bar-fill {
    display: block;
    height: 100%;
    /* Starts empty and is widened from JavaScript, which is what the animation
       is; a bar rendered at its width would just be there. */
    width: 0;
    border-radius: 3px;
    background-color: var(--ins-secondary-color);
    transition: width .9s cubic-bezier(.22, .61, .36, 1);
}

.rating-bar-fill.rating-good { background-color: #1ab394; }
.rating-bar-fill.rating-fair { background-color: #f8ac59; }
.rating-bar-fill.rating-poor { background-color: #ed5565; }

/* Full width under both, so neither the gauge nor the bars has to make room
   for it. */
.rating-footnote {
    flex: 1 0 100%;
    font-size: .625rem;
    line-height: 1.3;
    color: var(--ins-secondary-color);
}

.rating-thin {
    display: block;
    color: #f8ac59;
}

.rating-details-label {
    cursor: pointer;
}

/* ---- the breakdown in the modal ---- */
.rating-breakdown-pillar + .rating-breakdown-pillar {
    margin-top: 1.25rem;
}

.rating-breakdown-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--ins-border-color);
    padding-bottom: .25rem;
}

.rating-breakdown-score {
    font-weight: 700;
}

.rating-breakdown-table td {
    vertical-align: middle;
    font-size: .8125rem;
}

.rating-metric-value {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

/* What the reading was measured against, said in the row rather than in a
   legend nobody reads. */
.rating-metric-against {
    white-space: nowrap;
    font-size: .75rem;
    color: var(--ins-secondary-color);
}

.rating-metric-score {
    width: 30%;
    min-width: 7rem;
}

.rating-metric-score .rating-bar {
    display: inline-block;
    width: calc(100% - 2.5rem);
    vertical-align: middle;
}

.rating-metric-number {
    display: inline-block;
    width: 2.25rem;
    text-align: right;
    font-weight: 600;
    font-size: .75rem;
}

/* Someone who has asked not to see motion gets the same numbers without it. */
@media (prefers-reduced-motion: reduce) {
    .rating-arc-value,
    .rating-bar-fill {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    /* On a phone the bars wrap under the gauge, and a gauge alone on its line
       belongs in the middle of the card rather than shoved against the left
       edge. */
    .rating-gauge {
        width: 104px;
        margin-inline: auto;
    }

    .rating-pillar {
        grid-template-columns: 5.5rem 1fr 1.5rem;
    }

    .rating-metric-against {
        display: none;
    }
}


/* 23. The sparklines in the financial statement tables
   ---------------------------------------------------------------------------
   These rules were missing outright. finSparkline() in metrics.html emits a
   `.fin-spark` SVG carrying only a viewBox, and an SVG with no width or height
   falls back to the browser's default intrinsic size: the 48x16 sparkline was
   rendering at 187x62, in solid black because a <rect> with no fill is black,
   overflowing the first column and covering the oldest year of every row. The
   hover card was worse -- `.fin-pop` is appended to <body> with no positioning
   and no hidden state at all.

   Nothing here changes the markup; it only gives the classes the JavaScript
   has always emitted the styles they were written to have. */
.fin-first {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* The sparkline must not shrink when a long row label pushes against it, and
   line-height would otherwise add a couple of pixels under an inline SVG. */
.fin-trend {
    flex: 0 0 auto;
    line-height: 0;
    cursor: pointer;
}

.fin-trend:focus-visible {
    outline: 2px solid var(--ins-primary, #1ab394);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The size the viewBox was drawn for. Without it the browser picks 300x150. */
.fin-spark {
    display: block;
    width: 48px;
    height: 16px;
}

.fin-spark rect {
    fill: #1ab394;
}

.fin-spark rect.is-neg {
    fill: #ed5565;
}

/* A figure with a bar under it. finBarCell writes --fin-v as the length of
   the bar in percent, so the width is the only thing the stylesheet has to
   work out. Anchored right, which is the side the figures are aligned to.

   is-abs means the script scaled the bar against 0-100 rather than against the
   largest figure in its own row. That changes what the length means, not how
   it looks, so it is deliberately drawn the same. */
.fin-cell {
    position: relative;
    display: block;
    padding-bottom: 4px;
}

.fin-cell::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(var(--fin-v, 0) * 1%);
    height: 2px;
    border-radius: 1px;
    background-color: #1ab394;
    opacity: .55;
}

.fin-cell.is-neg::after {
    background-color: #ed5565;
}

/* A growth figure over a tint proportional to the move. finHeatCell writes
   --fin-a as the alpha, already capped so one exceptional year does not leave
   every other cell looking blank. The text colour is set in the markup. */
.fin-heat {
    display: block;
    padding: .125rem .25rem;
    border-radius: .1875rem;
    background-color: rgba(26, 179, 148, var(--fin-a, .08));
}

.fin-heat.is-neg {
    background-color: rgba(237, 85, 101, var(--fin-a, .08));
}

/* ---- the card that opens on hover ---- */
.fin-pop {
    position: fixed;
    z-index: 1070;
    /* Hidden until finShowPopover adds is-open. It is created once and reused,
       so without this it would sit at the foot of the page from the first
       hover onwards. */
    display: none;
    padding: .75rem .875rem .5rem;
    border: 1px solid var(--ins-border-color);
    border-radius: .5rem;
    background-color: var(--ins-dropdown-bg, var(--ins-body-bg));
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    pointer-events: none;
}

.fin-pop.is-open {
    display: block;
}

.fin-pop-title {
    margin: 0 0 .25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ins-body-color);
}

.fin-pop-chart {
    display: block;
}

.fin-pop-chart .fin-bar {
    fill: #1ab394;
}

.fin-pop-chart .fin-bar.is-neg {
    fill: #ed5565;
}

.fin-pop-chart .fin-grid {
    stroke: var(--ins-border-color);
    stroke-width: 1;
}

/* The zero line is the one the reader measures against, so it is drawn
   solid and darker than the other two. */
.fin-pop-chart .fin-zero {
    stroke: var(--ins-secondary-color);
    stroke-width: 1;
}

.fin-pop-chart text {
    fill: var(--ins-secondary-color);
    font-size: 9px;
}

/* The caret. finShowPopover writes --fin-caret as the distance from the left
   edge of the card to the middle of the sparkline, so it keeps pointing at it
   even when the card has been pushed away from a screen edge. */
.fin-pop::after {
    content: "";
    position: absolute;
    left: var(--fin-caret, 50%);
    margin-left: -6px;
    border: 6px solid transparent;
}

.fin-pop:not(.is-below)::after {
    top: 100%;
    border-top-color: var(--ins-border-color);
}

.fin-pop.is-below::after {
    bottom: 100%;
    border-bottom-color: var(--ins-border-color);
}

/* No room for a 48px sparkline beside the label on a phone, and the tables
   scroll horizontally there anyway. */
@media (max-width: 575.98px) {
    .fin-trend {
        display: none;
    }
}


/* 24. The week of earnings
   ---------------------------------------------------------------------------
   Five day columns, each split into the two sessions, laid out with grid so
   the columns stay equal whatever any one day holds -- a Wednesday with eight
   companies must not make Monday narrow. It becomes a horizontal scroller
   rather than reflowing below the laptop width: a week that wraps onto two
   rows is no longer a week you can read at a glance, which is the whole point
   of the block. */
.earnings-week-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.earnings-week-subtitle {
    display: block;
    font-size: .75rem;
    color: var(--ins-secondary-color);
}

.earnings-week-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
}

.earnings-week-picker {
    width: 9.5rem;
}

.earnings-week-range {
    font-size: .75rem;
    color: var(--ins-secondary-color);
    margin-bottom: .5rem;
}

.earnings-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

@media (max-width: 1199.98px) {
    .earnings-grid {
        /* Below this the five columns stop being legible, so the block scrolls
           sideways with the columns at a fixed width instead of wrapping. */
        grid-template-columns: repeat(5, minmax(12rem, 1fr));
        overflow-x: auto;
        padding-bottom: .5rem;
    }
}

.earnings-day {
    border: 1px solid var(--ins-border-color);
    border-radius: .5rem;
    padding: .5rem;
    background-color: var(--ins-tertiary-bg);
}

/* A day with nothing on it stays in place, quietly, so the week keeps its
   shape and an empty Friday reads as empty rather than as missing. */
.earnings-day.is-empty {
    opacity: .5;
}

.earnings-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .375rem;
    padding-bottom: .375rem;
    border-bottom: 1px solid var(--ins-border-color);
    margin-bottom: .5rem;
}

.earnings-day-name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ins-body-color);
}

.earnings-day-date {
    font-size: .6875rem;
    color: var(--ins-secondary-color);
}

.earnings-sessions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.earnings-session-head {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ins-secondary-color);
    margin-bottom: .25rem;
}

/* The two session colours are the same ones the detail table uses for its sun
   and its moon, so the grid and the list read as one page. */
.earnings-before {
    color: #e9ca26;
}

.earnings-after {
    color: var(--ins-secondary-color);
}

/* One company. The logo does the recognising, which is why the tile is built
   around it and the ticker sits underneath in small type. */
.earnings-tile {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .375rem;
    border-radius: .375rem;
    text-decoration: none;
    color: inherit;
}

.earnings-tile:hover {
    background-color: var(--ins-secondary-bg, rgba(0, 0, 0, .04));
}

/* Contained rather than covering: these are wordmarks of every shape, and
   cropping them to a square cuts the name in half. */
.earnings-logo {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: .25rem;
    background-color: #fff;
}

.earnings-symbol {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ins-body-color);
}

.earnings-cap {
    margin-left: auto;
    font-size: .6875rem;
    color: var(--ins-secondary-color);
    white-space: nowrap;
}

.earnings-more,
.earnings-unscheduled {
    display: block;
    font-size: .625rem;
    color: var(--ins-secondary-color);
    padding-left: .375rem;
}

.earnings-unscheduled {
    margin-top: .5rem;
    padding-top: .375rem;
    border-top: 1px dashed var(--ins-border-color);
}

.earnings-week-note {
    font-size: .6875rem;
    color: var(--ins-secondary-color);
    margin: .75rem 0 0;
}

/* ---- what the second source says ---- */
.earnings-check {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .75rem;
    padding-top: .625rem;
    border-top: 1px solid var(--ins-border-color);
    font-size: .6875rem;
    color: var(--ins-secondary-color);
}

.earnings-check-line {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
}

.earnings-check-moved a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.earnings-ok {
    color: #1ab394;
}

/* Amber rather than red: a date that moved is worth knowing, it is not a
   failure. */
.earnings-moved,
.earnings-check-moved {
    color: #f8ac59;
}

/* ---- the day filter over the detailed list ---- */
.earnings-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.earnings-day-filter {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.earnings-day-picker {
    width: 9.5rem;
}

@media (max-width: 767.98px) {
    .earnings-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .earnings-day-filter {
        width: 100%;
    }

    .earnings-day-picker {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .earnings-week-header {
        flex-direction: column;
    }

    .earnings-week-picker {
        width: 100%;
    }

    /* At the column width the sideways scroller uses there is no room for the
       capitalisation beside the ticker, and half a figure is worse than none.
       It is in the table below either way. */
    .earnings-cap {
        display: none;
    }
}
/* 25. The concentration figures on a portfolio
   ==========================================================================
   A band inside the positions card, between its header and the table, because
   these four numbers are readings of the rows underneath and not a separate
   subject; in a card of their own they read as another thing to look at and
   cost a whole row of the page.

   Laid out with space-between so the figures reach both edges of the card at
   any width, and wrapping rather than scrolling: the table below it already
   scrolls sideways, and a second scrolling strip on top of it would be
   miserable to use.

   The chips carry no green or red. Being overweight a sector is not a mistake
   -- it is usually the reason the portfolio exists -- and colouring it as one
   would be the page giving advice it has no business giving. The direction is
   in the arrow. */

.concentration-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.concentration-figure {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* The sector chips sit at the far right and read towards it. They are not
   allowed to grow: giving this item the free space would let it swallow
   everything space-between had to distribute, and the four figures would end
   up huddled against the left edge instead of spread across the card. */
.concentration-sectors {
    align-items: flex-end;
    text-align: right;
}

.concentration-label {
    color: var(--ins-secondary-color);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
}

.concentration-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 1rem;
}

.concentration-value strong {
    font-size: 1.3rem;
    line-height: 1.1;
}

.concentration-flag {
    font-size: 1rem;
}

.concentration-gap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--ins-border-color);
    border-radius: 2rem;
    background-color: var(--ins-tertiary-bg);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Anything with an explanation attached says so, so that it is worth hovering
   over in the first place. */
.concentration-figure[data-bs-toggle],
.concentration-label[data-bs-toggle],
.concentration-gap[data-bs-toggle] {
    cursor: help;
}

/* Below the width the table needs anyway, the figures stop being a row and
   become two columns, which keeps each number under its own label instead of
   wrapping into the one beside it. */
@media (max-width: 767.98px) {
    .concentration-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .concentration-sectors {
        grid-column: 1 / -1;
        align-items: flex-start;
    }
}
/* 26. The labels inside the Morris donuts
   ==========================================================================
   Morris paints the label in the middle of a donut with a hardcoded
   labelColor of #000000, so in the dark theme the name and the percentage --
   the two things the chart is actually for -- were near-black on a near-black
   card.

   It is fixed here rather than by passing labelColor into each chart because
   the theme can be switched while the page is open: a colour read once at
   build time would be wrong from the next toggle onwards, and Morris would
   have to be told to redraw. A stylesheet follows the variable on its own.

   This works because Raphael writes the colour as a `fill` attribute on the
   <text> element and leaves `fill` out of the inline style it also sets; any
   stylesheet rule beats a presentation attribute, so no !important is needed.
   Checked against the bundled Raphael 2.1.0: the rule survives hovering a
   segment, which rewrites the label text.

   Scoped to the donuts on purpose. The bars and lines on the metrics page
   draw their axes with Morris's own gridTextColor of #888, which is a
   deliberate mid grey that reads on either background, and pulling those up
   to the body colour would make the axes shout over the data. */

.morris-donut svg text {
    fill: var(--ins-body-color);
}

/* 27. The price chart on the metrics page
   ==========================================================================
   The price chart is drawn by Lightweight Charts, which has no tooltip of its
   own: the values under the crosshair are written in a line laid over the top
   left corner of the chart instead, the way TradingView does it. The box is
   positioned so that line can sit on top of the canvas the library appends,
   and the line lets the pointer through so it never blocks the crosshair.

   The height used to be an inline style; it lives here now so the two rules
   that shape the box are read together. */

.stock-chart-canvas {
    position: relative;
    height: 371px;
    width: 100%;
}

.stock-chart-legend {
    position: absolute;
    top: 6px;
    left: 10px;
    right: 70px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ins-body-color);
    pointer-events: none;
}

.stock-chart-legend-date {
    color: var(--ins-secondary-color);
}

.stock-chart-legend-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.stock-chart-legend-label {
    color: var(--ins-secondary-color);
    margin-right: 2px;
}

.stock-chart-legend .chart-series-swatch {
    margin-right: 4px;
}

/* 28. The technical analysis page
   ==========================================================================
   A page of its own because the metrics page is about the business and this
   one is about the price, and the price chart there had run out of room for
   oscillators. The chart reuses the legend and toggle styles of section 27 and
   of the metrics chart, so the two read as the same control.

   The chart box grows with every panel switched on (the script sets its
   height), so it is positioned for the legend but given no height here. */

.ta-summary {
    margin-bottom: 1.5rem;
}

.ta-card .card-body {
    padding: 1rem 1.125rem;
}

.ta-card-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ins-secondary-color);
    margin-bottom: .35rem;
}

.ta-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--ins-emphasis-color);
}

.ta-card-note {
    font-size: .8125rem;
    color: var(--ins-secondary-color);
    margin-top: .25rem;
}

/* The rating meter and the 52 week range are both a track with a marker on
   it. The meter runs red to green because it is a sell-to-buy scale; the
   range is a neutral track because being near the low is not by itself bad. */
.ta-meter,
.ta-range {
    position: relative;
    height: 6px;
    border-radius: 3px;
    margin: .6rem 0 .35rem;
}

.ta-meter {
    background: linear-gradient(90deg, var(--ins-danger), var(--ins-warning), var(--ins-primary));
}

.ta-range {
    background-color: var(--ins-tertiary-bg);
    border: 1px solid var(--ins-border-color);
}

.ta-meter-marker,
.ta-range-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--ins-body-bg);
    border: 2px solid var(--ins-body-color);
    transition: left .3s ease;
}

.ta-range-ends {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--ins-secondary-color);
}

.ta-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ta-toggle-groups {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 2rem;
    margin-bottom: .75rem;
}

.ta-toggle-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.ta-toggle-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ins-secondary-color);
}

/* The toggles of section 27 carry their own bottom margin for the metrics
   card; inside a labelled group that margin only pushes the row apart. */
.ta-toggle-group .chart-series-toggles {
    margin-bottom: 0;
}

.ta-chart {
    position: relative;
    width: 100%;
    min-height: 380px;
}

.ta-symbol-form {
    display: flex;
    gap: .25rem;
}

.ta-symbol-form .form-control {
    width: 10rem;
    text-transform: uppercase;
}

.ta-disclaimer {
    font-size: .8125rem;
    color: var(--ins-secondary-color);
    margin: 1rem 0 2rem;
}

/* The link from the metrics price chart to the technical analysis page sits
   beside the chart title, so it is sized like the performance figure next to
   it rather than like a button, which would compete with the chart controls. */
.stock-chart-more {
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}
/* 29. The superinvestor panels
   ==========================================================================
   Two places read the same stored 13F filings: the board above the investor
   list, and a few lines in the summary of a stock page. They share the
   activity marker, so they share its rules here rather than each inventing
   their own green and red.

   The ranking tables are deliberately plain. They are ten rows of two numbers
   each and they sit four to a screen; anything more than type weight competing
   for attention makes the page harder to read, not richer. */

.superinvestor-panel td,
.superinvestor-panel th {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.superinvestor-panel th {
    color: var(--ins-secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Up and down, side by side, in one cell. Numbers rather than arrows alone,
   because "three bought, one sold" is the whole sentence. */
.superinvestor-activity {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.superinvestor-activity i {
    font-size: 0.875rem;
    vertical-align: -1px;
}

/* The lines inside the stock summary. They sit in a column of single line
   statistics, so the names go underneath rather than fighting for the width of
   the value on the right. */
.superinvestor-stat-names {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.25rem;
}

.superinvestor-stat-name {
    font-size: 0.8125rem;
    color: var(--ins-body-color);
}

.superinvestor-stat-name i {
    font-size: 0.8125rem;
    vertical-align: -1px;
}

.superinvestor-stat-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--ins-border-color);
}

.superinvestor-stat-link:hover {
    color: var(--ins-primary);
}

.superinvestor-stat-help {
    cursor: help;
    color: var(--ins-secondary-color);
    margin-left: 0.15rem;
}

/* 30. The options panel
   ==========================================================================
   Shown on the portfolio pages and on the analyzer, and only for a portfolio
   that has ever had an option in it.

   The strip at the top reuses the shape of the concentration band above the
   positions table -- a row of labelled figures, wrapping, reaching both edges
   -- because it is the same kind of thing: readings of the rows underneath,
   not a separate subject.

   What is different is the notices line. A portfolio's concentration is a
   standing fact that can be read whenever; an option at twenty one days is a
   decision with a deadline on it, and a deadline buried in a column of a table
   the reader never scrolled to has not been communicated. So the counts are
   lifted out above the table where they are read before anything else.

   The colours come from the theme's own semantic variables rather than from
   hex values, so the panel follows the dark theme without a second set of
   rules. There is no green anywhere: a position being safe is the normal case
   and does not need announcing, while the two states that need acting on --
   about to expire, and through the strike -- get the warning and danger
   colours the rest of the site already uses for the same meaning. */

.options-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.options-figure {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.options-label {
    color: var(--ins-secondary-color);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
}

.options-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 1.05rem;
}

.options-value small {
    font-size: 0.8125rem;
}

/* The line that answers "is there anything to do this week". Tinted rather
   than filled: these are things to notice on the way to the table, not alerts
   demanding to be dismissed, and five solid blocks of colour above a table
   would drown the table. */
.options-notices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.options-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.4;
    border: 1px solid transparent;
}

.options-notice i {
    font-size: 1rem;
}

/* color-mix keeps these in step with the theme: the tint is derived from the
   same variable as the text, so a change of palette moves both together and
   neither can end up unreadable against the other. */
.options-notice-urgent {
    color: var(--ins-danger);
    border-color: color-mix(in srgb, var(--ins-danger) 35%, transparent);
    background: color-mix(in srgb, var(--ins-danger) 10%, transparent);
}

.options-notice-manage,
.options-notice-review {
    color: var(--ins-warning);
    border-color: color-mix(in srgb, var(--ins-warning) 35%, transparent);
    background: color-mix(in srgb, var(--ins-warning) 12%, transparent);
}

.options-notice-money {
    color: var(--ins-danger);
    border-color: color-mix(in srgb, var(--ins-danger) 35%, transparent);
    background: color-mix(in srgb, var(--ins-danger) 10%, transparent);
}

/* The same pill with nothing to warn about. It is drawn rather than left out
   because a warning that only exists when it fires cannot be told apart from
   one that was never built: with no position inside 21 days, the row said
   nothing about it and it read as a missing feature. */
.options-notice-none {
    color: var(--ins-secondary-color);
    border-color: var(--ins-border-color);
}

.options-kind {
    color: var(--ins-secondary-color);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* The countdown. A number on its own in a column is easy to slide past, so the
   two that matter are given a shape as well as a colour -- somebody who does
   not distinguish red from grey still sees a filled pill. */
.options-dte {
    display: inline-block;
    min-width: 2.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.options-dte-urgent {
    color: var(--ins-danger);
    background: color-mix(in srgb, var(--ins-danger) 15%, transparent);
    font-weight: 600;
}

.options-dte-manage {
    color: var(--ins-warning);
    background: color-mix(in srgb, var(--ins-warning) 15%, transparent);
    font-weight: 600;
}

/* A hairline down the left of the row, so a position needing attention is
   findable by running an eye down the edge of the table rather than by reading
   every countdown. Left as a border and not a background: a tinted row would
   fight the table's own hover state. */
.options-row-urgent > td:first-child {
    box-shadow: inset 3px 0 0 var(--ins-danger);
}

.options-row-manage > td:first-child {
    box-shadow: inset 3px 0 0 var(--ins-warning);
}

.options-flag {
    margin-left: 0.2rem;
    font-size: 1rem;
    vertical-align: -0.1em;
}

/* On a phone the table has ten columns and the reader has one question:
   which of these needs deciding this week. Scrolling sideways to reach the
   countdown answers it badly, so the descriptive columns are dropped and what
   is left -- symbol, days, contracts, credit and the warning flags -- fits
   across the screen. Nothing is lost: the full table is a rotation away. */
@media (max-width: 767.98px) {
    .options-col-secondary {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .options-strip,
    .options-notices {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* On a phone the figures stop reaching for both edges and simply queue up:
       space-between across two columns leaves a gap in the middle that reads
       as a missing value. */
    .options-strip {
        justify-content: flex-start;
        gap: 0.75rem 1.25rem;
    }
}

/* 31. The notification bell and the follow button
   ==========================================================================
   Two parts of one feature: choosing to be told about a manager, and being
   told.

   The badge is a count on an icon, so it has to be legible at eleven pixels
   against whatever the icon is sitting on. It is given its own line-height
   rather than inheriting, because the theme's badge padding is built for a
   badge with a word in it and leaves a lopsided circle around a digit.

   The dropdown is capped and scrolls. A quarter end can produce a dozen of
   these in a day, and a menu taller than the window is one whose last item
   cannot be reached at all on a laptop.

   Unread is marked with a bar down the left rather than a coloured
   background: a tinted row fights the theme's own hover state, and the row is
   a link people are meant to click. */

.notification-badge {
    position: absolute;
    top: -0.15rem;
    right: -0.1rem;
    min-width: 1.05rem;
    padding: 0.1rem 0.25rem;
    font-size: 0.65rem;
    line-height: 0.85rem;
    font-weight: 600;
}

.notification-menu {
    width: 22rem;
    max-width: calc(100vw - 1.5rem);
    padding-bottom: 0;
}

.notification-list {
    max-height: 60vh;
    overflow-y: auto;
}

.notification-item {
    display: block;
    white-space: normal;
    padding: 0.6rem 1rem 0.6rem 0.85rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--ins-border-color);
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-unread {
    border-left-color: var(--ins-primary);
}

.notification-title {
    font-weight: 600;
    line-height: 1.3;
}

/* The summary line of a filing runs long -- four counts and a manager's name
   -- and a dropdown is not the place to read all of it. Two lines, then it
   stops; the page behind the link has the rest. */
.notification-body {
    color: var(--ins-secondary-color);
    font-size: 0.8125rem;
    line-height: 1.35;
    margin-top: 0.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-when {
    color: var(--ins-secondary-color);
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

.notification-empty {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* The follow button sits in a table of numbers, so it is sized to the row
   rather than to a form, and its label never wraps: a button that is two
   lines tall in Spanish and one in English makes every row a different
   height. */
.superinvestor-follow,
.superinvestor-follow-locked {
    white-space: nowrap;
    font-size: 0.8125rem;
}

/* The locked state is an invitation, not an error. It is the same shape as
   the real button so the reader can see what they would get, in the muted
   colour the rest of the site uses for content behind a plan. */
.superinvestor-follow-locked {
    color: var(--ins-secondary-color);
    text-decoration: none;
}

.superinvestor-follow-locked:hover {
    color: var(--ins-primary);
}


/* 32. The fair value card leads the Summary row
   ------------------------------------------------------------------------
   The fair value is the headline of the page, but it shared the size, the
   border and the 1.5rem figure of every model card next to it, so nothing told
   the eye where to start. It now takes twice the width, carries a primary
   border and a tinted header, and its figure is set larger. The colours come
   from theme variables so the card works in both themes. */
.summary-card-featured {
    border: 2px solid var(--ins-primary);
}

.summary-card-featured .summary-card-header {
    background-color: var(--ins-tertiary-bg);
}

.summary-card-featured .summary-card-header .card-title {
    font-size: 1rem;
}

.summary-card-featured .summary-value {
    font-size: 2.25rem;
}

.summary-card-featured .summary-label {
    font-size: .875rem;
}

.summary-card-featured .summary-diff {
    font-size: 1.125rem;
}


/* 33. The economic calendar
   ==========================================================================
   Events are grouped under a heading per day inside one table, so the columns
   stay aligned from the first day to the last instead of each day being its
   own table with its own widths.

   The impact indicator is three bars filled from the left, not a coloured dot:
   the number of filled bars carries the level, so it still reads for a
   colour-blind visitor and in either theme. The fill colour comes from the
   theme's own danger / warning / secondary variables. Actual-versus-forecast
   colouring is done with the theme's text-success / text-danger classes in the
   markup, so nothing here hardcodes a colour. */

.economic-calendar-subtitle {
    color: var(--ins-secondary-color);
    font-size: .875rem;
}

.economic-calendar-table .ec-col-time {
    width: 5rem;
}

.economic-calendar-table .ec-col-country {
    width: 8rem;
}

.economic-calendar-table .ec-col-impact {
    width: 5rem;
}

.economic-calendar-table .ec-day-row td {
    background-color: var(--ins-tertiary-bg);
    border-top: 1px solid var(--ins-border-color);
    font-weight: 600;
}

/* Intl writes the weekday in lower case in Spanish; capitalising only the
   first letter avoids "Lunes, 19 De Octubre", which capitalize would give. */
.economic-calendar-table .ec-day-row td::first-letter {
    text-transform: uppercase;
}

.economic-calendar-status {
    padding: 1.5rem;
    text-align: center;
}

.economic-calendar-status:empty {
    display: none;
}

.ec-impact {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 1rem;
}

.ec-impact-bar {
    width: 4px;
    border-radius: 1px;
    background-color: var(--ins-border-color);
}

.ec-impact-bar:nth-child(1) { height: 40%; }
.ec-impact-bar:nth-child(2) { height: 70%; }
.ec-impact-bar:nth-child(3) { height: 100%; }

.ec-impact-high .ec-impact-bar.is-on { background-color: var(--ins-danger); }
.ec-impact-medium .ec-impact-bar.is-on { background-color: var(--ins-warning); }
.ec-impact-low .ec-impact-bar.is-on { background-color: var(--ins-secondary-color); }