/*
 * Reusable Linkstar UI components
 */

:root {
    --ls-selected-border: rgba(var(--bs-primary-rgb), .35);
    --ls-selected-bg: rgba(var(--bs-primary-rgb), .06);
}

/* ---------- solid action buttons: clean flat, color fade only ---------- */
.btn-primary   { --ls-solid-btn-rgb: var(--bs-primary-rgb); }
.btn-secondary { --ls-solid-btn-rgb: var(--bs-secondary-rgb); }
.btn-success   { --ls-solid-btn-rgb: var(--bs-success-rgb); }
.btn-info      { --ls-solid-btn-rgb: var(--bs-info-rgb); }
.btn-warning   { --ls-solid-btn-rgb: var(--bs-warning-rgb); }
.btn-danger    { --ls-solid-btn-rgb: var(--bs-danger-rgb); }
.btn-light     { --ls-solid-btn-rgb: var(--bs-light-rgb); }
.btn-dark      { --ls-solid-btn-rgb: var(--bs-dark-rgb); }

:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light, .btn-dark) {
    background-color: rgb(var(--ls-solid-btn-rgb));
    background-image: none;
    border: 0;
    text-shadow: none;
    border-radius: var(--bs-border-radius-lg, .5rem);
    box-shadow: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.btn-light {
    border: 1px solid color-mix(in srgb, rgb(var(--ls-solid-btn-rgb)) 80%, black);
}

:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light, .btn-dark):not(.disabled):not(:disabled):hover {
    background-color: color-mix(in srgb, rgb(var(--ls-solid-btn-rgb)) 85%, black);
    background-image: none;
    border: 0;
    box-shadow: none;
}

:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light, .btn-dark):not(.disabled):not(:disabled):active {
    background-color: color-mix(in srgb, rgb(var(--ls-solid-btn-rgb)) 75%, black);
    background-image: none;
    border: 0;
    box-shadow: none;
}

.btn-light:not(.disabled):not(:disabled):hover,
.btn-light:not(.disabled):not(:disabled):active {
    border: 1px solid color-mix(in srgb, rgb(var(--ls-solid-btn-rgb)) 80%, black);
}

/* ---------- checkboxes: flat, bordered, matches buttons/selects above ---------- */
.form-check-input[type="checkbox"]:not(.form-switch .form-check-input) {
    position: relative;
    font-size: 1.25rem;
    margin-top: 1px;
    background-color: var(--bs-body-bg);
    background-image: none;
    border: 1.5px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm, .25rem);
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):hover:not(:disabled) {
    border-color: var(--bs-secondary-color);
}

.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):checked,
.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):indeterminate {
    background-color: var(--bs-primary);
    background-image: none;
    border-color: var(--bs-primary);
    animation: ls-checkbox-pop 260ms cubic-bezier(.34, 1.56, .64, 1);
}

.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18);
}

.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):disabled {
    background-color: var(--bs-secondary-bg);
}

.form-check-input[type="checkbox"]:not(.form-switch .form-check-input)::after {
    content: "";
    position: absolute;
    opacity: 0;
    transform: rotate(45deg) scale(0);
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), opacity 120ms ease;
}

.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):checked::after {
    left: .28em;
    top: .05em;
    width: .28em;
    height: .5em;
    border: solid #fff;
    border-width: 0 .11em .11em 0;
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):indeterminate::after {
    left: .19em;
    top: .4em;
    width: .5em;
    height: .11em;
    background-color: #fff;
    border-radius: 1px;
    transform: scale(1);
    opacity: 1;
}

@keyframes ls-checkbox-pop {
    0%   { transform: scale(.8); }
    55%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .form-check-input[type="checkbox"]:not(.form-switch .form-check-input),
    .form-check-input[type="checkbox"]:not(.form-switch .form-check-input)::after {
        animation: none;
        transition: none;
    }
}

/* ---------- icon chip ---------- */

.ls-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-right: .65rem;
    border-radius: .65rem;
    background-color: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.ls-icon-chip-lg {
    width: 3.25rem;
    height: 3.25rem;
    margin-right: 0;
    border-radius: .85rem;
    font-size: 1.4rem;
}

.ls-icon-chip--info {
    background-color: rgba(var(--bs-info-rgb), .12);
    color: var(--bs-info);
}

.ls-icon-chip--success {
    background-color: rgba(var(--bs-success-rgb), .12);
    color: var(--bs-success);
}

.ls-icon-chip--warning {
    background-color: rgba(var(--bs-warning-rgb), .12);
    color: var(--bs-warning);
}

.ls-icon-chip--secondary {
    background-color: rgba(var(--bs-secondary-rgb), .12);
    color: var(--bs-secondary);
}

/* ---------- issue identity mark (Issue Detail header) ---------- */

.ls-issue-mark {
    flex-shrink: 0;
    width: 3.125rem;
    height: 3.125rem;
}

.ls-issue-mark-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: .4rem;
    border: 1px solid var(--bs-border-color);
    background-color: #fff;
    padding: 2px;
}

.ls-issue-mark-chip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    background-color: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .01em;
    padding: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* ---------- stat card (icon chip + oversized value) ---------- */

.ls-stat-card {
    container-type: inline-size;
}

.ls-stat-icon-chip {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
}

.ls-stat-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.ls-stat-value {
    font-size: clamp(1.5rem, 10cqi, 2rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .ls-stat-icon-chip {
        width: 42px;
        height: 42px;
    }

    .ls-stat-icon {
        font-size: 1.25rem;
    }
}

/* ---------- full-width stat strip (Issue Detail dashboard) ---------- */

.ls-stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ls-stat-strip-section {
    flex: 1 1 220px;
}

.ls-stat-strip-value-section {
    flex: 1.6 1 280px;
}

@media (max-width: 767.98px) {
    .ls-stat-strip-section {
        flex: 1 1 100%;
    }
}

/* ---------- panel heading: icon + title/subtitle stack ---------- */

.ls-panel-heading {
    display: flex;
    align-items: center;
}

.ls-panel-title {
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2;
}

.ls-panel-subtitle {
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--bs-secondary-color);
}

.card:has(.ls-message-list) {
    overflow: hidden;
}

.ls-message-row {
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
}

.ls-message-row + .ls-message-row {
    border-top: 1px solid var(--bs-border-color);
}

.ls-message-row--pinned {
    background-color: var(--bs-warning-bg-subtle);
    box-shadow: inset 3px 0 0 var(--bs-warning);
}

.ls-message-icon {
    flex-shrink: 0;
    margin-top: .2rem;
    font-size: 1rem;
    color: var(--bs-secondary-color);
}

.ls-message-row--pinned .ls-message-icon {
    color: var(--bs-warning-text-emphasis);
}

.ls-message-body {
    min-width: 0;
}

.ls-message-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .1rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.ls-message-pinned-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-warning-text-emphasis);
}

