.page-content:hover .icon-hover {
    display: block !important;
}

.hover-shadow {
    cursor: pointer;
}

.hover-shadow:hover {
    box-shadow: 0 .5rem 1rem rgba(var(--bs-body-color-rgb), .15) !important;
}

/* Last-note strip (xNotes::lastNote compact) — the newest note of a contract or application,
   shown as one line on the application and invoice cards.

   Replaces the old .x_click_to_full_height pair, which clipped by fixed height (so long notes
   were cut mid-line with no ellipsis) and put cursor:pointer on every strip whether or not
   there was anything hidden to reveal. */
.xnote-last {
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--bs-body-color);
    /* Accent-2 theme tint. Mixed with the body background so it stays a soft tile in every
       theme and in both light and dark mode — never assume --color2_bg is a light shade. */
    background: color-mix(in srgb, var(--color2) 12%, var(--bs-body-bg));
    border-left: 3px solid var(--color2);
}

.xnote-last + .xnote-last {
    margin-top: 3px;
}

.xnote-last__meta {
    opacity: .65;
}

/* Collapsed state: a single line ending in a real ellipsis. */
.xnote-last__txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50vw;
}

/* is-clamped is added by JS only after measuring that the text actually overflows, so the
   affordance appears exactly where there is hidden text. */
.xnote-last__txt.is-clamped {
    cursor: pointer;
}

.xnote-last__txt.is-open {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    cursor: pointer;
}

.striped .row:nth-of-type(odd) div {
    background-color: #eee;
}

.striped .row:nth-of-type(even) div {
    background: #FFFFFF;
}

.striped .striped-row:nth-of-type(odd) {
    background-color: #eee;
}

.striped .striped-row:nth-of-type(even) {
    background: #FFFFFF;
}

.icon-join .icon-base {
    color: color-mix(in srgb, currentColor 50%, white 50%);
}

/* xTogglerBar */
.xTogglerBar {
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    display: block;
    color: var(--bs-emphasis-color);
    padding: 5px 5px 5px 15px;
}

.xTogglerBar i {
    font-size: 22px;
    padding-left: 10px;
}

.xTogglerContainer {
    margin-top: 30px;
}


.form-control::placeholder {
    color: #aaa !important;
    opacity: 1 !important;
}


/* UniView */
#xUniTabsContainer {
    /*gap: 2px;*/
    /*display: flex;*/
}

#xUniTabsContainer a {
    display: block;
    min-width: 100px;
    background: white;
    color: #888;
    padding: 4px 2px 4px 2px;
    text-align: left;
    background-color: #f6f6f6;
    font-size: 13px;

}

#xUniTabsContainer a i {
    font-size: 20px;
    width: 24px;
    display: inline-block;
    margin-left: 15px;
}


/*#xUniTabsContainer a:hover, #xUniTabsContainer a.active {*/
/*    background: var(--color1);*/
/*    color: var(--color1_contrast) !important;*/
/*}*/

/*@media only screen and (max-width: 800px) {*/
/*    #xUniTabsContainer a {*/
/*        flex: 0 0 30%;*/
/*    }*/
/*}*/

/* xPagination */
.xPagination a {
    /* background-color:    .box_unread {
            background-color: #ffd036 !important;
    } #fff; */
    /* color: #242424; */
    border: solid 1px #bfbfbf;
    border-radius: 0px !important;
}

.xPagination a.active {
    background-color: var(--color1_bg) !important;
    color: var(--color1);
    border: solid 1px #bfbfbf;
    border-radius: 0px !important;
}

.theme-active {
    background-color: var(--color1_bg);
    color: var(--color1_contrast);
}


/* xCP_AdminView — Online/Offline badge.
   Single source of truth for the staff online indicator: every admin identity card
   (staff edit page, own-profile page, company member view) renders the same partial
   (xCP_AdminView_online_status.view.php) and picks up these rules, so the badge can
   never drift into two different looks again.
   Green/grey are deliberately fixed instead of accent-driven: "online" is a near-universal
   convention (every chat app uses green), and tying it to the panel accent would misfire on
   the red/orange themes, where an "available" indicator would read as a warning. */
