/* ══════════════════════════════════════════════════════════════════════
   BG Community Market — Shared Component Styles
   Reusable patterns shared across pages
   ══════════════════════════════════════════════════════════════════════ */

/* ── Module accent colors ── */
:root {
    --bg-client-accent:         #006400;       /* DarkGreen — client short names */
    --bg-client-brush:          #948B2D;       /* SolidBrushClient warm gold    */
    --bg-employer-global:       #377D22;
    --bg-employer-local:        #36952D;
    --bg-employer-locked:       #377E47;
    --bg-country-accent:        #94582D;
    --bg-market-data:           #2D6994;
    --bg-separator:             #9e9e9e;       /* Gray divider lines            */
}

/* ── Page layout ── */
.bg-page-centered {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--bg-space-lg, 1.5rem);
}

.bg-page-header {
    margin-bottom: var(--bg-space-lg, 1.5rem);
}

.bg-page-header h1 {
    font-size: var(--bg-font-size-h1, 24px);
    font-weight: 600;
    color: var(--bg-primary, #1a5276);
    margin: 0 0 var(--bg-space-xs, 0.25rem);
}

.bg-page-header .bg-subtitle {
    font-size: var(--bg-font-size-sm, 12px);
    color: var(--bg-text-secondary, #7f8c8d);
}

/* ── Card list (vertical stack of clickable cards) ── */
.bg-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--bg-space-sm, 0.5rem);
}