.ls-message-text {
    font-size: .95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ls-message-empty {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.ls-message-empty-icon {
    display: block;
    font-size: 1.6rem;
    margin-bottom: .4rem;
    color: var(--bs-tertiary-color);
}

.ls-review-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .85rem;
    margin-bottom: 1rem;
    border-radius: .6rem;
    border-left: 3px solid var(--bs-info);
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    font-size: .875rem;
}

.ls-review-note > i,
.ls-action-bar-note > .ls-meta-row > i {
    margin-top: .15rem;
    flex-shrink: 0;
}

.ls-summary-fields {
    --ls-summary-field-padding: .45rem;
    --ls-summary-label-baseline-nudge: .24rem;
    --ls-summary-label-column: minmax(7.5rem, 38%);
    --ls-summary-label-gap: 0;
    display: grid;
    grid-template-columns: var(--ls-summary-label-column) 1fr;
    align-items: start;
}

.ls-summary-fields--compact {
    --ls-summary-field-padding: .15rem;
}

.ls-summary-fields--tight-labels {
    --ls-summary-label-column: fit-content(14rem);
    --ls-summary-label-gap: 1.5rem;
}

.ls-summary-fields > * {
    padding: var(--ls-summary-field-padding) 0;
    border-top: 1px solid var(--bs-border-color);
    min-width: 0;
}

.ls-summary-fields > .ls-summary-label {
    padding-top: calc(var(--ls-summary-field-padding) + var(--ls-summary-label-baseline-nudge));
    padding-right: var(--ls-summary-label-gap);
}

.ls-summary-fields > *:nth-child(-n+2) {
    border-top: 0;
    padding-top: 0;
}

.ls-summary-fields > .ls-summary-label:nth-child(-n+2) {
    padding-top: var(--ls-summary-label-baseline-nudge);
}

.ls-summary-value {
    font-size: .95rem;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .ls-summary-fields {
        grid-template-columns: 1fr;
    }

    .ls-summary-fields > * {
        border-top: 0;
        padding: .05rem 0;
    }

    .ls-summary-fields > .ls-summary-label,
    .ls-summary-fields > .ls-summary-label:nth-child(-n+2) {
        padding-top: .5rem;
    }
}

.ls-row-action,
.ls-summary-edit {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ls-summary-edit {
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ls-summary-edit:hover,
.ls-summary-edit:focus-visible {
    text-decoration: underline;
}

/* ---------- nav-tabs: flat accent-underline, uppercase micro-labels ---------- */
.nav-tabs:not(.folder-tabs) {
    gap: 1.4rem;
    margin-bottom: .75rem;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.nav-tabs:not(.folder-tabs) .nav-link {
    margin-bottom: calc(-1 * var(--bs-border-width));
    padding: 0 0 .3rem;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    background-color: transparent;
    transition: color 140ms ease, border-color 140ms ease;
}

.nav-tabs:not(.folder-tabs) .nav-link:hover,
.nav-tabs:not(.folder-tabs) .nav-link:focus {
    color: var(--bs-emphasis-color);
    border-color: transparent;
}

.nav-tabs:not(.folder-tabs) .nav-link.active,
.nav-tabs:not(.folder-tabs) .nav-item.show .nav-link {
    color: var(--bs-emphasis-color);
    background-color: transparent;
    border-bottom-color: var(--bs-primary);
}

.card-primary > .card-header .ls-panel-heading .ls-icon-chip,
.card-secondary > .card-header .ls-panel-heading .ls-icon-chip,
.card-success > .card-header .ls-panel-heading .ls-icon-chip,
.card-info > .card-header .ls-panel-heading .ls-icon-chip,
.card-warning > .card-header .ls-panel-heading .ls-icon-chip,
.card-danger > .card-header .ls-panel-heading .ls-icon-chip,
.card-light > .card-header .ls-panel-heading .ls-icon-chip,
.card-dark > .card-header .ls-panel-heading .ls-icon-chip {
    background-color: rgba(255, 255, 255, .18);
    color: inherit;
}

.card-primary > .card-header .ls-panel-heading .ls-panel-subtitle,
.card-secondary > .card-header .ls-panel-heading .ls-panel-subtitle,
.card-success > .card-header .ls-panel-heading .ls-panel-subtitle,
.card-info > .card-header .ls-panel-heading .ls-panel-subtitle,
.card-warning > .card-header .ls-panel-heading .ls-panel-subtitle,
.card-danger > .card-header .ls-panel-heading .ls-panel-subtitle,
.card-light > .card-header .ls-panel-heading .ls-panel-subtitle,
.card-dark > .card-header .ls-panel-heading .ls-panel-subtitle {
    color: inherit;
    opacity: .8;
}

/* ---------- small uppercase group/section label ---------- */

.ls-pref-group-label,
.ls-summary-label,
.ls-credential-label,
.ls-timeline-divider,
.ls-flow-progress-account-label,
.ls-payment-tile-label,
.wizard-step-count {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ls-consent-option {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1rem;
    transition: border-color 130ms ease, background-color 130ms ease;
}

.ls-consent-option:has(.form-check-input:checked) {
    border-color: var(--ls-selected-border);
    background-color: var(--ls-selected-bg);
}

.ls-consent-option .form-check-label {
    font-weight: 600;
}

.ls-consent-help {
    display: block;
    margin-left: 2.5em;
    color: var(--bs-secondary-color);
}

.ls-consent-option:has(.ls-icon-chip) .ls-consent-help {
    margin-left: 2.75rem;
}

.ls-consent-email {
    margin-top: .75rem;
    max-width: 30rem;
    transition: opacity 130ms ease;
}

.ls-consent-option:not(:has(.form-check-input:checked)) .ls-consent-email {
    opacity: .55;
}

.ls-consent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 1rem;
}

.ls-consent-grid .ls-consent-option {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

form:not(.read-only) .ls-consent-grid .ls-consent-option:hover {
    border-color: var(--ls-selected-border);
}

.read-only .ls-consent-grid .ls-consent-option {
    cursor: default;
}

.ls-consent-grid .ls-consent-email {
    margin-top: auto;
    padding-top: .75rem;
}

.ls-consent-grid .ls-consent-divider {
    grid-column: 1 / -1;
    border-top: 1px solid var(--bs-border-color);
    padding-top: .75rem;
}

.ls-consent-note {
    color: var(--bs-secondary-color);
}

.ls-step-strip {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.ls-step {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--bs-secondary-color);
    transition: color 130ms ease;
}

.ls-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    font-size: .8rem;
}

.ls-step-current {
    color: var(--bs-primary);
}

.ls-step-current .ls-step-number {
    border-color: transparent;
    background-color: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
}

.ls-step-line {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--bs-border-color);
}

/* ---------- bordered info tile (credential rows, security questions, ...) ---------- */

.ls-credential-tile {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: .75rem .9rem;
    background-color: rgba(var(--bs-body-bg-rgb), .35);
    /* Bootstrap's row/col gutter is horizontal only - without this, tiles that wrap onto a second
       row sit flush against the row above them. */
    margin-bottom: 1rem;
}

.ls-credential-meta {
    flex: 1;
    min-width: 0;
}

.ls-credential-label {
    margin-bottom: .15rem;
}

.ls-credential-value {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-edit-btn {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
}

/* ---------- quick-link row ---------- */

/* NavLink.items() renders a bare <a>[icon?, text]; the caller appends a trailing .ls-link-chevron
   icon and this class onto that same element. First-child targeting (rather than a class on the
   icon itself) keeps this working without needing to touch that shared markup. */
.ls-quick-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .25rem;
    /* !important: linkstar.scss's `.linkstar-page a:not(.btn):not(.dropdown-item)` rule outranks a
       plain class selector (its two :not() clauses count toward specificity same as classes) and
       wins on source order too, so a plain override here is silently ignored without it. */
    color: var(--bs-body-color) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.ls-quick-link:hover {
    color: var(--bs-primary) !important;
    text-decoration: none !important;
}

.ls-quick-link > i:first-child {
    font-size: 1.15rem;
    color: var(--bs-primary);
    flex-shrink: 0;
}

.ls-quick-link > span {
    flex: 1;
    min-width: 0;
}

.ls-link-chevron {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

/* ---------- payment option tiles (Holder Summary) ---------- */

.ls-payment-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg);
}

/* !important for the same reason .ls-quick-link needs it: linkstar.scss's
   `.linkstar-page a:not(.btn):not(.dropdown-item)` rule outranks a plain class selector. */
a.ls-payment-tile {
    color: var(--bs-body-color) !important;
    text-decoration: none !important;
}

.ls-payment-tile--action {
    transition: border-color 130ms ease, background-color 130ms ease;
}

.ls-payment-tile--action:hover,
.ls-payment-tile--action:focus-visible {
    border-color: var(--ls-selected-border);
    background-color: var(--ls-selected-bg);
}

.ls-payment-tile-intro {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
}

@media (prefers-reduced-motion: reduce) {
    .ls-payment-tile--action {
        transition: none;
    }
}

/* ---------- identity hero banner ---------- */

.ls-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1rem;
    border-radius: var(--bs-border-radius-lg, .5rem);
    color: #fff;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .94), rgba(var(--bs-primary-rgb), .68));
}

.ls-hero-avatar {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    font-weight: 700;
    font-size: 1.4rem;
}

.ls-hero-name {
    font-size: 1.3rem;
    font-weight: 700;
}

.ls-hero-meta {
    font-size: .88rem;
    color: rgba(255, 255, 255, .82);
}

/* ---------- vertical activity timeline ---------- */

.ls-timeline {
    position: relative;
}

.ls-timeline-item {
    position: relative;
    display: flex;
    gap: .75rem;
    padding-bottom: 1.25rem;
}

/* The connecting line belongs to each item, not the whole list: a divider row (e.g. "Upcoming" /
   "Recent") has no dot to align with, so a single line spanning the full container would run behind
   it and appear as a stray segment with nothing anchoring it. Scoping the line to each item's own
   height means it naturally breaks at section dividers. */
.ls-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.15rem;
    width: 2px;
    background-color: var(--bs-border-color);
}

.ls-timeline-item:last-child {
    padding-bottom: 0;
}

.ls-timeline-dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-timeline-dot.ls-timeline-dot-upcoming {
    border-style: dashed;
    background-color: var(--bs-body-bg);
}

.ls-timeline-content {
    flex: 1;
    min-width: 0;
    padding-top: .2rem;
}

.ls-timeline-title {
    font-weight: 600;
}

.ls-timeline-amount {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: .75rem;
}

.ls-timeline-divider {
    padding-left: 3.15rem;
    margin-bottom: .5rem;
}

.ls-timeline-divider:not(:first-child) {
    margin-top: 1rem;
}

/* ---------- segmented bar (part-to-whole) ---------- */

.ls-segmented-bar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ls-segmented-bar-trackless {
    gap: .5rem;
}

.ls-segmented-bar-track {
    display: flex;
    gap: 2px;
    height: 1.25rem;
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
    background-color: var(--bs-primary-bg-subtle);
}

.ls-segmented-bar-track-empty {
    border: 1px dashed var(--bs-border-color);
}

.ls-segmented-bar-fill {
    flex-grow: 0;
    flex-shrink: 1;
    min-width: 3px;
}

.ls-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.ls-segmented-bar-legend-label,
.ls-segmented-bar-legend-unit {
    color: var(--bs-secondary-color);
}

.ls-segmented-bar-legend-pct {
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* stat-strip legend: one centered block per segment, big number + "% of total" */

.ls-segmented-bar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 2.5rem;
    row-gap: 1.25rem;
}

.ls-segmented-bar-legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

.ls-segmented-bar-legend-item-head,
.ls-segmented-bar-legend-compact-item {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ls-segmented-bar-legend-value {
    line-height: 1.15;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.ls-segmented-bar-legend-compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.25rem;
    row-gap: .4rem;
}

.ls-segmented-bar-legend-compact-value {
    font-variant-numeric: tabular-nums;
}

/* ---------- account info panel: status chip base + read-only tax/cost-basis chip ---------- */

.ls-status-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

.ls-status-chip--success {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.ls-status-chip--secondary {
    background: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-text-emphasis);
}

.ls-status-chip--warning {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.ls-status-chip-btn {
    appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 130ms ease, transform 130ms ease;
}

.ls-status-chip-btn:hover,
.ls-status-chip-btn:focus-visible {
    background: rgba(var(--bs-info-rgb), .22);
    transform: translateY(-1px);
}

.ls-status-chip-btn:active { transform: translateY(0); }

.ls-status-chip-btn-hint {
    opacity: .65;
    margin-left: .1rem;
}

/* no value yet: dashed outline, no fill, reads as a prompt rather than a fact */
.ls-status-chip-btn--cta {
    background: transparent;
    color: var(--bs-info);
    border: 1px dashed rgba(var(--bs-info-rgb), .5);
}

.ls-status-chip-btn--cta:hover,
.ls-status-chip-btn--cta:focus-visible {
    background: rgba(var(--bs-info-rgb), .08);
}

/* ---------- secondary-address dropdown (account info panel) ---------- */

/* Hover/focus/caret-rotation states can't be expressed as inline styles, so they stay here; the
   toggle's own layout/color/spacing is styled where it's built. */
.ls-secondary-toggle:hover,
.ls-secondary-toggle:focus-visible {
    background: rgba(var(--bs-primary-rgb), .18);
}

.ls-secondary-toggle:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), .5);
    outline-offset: 1px;
}