.xCP_AdminView_viewOnlineStatus {
    display: inline-flex; align-items: center; gap: .45rem; width: auto;
    padding: .3rem .75rem; border-width: 1px; border-style: solid; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.xCP_AdminView_viewOnlineStatus::before {
    content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor;
}

.xCP_AdminView_viewOnlineStatus_Offline {
    border-color: var(--neutral_border);
    background: var(--neutral_surface_alt);
    color: var(--neutral_text_muted);
}

.xCP_AdminView_viewOnlineStatus_Online {
    border-color: color-mix(in srgb, #16a34a 45%, transparent);
    background: color-mix(in srgb, #16a34a 14%, var(--bs-body-bg));
    color: #16a34a;
}

/* Badge + private-message button sit on one right-aligned line; they wrap onto two
   lines rather than squeezing when the column is narrow. */
.xCP_AdminView_statusGroup {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem;
}

/* Private-message shortcut: opens the 1:1 forum room with this staff member. Themed with the
   panel accent (unlike the status pill, which is deliberately fixed green/grey) so it reads as
   an action belonging to the panel rather than a second status. */
.xCP_AdminView_dmBtn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border: 1px solid color-mix(in srgb, var(--color1) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color1) 12%, var(--bs-body-bg));
    color: var(--color1); text-decoration: none;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.xCP_AdminView_dmBtn:hover, .xCP_AdminView_dmBtn:focus {
    background: var(--color1); border-color: var(--color1);
    color: var(--color1_contrast); text-decoration: none;
}

.xCP_AdminView_dmBtn i { font-size: .85rem; }

/* Phone: the badge column stops sharing the 3/9 split with the identity card and
   becomes a full-width bar under it. */
@media (max-width: 767.98px) {
    .xCP_AdminView_onlineStatusCol {
        width: 100%; text-align: start !important; margin: .9rem 0 .25rem;
    }

    .xCP_AdminView_statusGroup { justify-content: stretch; gap: .5rem; }

    .xCP_AdminView_onlineStatusCol .xCP_AdminView_viewOnlineStatus,
    .xCP_AdminView_onlineStatusCol .xCP_AdminView_dmBtn {
        display: flex; flex: 1 1 45%; justify-content: center; width: auto;
        padding: .5rem .75rem; border-radius: .6rem;
    }
}

.xCP_AdminView_viewCartex small {
    vertical-align: text-top;
    font-style: italic;
    padding: 3px 8px;
    margin-left: 15px;
    background-color: #EEEEEE;
    font-size: 13px;
}

.xCP_AdminView_viewCartex_Avatar {
    width: 100px;
    max-width: 100px;
    text-align: center;
}

.xCP_AdminView_viewCartex_Avatar img {
    display: inline-block;
    width: 60px;
    min-height: 60px;
}

#xCP_AdminView_viewTabs {
    /*padding: 6px 1px 0px 1px;*/
    background-color: #EEEEEE;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    gap: 1px;
}

#xCP_AdminView_viewTabs a.tab {
    flex: 1;
    background: white;
    color: #5986be;
    padding: 15px 5px 15px 5px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

#xCP_AdminView_viewTabs a.tab i {
    display: block;
    margin-bottom: 15px;
    font-size: 28px;
}

#xCP_AdminView_viewTabs a.tab:hover,
#xCP_AdminView_viewTabs a.active {
    background: var(--color1_bg) !important;
    color: var(--color1_contrast) !important;
}

@media only screen and (max-width: 800px) {
    #xCP_AdminView_viewTabs a.tab {
        flex: 0 0 30%;
    }
}

/* xReloadWait */
#xReloadWait {
    position: fixed;
    z-index: 999;
    height: 100vh;
    width: 100vw;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(128, 128, 128, 0.7);
    right: 0;
    top: 0;
}

/* Custom video player wrapper (built by xVideo_player() in cp.footer.js and, identically,
   in user.footer.js for the client portal).
   Column flex so the video area stacks above the controls bar and the video
   can grow to fill the free space via flex:1. */
.player {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.player video {
    width: 100%;
    height: auto;
    flex: 1;
    display: block;
}

.video_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: var(--gray-300);
    color: var(--color1);
}

.video_controls button, .video_controls input[type=range] {
    margin: 0 5px;
}

.play-btn, .speed-btn, .mute-btn, .fs-btn {
    font-size: 14px;
    cursor: pointer;
    margin-right: 12px;
}

.play-btn:hover, .speed-btn:hover, .mute-btn:hover, .fs-btn:hover {
    color: var(--blue-500_text);
}

.progress {
    flex: 1;
    margin: 0 10px;
}

/* The volume slider used to take its default browser width (well over 100px) same as the
   progress bar, leaving the seek scrubber - the control actually used every time someone
   watches a video - cramped in the smaller share of the bar. */
.volume {
    flex: 0 0 auto;
    width: 60px;
}

/* Fullscreen: fill the whole screen. Viewport units are used instead of 100%
   so the size never depends on a percentage resolving against an ancestor.
   The wrapper is a flex column, so the video (flex:1) fills all space ABOVE
   the controls bar; previously the video took height:100% of the screen and
   pushed the controls bar off the bottom edge, making them disappear. */
.player:fullscreen {
    width: 100vw;
    height: 100vh;
    background: #000;
}

/* Let the video take all space above the controls bar; contain keeps aspect
   ratio (letterboxing wide/tall videos rather than cropping them). */
.player:fullscreen video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

/* Controls bar stays a fixed-height row at the bottom of the flex column.
   (Class is .video_controls — the old .controls selector never matched.) */
.player:fullscreen .video_controls {
    flex: 0 0 auto;
}

.player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #000;
}

.player:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.player:-webkit-full-screen .video_controls {
    flex: 0 0 auto;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    background: transparent;
    border-radius: 0 !important;
}

input[type="range"]::-moz-range-track {
    background: #ececec;
    height: 12px;
}

input[type="range"]::-moz-range-progress {
    background: var(--color1);
    height: 12px;
}