.bg-card {
    display: flex;
    align-items: center;
    gap: var(--bg-space-lg, 1.5rem);
    background: var(--bg-surface, #fff);
    border: 1px solid var(--bg-border, #d5d8dc);
    border-radius: var(--bg-radius-lg, 8px);
    padding: var(--bg-space-md, 1rem) var(--bg-space-lg, 1.5rem);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.bg-card:hover {
    border-color: var(--bg-primary-light, #2980b9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.bg-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bg-card-logo {
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.bg-card-body {
    flex: 1;
    min-width: 0;
}

.bg-card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 350px;
}

.bg-card-separator {
    height: 1px;
    background-color: var(--bg-separator, #9e9e9e);
    margin: var(--bg-space-xs, 0.25rem) 0;
    max-width: 300px;
}

.bg-card-subtitle {
    font-size: 14px;
    color: var(--bg-text-secondary, #7f8c8d);
    margin-top: var(--bg-space-sm, 0.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 350px;
}

/* ── Empty / error states ── */
.bg-empty-state {
    text-align: center;
    padding: var(--bg-space-xl, 2rem);
    color: var(--bg-text-secondary, #7f8c8d);
}

.bg-error-state {
    text-align: center;
    padding: var(--bg-space-xl, 2rem);
}

.bg-error-state .bg-error-message {
    color: var(--bg-danger, #e74c3c);
    margin-bottom: var(--bg-space-md, 1rem);
}

/* ── Telerik component overrides (align with BG brand) ── */
.bg-loader-container .k-loader {
    color: var(--bg-primary, #1a5276);
}

.bg-listview .k-listview-content {
    background: transparent;
}

.bg-listview .k-listview-item {
    background: transparent;
    border: none;
    padding: 0;
}

/* ── Button variants ── */
.bg-btn-retry {
    background-color: var(--bg-primary, #1a5276);
    color: #fff;
    border: none;
    border-radius: var(--bg-radius, 4px);
    padding: var(--bg-space-sm, 0.5rem) var(--bg-space-lg, 1.5rem);
    font-size: var(--bg-font-size, 14px);
    cursor: pointer;
    transition: background-color 0.15s;
}

.bg-btn-retry:hover {
    background-color: var(--bg-primary-light, #2980b9);
}

/* ══════════════════════════════════════════════════════════════════════
   BG Rounded Green Button
   Background #659947, CornerRadius 10, white text, drop shadow on hover
   ══════════════════════════════════════════════════════════════════════ */
/* Use button.bg-btn-green for higher specificity than .k-button / .btn defaults. */
button.bg-btn-green,
.bg-btn-green {
    background-color: #659947 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 6px 14px !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.2s;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: none;
    text-decoration: none;
}

button.bg-btn-green:hover,
.bg-btn-green:hover {
    background-color: #77CC40 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

button.bg-btn-green:active,
.bg-btn-green:active {
    background-color: #5a8a3f !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

button.bg-btn-green:disabled,
button.bg-btn-green[disabled],
.bg-btn-green:disabled,
.bg-btn-green[disabled] {
    background-color: #c0c0c0 !important;
    color: #f4f4f4 !important;
    cursor: not-allowed;
    box-shadow: none;
}

.bg-btn-green .k-svg-icon,
.bg-btn-green svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ══════════════════════════════════════════════════════════════════════
   FilterPanel — Collapsible output filter controls
   Grouped fieldsets
   ══════════════════════════════════════════════════════════════════════ */

.filter-panel-expander {
    margin-bottom: 10px;
    border: 1px solid #d5d8dc;
    border-radius: 6px;
    background: #f4f7f1;
    overflow: hidden;
}

/* Native <summary> styling — branded header.
   `display: flex` removes the default browser disclosure triangle entirely
   in modern Chromium/Firefox; the ::-webkit-details-marker rule is kept as
   a belt-and-suspenders fallback for older WebKit. */
.filter-panel-expander > .filter-panel-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    min-height: 32px;
    background: linear-gradient(180deg, #f4f7f1 0%, #eaf0e3 100%);
    color: #255A2A;
    border-bottom: 1px solid transparent;
}

.filter-panel-expander > .filter-panel-summary::-webkit-details-marker,
.filter-panel-expander > .filter-panel-summary::marker {
    display: none;
    content: "";
}

.filter-panel-expander > .filter-panel-summary:hover {
    background: linear-gradient(180deg, #eaf0e3 0%, #dde8d0 100%);
}

.filter-panel-expander[open] > .filter-panel-summary {
    border-bottom-color: #cdd6c4;
}

.filter-panel-chevron {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    color: #255A2A;
    transform: rotate(-90deg);
    transition: transform 0.15s ease-out;
}

.filter-panel-expander[open] > .filter-panel-summary .filter-panel-chevron {
    transform: rotate(0deg);
}

.filter-panel-header-text {
    font-size: 13px;
    color: #255A2A;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.filter-panel-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px 12px;
    align-items: stretch;
    background: #f8faf5;
}

/* Group fieldsets */
.filter-group {
    border: 1px solid #cdd6c4;
    border-radius: 5px;
    padding: 4px 10px 8px;
    margin: 0;
    min-width: 150px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.filter-group legend {
    font-size: 11px;
    font-weight: 700;
    color: #255A2A;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 6px;
    width: auto;
    margin-bottom: 2px;
    float: none;
    line-height: 1;
}

/* Individual control items */
.filter-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.4;
    min-height: 24px;
}

.filter-control:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-size: 12px;
    color: #333;
    white-space: nowrap;
}

/* Toggle */
.filter-toggle {
    justify-content: space-between;
}

.filter-toggle .filter-label {
    flex: 1;
}

/* Checkbox */
.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
}

.filter-checkbox-label input[type="checkbox"] {
    accent-color: #659947;
    width: 14px;
    height: 14px;
    margin: 0;
}

/* Radio group (template-authored RadioButtons filter control, 86eyjha6b).
   Deliberately the same shape as the templated form pages' radio group, so the two
   read as one control rather than two conventions. */
.filter-radio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filter-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 12px;
}

.filter-radio-option input[type="radio"] {
    accent-color: #659947;
    width: 14px;
    height: 14px;
    margin: 0;
}

.filter-radio-option input[type="radio"]:disabled + span {
    opacity: 0.6;
}

/* Multi-select (checkbox list) */
.filter-multiselect {
    flex-direction: column;
    align-items: flex-start;
}

.filter-multiselect-label {
    font-size: 11px;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}

.filter-multiselect-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-multiselect-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
}

.filter-multiselect-item input[type="checkbox"] {
    accent-color: #659947;
    width: 13px;
    height: 13px;
    margin: 0;
}

/* ComboBox */
.filter-combo {
    gap: 8px;
}

/* Slider */
.filter-slider {
    gap: 8px;
}

.filter-slider-value {
    font-size: 11px;
    color: #444;
    min-width: 38px;
    text-align: right;
    font-weight: 500;
}

/* Button group inside fieldset — stack vertically with spacing */
.filter-group .filter-button + .filter-button {
    margin-top: 6px;
}

/* Label-only controls */
.filter-label-control {
    font-size: 12px;
    color: #555;
}

/* Telerik Switch on-color → BG green to match brand */
.filter-panel-expander .k-switch-on .k-switch-track {
    background-color: #659947;
    border-color: #5a8a3f;
}

/* Loading state — shown in body while PageFilterTemplates are being fetched */
.filter-panel-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    color: #5a6c4f;
    font-size: 12px;
    font-style: italic;
}

.filter-panel-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #cdd6c4;
    border-top-color: #659947;
    border-radius: 50%;
    animation: bg-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes bg-spin {
    to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════
   Template Form Controls — Edit/preview forms for CountryTemplate pages
   ══════════════════════════════════════════════════════════════════════ */

/* ── Form container ── */
.template-form {
    max-width: 900px;
    padding: 0 var(--bg-space-md, 1rem);
}

/* ── Section headers ── */
.template-header {
    margin: 0 0 15px 0;
}

.template-header-level-0 h4 {
    font-weight: 700;
    font-size: 16px;
    margin: 15px 0 10px 0;
    color: var(--bg-text, #2c3e50);
}

.template-header-level-1 h5 {
    font-weight: 700;
    font-size: 15px;
    margin: 10px 0 8px 20px;
    color: var(--bg-text, #2c3e50);
}

.template-header-level-2 h6 {
    font-weight: 700;
    font-size: 14px;
    margin: 8px 0 6px 40px;
    color: var(--bg-text, #2c3e50);
}

/* ── Control row ── */
.template-control {
    display: flex;
    align-items: flex-start;
    margin: 0 25px 20px 0;
    flex-wrap: wrap;
}

/* ── Labels (width 250, right-aligned) ── */
.template-label {
    width: 250px;
    min-width: 250px;
    text-align: right;
    margin: 0 30px 5px 0;
    font-size: 14px;
    /* Natural multi-line spacing (wraps at ~1.3, not the control height).
       A 35px line-height centred a single-line label against the control row, but made
       wrapped labels (e.g. the long "Are housing related expenses…" question) balloon —
       every wrapped line was 35px apart. Use a normal line-height so wrapped labels flow,
       and a small padding-top (matching .template-radio-group's 6px) so a single-line
       label still lines up with its control. */
    line-height: 1.3;
    padding-top: 6px;
    color: var(--bg-text, #2c3e50);
    word-wrap: break-word;
}

/* Comments label aligns to top */
.template-comments .template-label {
    line-height: 1.4;
    padding-top: 8px;
}

/* Required field indicator */
.template-required {
    color: var(--bg-danger, #e74c3c);
    margin-left: 2px;
}

/* ── Input group (holds input + suffix side by side) ── */
.template-input-group {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
}

/* ── Suffix labels (margin 5, font 14) ── */
.template-suffix {
    font-size: 14px;
    margin: 0 0 0 5px;
    color: var(--bg-text, #2c3e50);
    white-space: nowrap;
    line-height: 35px;
}

/* ── Hyperlink controls (DataTemplateHyperLinkLevel1) ── */
/* Navigates to another survey sub-page. Rendered blue and clickable like a link. */
.template-hyperlink .template-input-group {
    line-height: 35px;
}

.template-link {
    color: var(--bg-link, #2f6fba);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.template-link:hover {
    text-decoration: underline;
}

.template-link-suffix {
    font-size: 14px;
    margin: 0 0 0 5px;
    color: var(--bg-text, #2c3e50);
}

/* ── Readonly values ── */
.template-readonly-value {
    font-size: 14px;
    line-height: 35px;
    color: var(--bg-text, #2c3e50);
}

.template-readonly-comments p {
    font-size: 14px;
    margin: 0;
    color: var(--bg-text, #2c3e50);
    line-height: 1.5;
}

/* ── Display-only fields (identity values: employer name, survey effective date) ──
   The template renders these read-only (WPF binds them one-way to a TextBlock) with an
   explicit pencil affordance for an intentional correction. The value is set slightly
   stronger than a plain read-only label so it still reads as the record's own data, and
   the pencil stays quiet until the row is hovered/focused so the form is not littered
   with icons. */
.template-display-only .template-readonly-value {
    font-weight: 600;
}

.template-edit-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: var(--bg-link, #2f6fba);
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.template-control:hover .template-edit-toggle,
.template-edit-toggle:hover,
.template-edit-toggle:focus-visible,
.template-edit-toggle.is-unlocked {
    opacity: 1;
}

.template-edit-toggle:hover {
    background: var(--bg-surface-hover, #eaecf0);
    border-color: var(--bg-border, #d5d8dc);
}

.template-edit-toggle:focus-visible {
    outline: 2px solid var(--bg-link, #2f6fba);
    outline-offset: 1px;
}

/* Unlocked: the "done" button confirms the field is live and editable. */
.template-edit-toggle.is-unlocked {
    color: var(--bg-primary, #255A2A);
}

.template-edit-icon {
    display: block;
    pointer-events: none;
}

/* Date picker inside a templated form — match the other inputs' 35px row height. */
.template-date .k-datepicker,
.template-date .k-input {
    height: 35px;
    font-size: 14px;
}

/* ── Numeric input overrides (150×35, border #D7D7D7) ── */
.template-numeric .k-numerictextbox,
.template-numeric .k-input {
    width: 150px !important;
    height: 35px;
    font-size: 14px;
}

.template-numeric .k-input-inner {
    text-align: right;
    padding: 8px 10px;
}

.template-numeric .k-input:hover,
.template-numeric .k-input:focus-within {
    border-color: #94E224;
    border-width: 2px;
}

/* ── ComboBox overrides (150×40) ── */
.template-combo .k-combobox,
.template-combo .k-dropdownlist {
    width: 240px !important;
    height: 40px;
    font-size: 14px;
}

.template-combo .k-combobox:hover,
.template-combo .k-dropdownlist:hover,
.template-combo .k-combobox:focus-within,
.template-combo .k-dropdownlist:focus-within {
    border-color: #94E224;
}

/* ── Comments/textarea (width 300, minHeight 150) ── */
.template-comments .template-input-group {
    flex-direction: column;
    align-items: flex-start;
}

.template-comments .k-textarea,
.template-comments .k-input {
    width: 350px !important;
    min-height: 100px;
    font-size: 14px;
    background: #F7F6F3;
}

.template-comments .k-input-inner {
    padding: 8px 10px;
}

/* Remaining characters counter (fontSize 12) */
.template-char-count {
    font-size: 12px;
    color: var(--bg-text-secondary, #7f8c8d);
    margin-top: 4px;
}

/* ── TextBox overrides ── */
.template-text .k-textbox,
.template-text .k-input {
    width: 240px !important;
    height: 35px;
    font-size: 14px;
}

.template-text .k-input:hover,
.template-text .k-input:focus-within {
    border-color: #94E224;
    border-width: 2px;
}

/* ── Checkbox ── */
.template-checkbox {
    align-items: center;
}

.template-checkbox .template-input-group {
    padding-top: 2px;
}

/* ── Radio button groups ──
   The option set (DataTemplateRadioButtons*) lays out HORIZONTALLY, so
   Yes / No / Don't know appear side by side — flex row with
   wrap for long option sets. `row-gap` keeps a small stacking gap only when
   options wrap to a second line. */
.template-radio-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    row-gap: 4px;
    padding-top: 6px;
}

.template-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bg-text, #2c3e50);
    cursor: pointer;
    line-height: 1.4;
}

.template-radio-option input[type="radio"] {
    cursor: pointer;
    accent-color: #4a7a2a;
    margin: 0;
}

/* ── Editable combo (datalist input) + currency select + plain text input ── */
.template-text-input,
.template-select {
    width: 240px;
    height: 35px;
    font-size: 14px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    padding: 0 10px;
    background: #fff;
    box-sizing: border-box;
    color: var(--bg-text, #2c3e50);
}

.template-text-input:hover,
.template-text-input:focus,
.template-select:hover,
.template-select:focus {
    border-color: #94E224;
    outline: none;
}

.template-text-input:disabled,
.template-select:disabled {
    background: #f5f5f5;
}

/* ── Eligible grades selector (DataTemplateGradesSelector*) ── */
.template-grades .template-grades-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.template-grades-modes {
    display: flex;
    gap: 14px;
    padding-top: 6px;
}

.template-grades-partial span {
    color: var(--bg-text-secondary, #7f8c8d);
}

.template-grades-list {
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    background: #fff;
    min-width: 220px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 10px;
}

.template-grade-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 2px 0;
    cursor: pointer;
    color: var(--bg-text, #2c3e50);
}

.template-grade-item input[type="checkbox"] {
    cursor: pointer;
    accent-color: #4a7a2a;
    margin: 0;
}

/* ── Scale-related grade values grid (DataTemplateGradeValues*) ── */
.grade-values-grid {
    max-width: 480px;
}

.grade-values-grid .gv-grade {
    min-width: 120px;
    text-align: left;
}

/* Editable value cells get a light-blue background. */
.grade-values-grid .gv-cell:not(:disabled) {
    background: #e7f3fb;
}

.grade-values-grid .gv-empty {
    color: #888;
    font-style: italic;
}

/* ── Profile Local (ProfileLocal module) ── */
.pls-rate-context {
    border: 1px solid #d5d8dc;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: #fafbfc;
}

.pls-rate-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

.pls-rate-label {
    min-width: 170px;
    font-weight: 600;
    color: #4a4a4a;
}

.pls-rate-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 14px;
}

.pls-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* Read-only profile fields (e.g. ProfileLocalAgeing when Profile.CanEdit == false):
   a subtle locked cue without the greyed-out look of [disabled], and suppress the
   native date picker indicator so readonly date inputs are genuinely non-editable
   (the browser otherwise lets the picker change a readonly date value). */
.pls-form-row input[readonly] {
    background-color: #f2f2f2;
    color: #6d6d6d;
    cursor: default;
}

.pls-form-row input[readonly]::-webkit-calendar-picker-indicator {
    display: none;
}

.pls-grid {
    border-collapse: collapse;
    width: 100%;
    margin-top: 6px;
    font-size: 13px;
}

.pls-grid th,
.pls-grid td {
    border: 1px solid #e0e0e0;
    padding: 5px 10px;
    text-align: left;
}

.pls-grid thead th {
    background: #f1f3f5;
    font-weight: 600;
    white-space: nowrap;
}

.pls-grid td.pls-col-check,
.pls-grid th.pls-col-check {
    text-align: center;
    width: 85px;
}

.pls-row-disabled td {
    background: #f3f3f3;
    color: #9a9a9a;
}

.pls-grid-selectable tbody tr {
    cursor: pointer;
}

.pls-grid-selectable tbody tr:hover {
    background: #eef6e8;
}

.pls-row-selected td {
    background: #d9edc8 !important;
}

/* ── Profile Local: BG level row shading ── */
.pls-bg16 td { background:#000000 !important; color:#fff !important; }
.pls-bg15 td { background:#780000 !important; color:#fff !important; }
.pls-bg14 td { background:#AA0000 !important; color:#fff !important; }
.pls-bg13 td { background:#FF1E32 !important; color:#fff !important; }
.pls-bg12 td { background:#FFA500 !important; }
.pls-bg11 td { background:#FFFF00 !important; }
.pls-bg10 td { background:#32CD32 !important; }
.pls-bg09 td { background:#00FFFF !important; }
.pls-bg08 td { background:#0000FF !important; color:#fff !important; }
.pls-bg07 td { background:#9600C8 !important; color:#fff !important; }
.pls-bg06 td { background:#C864FF !important; }
.pls-bg05 td { background:#64C8FF !important; }
.pls-bg04 td { background:#C8FF64 !important; }
.pls-bg03 td { background:#96C800 !important; }
.pls-bg02 td { background:#966400 !important; color:#fff !important; }
.pls-bg01 td { background:#643200 !important; color:#fff !important; }

/* ── Profile Local: BG level SINGLE-cell shading (class lands on the <td> itself,
   e.g. Matched Jobs "Level / BG Grade" column or row) ── */
.pls-bgc16 { background:#000000 !important; color:#fff !important; }
.pls-bgc15 { background:#780000 !important; color:#fff !important; }
.pls-bgc14 { background:#AA0000 !important; color:#fff !important; }
.pls-bgc13 { background:#FF1E32 !important; color:#fff !important; }
.pls-bgc12 { background:#FFA500 !important; }
.pls-bgc11 { background:#FFFF00 !important; }
.pls-bgc10 { background:#32CD32 !important; }
.pls-bgc09 { background:#00FFFF !important; }
.pls-bgc08 { background:#0000FF !important; color:#fff !important; }
.pls-bgc07 { background:#9600C8 !important; color:#fff !important; }
.pls-bgc06 { background:#C864FF !important; }
.pls-bgc05 { background:#64C8FF !important; }
.pls-bgc04 { background:#C8FF64 !important; }
.pls-bgc03 { background:#96C800 !important; }
.pls-bgc02 { background:#966400 !important; color:#fff !important; }
.pls-bgc01 { background:#643200 !important; color:#fff !important; }

/* ── Market Data value-cell text colours (High/Low + Irregular Progression) ──
   Applied to the <td> via OnCellRender; value cells keep a white background so
   the coloured text reads clearly. */
.pls-txt-red    { color:#cc0000 !important; font-weight:600; }   /* High value      */
.pls-txt-blue   { color:#0040d0 !important; font-weight:600; }   /* Low value       */
.pls-txt-green  { color:#0a8a0a !important; }                    /* percentile cols */
.pls-txt-orange { color:#e08000 !important; font-weight:600; }   /* dip: grade too high */
.pls-txt-ltblue { color:#3a9bdc !important; font-weight:600; }   /* dip: grade too low  */

/* ── PortfolioLoader: PropertiesInfo panel (docked in InfoRegion) ── */
.props-panel { display: flex; flex-direction: column; height: 100%; font-size: 13px; }
.props-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 2px 6px; border-bottom: 1px solid #d5d8dc; margin-bottom: 8px;
}
.props-panel-title { font-weight: 600; color: #255A2A; }
.props-close {
    border: none; background: transparent; cursor: pointer; color: #777;
    padding: 2px 4px; line-height: 1; border-radius: 3px;
}
.props-close:hover { background: #e5e5e5; color: #333; }
.props-empty { padding: 4px 2px; }
.props-resolve-error { color: #c0392b; font-size: 12px; margin: 0 0 8px; }
.props-subtitle { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.props-subtitle .props-type { font-weight: 600; color: #255A2A; }
.props-subtitle .props-id {
    font-size: 12px; color: #777; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.props-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.props-grid thead th {
    text-align: left; padding: 5px 6px; border-bottom: 2px solid #ccc;
    background: #EEF0EE; font-weight: 600; position: sticky; top: 0; z-index: 1;
}
.props-grid td { padding: 4px 6px; border-bottom: 1px solid #eee; vertical-align: top; word-break: break-word; }
.props-col-name { width: 42%; color: #333; }
.props-col-value { width: 58%; }
.props-toggle { display: inline-block; width: 14px; cursor: pointer; color: #888; user-select: none; }
.props-toggle:hover { color: #255A2A; }
.props-toggle-spacer { display: inline-block; width: 14px; }
.props-name-text { vertical-align: middle; }
.props-grid tr.props-readonly .props-col-name { color: #888; }
.props-readonly-value { color: #555; }
.props-input { width: 100%; box-sizing: border-box; padding: 2px 4px; }
.props-error { display: block; color: #c0392b; font-size: 11px; margin-top: 2px; }

/* ── Social Security editable grids (Reimbursements / Paid Leave) ──────── */
.ss-edit-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.ss-edit-grid thead th {
    text-align: center; padding: 5px 6px; border-bottom: 2px solid #ccc;
    background: #EEF0EE; font-weight: 600;
}
.ss-edit-grid td { padding: 4px 6px; border-bottom: 1px solid #eee; text-align: center; }
.ss-cell { width: 90px; box-sizing: border-box; padding: 2px 4px; text-align: right; }
.ss-cell-name { width: 180px; text-align: left; }
.ss-edit-grid select.ss-cell { width: 130px; text-align: left; }
/* Derived, never-editable figures inside an editable grid (bracket tax / cumulative tax):
   muted and right-aligned so they read as results rather than empty inputs. */
.ss-cell-derived {
    text-align: right; color: #555; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ss-narrative-edit { box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 6px; }
.ss-narrative-editor { display: flex; flex-direction: column; gap: 4px; }

/* Rich-text narrative editors (one per language, inside a tab strip). */
.narrative-editors { max-width: 900px; }
.narrative-editor-host { padding-top: 8px; }
.narrative-legacy-warn {
    max-width: 900px; margin: 0 0 10px; padding: 8px 12px;
    background: #F6ECD6; border-left: 3px solid #9A6A00;
    font-size: 13px; color: #6b4c00;
}
.ss-narrative-label { font-weight: 600; color: #255A2A; margin-top: 8px; }

/* ── Tax Code editable grids (brackets / basic deductions) ────────────── */
/* Non-Taxable Benefit Limits page: the limit + currency pair and the category checklist. */
.ntb-limit {
    display: grid; grid-template-columns: max-content 200px; gap: 8px 12px;
    align-items: center; margin-bottom: 18px;
}
.ntb-limit .template-label { margin: 0; }
.ntb-amount { width: 180px; text-align: right; }
.ntb-currency { width: 200px; text-align: left; }
.ntb-categories { border: 1px solid #ddd; border-radius: 4px; padding: 10px 14px; max-width: 420px; }
/* Own rule rather than .template-label: that class is right-aligned for the label column
   of a template form, which reads as off-centre on a fieldset legend. */
.ntb-legend { padding: 0 6px; font-weight: 600; text-align: left; }
.ntb-all { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid #eee; }
.ntb-category label, .ntb-all label {
    display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer;
}
.ntb-legacy-note { margin: 10px 0 4px; font-size: 12px; color: #8a6d3b; }
.ntb-legacy label span { color: #8a6d3b; }
.ntb-warn { margin-top: 12px; font-size: 13px; color: #8a6d3b; }

/* Small add/delete buttons used inside the editable Tax Code grids. */
.bg-grid-btn {
    margin-top: 6px; padding: 2px 8px; font-size: 13px; line-height: 1.4;
    border: 1px solid #ccc; border-radius: 3px; background: #f6f6f6; cursor: pointer;
}
.bg-grid-btn:hover { background: #e9efe9; border-color: #aaa; }
.tax-brackets-grid td:first-child { width: 48px; color: #777; }
/* The derived "From" cell and the open "and greater" cell are read-only. */
.tax-brackets-grid input:disabled { background: #f3f3f3; color: #555; }

/* ── Benefit and Allowance By Employer (Summary of Benefits) grid ──────── */
/* Green header row, plus wrapping multi-line benefit text. */
.pls-sumben-grid .k-grid-header th.k-header {
    background-color: #255A2A !important;
    color: #ffffff !important;
    font-weight: 600;
    vertical-align: top;
}
.pls-sumben-grid .k-grid-header th.k-header .k-column-title,
.pls-sumben-grid .k-grid-header th.k-header .k-link,
.pls-sumben-grid .k-grid-header th.k-header .k-icon {
    color: #ffffff !important;
    white-space: normal;
}
/* Benefit-detail cells hold long multi-line strings — wrap and top-align. */
.pls-sumben-grid .k-table-td,
.pls-sumben-grid .k-grid td {
    white-space: normal !important;
    vertical-align: top;
    line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════════════
   Wizard — Open Portfolio File picker (drag-and-drop / click-to-browse)
   These live in the GLOBAL sheet (not WizardOpenFile.razor.css) on purpose:
   the scoped-CSS bundle (BG.Market.Web.styles.css) is re-aggregated by the
   host build, and a partial/locked build can silently drop a module's scoped
   CSS — which strips the drop zone back to a raw native <input type=file>.
   bg-components.css is served directly via _content/ and is immune to that.
   All rules are rooted at .file-picker-area so the generic .file-name /
   .file-size class names can't leak across the rest of the site.
   ══════════════════════════════════════════════════════════════════════ */
.file-picker-area {
    margin-top: 1rem;
}

.file-picker-area .file-drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--bg-border, #d5d8dc);
    border-radius: var(--bg-radius, 4px);
    background: var(--bg-surface, #fafbfc);
    color: var(--bg-text-muted, #6c757d);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.file-picker-area .file-drop-zone:hover,
.file-picker-area .file-drop-zone.drag-over {
    border-color: var(--bg-primary, #255A2A);
    background: rgba(37, 90, 42, 0.04);
}

.file-picker-area .file-drop-zone p {
    margin: 0;
    font-size: 14px;
    text-align: center;
}

/* InputFile renders a native <input type=file>; make it an invisible, full-size
   overlay so a click anywhere in the drop zone opens the OS file dialog. */
.file-picker-area .file-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-picker-area .file-selected {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bg-border, #d5d8dc);
    border-radius: var(--bg-radius, 4px);
    font-size: 14px;
}

.file-picker-area .file-name {
    font-weight: 500;
    color: var(--bg-text, #2c3e50);
}

.file-picker-area .file-size {
    color: var(--bg-text-muted, #6c757d);
    margin-left: auto;
}

/* ── Local-file upload progress (WizardOpenFile) ──────────────────────────
   Feedback while a picked portfolio streams browser → server: phase message,
   determinate bar with percentage, transferred/rate/remaining detail, and the
   cancel affordance. Lives here rather than in the page's scoped bundle for the
   same reason as the drop zone above — a partial/locked build can silently drop
   the scoped bundle, and this panel is the only thing on screen during an
   upload. Rooted at .file-upload-progress so the short fup-* names can't leak. */
.file-upload-progress {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bg-border, #d5d8dc);
    border-radius: var(--bg-radius, 4px);
    background: var(--bg-surface-alt, #f4f6f9);
}

.file-upload-progress .fup-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 14px;
    color: var(--bg-text, #2c3e50);
}

.file-upload-progress .fup-phase {
    font-weight: 500;
}

.file-upload-progress .fup-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

/* The bar takes the row; the percentage sits at a fixed width so the bar does
   not jitter as the number grows from 1% to 100%. */
.file-upload-progress .fup-bar .k-progressbar {
    flex: 1;
    min-width: 0;
}

/* Telerik's stock theme colour is the Kendo orange/salmon. Recolour the bar fill
   and the loader dots to the Birches green so the panel reads as part of the app
   rather than as a stray widget. Scoped to this panel — every other Telerik
   loader in the app keeps the stock colour. */
.file-upload-progress .k-progressbar .k-progressbar-value,
.file-upload-progress .k-progressbar .k-selected {
    background-color: var(--bg-primary, #255A2A);
}

.file-upload-progress .k-loader .k-loader-segment {
    background-color: var(--bg-primary, #255A2A);
}

.file-upload-progress .fup-percent {
    width: 3.5rem;
    text-align: right;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--bg-text, #2c3e50);
}

.file-upload-progress .fup-detail {
    margin-top: 0.4rem;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--bg-text-muted, #6c757d);
}

.file-upload-progress .fup-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.file-upload-progress .fup-hint {
    font-size: 12px;
    color: var(--bg-text-muted, #6c757d);
}

/* ── Shell busy overlay (BusyOverlayHost) ─────────────────────────────────
   Blocking panel for a long operation with no measurable progress — currently
   the portfolio upload. Deliberately blocks: the data set is being written to
   the server, so further edits must wait, and it stops the repeat clicks the
   icon bar used to invite. Global (not scoped) because it is shell furniture
   and is the only thing on screen while it is up. */
.busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 30, 24, 0.35);
}

.busy-overlay .busy-card {
    min-width: 380px;
    max-width: 560px;
    padding: 1.5rem 1.75rem;
    border-radius: var(--bg-radius, 4px);
    background: var(--bg-surface, #ffffff);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.busy-overlay .busy-card-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.busy-overlay .busy-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bg-text, #2c3e50);
}

.busy-overlay .busy-status {
    margin-top: 0.85rem;
    font-size: 14px;
    color: var(--bg-text, #2c3e50);
}

.busy-overlay .busy-detail {
    margin-top: 0.3rem;
    font-size: 13px;
    color: var(--bg-text-muted, #6c757d);
}

.busy-overlay .busy-meta {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-top: 0.75rem;
    font-size: 12px;
    color: var(--bg-text-muted, #6c757d);
}

.busy-overlay .busy-elapsed {
    font-variant-numeric: tabular-nums;
}

.busy-overlay .busy-actions {
    margin-top: 1.1rem;
}

/* Match the loader dots to the brand green, as on the upload progress panel. */
.busy-overlay .k-loader .k-loader-segment {
    background-color: var(--bg-primary, #255A2A);
}

/* ── AppMenu dropdown (hamburger in the commands bar) ─────────────────────
   The Telerik menu popup is teleported to the root component, outside the
   AppMenu component's DOM, so scoped ::deep CSS never reaches it — these
   rules must live in the global stylesheet. A dark green panel (#255A2A)
   with button-like items, label right-aligned and icon on the right. AppMenu is
   the only TelerikMenu in the app, so global .k-menu-popup rules are safe. */
.k-animation-container .k-menu-popup {
    min-width: 220px;
    border: none;
    background: var(--bg-primary, #255A2A);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--bg-radius, 4px);
    padding: 0.4rem;
}

.k-animation-container .k-menu-popup .k-menu-group {
    background: transparent;
}

.k-animation-container .k-menu-popup .k-menu-item {
    margin: 0.15rem 0;
    background: transparent;
}

.k-animation-container .k-menu-popup .k-menu-item > .k-link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--bg-radius, 4px);
    transition: background 0.15s;
}

.k-animation-container .k-menu-popup .k-menu-item > .k-link:hover,
.k-animation-container .k-menu-popup .k-menu-item > .k-link.k-focus {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.k-animation-container .k-menu-popup .k-menu-item .k-svg-icon {
    color: #ffffff;
}

.k-animation-container .k-menu-popup .menu-item-text {
    text-align: right;
}

/* ---- ProfileGlobal module grids (pgs-) ---- */
.pgs-grid-scroll { overflow: auto; max-height: 72vh; }
.pgs-table { border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.pgs-table th, .pgs-table td { border: 1px solid #ccc; padding: 3px 8px; }
.pgs-table thead th { position: sticky; top: 0; z-index: 1; background: #f4f4f4; text-align: center; }
.pgs-table .num { text-align: right; }
.pgs-table td.ident { font-weight: 500; }
.pgs-grid-footer { margin-top: 0.4rem; font-size: 12px; }

/* ---- TaskRunManager module (trm-) ----
   Global on purpose (see the Wizard file-picker note above): the module is
   small and its styles must survive partial host rebuilds. */
.trm-page { padding: 0.75rem 1rem; }
.trm-toolbar { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.trm-run-summary { margin: 0 0 0.75rem; font-size: 14px; }
.trm-run-summary .trm-run-counts { color: var(--bg-text-muted, #6c757d); margin-left: 0.4rem; }
.trm-form-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.6rem; }
.trm-form-row .trm-label { min-width: 160px; padding-top: 4px; font-weight: 500; }
.trm-radio-row, .trm-checkbox-row { display: flex; gap: 1.25rem; align-items: center; padding-top: 4px; }
.trm-radio-row label, .trm-checkbox-row label { display: flex; gap: 0.35rem; align-items: center; cursor: pointer; }
.trm-survey-list {
    display: flex; flex-direction: column; gap: 0.25rem;
    max-height: 200px; min-width: 200px; overflow-y: auto;
    border: 1px solid var(--bg-border, #d5d8dc); border-radius: var(--bg-radius, 4px);
    padding: 0.4rem 0.6rem;
}
.trm-survey-option { display: flex; gap: 0.4rem; align-items: center; cursor: pointer; }
.trm-run-buttons { display: flex; gap: 0.5rem; }
.trm-prepared-note { font-size: 14px; color: var(--bg-primary, #255A2A); }

/* ─────────────────────────────────────────────────────────────────────────────
   Green accent for the Profile Local → Reports pages (CBSR wizard, Market Data
   Charts, Report Downloads). Global (not component-scoped) so the rules reliably
   match Telerik's rendered .k-* elements; keyed by the page wrapper classes so
   only these pages are affected. !important beats Telerik's own theme rules.
   ───────────────────────────────────────────────────────────────────────────── */

/* Explicitly-tagged green buttons (e.g. Report Downloads Download/Delete) — matched by the
   Class we put on the TelerikButton, so it wins regardless of the k-button-solid-* variant. */
.k-button.cbsr-green-btn {
    background-image: none !important;
    background-color: #7cb342 !important;
    border-color: #7cb342 !important;
    color: #ffffff !important;
}

.k-button.cbsr-green-btn:hover,
.k-button.cbsr-green-btn.k-hover {
    background-color: #689f38 !important;
    border-color: #689f38 !important;
}

/* Primary/error solid buttons → light green (CBSR wizard: Next/Submit; Market Data Charts). */
.report-downloads .k-button-solid-primary,
.report-downloads .k-button-solid-error,
.cbsr-wizard .k-button-solid-primary,
.cbsr-preview .k-button-solid-primary {
    background-image: none !important;
    background-color: #7cb342 !important;
    border-color: #7cb342 !important;
    color: #ffffff !important;
}

.report-downloads .k-button-solid-primary:hover,
.report-downloads .k-button-solid-error:hover,
.cbsr-wizard .k-button-solid-primary:hover,
.cbsr-preview .k-button-solid-primary:hover {
    background-color: #689f38 !important;
    border-color: #689f38 !important;
}

/* Checkboxes and radio buttons → green (accent-color covers native-styled inputs;
   background/border covers themes that draw the control box). */
.cbsr-wizard .k-checkbox,
.cbsr-wizard .k-radio,
.cbsr-preview .k-checkbox,
.cbsr-preview .k-radio,
.report-downloads .k-checkbox,
.report-downloads .k-radio {
    accent-color: #7cb342;
}

.cbsr-wizard .k-checkbox:checked,
.cbsr-wizard .k-radio:checked,
.cbsr-preview .k-checkbox:checked,
.cbsr-preview .k-radio:checked {
    background-color: #7cb342 !important;
    border-color: #7cb342 !important;
}

/* Selected page number in the Report Downloads grid pager. */
.report-downloads .k-pager .k-selected,
.report-downloads .k-pager-numbers .k-selected,
.report-downloads .k-pager-numbers .k-link.k-selected {
    background-color: #7cb342 !important;
    border-color: #7cb342 !important;
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   BgChartExport — shared "Export PNG" affordance for every chart page
   (BG.Market.Web.Core/ChartExport/). Global rather than scoped: the
   component lives in an RCL, and scoped bundles reach the host through a
   content-hashed @import that goes stale on a partial rebuild.
   ══════════════════════════════════════════════════════════════════════ */

.bg-chart-export-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 6px 0;
}

/* Small and quiet — the chart is the subject, not the button. */
button.bg-chart-export-btn {
    padding: 4px 10px !important;
    font-size: 12px;
}

button.bg-chart-export-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* The captured surface. Kept free of padding, borders and background so the
   exported PNG is the chart itself rather than a box around it. */
.bg-chart-export-surface {
    padding: 0;
    border: 0;
    background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   Chart series colour in grid column headers
   ---------------------------------------------------------------------
   The EmployerLocal chart pages toggle between a chart and the table
   behind it. The table's value columns carry the chart's series colour as
   a thin bar under the header text, so the two views read as one
   visualisation. Built by ChartHeaderSwatch, which owns the colours.

   Lives here rather than in the pages' own <style> blocks: one definition
   for all four pages, and this sheet is <link>ed directly, so it is
   immune to the content-hashed @import that goes stale on a partial
   rebuild.

   The grid is a TelerikGrid (ChartDataGrid) since 86eyjfke9, so the bar is
   rendered from a GridColumn HeaderTemplate and the bleed is measured
   against the Telerik header cell's padding rather than a hand-written
   <th>'s.
   ══════════════════════════════════════════════════════════════════════ */

.tc-output-page .k-grid th .hsw {
    display: block;
    height: 3px;
    /* Bleed over the header cell's padding so the bar spans the full column
       width and sits flush on the bottom border. */
    margin: 3px -12px -8px -12px;
    border-radius: 1px;
}

/* The template puts the title in a <span>, so the cell is no longer a flex
   line box that would stretch the bar's width to the text. */
.tc-output-page .k-grid th .k-cell-inner > .k-link { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   Chart segment tooltip
   ---------------------------------------------------------------------
   Replaces the native <svg><title> tooltip on chart segments: no ~1s
   delay, a colour swatch matching the hovered segment, and it works
   over long job names without the OS wrapping rules.

   Positioned by app.js on document.body — position:fixed with the
   viewport clamp there — so the .chart-scroll overflow box cannot clip
   it. pointer-events:none keeps it from stealing the mouseout that
   hides it.
   ══════════════════════════════════════════════════════════════════════ */

.bg-chart-tip {
    position: fixed;
    z-index: 12000;
    left: 0;
    top: 0;
    display: none;
    max-width: 320px;
    padding: 6px 9px;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    font-size: 12px;
    line-height: 1.35;
    color: #2c3e50;
    pointer-events: none;
}

.bg-chart-tip.visible {
    display: block;
}

.bg-chart-tip-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bg-chart-tip-sw {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.bg-chart-tip-series {
    font-weight: 600;
}

/* The job name can be long, so this is the one line allowed to wrap. */
.bg-chart-tip-row {
    margin-top: 2px;
    color: #55606b;
    white-space: normal;
    overflow-wrap: anywhere;
}

.bg-chart-tip-detail {
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   Compute progress (long output calculations)
   ---------------------------------------------------------------------
   Used by ComputeProgress.razor in place of a static "Computing…" line.
   The bar is deliberately indeterminate: the output calculators report no
   progress as they run, so a percentage would be fabricated. The elapsed
   clock next to it is the honest signal that work is still happening.
   ══════════════════════════════════════════════════════════════════════ */

.bg-compute-progress {
    max-width: 420px;
    margin: 0.75rem 0;
}

.bg-compute-progress-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #2c3e50;
}

.bg-compute-label {
    flex: 1 1 auto;
}

/* Tabular figures so the ticking clock doesn't jitter the label beside it. */
.bg-compute-elapsed {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: #5a6c4f;
}

.bg-compute-spinner {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 2px solid #cfd8dc;
    border-top-color: #36952D;
    border-radius: 50%;
    animation: bg-compute-spin 0.8s linear infinite;
}

.bg-compute-bar {
    position: relative;
    height: 4px;
    margin-top: 6px;
    border-radius: 2px;
    background: #e8ece8;
    overflow: hidden;
}

.bg-compute-bar > span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 35%;
    border-radius: 2px;
    background: #36952D;
    animation: bg-compute-slide 1.2s ease-in-out infinite;
}

.bg-compute-detail {
    margin-top: 4px;
    font-size: 12px;
    color: #6c757d;
}

@keyframes bg-compute-spin {
    to { transform: rotate(360deg); }
}

@keyframes bg-compute-slide {
    0%   { left: -35%; }
    100% { left: 100%; }
}

/* ── Shell header: active portfolio + switcher ──────────────────────────
   PortfolioSwitcher (BG.Market.Web.Core/Shell) renders inside AppHeader's
   .header-center, so AppHeader's scoped CSS cannot reach it. These live here
   rather than in a .razor.css for the same reason the other shell-critical
   rules do: this sheet is a direct <link>, so it cannot be lost to a stale
   content-hash @import of a module bundle. */
.portfolio-switcher {
    /* Anchors the popup below the name. */
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.portfolio-current {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

/* Matches AppHeader's .header-title-link — this stands in for it. */
.portfolio-link {
    color: #ffffff;
    font-size: 22px;
    font-weight: 300;
    text-decoration: none;
    letter-spacing: 0.02em;
    /* A long .bgj name must not push the user/client links off the bar. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.portfolio-switch-toggle {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bg-radius, 4px);
    flex-shrink: 0;
}

.portfolio-switch-toggle:hover,
.portfolio-switch-toggle.open {
    background: rgba(255, 255, 255, 0.15);
}

.portfolio-switch-toggle .k-svg-icon {
    color: #ffffff;
}

/* Under the popup and over everything else, so any outside click closes it. */
.portfolio-switch-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.portfolio-switch-list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 1201;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    min-width: 16rem;
    max-width: 28rem;
    max-height: 60vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--bg-radius, 4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.portfolio-switch-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    color: #1a1a1a;
}

.portfolio-switch-item:hover {
    background: rgba(37, 90, 42, 0.1);
}

.portfolio-switch-item.active {
    font-weight: 600;
}

.portfolio-switch-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-switch-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #255A2A;
}

/* ══════════════════════════════════════════════════════════════════════
   Country home pages (.tch-*) — the read-only document view of a
   country-context file (Tax Code home, Social Security home), plus the
   shared review rail. One vocabulary for both pages; global rather than
   scoped because scoped CSS would fragment it across bundles.
   ══════════════════════════════════════════════════════════════════════ */

.tch,
.tch-inline {
    --tch-ink:      #14171a;
    --tch-ink2:     #3a3f44;
    --tch-ink3:     #6b7178;
    --tch-ink4:     #a1a6ac;
    --tch-line:     #dcdfdc;
    --tch-line2:    #eceeeb;
    --tch-paper:    #fff;
    --tch-paper2:   #fafaf8;
    --tch-green:    #366336;
    --tch-green6:   #4a8049;
    --tch-green5:   #6aa269;
    --tch-green1:   #e6f0e5;
    --tch-green0:   #f3f8f2;
    --tch-err:      #b04141;
    --tch-err-bg:   #fdeceb;
    --tch-warn:     #a9780c;
    --tch-warn-bg:  #fdf4dc;
    --tch-sug:      #6355bd;
    --tch-sug-bg:   #eeecf9;

    color: var(--tch-ink);
    font-size: 14px;
}

.tch {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tch .tch-spacer { flex: 1; }

/* ── inline variant ──────────────────────────────────────────
   For a single-page data set (Common Rates) the review rail sits
   beside the editable form on the page itself instead of on a
   separate home page. The rail is sticky so it stays in view
   while the form scrolls. */
.tch-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 0 24px;
    align-items: start;
}

.tch-inline .tch-inline-form { min-width: 0; }

.tch-inline .tch-rail {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 160px);
    border: 1px solid var(--tch-line);
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 1180px) {
    .tch-inline { grid-template-columns: minmax(0, 1fr); }
    .tch-inline .tch-rail { display: none; }
}

/* ── header strip ── */
.tch-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: none;
    padding: 12px 20px;
    border-bottom: 1px solid var(--tch-line);
    background: var(--tch-paper);
}

.tch-flag {
    width: 26px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .25);
    flex: none;
}

.tch-head-title h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* FocusOnNavigate (Routes.razor, Selector="h1") programmatically focuses the first
   h1 after every navigation, which parks a UA focus ring around the file title and
   makes it read as a text box. Focus still moves — screen readers still announce the
   page — only the ring is dropped, and only for this heading. */
.tch-head-title h1:focus { outline: none; }

.tch-head-title span {
    font-size: 12px;
    color: var(--tch-ink3);
}

/* ── two-column body: document + findings rail ── */
.tch-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
}

/* Read-only Tax Code / Social Security blocks render no review rail (86eyu60q6 /
   86eyu60tn), so the document takes the whole width rather than leaving a 340px gutter. */
.tch-body.no-rail {
    grid-template-columns: minmax(0, 1fr);
}

.tch-doc {
    min-width: 0;
    overflow-y: auto;
    padding: 4px 28px 80px;
    background: var(--tch-paper);
}

.tch-doc-end {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tch-line2);
    font-size: 11.5px;
    color: var(--tch-ink4);
}

@media (max-width: 1180px) {
    .tch-body { grid-template-columns: minmax(0, 1fr); }
    .tch-rail { display: none; }
}

/* The printed document's own title block — off screen, on paper. */
.tch-print-head { display: none; }

/* ── Printing a tax profile ─────────────────────────────────────────────────
   Export today is the browser's print pipeline (print, or Save as PDF). What
   survives onto paper is the profile itself: the app shell, the findings rail,
   the mode/language/print controls and the per-section Open links are all
   working aids, not part of the document. */
@media print {
    /* Shell chrome (MainLayout): title bar, commands bar, icon bar, navigator, info
       panel, splitters and footer — none of it belongs on the printed profile. */
    .shell-header, .shell-commands, .shell-explorer, .shell-info,
    .shell-resizer, .shell-footer, .icon-bar {
        display: none !important;
    }

    /* The shell is a CSS grid sized to the viewport; on paper it has to flow. */
    .shell, .shell-body, .shell-content {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* The page's own aids. */
    .tch-head, .tch-rail, .tch-open, .tch-chip, .tch-dot { display: none !important; }

    .tch-print-head {
        display: block;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1.5px solid #333;
        font-size: 11pt;
    }

    /* Let the document use the full sheet and print in ink-cheap black. */
    .tch, .tch-body, .tch-doc {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }

    .tch-sec {
        /* Keep a section's heading with its table rather than orphaning it. */
        break-inside: avoid;
        page-break-inside: avoid;
        padding: 10pt 0;
        border-bottom: 1px solid #bbb;
    }

    /* An inapplicable provision is one line of text; never start a page with it. */
    .tch-sec.is-empty { opacity: 1; break-before: avoid; page-break-before: avoid; }

    .tch-sec-head { break-after: avoid; page-break-after: avoid; }
    .tch-sec-num { color: #555; }
    .tch-sec-blurb { color: #555; font-style: italic; }

    /* Bracket tables must print whole, with visible rules. */
    .tch-table-wrap { overflow: visible !important; }
    .tch-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
    .tch-table th, .tch-table td { border: 1px solid #999; padding: 2pt 4pt; }
    .tch-table thead { display: table-header-group; }   /* repeat on every page */
    .tch-table tr { break-inside: avoid; page-break-inside: avoid; }

    /* Comments: keep the selected language's text, drop the EN/FR/ES coverage pills. */
    .tch-cpills { display: none !important; }

    a[href]::after { content: none !important; }   /* no printed URLs */
}

@page {
    margin: 14mm;
}

/* ── sections ── */
.tch-sec {
    padding: 18px 0;
    border-bottom: 1px solid var(--tch-line2);
}

.tch-sec.is-empty { opacity: .55; }

.tch-sec-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 2px 0 6px;
}

.tch-sec-num {
    font-size: 11.5px;
    color: var(--tch-ink4);
    font-variant-numeric: tabular-nums;
}

.tch-sec-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tch-sec-blurb {
    font-size: 11.5px;
    color: var(--tch-ink4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.tch-open {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tch-green);
    text-decoration: none;
    border: 1px solid var(--tch-line);
    border-radius: 5px;
    padding: 2px 9px;
    white-space: nowrap;
}

.tch-open:hover {
    background: var(--tch-green0);
    border-color: #c9d3c8;
    color: var(--tch-green);
}

.tch-sec-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 780px;
}

.tch-subhead {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tch-ink2);
    margin-top: 4px;
}

.tch-hint,
.tch-empty-note {
    margin: 0;
    font-size: 12.5px;
    color: var(--tch-ink3);
}

.tch-empty-note {
    color: var(--tch-ink4);
    font-style: italic;
}

/* ── status dot + count chips ── */
.tch-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.tch-dot.ok { background: var(--tch-green5); }
.tch-dot.empty { border: 1.5px dashed var(--tch-ink4); }

.tch-chip {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

.tch-chip.err { background: var(--tch-err-bg); color: var(--tch-err); }
.tch-chip.warn { background: var(--tch-warn-bg); color: var(--tch-warn); }
.tch-chip.sug { background: var(--tch-sug-bg); color: var(--tch-sug); }

/* ── field rows ── */
.tch-fields {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 3px 16px;
    margin: 0;
}

.tch-fields dt {
    font-size: 13px;
    color: var(--tch-ink3);
    text-align: right;
}

.tch-fields dd {
    margin: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.tch-unit {
    font-size: 11.5px;
    color: var(--tch-ink3);
    font-variant-numeric: normal;
}

/* ── tables ── */
.tch-table-wrap {
    border: 1px solid var(--tch-line);
    border-radius: 7px;
    overflow-x: auto;
    background: var(--tch-paper);
}

.tch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tch-table th {
    text-align: left;
    padding: 7px 10px;
    background: var(--tch-paper2);
    border-bottom: 1px solid var(--tch-line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tch-ink3);
    white-space: nowrap;
}

.tch-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--tch-line2);
    font-variant-numeric: tabular-nums;
}

.tch-table tr:last-child td { border-bottom: 0; }
.tch-table tr:hover td { background: var(--tch-green0); }

.tch-table th.tch-num,
.tch-table td.tch-num { text-align: right; }

.tch-table th.tch-idx,
.tch-table td.tch-idx {
    width: 34px;
    text-align: center;
    color: var(--tch-ink4);
}

.tch-openend {
    color: var(--tch-ink3);
    font-style: italic;
}

.tch-table-meta {
    font-size: 11.5px;
    color: var(--tch-ink3);
}

/* ── check lists, tag lists, two-column groups ── */
.tch-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 520px;
}

.tch-checks {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tch-checks.tch-checks-inline {
    flex-direction: row;
    gap: 18px;
    flex-wrap: wrap;
}

.tch-checks li {
    font-size: 13px;
    color: var(--tch-ink4);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tch-checks li::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--tch-ink4);
    border-radius: 3px;
    flex: none;
}

.tch-checks li.on { color: var(--tch-ink); }

.tch-checks li.on::before {
    background: var(--tch-green);
    border-color: var(--tch-green);
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--tch-green);
}

.tch-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tch-tags li {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 11px;
    background: var(--tch-green1);
    color: var(--tch-green);
}

/* ── comments + narrative ── */
.tch-comments { margin-top: 4px; }

.tch-comments-head,
.tch-narr-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.tch-clabel {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tch-ink2);
}

.tch-cpills {
    display: inline-flex;
    gap: 3px;
}

.tch-cpill {
    display: grid;
    place-items: center;
    width: 26px;
    height: 18px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    background: var(--tch-line2);
    color: var(--tch-ink4);
    outline: 2px solid transparent;
    outline-offset: 1px;
}

.tch-cpill.has { background: var(--tch-green1); color: var(--tch-green); }
.tch-cpill.on { outline-color: var(--tch-green6); color: var(--tch-green); }

.tch-comment-body,
.tch-narr {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tch-ink2);
    white-space: pre-wrap;
    max-width: 68ch;
}

.tch-narr { white-space: normal; }
.tch-narr p { margin: 0 0 .6em; }

/* ── buttons + segmented control ── */
.tch-btn {
    height: 29px;
    padding: 0 11px;
    border: 1px solid var(--tch-line);
    border-radius: 6px;
    background: var(--tch-paper);
    color: var(--tch-ink);
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}

.tch-btn:hover { background: var(--tch-green0); border-color: #c9d3c8; }
.tch-btn.on { background: var(--tch-green); border-color: var(--tch-green); color: #fff; }
.tch-btn.tch-btn-sm { height: 23px; padding: 0 8px; font-size: 11.5px; }

.tch-seg {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--tch-line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--tch-paper);
}

.tch-seg button {
    height: 27px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--tch-ink3);
    font-size: 12px;
    cursor: pointer;
}

.tch-seg button + button { border-left: 1px solid var(--tch-line); }
.tch-seg button.on { background: var(--tch-green); color: #fff; font-weight: 600; }
.tch-seg button:not(.on):hover { background: var(--tch-green0); }

/* ── findings rail ── */
.tch-rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--tch-line);
    background: var(--tch-paper2);
}

.tch-rail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 12px 14px;
    border-bottom: 1px solid var(--tch-line);
    background: linear-gradient(160deg, #f6f3ff, #fafaf8 70%);
}

.tch-spark {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex: none;
    background: linear-gradient(140deg, #3f78c0, #6355bd);
}

.tch-rail-title {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.tch-rail-title b { font-size: 14px; }
.tch-rail-title span { font-size: 11.5px; color: var(--tch-ink3); }

.tch-rail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tch-rail-group {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tch-ink3);
    margin-top: 4px;
}

.tch-rail-group:first-child { margin-top: 0; }

.tch-clear {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 34px 16px;
    text-align: center;
}

.tch-tick {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tch-green1);
    color: var(--tch-green);
    display: grid;
    place-items: center;
    font-size: 17px;
    font-weight: 700;
}

.tch-clear b { font-size: 14px; }
.tch-clear span { font-size: 12px; color: var(--tch-ink3); }

/* ── finding cards ── */
.tch-card {
    display: flex;
    gap: 9px;
    padding: 10px 11px;
    background: var(--tch-paper);
    border: 1px solid var(--tch-line);
    border-left-width: 3px;
    border-radius: 7px;
}

.tch-card.err { border-left-color: var(--tch-err); }
.tch-card.warn { border-left-color: var(--tch-warn); }
.tch-card.sug { border-left-color: var(--tch-sug); }

.tch-glyph {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    flex: none;
    margin-top: 1px;
}

.tch-glyph.err { background: var(--tch-err); }
.tch-glyph.warn { background: var(--tch-warn); }
.tch-glyph.sug { background: var(--tch-sug); }

.tch-card-body { flex: 1; min-width: 0; }

.tch-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}

.tch-card-sec {
    font-size: 11px;
    color: var(--tch-ink4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.tch-card-sec:hover { color: var(--tch-green); text-decoration: underline; }

.tch-card-title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.tch-card-desc {
    font-size: 11.5px;
    color: var(--tch-ink2);
    line-height: 1.5;
    margin-top: 4px;
}

.tch-card-why {
    font-size: 11.5px;
    color: var(--tch-ink2);
    line-height: 1.55;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--tch-paper2);
    border: 1px solid var(--tch-line2);
    border-radius: 6px;
}

.tch-card-why b {
    display: block;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tch-ink3);
    margin-bottom: 3px;
}

.tch-card-acts {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}

/* ── country/employer home: orientation stat strip ── */
.tch-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 0 4px;
}

.tch-stat {
    border: 1px solid var(--tch-line);
    border-radius: 8px;
    padding: 10px 16px;
    background: var(--tch-paper2);
    min-width: 110px;
}

.tch-stat b {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.tch-stat .tch-stat-sub {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    color: var(--tch-ink3);
}

.tch-stat span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tch-ink3);
}

/* ── job-match state chips ── */
.tch-match-ok,
.tch-match-none {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.tch-match-ok { background: var(--tch-green1); color: var(--tch-green); }
.tch-match-none { background: var(--tch-warn-bg); color: var(--tch-warn); }

/* ── review rail: the fourth kind (Insight) ── */
.tch,
.tch-inline {
    --tch-info:     #2f6fb3;
    --tch-info-bg:  #e8f0fa;
}

.tch-chip.info { background: var(--tch-info-bg); color: var(--tch-info); }
.tch-card.info { border-left-color: var(--tch-info); }
.tch-glyph.info { background: var(--tch-info); }

/* ══════════════════════════════════════════════════════════════════════
   Profile Local home (.plh-*) — the panel's landing page. Builds on the
   .tch vocabulary; only what a profile adds lives here: the roster with
   its access tiers, the per-grade coverage ladder with P10–P90 bands,
   the narrative previews, the read-only lead and the Explore map.
   ══════════════════════════════════════════════════════════════════════ */

.plh-type {
    display: inline-block;
    vertical-align: 3px;
    margin-left: 10px;
    padding: 1px 9px;
    border-radius: 11px;
    background: var(--tch-green1);
    color: var(--tch-green);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
}

.plh-pending { color: var(--tch-ink4); }

/* ── read-only lead ── */
.plh-about {
    margin: 16px 0 4px;
    padding: 14px 18px;
    border: 1px solid var(--tch-line);
    border-left: 3px solid var(--tch-green5);
    border-radius: 8px;
    background: var(--tch-green0);
    max-width: 780px;
}

.plh-about h2 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tch-green);
}

.plh-about p {
    margin: 0 0 .5em;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tch-ink2);
}

.plh-about p:last-child { margin-bottom: 0; }

.plh-guide {
    max-width: 72ch;
    line-height: 1.55;
    color: var(--tch-ink3);
}

/* ── roster ── */
.plh-roster td.plh-code { font-weight: 600; font-variant-numeric: tabular-nums; }
.plh-roster td.plh-masked { color: var(--tch-ink3); font-style: italic; }
.plh-roster td.plh-date { white-space: nowrap; }
.plh-roster tr.is-excluded td { color: var(--tch-ink3); }
.plh-roster tr.is-excluded td.plh-code { text-decoration: line-through; text-decoration-color: var(--tch-ink4); }

.plh-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: 1px;
}

.plh-tag.ok { background: var(--tch-green1); color: var(--tch-green); margin-left: 0; }
.plh-tag.warn { background: var(--tch-warn-bg); color: var(--tch-warn); }
td > .plh-tag:first-child { margin-left: 0; }

.plh-acc {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.plh-acc.full { background: var(--tch-green1); color: var(--tch-green); }
.plh-acc.own { background: var(--tch-info-bg); color: var(--tch-info); }
.plh-acc.coded { background: var(--tch-paper2); color: var(--tch-ink3); border-color: var(--tch-line); }
.plh-acc.hidden { background: transparent; color: var(--tch-ink4); border-color: var(--tch-line2); border-style: dashed; }

/* ── reference data ── */
.plh-refs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.plh-refs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--tch-line);
    border-radius: 7px;
    font-size: 12.5px;
    background: var(--tch-paper);
}

.plh-refs li.on { border-color: #c9d3c8; background: var(--tch-green0); }
.plh-refs li.off { color: var(--tch-ink3); border-style: dashed; }
.plh-refs li a { color: var(--tch-green); font-weight: 600; text-decoration: none; }
.plh-refs li a:hover { text-decoration: underline; }
.plh-refs li em { font-size: 11px; color: var(--tch-ink4); font-style: normal; }

.plh-ages li { background: var(--tch-paper2); color: var(--tch-ink2); border: 1px solid var(--tch-line2); }
.plh-ages li.warn { background: var(--tch-warn-bg); color: var(--tch-warn); border-color: transparent; }

/* ── market ladder ── */
.plh-grade {
    display: inline-block;
    min-width: 52px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.plh-ladder td.plh-grade-title { color: var(--tch-ink2); }
.plh-ladder td.plh-med { font-weight: 700; }
.plh-ladder td.plh-p { color: var(--tch-ink3); }
.plh-ladder tr.is-thin td { color: var(--tch-ink4); }
.plh-ladder tr.is-thin td.plh-grade-title { color: var(--tch-ink4); }
.plh-ladder tr.is-thin .plh-grade { opacity: .55; }
.plh-ladder td.plh-withheld { font-size: 12px; font-style: italic; color: var(--tch-warn); }

.plh-ladder th.plh-band-col,
.plh-ladder td.plh-band-col { min-width: 220px; width: 32%; }

.plh-band {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: var(--tch-line2);
    overflow: visible;
}

.plh-band-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--tch-green1), var(--tch-green5) 50%, var(--tch-green1));
}

.plh-band-med {
    position: absolute;
    top: -3px;
    width: 4px;
    height: 18px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--tch-green);
    box-shadow: 0 0 0 1.5px var(--tch-paper);
}

.plh-computing { font-style: italic; }

/* ── narratives ── */
.plh-narratives { display: flex; flex-direction: column; gap: 12px; }

.plh-narr {
    padding: 10px 14px;
    border: 1px solid var(--tch-line2);
    border-radius: 7px;
    background: var(--tch-paper2);
}

.plh-narr.is-empty { opacity: .7; }

.plh-narr-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.plh-narr-text { max-width: 78ch; }

/* ── explore map ── */
.plh-explore .tch-sec-num { font-size: 13px; }

.plh-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px;
    max-width: 900px;
}

.plh-map-group ul {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plh-map-group li {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border: 1px solid var(--tch-line2);
    border-radius: 6px;
    background: var(--tch-paper);
}

.plh-map-group li:hover { border-color: #c9d3c8; background: var(--tch-green0); }
.plh-map-group li a { font-size: 13px; font-weight: 600; color: var(--tch-green); text-decoration: none; }
.plh-map-group li span { font-size: 11.5px; color: var(--tch-ink3); }

@media print {
    .plh-about { border: 1px solid #bbb; background: #fff; }
    .plh-explore, .plh-guide, .plh-tag, .plh-acc { display: none !important; }
    .plh-band-fill { background: #999; }
    .plh-band-med { background: #000; }
}

/* ── Scale Profile home (.sph-*): scenario cards and the current-scale mark. Reuses .plh-*. ── */
.sph-up { color: var(--tch-err); }
.sph-down { color: var(--tch-info); }
.sph-flat { color: var(--tch-green); }

.sph-band-cur {
    position: absolute;
    top: -5px;
    width: 2px;
    height: 22px;
    margin-left: -1px;
    background: var(--tch-ink);
    box-shadow: 0 0 0 1.5px var(--tch-paper);
}

.sph-cards { display: flex; flex-direction: column; gap: 12px; }

.sph-card {
    padding: 12px 16px 10px;
    border: 1px solid var(--tch-line);
    border-radius: 8px;
    background: var(--tch-paper);
}

.sph-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sph-card-head b { font-size: 14px; }

.sph-card-figures { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }

.sph-fig {
    border: 1px solid var(--tch-line2);
    border-radius: 7px;
    padding: 7px 12px;
    background: var(--tch-paper2);
    min-width: 120px;
}

.sph-fig b { display: block; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sph-fig span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tch-ink3); }

.sph-card-fields { grid-template-columns: 170px minmax(0, 1fr); margin-top: 4px; }
.sph-card-fields .tch-cpills { vertical-align: middle; margin-right: 8px; }
.sph-card-fields .plh-narr-text { margin-top: 6px; }

.sph-card-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

@media print {
    .sph-card-links { display: none !important; }
}