.ls-secondary-toggle .ls-caret {
    transition: transform 130ms ease;
}

.ls-secondary-toggle[aria-expanded="true"] .ls-caret {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .ls-secondary-toggle .ls-caret {
        transition: none;
    }
}

/* same story: only the hover state needs to live here. */
.ls-address-pop-item:hover {
    background-color: var(--bs-tertiary-bg);
}

/* icon + text facts on one line, e.g. a meeting's date/time/format */
.ls-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    row-gap: .2rem;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.ls-meta-sep {
    opacity: .5;
}

/* condensed rows below a spotlight card */
.ls-mini-list {
    padding: 0 1.25rem 1rem;
}

/* empty state: grow to fill the card's remaining height so the message centers on the
   card itself, not on a fixed row count - keeps it aligned across panels whose row counts differ. */
.ls-mini-list-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-mini-list-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    border-top: 1px solid var(--bs-border-color-translucent);
    text-decoration: none !important;
    color: inherit !important;
}

/* the card header already has its own border-bottom, so the first row doesn't need its own too */
.ls-mini-list-row:first-child {
    border-top: none;
}

.ls-mini-list-row:hover .ls-mini-list-name {
    color: var(--bs-primary);
}

.ls-mini-list-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-mini-list-meta {
    font-size: .76rem;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

/* ---------- small progress ring (Issue Detail dashboard stat tiles) ---------- */

/* The conic-gradient background is set inline per instance (see ProgressRing.java); the ::after punches
   the donut hole using the card's own background so the ring reads correctly regardless of which theme/card bg is active. */
.ls-stat-ring {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.ls-stat-ring::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background-color: var(--bs-card-bg, var(--bs-body-bg));
}

/* ---------- Action Center: clickable icon tile ---------- */

.ls-action-tile {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    height: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: .85rem .9rem;
    cursor: pointer;
    background-color: var(--bs-tertiary-bg);
}

.ls-action-tile:hover {
    border-color: var(--bs-primary);
}

.ls-plan-card,
.ls-option-card {
    cursor: pointer;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}

.ls-plan-card:hover,
.ls-option-card:hover {
    border-color: var(--bs-primary);
}

.ls-plan-card--selected,
.ls-plan-card--selected:hover,
.ls-option-card--selected,
.ls-option-card--selected:hover,
.ls-option-card:has(input[type="radio"]:checked:not(:disabled)) {
    border-color: var(--bs-primary);
    border-width: 1.5px;
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12);
}