input[type="range"]::-moz-range-thumb {
    background: var(--color1_darker);
    width: 10px;
    height: 12px;
    border: none;
    border-radius: 0 !important;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 0 !important;
    background: linear-gradient(var(--color1), var(--color1)) 0/var(--progress, 0%) 100% no-repeat, #ececec;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--color1_darker);
    width: 10px;
    height: 12px;
    border: none;
    border-radius: 0 !important;
    margin-top: 0;
}

/* inbox */

.aa_msg_income_class {
}

.aa_msg_outcome_class {
    background-color: #efefef;
    border: 1px solid #fafafa;
}

.aa_msg_outcome_class .msg-details-content {
    border-top: 1px solid #fafafa;
}


.aa_info_1row_sep {
    display: block;
    height: 1px;
    border-bottom: solid 1px #ffbb9d;
    margin: 5px 0px;
}

.aa_info_1row {
    display: block;
    width: 100%;
    padding: 3px 0px !important;
    margin: 0px !important;
}

.aa_info_3row_title {
    color: #e21aff;
    font-size: 12px;
}

.aa_info_1row_title {
    display: inline-block;
    padding: 0px !important;
    margin: 0px !important;
    text-align: right;
    vertical-align: text-top;
    width: 49%;
    font-weight: 700;
}

.aa_info_2row_title {
    display: inline-block;
    padding: 0px !important;
    margin: 0px !important;
    text-align: right;
    vertical-align: text-top;
    width: 49%;
    font-weight: 700;
}

.aa_info_1row_title .is_full_h5 {
    padding-top: 7px;
    border-top: solid 5px #36d2c4;
    margin-top: 20px;
    color: #15b0a3;
    text-align: left;
}

.aa_info_1row_val {
    display: inline-block;
    padding: 0px 0px 0px 10px !important;
    margin: 0px !important;
    vertical-align: text-top;
    color: #00a1d3;
    width: 49%;
}

.aa_info_2row_title .is_full_h5 {
    padding-top: 7px;
    border-top: solid 5px #ba6bae;
    margin-top: 20px;
    color: #ba6bae;
    text-align: left;
}

.aa_info_2row_val {
    display: inline-block;
    padding: 0px 0px 0px 10px !important;
    margin: 0px !important;
    vertical-align: text-top;
    color: #ba6bae;
    width: 49%;
}

.aa_info_1row_val a {
    color: #0d8bb2;
}

.aa_info_big_title {
    margin: 0;
}

.aa_msg_dash_container {
    display: block;
    background-color: white;
    padding: 10px;
    border-bottom: solid 1px #eeeeee;
}

.aa_msg_dash_container:hover {
    display: block;
    background-color: #eeeeee;
}

.aa_msg_dash_inner {
}

.aa_msg_row {
}

.aa_msg_row_label {
    display: inline-block;
    width: 60px;
    text-align: right;
    margin-right: 10px !important;
    padding-right: 0 !important;
    font-size: 13px;
    font-weight: 600;
    color: #a1bccb;
}

.aa_msg_row_data {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #8ea1ab;
}

.aa_msg_dash_msg_uni {
    margin-top: 23px;
    display: block;
    font-size: 11px;
    font-weight: 600;
}

.aa_msg_dash_user_photo {
    float: left;
}

.aa_msg_dash_user_photo img {
    width: 50px;
    margin-right: 15px;
}

.aa_msg_dash_user_fullname {
}

.aa_msg_dash_user_fullname a:link,
.aa_msg_dash_user_fullname a {
    font-size: 15px;
    color: #515151;
}

.aa_msg_dash_user_fullname a i {
    font-size: 20px;
    padding-right: 10px;
}

.aa_msg_dash_subject {
    margin-top: 15px;
}

.aa_msg_dash_subject a:link,
.aa_msg_dash_subject a {
    font-size: 15px;
    color: #4193d0;
}


.aa_msg_closed {
    height: 150px;
    overflow: hidden;
}

.aa_msg_closed .aa_msg_closed_gradiant {
    content: ' ';
    height: 150px;
    bottom: 0px;
    position: absolute;
    width: 100%;
    background: linear-gradient(to bottom, transparent 0%, var(--color1_lighter_contrast) 100%);
}

/* Text utility (e.g. the active "My Contracts" label). Uses the darker accent2 variant, since
   small text needs the 4.5:1 body-text ratio that the badge-strength accent2 does not always
   reach on a white bar. */
.opposite_color1 {
    color: var(--accent2_strong, var(--opposite_color1)) !important;
}

.badge.aa_badge {
    background-color: #ddd;
}

.active .badge {
    color: white !important;
}

/* This rule is why the forum/DM unread badges stayed off-theme: three classes plus
   !important outrank the .aa_badge_active rule in cp.css, so it wins wherever both load.
   Both values now come from the secondary accent, and the text colour follows accent2's own
   computed contrast instead of accent1's (they are different colours - using color1_contrast
   here meant white digits on a pale accent2 in the green, blue and purple themes). */
.badge.aa_badge.aa_badge_active {
    background-color: var(--accent2, var(--opposite_color1)) !important;
    color: var(--accent2_contrast, var(--color1_contrast)) !important;
}

.aa_badge_active {
    box-shadow: 0px 0px 0px 1.5px #ffffffc0;
}