.ls-option-card--disabled,
.ls-option-card--disabled:hover {
    cursor: default;
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

.ls-option-card .form-check {
    margin-bottom: 0;
}

.ls-option-card-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--bs-border-color);
}

.ls-option-card-fields-caption {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .35rem;
}

.ls-plan-row {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 130ms ease, border-color 130ms ease;
}

.ls-plan-row:hover {
    background-color: var(--bs-tertiary-bg);
}

.ls-plan-row--selected,
.ls-plan-row--selected:hover {
    background-color: var(--ls-selected-bg);
    border-left-color: var(--bs-primary);
}

.ls-sticky-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: .75rem;
    background-color: var(--ls-surface-bg, var(--bs-body-bg));
    box-shadow: 0 -2px 12px rgba(16, 24, 40, .08);
}

.breadcrumb {
    background-color: transparent !important;
    gap: .6rem;
}

.breadcrumb-item,
.breadcrumb-item.breadcrumb-item-completed {
    flex: 1 1 0;
    display: flex !important;
    flex-direction: column;
    gap: .45rem;
    padding: 0 !important;
    background: none !important;
}

.breadcrumb-item a,
.breadcrumb-item span {
    float: none !important;
    display: block !important;
    padding: 0 !important;
    background: none !important;
    color: var(--bs-secondary-color) !important;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.breadcrumb-item a::before,
.breadcrumb-item span::before,
.breadcrumb-item a::after,
.breadcrumb-item span::after {
    content: none !important;
    border: 0 !important;
}

.breadcrumb-item::after {
    content: "";
    display: block;
    height: 6px;
    border-radius: var(--bs-border-radius-pill, 999px);
    background-color: var(--bs-secondary-bg);
}

.breadcrumb-item.breadcrumb-item-completed::after {
    background-color: var(--bs-success);
}

.breadcrumb-item.breadcrumb-item-completed a,
.breadcrumb-item.breadcrumb-item-completed span,
.breadcrumb-item a.breadcrumb-item-completed,
.breadcrumb-item span.breadcrumb-item-completed {
    background: none !important;
    color: var(--bs-success-text-emphasis) !important;
}

.breadcrumb-item.active:not(.breadcrumb-item-completed)::after {
    background: linear-gradient(90deg, var(--bs-primary) 0 55%, var(--bs-secondary-bg) 55% 100%);
}

.breadcrumb-item.active a,
.breadcrumb-item.active span {
    color: var(--bs-primary) !important;
    font-weight: 700;
}

/* ---------- top navbar + left icon-only navigation rail (sidebar) ---------- */

.ts-shell {
    position: fixed;
    inset: 0;
    z-index: 1020;
    display: flex;
    flex-direction: column;
}

.ts-shell > .navbar {
    --bs-navbar-padding-y: .1rem;
    z-index: 1030;
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
}

#nav-dropdown-messages {
    display: flex;
    align-items: center;
}

.ts-body-row {
    flex: 1 1 auto;
    min-height: 0;
}

.ts-sidebar-panel {
    --ts-sidebar-collapsed-width: 5rem;
    --ts-sidebar-expanded-width: 15rem;
    flex: 0 0 auto;
    min-height: 0;
    margin: 1rem;
    width: var(--ts-sidebar-collapsed-width);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--ls-surface-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, .5rem);
    /* matches Bootstrap's own collapse transition (.35s ease) for a consistent feel */
    transition: width .35s ease, box-shadow .35s ease;
}

.ts-sidebar-panel .nav {
    flex: 1 1 auto;
    /* min-height: 0 lets this flex child shrink below its content height instead of overflowing
       the rail's fixed viewport height (the default flex min-height:auto would keep it as tall as
       its content and push the overflow out through the panel's own overflow: hidden, hiding
       items entirely on short viewports) - shrinking it and scrolling internally keeps every item
       reachable instead */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Bootstrap's ".nav" sets flex-wrap: wrap; combined with flex-direction: column (from
       "flex-column") that means items which don't fit the available height start a second
       *column* instead of overflowing vertically - invisible off to the side (clipped by the
       rail's fixed width/overflow), rather than reachable by scrolling. Forcing a single column
       is what makes the overflow-y: auto above actually have vertical overflow to scroll. */
    flex-wrap: nowrap;
    scrollbar-width: thin;
}

.ts-sidebar-panel .nav::-webkit-scrollbar {
    width: .4rem;
}

.ts-sidebar-panel .nav::-webkit-scrollbar-thumb {
    background-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, .5rem);
}

/* sign-out (always added last) is pushed to the bottom of the rail */
.ts-sidebar-panel .nav-item:last-child {
    margin-top: auto;
}

.ts-sidebar-panel .nav-link {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
    /* reserved on every item (transparent) so the active item's solid stripe below doesn't
       shift its icon/label relative to the rest */
    border-left: 3px solid transparent;
    white-space: nowrap;
    color: var(--bs-body-color);
}

.ts-sidebar-panel .nav-link:hover {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .08);
}

.ts-sidebar-panel .nav-link.active {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .08);
    border-left-color: var(--bs-primary);
}

.ts-sidebar-panel .ts-sidebar-icon {
    flex: 0 0 auto;
    width: 1em;
    text-align: center;
    font-size: 1.5rem;
    /* fast, no delay: shrink back as soon as the rail starts collapsing */
    transition: font-size .2s ease-in-out, transform .2s ease-in-out;
}

.ts-sidebar-panel .nav-link:hover .ts-sidebar-icon,
.ts-sidebar-panel .nav-link:hover .ts-sidebar-label {
    transform: scale(1.1);
}

.ts-sidebar-panel .dropdown-toggle {
    position: relative;
}

.ts-sidebar-panel .dropdown-toggle::after {
    position: absolute;
    top: 50%;
    right: .5rem;
    margin: 0;
    transform: translateY(-50%);
}

.ts-sidebar-panel .dropdown-menu {
    --bs-dropdown-zindex: 1025;
}

.ts-sidebar-panel .dropdown-menu.ls-responsive-dropdown-menu {
    width: 16rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.ts-sidebar-panel .dropdown-menu.ls-responsive-dropdown-menu > div {
    column-width: auto !important;
    column-count: 1 !important;
}

.ts-sidebar-panel .ts-sidebar-label {
    margin-left: 0;
    /* width: 0 (not just opacity) so the collapsed row's real layout box stops at the icon -
       without this, the label's nowrap text still occupies its full width invisibly, only
       hidden by this panel's own overflow: hidden, which throws off anything that reads the
       link's true bounding box (e.g. the sidebar tooltip, which would otherwise anchor as if the
       rail were already expanded). */
    width: 0;
    overflow: hidden;
    opacity: 0;
    transform-origin: left center;
    /* fast, no delay: fade out immediately as the rail starts collapsing */
    transition: opacity .15s ease-in-out, transform .2s ease-in-out;
}

.ts-sidebar-panel.show {
    width: var(--ts-sidebar-expanded-width);
    box-shadow: .5rem 0 1.5rem rgba(0, 0, 0, .15);
}

.ts-sidebar-panel.show .nav-link {
    justify-content: flex-start;
}

.ts-sidebar-panel.show .ts-sidebar-icon {
    font-size: 1.1rem;
    /* slight delay on the way in so the icon doesn't shrink until there's room */
    transition: font-size .2s ease-in-out .1s;
}

.ts-sidebar-panel.show .ts-sidebar-label {
    margin-left: 1rem;
    width: auto;
    overflow: visible;
    opacity: 1;
    /* bigger delay on the way in so the label doesn't fade in before the rail has widened
       enough to show it without clipping/wrapping */
    transition: opacity .2s ease-in-out .15s;
}

/* Bootstrap's Collapse component defaults: keep the rail visible (as an icon-only column)
   instead of display:none while "closed" */
#ts-sidebar.collapse:not(.show) {
    display: flex;
}

#ts-sidebar.collapsing.collapse-horizontal {
    width: var(--ts-sidebar-collapsed-width);
}

.accordion-item {
    background-color: var(--bs-card-bg, var(--bs-body-bg));
}

.accordion-button {
    text-shadow: none;
}

.ls-address-accordion-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-width: 0;
    padding-right: .5rem;
}

/* main content: fills whatever width the sidebar (a flex sibling) doesn't take */
.ts-app-content {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
}

body.modal-open .ts-app-content {
    overflow: hidden;
}

/* right-aligned numeric table columns (shares, cost, price, etc.): equal-width digits so
   values line up column-to-column instead of shifting with each digit's natural width */
.table td.text-end,
.table th.text-end {
    font-variant-numeric: tabular-nums;
}

/* ---------- stacked-card tables (mobile) ----------
   Opt-in via Table.stackOnMobile() (adds .ls-table-stack). Every cell must carry a
   "data-label" attribute matching its column header for the ::before label to show. */
@media (max-width: 640px) {
    .ls-table-stack table,
    .ls-table-stack thead,
    .ls-table-stack tbody,
    .ls-table-stack tr,
    .ls-table-stack th,
    .ls-table-stack td {
        display: block;
    }

    /* keep the header available to screen readers without showing it visually */
    .ls-table-stack thead tr {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .ls-table-stack tbody tr {
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .5rem .75rem;
    }

    .ls-table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        border: none;
        padding: .35rem 0;
        text-align: right;
    }

    .ls-table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color);
        flex-shrink: 0;
        text-align: left;
    }
}

/* cost-basis lot detail: a dedicated class (not d-none) for the collapsed/expanded state, so it
   doesn't collide with the "closed-lot" filter's own d-none toggling on the same detail row —
   a closed lot's detail row needs to stay hidden for two independent reasons (filtered out AND
   not expanded) without one reason's toggle undoing the other's. !important matches d-none's own
   specificity so it isn't overridden by the .ls-table-stack mobile "display: block" rule either. */
.cb-collapsed {
    display: none !important;
}

.cb-expand-toggle {
    cursor: pointer;
    display: inline-block;
    transition: transform .15s ease-in-out;
}

.cb-expand-toggle.cb-expand-toggle-open {
    transform: rotate(90deg);
}

/* visible focus ring: this is a role="button" span, not a native focusable control */
.cb-expand-toggle:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: .2rem;
}

/* holder-search-style cards (LinkedHolderSelect + IssuerPositionSearch.holderResult, shared by
   the issuer holder/shareholder search pages): a gentle lift + primary-tinted border on hover,
   instead of the theme's .clickable-card:hover (a solid full-bleed color fill with !important
   text color) - these cards also hold their own action button(s), so a softer highlight reads
   better than an inverted color swap. Each card's action button(s) sit above the card's
   stretched-link via .position-relative.z-2 so they stay independently clickable. */
.ls-holder-card {
    transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}

.ls-holder-card:hover {
    cursor: pointer;
    border-color: var(--bs-primary);
    box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .15);
}

/* ---------- document exchange table (ls.markup.tsp.FileTable) ----------
   The table is three columns - Document, Posted, Actions - where "Document" is an icon plus a
   title/meta stack rather than a cell of plain text, so that the document's name is what a reader
   scans down instead of its date. Everything here is layout and de-emphasis; the colors come from
   the active theme's tokens. */

/* filter toolbar: search grows, the two selects hold a readable minimum */
.ls-doc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.ls-doc-toolbar-search {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.ls-doc-toolbar-filter {
    flex: 0 1 13rem;
    min-width: 11rem;
}

/* The magnifier is an icon inside one field, not a button stuck to the side of it: the border and
   the focus ring move up to the group so they wrap both halves, and the two children go bare. */
.ls-doc-toolbar-search .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
}

.ls-doc-toolbar-search .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.ls-doc-toolbar-search .input-group-text {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    padding-right: .35rem;
}

.ls-doc-toolbar-search .form-control {
    border: 0;
    padding-left: 0;
    background: transparent;
}

.ls-doc-toolbar-search .form-control:focus {
    box-shadow: none;
}

.ls-doc-count {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    margin-bottom: .35rem;
}

/* sortable column header: the whole cell is the control, so it needs the pointer and a focus-ish
   hover cue (it's a <th>, not a button - see the sort-icon in FileTable.sortableHeader) */
.ls-doc-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ls-doc-sort:hover {
    color: var(--bs-primary);
}

.ls-doc-sort:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.ls-doc-sort .sort-icon {
    margin-left: .3rem;
    opacity: .55;
}

.ls-doc-sort[data-sort-dir] .sort-icon {
    opacity: 1;
}

/* the document cell: icon, then the title/meta stack */
.ls-doc-cell {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-width: 0;
}

.ls-doc-icon {
    font-size: 1.35rem;
    line-height: 1.35;
    flex-shrink: 0;
}

.ls-doc-text {
    min-width: 0;
}

/* break-word, not anywhere: "anywhere" also shrinks the cell's min-content width, which makes the
   table algorithm hand the name column almost nothing on a narrow desktop. This still breaks a
   single unbroken filename that would otherwise overflow. */
.ls-doc-title {
    display: block;
    font-weight: 500;
    overflow-wrap: break-word;
}

/* The title is a link, but a whole column of blue link text is heavier than it needs to be when
   every row also carries an explicit View button - so it reads as body text and only colors on
   hover. !important because the themes color links through two selectors that nothing sane here can
   out-specify: `.linkstar-page a:not(.btn):not(.dropdown-item)` and `.table a:not(.btn)`. */