/* Shared by every vertical nav built on .tab_header_box / .active_nav (agent partner,
   contract row, xUni, xPBook, file manager, podcast, post, xFORM tabs). The selected row
   fills solid with the accent - unlike the redesigned CP sidebar's soft-tint + rail, this is
   its own established look and is left alone; only the colours were wrong. color1_contrast
   was a literal '#ffffff' in every theme, so the orange/yellow themes rendered unreadable
   white-on-pale text and icons on their own active row - replaced with the computed
   accent_contrast throughout. */
.tab_header_box.active_nav {
    background-color: var(--accent) !important;
    color: var(--accent_contrast) !important;
}

.tab_header_box.active_nav span {
    color: var(--accent_contrast) !important;
}

/* Quiet count badge sitting on the filled active row: a translucent chip mixed from the row's
   own contrast colour, so it stays visible whether that contrast is white or dark - the old
   left_menu_text_color (the accent desaturated 86%) produced an odd washed tint unrelated to
   either colour. */
.tab_header_box.active_nav span.badge {
    color: var(--accent_contrast) !important;
    background-color: color-mix(in srgb, var(--accent_contrast) 22%, transparent) !important;
}

.tab_header_box.active_nav i {
    color: var(--accent_contrast) !important;
}

.tab_header_box.active_nav:hover .badge.aa_badge.aa_badge_active {
    background-color: var(--accent_contrast) !important;
    color: var(--accent) !important;
}

.tab_header_box:hover .badge.aa_badge.aa_badge_active {
    background-color: var(--accent) !important;
    color: var(--accent_contrast) !important;
}

.badge.aa_badge {
    background-color: var(--accent_contrast) !important;
    color: var(--accent) !important;
}

.active_nav .badge.aa_badge {
    background-color: var(--accent) !important;
    color: var(--accent_contrast) !important;
}

.active_nav .badge.aa_badge.aa_badge_active {
    background-color: var(--accent_contrast) !important;
    color: var(--accent) !important;
}


.col-mail-left .active {
    color: var(--accent_contrast);
    background-color: var(--accent);
    border: none;
}

/*.col-mail-left .stretched-link .fa {*/
/*    background-color: var(--color1_contrast);*/
/*    color: var(--color1);*/
/*}*/

.col-mail-left .active .stretched-link .fa {
    color: var(--color1_contrast) !important;
    /*background-color: var(--color1_bg) !important;*/
}

.col-mail-left .active .stretched-link {
    color: var(--color1_contrast) !important;
    /*background-color: var(--color1_bg) !important;*/
}

.box-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

/* Legacy grey count badge — the note/document totals in the application, contract and
   phone-book navs. Nothing it counts is an unread or overdue state, so it is a level-1
   badge; it just predates the scale and had its own hard-coded grey, which sat off-theme
   in every palette and vanished into the surface in dark mode. */
.aa_badge_gary {
    color: var(--neutral_text_muted) !important;
    background-color: var(--accent_soft) !important;
}


/* xClient */
.xClient_profile_uploaded {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: solid 4px white;
    box-shadow: 0 0 3px #999;
    margin: auto;
}

.xClient_profile_uploaded img {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
}

.xClient_profile_header {
    border-radius: 100%;
    width: 32px;
    height: 32px;
    overflow: hidden;
    margin: 0px;
    display: inline-block;
    margin-top: -7px !important;
}

.xClient_profile_header img {
    width: 36px !important;
    margin-top: -4% !important;
    margin-left: -4% !important;
    top: -5px !important;
}

.xClient_profile {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin: 15px 0;
    border: solid 4px white;
    box-shadow: 0px 0px 3px #999;
    margin: auto;
}

.xClient_profile img {
    width: 110%;
    margin-top: -20%;
    margin-left: -5%;
}

@media (max-device-width: 800px) {

    .aa_photo_circle,
    .xClient_profile {
        margin: 0 auto;
    }
}

.xClient_profile_header {
    border-radius: 100%;
    width: 32px;
    height: 32px;
    overflow: hidden;
    margin: 5px;
    display: inline-block;
    margin-bottom: -10px !important;
}

.xClient_profile_header img {
    width: 36px !important;
    margin-top: -4% !important;
    margin-left: -5% !important;
    top: -5px !important;
}


.button_code_copy {
    text-align: center;
    border: none !important;
    border-radius: 4px !important;
    background-color: #b1cbdb !important;
    color: #192c37 !important;
    cursor: pointer !important;
    font-family: Arial !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}


.button_code_copy {
    height: 100%;
}

/* Drop target while a file is dragged over it (folder rows via xFolder_drag_script, and the
   image add-button in xFORM_ELM). Was a literal antiquewhite, which read as a broken cell in
   dark mode and clashed with every theme; now an accent tint that works in both modes. */
.file-drop-area-highlight {
    background-color: color-mix(in srgb, var(--color1) 16%, var(--bs-body-bg)) !important;
}

.drop-box-file {
    border: 2px dashed #ccc;
    text-align: center;
    padding: 2px;
    height: 21px;
    margin-top: 5px;
    display: inline-block;
    font-size: 11px;
    padding-top: 0;
    color: #888;
    cursor: pointer;
}