a.ls-doc-title {
    color: inherit !important;
    text-decoration: none;
}

a.ls-doc-title:hover,
a.ls-doc-title:focus-visible {
    color: var(--bs-primary) !important;
    text-decoration: underline;
}

/* Posted and Actions both hold nowrap content, so they take their intrinsic width; claiming a
   share here is what hands the rest of the slack to the document name instead of splitting it. */
.ls-doc-sort[data-sort-key="name"] {
    width: 55%;
}

/* type, file format, size and uploader on one quiet line under the name */
.ls-doc-meta {
    font-size: .76rem;
    color: var(--bs-secondary-color);
    overflow-wrap: break-word;
}

.ls-doc-posted {
    white-space: nowrap;
    vertical-align: middle;
}

.ls-doc-new {
    margin-left: .4rem;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: .1em;
}

/* actions sit right-aligned and never wrap mid-button */
.ls-row-actions {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.ls-row-action + .ls-row-action {
    margin-left: .35rem;
}

/* Bootstrap borders the bottom of every cell, which leaves a hairline floating above the card's own
   bottom padding once the rows run out; the separators between rows are the useful ones. The second
   selector covers the usual case, where the real last row is followed by the hidden no-results row. */
.file-panel .table > tbody > tr:last-child > *,
.file-panel .table > tbody > tr:nth-last-child(2):has(+ .ls-doc-no-results) > * {
    border-bottom-width: 0;
}

.ls-doc-no-results td {
    padding: 1.75rem .75rem;
}

.ls-doc-clear-filters {
    font-size: .8rem;
}

/* Stacked-card layout (see .ls-table-stack): the Document cell is already an icon + stack, so it
   keeps its own layout instead of taking the generic label-left/value-right treatment, and its
   ::before label would only repeat what the row plainly is. */
@media (max-width: 640px) {
    .ls-table-stack td.ls-row-actions {
        gap: .5rem;
        margin-top: .25rem;
        padding-top: .6rem;
        border-top: 1px solid var(--bs-border-color);
    }

    .ls-table-stack .ls-row-action {
        flex: 1 1 0;
        justify-content: center;
    }

    .ls-table-stack .ls-row-action + .ls-row-action {
        margin-left: 0;
    }

    .ls-table-stack .ls-doc-cell {
        text-align: left;
    }

    .ls-table-stack td:has(> .ls-doc-cell) {
        display: block;
        text-align: left;
    }

    .ls-doc-no-results td {
        display: block;
        text-align: center;
    }

    .ls-table-stack td.ls-row-actions::before,
    .ls-table-stack td:has(> .ls-doc-cell)::before,
    .ls-doc-no-results td::before {
        content: none;
    }
}

/* ---------- requested-document cards (DocumentExchangePage.requestHeading) ----------
   One card per document the holder still owes us. The state used to be carried by the card's border
   color alone; it now reads as an icon, a title, a line of plain facts and a status pill, with the
   border left in as reinforcement rather than as the only signal. */

.ls-request-heading {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.ls-request-text {
    min-width: 0;
    flex: 1;
}

/* .card-title carries a bottom margin meant for a stacked card body; the facts line below supplies
   its own spacing, so the title doesn't need it here. */
.ls-request-title {
    margin-bottom: 0;
    font-size: 1.05rem;
    font-weight: 500;
    overflow-wrap: break-word;
}

/* the name and its status pill on one line, wrapping together when the name is long */
.ls-request-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.ls-request-status {
    flex-shrink: 0;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Optional: a solid dark pill outshouts the red "Required" one, so this reads as a quiet label. */
.ls-request-status-muted {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
}

/* the operator's own instructions for the document, below the heading block */
.ls-request-description {
    margin-top: .5rem;
    margin-bottom: 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

/* A wrapping right-aligned row, rather than the full-width vertical button group this used to be -
   an "Upload" button stretched across a third of the card read as a hero call to action. */
.ls-request-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

/* Sized here rather than per button so it also reaches Download Sample / Sign / View, which are
   built from raw class strings. Same custom properties Bootstrap's own .btn-sm sets. The gap is
   here for the same reason: these buttons are an icon span next to a text span with nothing
   between them, which at this size reads as one run-together word. */
.ls-request-actions .btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

@media (max-width: 767.98px) {
    /* stacked under the body, the actions read better leading the row than trailing it */
    .ls-request-actions {
        justify-content: flex-start;
    }
}

.ls-tin-field {
    max-width: 16rem;
}

.ls-tin-field .form-control {
    font-family: var(--bs-font-monospace);
    letter-spacing: .08em;
}

.ls-tin-match {
    display: block;
    min-height: 1.2rem;
    margin-top: .25rem;
    font-size: .78rem;
}

.ls-tin-match--match {
    color: var(--bs-success);
}

.ls-tin-match--mismatch {
    color: var(--bs-danger);
}

.ls-tin-note {
    padding: .65rem .8rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .8rem;
    line-height: 1.45;
}

.ls-sticky-action-bar--page {
    background-color: var(--bs-body-bg);
}

.ls-action-bar-note {
    display: flex;
    align-items: center;
    height: 100%;
}

.ls-action-bar-note > .ls-meta-row {
    margin-top: 0;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.ls-consent-option--group,
.ls-consent-option--group:has(.form-check-input:checked) {
    background-color: transparent;
    border-color: var(--bs-border-color);
}

.ls-cert-lead {
    display: block;
}

.ls-cert-number {
    margin-right: .35rem;
    color: var(--bs-secondary-color);
}

.ls-cert-body {
    display: block;
    margin-top: .15rem;
    color: var(--bs-secondary-color);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.45;
}

.ls-agreement-block {
    padding: .9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-tertiary-bg);
    transition: background-color .25s ease, border-color .25s ease;
}

.ls-agreement-block.bg-success-subtle {
    border-color: rgba(var(--bs-success-rgb), .35);
}

.ls-signature-field {
    width: 22rem;
    max-width: 100%;
}

.form-check-label:has(> .ls-cert-lead) {
    display: block;
}

.ls-icon-chip--step {
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    font-style: normal;
}

.ls-label-row-offset {
    padding-top: calc(var(--bs-body-line-height, 1.5) * 1em + .5rem);
}

@media (max-width: 767.98px) {
    .ls-label-row-offset {
        padding-top: 0;
    }
}

@media (min-width: 768px) {
    .ls-tin-note-col {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: 34rem;
    }
}

/* ---------- icon button: unread-count bubble (Issuer Overview notifications) ---------- */

.ls-icon-btn-badged {
    position: relative;
    overflow: visible;
}

.ls-icon-btn-count {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    min-width: 1.15rem;
    padding: .2rem .35rem;
    font-size: .65rem;
    line-height: 1;
}

/* ---------- issuer overview: deal table numerics ---------- */

.ls-figure {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- empty state: icon, headline and explanation centred in a panel body ---------- */

.ls-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 100%;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.ls-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background-color: rgba(var(--bs-secondary-rgb), .1);
}

.ls-empty-title {
    font-weight: 600;
    color: var(--bs-body-color);
}

.ls-empty-text {
    font-size: .8rem;
    max-width: 34ch;
}

.ls-price-history-chart {
    height: 280px;
}

@media (max-width: 1199.98px) {
    .ls-price-history-chart {
        height: 220px;
    }
}

/* ---------- wizard ---------- */

.wizard-panel {
    max-width: 48rem;
}

.wizard-panel .wizard-header {
    position: relative;
}

.wizard-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: rgba(var(--bs-emphasis-color-rgb), .08);
    pointer-events: none;
}

.wizard-progress-bar {
    width: 0;
    height: 100%;
    background-color: var(--bs-primary);
    transition: width 260ms ease, background-color 200ms linear;
}

.wizard-complete .wizard-progress-bar {
    background-color: var(--bs-success);
}

.wizard-panel .card {
    transition: border-color 250ms linear;
}

.card.wizard-complete {
    border-color: rgba(var(--bs-success-rgb), .45);
}

.wizard-complete .wizard-step-count {
    color: var(--bs-success);
}

@media (max-width: 575.98px) {
    .wizard-step-count {
        display: none;
    }
}

.wizard-panel .card-footer {
    background-color: transparent;
}

.wizard-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
}

.wizard-nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.5rem;
    border-radius: var(--bs-border-radius-lg, .5rem);
}

.wizard-nav .btn .bi {
    font-size: .8em;
    line-height: 1;
    transition: transform 140ms ease;
}

.wizard-nav .wizard-back {
    flex-shrink: 0;
    padding: .4rem .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--bs-secondary-color);
    background-color: transparent;
    transition: background-color 140ms ease, color 140ms ease;
}

.wizard-nav .wizard-back:hover,
.wizard-nav .wizard-back:focus-visible {
    color: var(--bs-emphasis-color);
    background-color: rgba(var(--bs-emphasis-color-rgb), .06);
}

.wizard-nav .wizard-back:hover .bi {
    transform: translateX(-2px);
}

.wizard-nav-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .78rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
    text-align: right;
}

.wizard-nav .wizard-forward {
    flex-shrink: 0;
    min-width: 9rem;
    padding: .4rem 1.15rem;
    font-weight: 600;
}

.wizard-nav .wizard-forward:not(:disabled):hover .bi {
    transform: translateX(2px);
}

.wizard-nav .wizard-forward:disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .wizard-nav {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .wizard-nav-hint {
        order: 3;
        flex-basis: 100%;
        text-align: left;
    }
}

/* ---------- wizard transitions ---------- */

.wizard {
    position: relative;
}

.wizard.wizard-sizing {
    overflow: hidden;
    transition: height 170ms cubic-bezier(.2, .7, .3, 1) 120ms;
}

.wizard-tab.animated {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
}

@keyframes wizardEnterForward {
    from { opacity: 0; transform: translate3d(12px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes wizardEnterBack {
    from { opacity: 0; transform: translate3d(-12px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes wizardExitBack {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translate3d(-12px, 0, 0); }
}

@keyframes wizardExitForward {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translate3d(12px, 0, 0); }
}

.wizard-tab.wizard-exit-back,
.wizard-tab.wizard-exit-forward {
    left: 0;
    right: 0;
    animation-duration: 120ms;
    animation-timing-function: ease-in;
}

.wizard-tab.wizard-enter-forward,
.wizard-tab.wizard-enter-back {
    animation-duration: 200ms;
    animation-delay: 120ms;
}

.wizard-tab.wizard-enter-forward { animation-name: wizardEnterForward; }
.wizard-tab.wizard-enter-back    { animation-name: wizardEnterBack; }
.wizard-tab.wizard-exit-back     { animation-name: wizardExitBack; }
.wizard-tab.wizard-exit-forward  { animation-name: wizardExitForward; }

.wizard-tab:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .wizard-tab.animated,
    .wizard-tab.wizard-enter-forward,
    .wizard-tab.wizard-enter-back,
    .wizard-tab.wizard-exit-back,
    .wizard-tab.wizard-exit-forward {
        animation: none;
    }

    .wizard.wizard-sizing,
    .wizard-progress-bar,
    .wizard-nav .btn,
    .wizard-nav .btn .bi {
        transition: none;
    }
}

/* ---------- wizard question + options ---------- */

.wizard-tab > p:first-of-type:not(.wizard-info) {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--bs-emphasis-color);
    margin-bottom: 1rem;
    overflow-wrap: break-word;
}

.wizard-tab > p:first-of-type:not(.wizard-info) :is(p, li, td) {
    font-weight: 400;
}

.wizard-tab .wizard-info {
    line-height: 1.6;
    overflow-wrap: break-word;
}

.wizard-tab.row > .form-check {
    width: calc(100% - var(--bs-gutter-x));
    margin-left: calc(var(--bs-gutter-x) * .5);
    margin-right: calc(var(--bs-gutter-x) * .5);
}

.wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)) {
    position: relative;
    padding: .8rem 1rem .8rem 2.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    transition: border-color 130ms ease, background-color 130ms ease;
}

.wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)) .form-check-input {
    margin-left: -1.75rem;
    margin-top: .15rem;
}

.wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)) .form-check-label {
    display: block;
    line-height: 1.5;
    overflow-wrap: break-word;
    cursor: pointer;
}

.wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)):has(.form-check-input:checked) {
    border-color: var(--ls-selected-border);
    background-color: var(--ls-selected-bg);
}

.wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)):has(.form-check-input:not(:disabled)):hover {
    border-color: var(--ls-selected-border);
}

.wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)):has(.form-check-input:focus-visible) {
    border-color: rgba(var(--bs-primary-rgb), .5);
}

.wizard-tab .form-check:is(:has(.wizard-option:disabled), :has(.wizard-agreement:disabled)) {
    opacity: .65;
}

.wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)):has(.form-check-input:disabled) .form-check-label {
    cursor: default;
}

.wizard-tab .form-check:has(.wizard-option) .form-check-label::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.wizard-tab .form-check:has(.wizard-option) .form-check-input {
    position: relative;
    z-index: 1;
}

.wizard-tab .form-check .invalid-feedback {
    margin-top: .4rem;
}

@media (max-width: 575.98px) {
    .wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)) {
        padding: .75rem .8rem .75rem 2.4rem;
    }

    .wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)) .form-check-input {
        margin-left: -1.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-tab .form-check:is(:has(.wizard-option), :has(.wizard-agreement)) {
        transition: none;
    }
}

.ls-stage-narrow {
    max-width: 840px;
}

.ls-stage-form {
    max-width: 1320px;
}

.ls-stage-wide {
    max-width: 1800px;
}

@media (min-width: 1400px) {
    .ls-stage-form:has(#differentMailingAddress:checked) {
        max-width: 1800px;
    }

    .ls-address-columns:has(#differentMailingAddress:checked) > .ls-address-col {
        flex: 0 0 auto;
        width: 50%;
    }
}

.ls-flow-progress-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .45rem;
}