.copy_label_hover {
    display: none;
}

.input-group-text:hover .copy_label_hover {
    display: block;
}


/*container bootstrap*/
.parent_legacy {
    container-name: legacyContainer;
    container-type: inline-size;
}

@container legacyContainer (width < 480px) {
    .con-d-xsm-none {
        display: none !important;
    }
}

@container legacyContainer (width < 576px) {
    .con-d-sm-none {
        display: none !important;
    }

    .con-col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .con-col-sm {
        flex: 1 0 0%;
    }

    .con-col-sm-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }

    .con-col-sm-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .con-col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .con-col-sm-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .con-col-sm-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }

    .con-col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .con-col-sm-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }

    .con-col-sm-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }

    .con-col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .con-col-sm-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }

    .con-col-sm-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }

    .con-col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@container legacyContainer (width < 768px) {
    .con-d-md-none {
        display: none !important;
    }

    .con-col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .con-col-md {
        flex: 1 0 0%;
    }

    .con-col-md-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }

    .con-col-md-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .con-col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .con-col-md-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .con-col-md-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }

    .con-col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .con-col-md-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }

    .con-col-md-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }

    .con-col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .con-col-md-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }

    .con-col-md-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }

    .con-col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .con-font-log {
        font-size: 14px;
    }
}

@container legacyContainer (width < 992px) {
    .con-d-lg-none {
        display: none !important;
    }

    .con-font-log {
        font-size: 13px;
    }

    .con-col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .con-col-lg {
        flex: 1 0 0%;
    }

    .con-col-lg-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }

    .con-col-lg-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .con-col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .con-col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .con-col-lg-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }

    .con-col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .con-col-lg-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }

    .con-col-lg-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }

    .con-col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .con-col-lg-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }

    .con-col-lg-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }

    .con-col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.page-content td,
th {
    border: solid 1px #aaa;
}


.cp-page-content {
    width: calc(100% - 13rem);
    transition: all 0.4s;
    height: auto !important;
    min-height: auto !important;
}

.page-content {
    transition: all 0.4s;
    height: auto !important;
    min-height: auto !important;
}


.text-container {
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 15px 0px;
    text-align: justify;
}

/* text-container */
.text-container h1 {
    font-size: 26px;
}

.text-container h2 {
    font-size: 23px;
    padding-top: 20px;
    padding-bottom: 10px;
    font-weight: 600;
}

.text-container h3 {
    font-size: 22px;
    padding-top: 15px;
    padding-bottom: 8px;
    font-weight: 600;
}

.text-container h4 {
    font-size: 21px;
    padding-top: 15px;
    padding-bottom: 8px;
    font-weight: 600;
}

.text-container h5 {
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: 600;
}

.text-container h6 {
    font-size: 19px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: 600;
}

.text-container > ul {
    text-align: justify;
    padding-left: 22px;
}

.text-container ul li {
    text-align: justify;
}

.text-container td,
th {
    border: solid 1px #aaa;
    padding: 2px 6px;
}

:root[data-bs-theme='dark'] {

.aa_badge_active {
    box-shadow: -2px 2px 4px 0px black;
}

}

.extended_view:hover {
    font-size: 25px !important;
    top: 9px !important;
    right: 38px !important;
}

.x_a_link {
    cursor: pointer;
}

.red_left_border {
    border-left: solid var(--red-400) 15px;
}

/* ---- Archived records ---------------------------------------------------------------
   One look for every archived record in the panel: clients, contracts, applications, family
   members, sponsors, language certificates, invoices. Put .x-archived on the record's own box
   and xVIEW::archivedTag() next to its title — both come from xVIEW so no module has to invent
   its own treatment.

   Only an admin holding delete_items ever sees one of these (everyone else has them filtered
   out of the query), so the point is to be unmistakable: a red edge and a faded card, saying
   "this is gone; you are seeing it because you are allowed to". Full opacity on hover, because
   the whole reason a senior can see it is to read it, restore it or erase it. */
.x-archived {
    border-left: solid 10px #dc3545 !important;
    opacity: .6;
    transition: opacity .15s ease;
}

.x-archived:hover {
    opacity: 1;
}

/* Badge for the record's header — beside a contract or application id, under a client's id. */
.x-archived-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.x-archived-tag i {
    font-size: 9px;
}

/* Large full-width variant — used where the archived tag must dominate the header, e.g. the profile preview top. */
.x-archived-tag-lg {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    font-size: 16px;
    gap: 8px;
}

.x-archived-tag-lg i {
    font-size: 15px;
}

.btn-outline-system {
    --bs-btn-color: #0c5da9;
    --bs-btn-border-color: #0c5da9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0c5da9;
    --bs-btn-hover-border-color: #0c5da9;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0c5da9;
    --bs-btn-active-border-color: #0c5da9;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0c5da9;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0c5da9;
    --bs-gradient: none;
}

.btn-outline-system:hover {
    --bs-btn-bg: #0c5da9;
    --bs-btn-color: #fff;
}