.ls-flow-progress-step {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.ls-flow-progress-name {
    font-size: .95rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.ls-flow-progress-account {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    min-width: 0;
    max-width: 45%;
    margin-left: auto;
}

.ls-flow-progress-account-label {
    flex-shrink: 0;
}

.ls-flow-progress-account-name {
    font-size: .85rem;
    color: var(--bs-body-color);
}

@media (max-width: 767.98px) {
    .ls-flow-progress-account {
        max-width: 100%;
        margin-left: 0;
        flex-basis: 100%;
    }
}

.ls-flow-segments {
    display: flex;
    gap: .3rem;
}

.ls-flow-segment {
    flex: 1 1 0;
    height: .4rem;
    border-radius: 999px;
    background-color: var(--bs-secondary-bg);
    transition: background-color .35s ease;
}

.ls-flow-segment.is-done {
    background-color: var(--bs-success);
}

.ls-flow-segment.is-current {
    background-color: var(--bs-primary);
}

.ls-flow-segment.is-editing {
    background-color: var(--bs-warning);
}

.ls-flow-progress-step.is-editing {
    color: var(--bs-warning);
}

@media (prefers-reduced-motion: reduce) {
    .ls-flow-segment {
        transition: none;
    }
}

.ls-select-intro {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ls-select-intro-text {
    flex: 1 1 22rem;
    min-width: 0;
}

.ls-select-intro-title {
    margin: .15rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.ls-select-intro-message {
    margin: .5rem 0 0;
    max-width: 62ch;
    color: var(--bs-secondary-color);
}

.ls-select-intro > .ls-status-chip {
    flex-shrink: 0;
    margin-left: auto;
    font-weight: 600;
}

.ls-select-section {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .6rem;
}

.ls-select-section-count {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.ls-select-section-rule {
    flex-grow: 1;
    height: 1px;
    background-color: var(--bs-border-color);
}

.ls-select-progress {
    max-width: 30rem;
    margin-top: .75rem;
}

.ls-holder-card .ls-select-progress {
    margin-bottom: 1rem;
}

.ls-holder-card:hover,
.ls-holder-card:focus-within {
    border-color: var(--bs-primary) !important;
}

.ls-corpac-address {
    margin-top: .5rem;
    margin-bottom: .75rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--bs-secondary-color);
}

.ls-corpac-address > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ls-corpac-address:empty {
    display: none;
}

.ls-select-meta-value {
    color: var(--bs-body-color);
    font-weight: 600;
}

.ls-select-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .5rem;
}

.ls-select-actions .btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.ls-select-back {
    margin-top: .25rem;
}

.ls-select-back .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding-left: 0;
    padding-right: 0;
    font-weight: 600;
    text-decoration: none;
}

.ls-select-back .btn > [class^="bi-"] {
    display: inline-block;
    transition: transform 140ms ease;
}

.ls-select-back .btn:hover,
.ls-select-back .btn:focus-visible {
    text-decoration: underline;
}

.ls-select-back .btn:hover > [class^="bi-"] {
    transform: translateX(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .ls-select-back .btn > [class^="bi-"] {
        transition: none;
    }

    .ls-select-back .btn:hover > [class^="bi-"] {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .ls-select-intro > .ls-status-chip {
        margin-left: 0;
    }
}

.ls-proxy-card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
}

.ls-proxy-card-date {
    flex: 0 0 auto;
    width: 3.5rem;
    padding: .45rem 0 .5rem;
    border-radius: .65rem;
    text-align: center;
    background-color: var(--bs-tertiary-bg);
}

.ls-proxy-card-date--pending {
    background-color: var(--bs-warning-bg-subtle);
}

.ls-proxy-card-date-month {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.ls-proxy-card-date--pending .ls-proxy-card-date-month {
    color: var(--bs-warning-text-emphasis);
}

.ls-proxy-card-date-day {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
}

.ls-proxy-card-date-year {
    font-size: .6875rem;
    color: var(--bs-secondary-color);
}

.ls-proxy-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ls-proxy-card-title {
    margin-bottom: .45rem;
    font-size: .95rem;
    line-height: 1.3;
}

.ls-proxy-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.ls-proxy-card-meta .ls-status-chip {
    padding: .2rem .6rem;
    font-size: .75rem;
    font-weight: 600;
}

.ls-comment-thread {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.ls-comment-thread ul {
    list-style: none;
    margin: .75rem 0 0 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--bs-border-color);
}

.ls-comment-thread ul ul ul ul {
    margin-left: 0;
}

.ls-comment-thread li + li {
    margin-top: .75rem;
}

.ls-comment-thread .ls-issue-mark {
    width: 2rem;
    height: 2rem;
}

.ls-comment-thread .ls-issue-mark-chip {
    font-size: .75rem;
    font-weight: 600;
}

.ls-proxy-card-time {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.ls-proxy-card-actions {
    flex: 0 0 auto;
    width: 8.75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ls-proxy-card-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
}

@media (max-width: 575.98px) {
    .ls-proxy-card-body {
        flex-wrap: wrap;
    }

    .ls-proxy-card-actions {
        flex: 1 0 100%;
        width: auto;
    }
}

.ls-vote-table {
    container: ls-vote / inline-size;
}

.ls-vote-grid {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) repeat(var(--ls-vote-slots, 4), minmax(4rem, 7.5rem));
    column-gap: .625rem;
    align-items: center;
}

.ls-vote-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin-bottom: 0;
    padding: .5rem .375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .625rem;
    background-color: var(--bs-body-bg);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    text-align: center;
    cursor: pointer;
    transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.ls-vote-opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ls-vote-opt:hover {
    border-color: rgba(var(--bs-primary-rgb), .55);
    background-color: var(--bs-tertiary-bg);
}

.ls-vote-opt--rec {
    border-color: rgba(var(--bs-warning-rgb), .55);
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.ls-vote-opt--rec:hover {
    border-color: rgba(var(--bs-warning-rgb), .8);
}

.ls-vote-opt:has(input:checked) {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: var(--bs-white, #fff);
}

.ls-vote-opt:has(input:focus-visible) {
    outline: 3px solid rgba(var(--bs-primary-rgb), .35);
    outline-offset: 2px;
}

.ls-vote-opt:has(input:disabled) {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}

.ls-vote-opt--cumulative {
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
    padding: .5rem;
}

.ls-vote-opt--cumulative input[type="text"] {
    position: static;
    opacity: 1;
    width: 100%;
    height: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .ls-vote-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr));
        row-gap: .5rem;
    }

    .ls-vote-head {
        display: none;
    }

    .ls-vote-prop,
    .ls-vote-result {
        grid-column: 1 / -1;
    }

    .ls-vote-slot {
        display: none;
    }
}

@container ls-vote (max-width: 34rem) {
    .ls-vote-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr));
        row-gap: .5rem;
    }

    .ls-vote-head {
        display: none;
    }

    .ls-vote-prop,
    .ls-vote-result {
        grid-column: 1 / -1;
    }

    .ls-vote-slot {
        display: none;
    }
}

.ls-note-text {
    white-space: break-spaces;
}

.ls-comment-toggle[aria-expanded="true"] .ls-comment-toggle-show,
.ls-comment-toggle[aria-expanded="false"] .ls-comment-toggle-hide {
    display: none;
}

.ls-comment-toggle-icon {
    transition: transform .15s ease;
}

.ls-comment-toggle[aria-expanded="false"] .ls-comment-toggle-icon {
    transform: rotate(-90deg);
}

@media (min-width: 1200px) {
    .ls-sticky-column {
        position: sticky;
        top: 1rem;
        align-self: flex-start;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}