:root[data-bs-theme='dark'] .btn-outline-system {
    --bs-card-color: #92979e;
    --bs-btn-color: var(--bs-card-color);
    --bs-btn-border-color: var(--bs-card-color);
    --bs-btn-disabled-color: var(--bs-card-color);
    --bs-btn-disabled-border-color: var(--bs-card-color);
    --bs-btn-active-border-color: var(--bs-card-color);
}

.xcr-agent-partner-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--bs-tertiary-bg, #eef1f5);
    color: var(--bs-secondary-color, #566) !important;
    text-decoration: none;
}

.xcr-agent-partner-chip:hover {
    color: var(--color1, #376892) !important;
}

/* ============================================================
   awz-select — lightweight searchable <select> (replaces select2)
   Rendered by xFORM_ELM::selectElement() when is_select2 = true.
   Themed with Bootstrap CSS variables + theme --color1 tokens so it
   adapts to every theme and light/dark mode automatically.
   ============================================================ */
.awz-select {
    position: relative;
    width: 100%;
}

/* Keep the real <select> in the DOM (for submit + required validation) but visually hidden. */
.awz-select__native {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* The visible box behaves like a Bootstrap .form-control but grows for chips. */
.awz-select__control.form-control {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: calc(1.5em + 0.75rem + 2px);
    height: auto;
    cursor: pointer;
    padding-right: 1.8rem; /* leave room for the caret */
}

.awz-select.is-open .awz-select__control.form-control {
    border-color: var(--color1, #86b7fe);
}

/* Bootstrap sizing classes passed through $extra_class are mirrored onto the control,
   so honour their heights (the base rule above would otherwise force one size). */
.awz-select__control.form-control-sm {
    min-height: calc(1.5em + .5rem + 2px);
    padding-right: 1.6rem;
}

.awz-select__control.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding-right: 2rem;
}

/* Bootstrap sizes input groups with a DIRECT-child selector
   (.input-group-sm > .form-control). Because the widget adds a .awz-select wrapper the
   visible control is a grandchild, so those rules stop matching — re-apply them here for
   the wrapped structure. Keep padding-right larger to leave room for the caret. */
.input-group-sm > .awz-select > .awz-select__control.form-control,
.input-group-sm .awz-select > .awz-select__control.form-control {
    padding: .25rem 1.6rem .25rem .5rem;
    font-size: .875rem;
    border-radius: .25rem;
    min-height: calc(1.5em + .5rem + 2px);
}

.input-group-lg > .awz-select > .awz-select__control.form-control,
.input-group-lg .awz-select > .awz-select__control.form-control {
    padding: .5rem 2rem .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .5rem;
    min-height: calc(1.5em + 1rem + 2px);
}

/* Behave like the .form-control it replaced when the group is a flex row. */
.input-group > .awz-select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.awz-select--disabled .awz-select__control {
    cursor: not-allowed;
    opacity: .65;
    background: var(--bs-secondary-bg, #e9ecef);
}

.awz-select__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.awz-select__single {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.awz-select__placeholder {
    color: var(--bs-secondary-color, #6c757d);
    opacity: .85;
}

/* Caret. */
.awz-select__arrow {
    position: absolute;
    right: .75rem;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    opacity: .6;
    transform: translateY(-50%);
    transition: transform .15s ease;
}

.awz-select.is-open .awz-select__arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Chips (multiple selection) — strong theme colour tile with its contrast text. */
.awz-select__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 1px 4px 1px 8px;
    border-radius: 999px;
    font-size: .85em;
    background: var(--color1, #376892);
    color: var(--color1_contrast, #fff);
}

.awz-select__chip > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.awz-select__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    opacity: .85;
    background: rgba(0, 0, 0, .15);
    color: inherit;
}

.awz-select__chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .3);
}

/* Dropdown panel.
   position:fixed (coordinates set by JS) so the list is never clipped by a card,
   table wrapper or modal that has overflow hidden/auto — the common case where a
   select sits inside a .card with little room left below it. */
.awz-select__dropdown {
    position: fixed;
    z-index: 1060;
    display: none;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius, .375rem);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    overflow: hidden;
}

.awz-select.is-open .awz-select__dropdown {
    display: block;
}

/* Flipped above the control when there is not enough room below. */
.awz-select--up.is-open .awz-select__arrow {
    transform: translateY(-50%) rotate(180deg);
}

.awz-select__search {
    padding: 6px;
    border-bottom: 1px solid var(--bs-border-color, #e0e0e0);
}

.awz-select__search input {
    width: 100%;
    padding: .35rem .6rem;
    outline: none;
    font-size: .9em;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius-sm, .25rem);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
}

.awz-select__search input:focus {
    border-color: var(--color1, #86b7fe);
}

.awz-select__options {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.awz-select__option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .4rem .6rem;
    border-radius: var(--bs-border-radius-sm, .25rem);
    cursor: pointer;
    white-space: normal;
    color: var(--bs-body-color, #212529);
    min-height: 30px;
}

.awz-select__option-text {
    flex: 1 1 auto;
}

.awz-select__option.is-active,
.awz-select__option:hover {
    background: var(--bs-tertiary-bg, #f1f3f5);
}

.awz-select__option.is-selected {
    background: var(--color1, #376892);
    color: var(--color1_contrast, #fff);
}

.awz-select__option.is-selected.is-active,
.awz-select__option.is-selected:hover {
    background: var(--color1_darker, #2c5375);
    color: var(--color1_contrast, #fff);
}

.awz-select__option.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Right-to-left (fa) support. */
[dir="rtl"] .awz-select__control.form-control {
    padding-right: .75rem;
    padding-left: 1.8rem;
}

[dir="rtl"] .awz-select__arrow {
    right: auto;
    left: .75rem;
}

[dir="rtl"] .awz-select__chip {
    padding: 1px 8px 1px 4px;
}

/* ---------------------------------------------------------------------------------------
   xFORM fields on phones
   ---------------------------------------------------------------------------------------
   Every xFORM field renders as `.row.mobile_cp_element` holding a label column and an input
   column. The label column carries an inline width/max-width (xFORM::$parent_label_style,
   160px by default) and the label an inline min-width, so once the row wraps on a phone the
   caption stays a narrow right-aligned sliver while the field next to it keeps whatever
   width is left — the rows end up ragged and misaligned.

   Below, every field becomes one uniform full-width stack: caption on its own line, field
   directly under it, identical gutters and identical vertical rhythm for all field types.
   This mirrors the rule the user panel already applies (user.css .mobile_cp_element), which
   the CP panel never had. Everything is inside the media query, so desktop is untouched. */
@media (max-width: 767.98px) {

    /* One consistent block per field — no flex row, no leftover gutters. The caption and its
       field read as a single unit, so the gap that separates one unit from the next has to be
       clearly larger than the (zero) gap inside it, or the whole column reads as one run-on
       list. Hence the generous bottom margin. */
    .mobile_cp_element {
        display: block !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
    }

    /* Both columns span the full width; the inline 160px on the label column is overridden. */
    .mobile_cp_element > .xform-label-col,
    .mobile_cp_element > .input-group-x {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Caption: full width, left-aligned, joined to the field below it. */
    .mobile_cp_element > .xform-label-col > .input-group-text-x {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: left !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        border-radius: 6px 6px 0 0 !important;
    }

    /* Field: same full width for every control type, squared off against the caption. */
    .mobile_cp_element .form-control,
    .mobile_cp_element .form-select,
    .mobile_cp_element input:not([type="checkbox"]):not([type="radio"]),
    .mobile_cp_element textarea,
    .mobile_cp_element select,
    .mobile_cp_element .awz-select,
    .mobile_cp_element .awz-select__control {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 6px 6px !important;
    }

    /* A field wrapped in an input-group (button/icon add-ons) must not round its own edge. */
    .mobile_cp_element .input-group > .form-control,
    .mobile_cp_element .input-group > .form-select {
        border-radius: 0 !important;
    }

    /* Suffix/adornment pinned to the top-right of the field (currency codes, units) would
       now sit on the caption line — drop it onto the field itself. */
    .mobile_cp_element + .position-absolute,
    .position-relative > .mobile_cp_element ~ .position-absolute {
        top: auto !important;
        bottom: 8px !important;
        right: 10px !important;
        font-size: 10px !important;
    }
}

/* ---------------------------------------------------------------------------------------
   xStatuses widget on phones
   ---------------------------------------------------------------------------------------
   The status bar is built for a wide column: 15px of left padding on the toggler bar, an
   oversized chevron and an 18px title. On a phone that padding is pure waste on both sides
   and the title crowds the "n days ago by <admin>" stamp next to it. Trim both sides to one
   consistent, much smaller gutter and drop the type a step. Compact bars (rendered with
   xStatuses::getView(is_compact: true)) carry their own inline font-size and are unaffected
   -- this only softens the full-size bar. Desktop is untouched. */
@media (max-width: 767.98px) {

    .xTogglerBar {
        padding: 4px 8px !important;
        font-size: 14px;
    }

    .xTogglerBar i {
        font-size: 15px;
        padding-left: 6px;
    }

    /* The widget wrapper and its inner columns each add their own gutter on top of that. */
    .xStatus_wrap,
    div[id^="xStatus_container_"] {
        padding: 3px !important;
    }

    div[id^="xStatus_container_"] > .col-md-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Day/author stamp shares the bar with the title, so keep it from wrapping awkwardly. */
    .xTogglerBar h6 {
        font-size: 11px !important;
        margin-bottom: 0;
    }
}

/* NOTE: the mobile rule that hides the CP page-title tools (reload / copy-link / extra) now
   lives in cp.css, in the consolidated "Per-page title bar" media query — that file declares
   itself the single source of truth for this bar, and keeping the rule in two stylesheets
   invited exactly the specificity conflicts that comment warns about. */

/* ══════════════════════════════════════════════════════════════════════════════════════════
   COMPANY TAG — one look for every "company attached to a record" chip
   ══════════════════════════════════════════════════════════════════════════════════════════
   Used by the client row (clients list), the client card, the contract card and the
   application card. Before this the four places each had their own font size, radius, fill and
   agent-chip treatment, so the same counsellor company looked like a different kind of thing
   on every screen. The tag is: [company logo] Company Name  (agent) (agent)

   Square corners and a flat fill, no shadow — the panel's own idiom. The fill is derived from the
   accent's soft tint (--accent_soft, a 12% wash computed per theme in cp_css::accentTokens) so the
   tags follow whichever of the 9 accents the admin is on, in light and dark, instead of a fixed
   grey that looked bolted on under half of them. It is then mixed back towards the surface: at
   full accent_soft a screen full of these tags read as coloured blocks rather than as labels.

   No border at rest — with several tags per row the outlines added up to visual noise — but the
   border is kept in the box model as a transparent one, so the tag does not shift by a pixel when
   hover brings the accent outline in. */
.xco-tag {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
    min-width: 0;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 0;
    background: color-mix(in srgb, var(--accent_soft, #eef3f8) 55%, var(--neutral_surface, #fff));
    color: var(--bs-body-color);
    font-size: 11px;
    line-height: 1.35;
    text-decoration: none;
    vertical-align: middle;
}

/* Not scoped to a.xco-tag: the contract, application and invoice cards render the tag as a
   plain span, and the outline is what tells you which tag the pointer is on there too. */
.xco-tag:hover { border-color: var(--accent, var(--color1)); }

a.xco-tag:hover {
    color: var(--bs-body-color);
    text-decoration: none;
}

/* The company's own square logo (agent_partner_logo_icon), stored at 18px height. Kept small
   enough to sit on the text baseline without pushing the tag taller than a line of text. */
.xco-tag__icon {
    height: 14px;
    width: auto;
    max-width: 40px;
    flex: 0 0 auto;
    object-fit: contain;
}

.xco-tag__name {
    min-width: 0;
    font-weight: 600;
}

/* Agents assigned through this company. Lifted off the tag's fill so they read as belonging
   to it rather than competing with the company name. */
.xco-agent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 1px 7px;
    border-radius: 0;
    background: var(--neutral_surface, #fff);
    color: var(--neutral_text_muted, #6b7785) !important;
    /* Kept a step under the company name so the company stays the thing you scan for. */
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xco-agent i { font-size: 9px; opacity: .7; }

.xco-agent:hover {
    background: var(--accent, var(--color1));
    color: var(--accent_contrast, var(--color1_contrast)) !important;
    text-decoration: none;
}

.xco-agent:hover i { opacity: 1; }

/* Role label in front of the tag (Counsellor / Admission / Partner / Other). A label, not a
   link - staff used to click at these expecting a page. */
.xco-role {
    color: var(--neutral_text_muted, #6b7785);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.xco-role i { margin-right: 4px; opacity: .7; }

/* ============================================================ form links ===
   Rows inside the "Online Forms" / "Fill Online Forms" panels of the contract and
   application cards (xContract_tabForm / xApplication_tabForm). Shared by both panels, so
   the colours come from the tokens each panel defines, with plain fallbacks.

   Each row is one form the client can open and fill; the trailing glyph says it opens in a
   new tab, which is what these links do.
   ========================================================================= */

.xform-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xform-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--neutral_surface_alt, #f6f8fa);
    color: var(--bs-body-color, #1e293b) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}

.xform-link > i:first-child {
    flex: 0 0 18px;
    text-align: center;
    font-size: 14px;
    color: var(--accent, var(--color1, #0c5da9));
}

.xform-link > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xform-link__go {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: .45;
}

.xform-link:hover {
    background: color-mix(in srgb, var(--accent, var(--color1, #0c5da9)) 12%, var(--neutral_surface, #fff));
    border-color: color-mix(in srgb, var(--accent, var(--color1, #0c5da9)) 35%, transparent);
    color: var(--bs-body-color, #1e293b) !important;
}

.xform-link:hover .xform-link__go { opacity: .9; }

/* ── Auto-detected links inside message bodies ────────────────────────────────────────────
   Emitted by xSTR::linkify() / linkifyHtml() wherever a body of text is shown: notification
   cards, reminder cards and their full-page lists. A URL pasted into a reminder used to sit
   there as dead text, so these have to read as clickable at a glance — hence the accent colour
   and the underline, which is the one cue a link keeps in every theme.

   The leading icon is picked from the URL (document, video, map, …) so the link says what it
   opens before it is followed. Scoped to the class, not to a container, so the same link looks
   the same wherever the message is rendered. The forum keeps its own scoped rule, which is more
   specific and still wins there. */
.xnote-link {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    color: var(--accent, var(--color1));
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--accent, var(--color1)) 45%, transparent);
    font-weight: 600;
    word-break: break-word;
}

.xnote-link:hover {
    color: var(--accent_strong, var(--accent, var(--color1)));
    text-decoration-color: currentColor;
}

/* The icon is a marker, not part of the label: it stays out of the underline and sits a step
   back in weight so the URL itself is what the eye lands on. */
.xnote-link-lead {
    flex: 0 0 auto;
    text-decoration: none;
    font-size: .95em;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: .3;
}

.xnote-link-label { text-decoration: inherit; }

/* Trailing "opens elsewhere" marker used by the icon-less variant (forum/chat). */
.xnote-link-ico {
    flex: 0 0 auto;
    margin-left: 2px;
    font-size: .8em;
    opacity: .7;
    text-decoration: none;
}