/**
 * Profile Editor + Public Profile — On-brand styling
 * Matches existing site: white backgrounds, navy #031B83 headings, gold #CC9900 accents.
 * Scoped under .profile-editor-wrapper / .profile-public-wrapper to avoid Seeko conflicts.
 * Uses native CSS Grid — no third-party library.
 */

/* ============================================================
   Layout & Toolbar (editor only)
   ============================================================ */

/* Break editor out of Seeko's nested .container and sidebar-single constraints */
body.profile-editor-active .bp-member-layout > .container {
    max-width: none;
}
body.profile-editor-active .row.sidebar-single > .col-header {
    display: none !important;
}
body.profile-editor-active .row.sidebar-single > .col-main {
    grid-column: 1 / -1 !important;
}
/* Constrain the cover image header to match dashboard/profile width */
body.profile-editor-active #item-header {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}
@media (min-width: 1440px) {
    body.profile-editor-active #item-header {
        max-width: 1440px;
    }
}
body.profile-editor-active #item-body > .container {
    max-width: none;
    padding: 0;
}
body.profile-editor-active #item-body > .container > .row > .col-12 {
    padding: 0;
}
body.profile-editor-active #item-body > .container > .row > .col-12 > .col-inner {
    padding: 0;
}

/* Profile + dashboard: constrain Seeko container on all own-profile pages
   EXCEPT the editor page which needs max-width: none (set above).
   overflow: hidden clips Bootstrap's negative row margins that would otherwise
   push inner content wider than the container. */
body.profile-public-active .bp-member-layout > .container,
body.profile-dashboard-active:not(.profile-editor-active) .bp-member-layout > .container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: hidden;
}
@media (min-width: 1440px) {
    body.profile-public-active .bp-member-layout > .container,
    body.profile-dashboard-active:not(.profile-editor-active) .bp-member-layout > .container {
        max-width: 1440px;
    }
}

.profile-editor-wrapper {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 0;
    box-sizing: border-box;
}

/* Widescreen editor */
@media (min-width: 1440px) {
    .profile-editor-wrapper {
        max-width: 1440px;
    }
}

.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 0;
    line-height: 1 !important;
    font-size: 0 !important;
}

.editor-title {
    font-family: 'Montserrat', sans-serif;
    color: #031B83;
    font-size: 20px !important;
    font-weight: 700;
    margin: 0;
    /* S77 Rob: asymmetric padding to bump glyphs up 1px \u2014 matches toolbar
       button text treatment (Montserrat bold caps sit high in em-box). */
    padding: 8px 0 10px 0;
    white-space: nowrap;
    line-height: 1 !important;
}

.editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    line-height: 1 !important;
    font-size: 0 !important;
}

/* Override Seeko theme-static.min.css which adds margin-bottom: 18px to all buttons */
.editor-actions button {
    margin: 0 !important;
}

.editor-hint {
    color: #031B83;
    font-size: 13px;
    margin: 0 0 12px 0;
    text-align: center;
    font-weight: 500;
}

/* S77 Rob item 7: device selector — content centred as a row. Equal
   vertical padding + align-items:center + consistent child heights means
   label and buttons share the same baseline. Label nav-blue, not grey. */
.device-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px auto 0 auto !important;
    width: fit-content !important;
    max-width: 100%;
    padding: 8px 16px;
    background: #f5f5f5;
    border: 2px solid #CC9900;
    border-radius: 10px;
}
.device-selector > * {
    align-self: center;
}
.device-selector-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #031B83;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    height: 36px;
}
/* S77 Rob item 7: preview-size buttons — white bg default (not cream, not
   grey), gold border, navy text. Hover flips to gold bg + navy text (D055).
   Active/pressed state stays navy bg + gold text. Explicit :focus rule
   prevents browser default grey-focus. min-height fixes vertical centring
   within the .device-selector frame (buttons + label row-align flush). */
.device-btn {
    /* B21 (S85 04/05/26): explicit margin: 0 to override Seeko parent
       theme's `seeko-dynamic.css` rule that sets `margin-bottom: 1rem` on
       all `button` elements. With that 18px invisible bottom margin, flex's
       align-items: center treated the button as 58px tall (40 box + 18
       margin), centring the OUTER margin-box and leaving the visible button
       outline 9px above the row's true midline. Reset gives proper centring
       and natural text-to-text baseline alignment with the .device-selector-
       label without transform hacks. Supersedes S85-006 + S85-007. */
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    min-height: 36px;
    border: 2px solid #CC9900;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #031B83;
    outline: none;
}
.device-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #031B83;
    transition: color 0.2s;
}
.device-btn:hover {
    border-color: #CC9900;
    color: #031B83;
    background: #CC9900;
}
.device-btn:hover .dashicons {
    color: #031B83;
}
.device-btn:focus,
.device-btn:focus-visible {
    outline: none;
    background: #ffffff;
    border-color: #CC9900;
    color: #031B83;
    box-shadow: 0 0 0 2px rgba(204, 153, 0, 0.25);
}
.device-btn:focus .dashicons,
.device-btn:focus-visible .dashicons {
    color: #031B83;
}
.device-btn:active {
    background: #031B83 !important;
    border-color: #CC9900 !important;
    color: #CC9900 !important;
}
.device-btn:active .dashicons {
    color: #CC9900 !important;
}
/* S77 Rob item 7 pt2: aggressive override — Seeko / autofill / button-reset
   rules were winning at equal specificity on the active state. Bump to
   `.device-selector .device-btn.active` + !important. */
.device-selector .device-btn.active,
.device-btn.active {
    border-color: #CC9900 !important;
    background: #031B83 !important;
    color: #CC9900 !important;
    box-shadow: 0 2px 6px rgba(3, 27, 131, 0.25) !important;
}
.device-selector .device-btn.active .dashicons,
.device-btn.active .dashicons {
    color: #CC9900 !important;
}
/* Label vertical-align: inline-flex + line-height:1 lets align-items:center
   on .device-selector do its job precisely. */
.device-selector-label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    line-height: 1;
}
.device-label {
    line-height: 1;
}

/* Device preview: constrain wrapper width + centre with visual frame.
   S67 F23 fix: widths aligned to canonical site breakpoints (1920/1280/768/360).
   Previous values (1200/820/390) did not match real-world viewer widths so the
   preview did not show what the member's profile would actually look like to
   visitors at each breakpoint. Only the editor-content (widget grid) shrinks —
   toolbar and device selector stay full width. */
.profile-editor-wrapper.device-desktop .editor-content {
    max-width: 1280px;
    margin: 0 auto;
}
.profile-editor-wrapper.device-tablet .editor-content {
    max-width: 768px;
    margin: 0 auto;
}
.profile-editor-wrapper.device-mobile .editor-content {
    max-width: 360px;
    margin: 0 auto;
}
/* Subtle border to show the "device frame" when previewing smaller sizes */
.profile-editor-wrapper.device-desktop .editor-content,
.profile-editor-wrapper.device-tablet .editor-content,
.profile-editor-wrapper.device-mobile .editor-content {
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   Save / Reset / Glass / Colors Buttons
   ============================================================ */

/* ---- Soft layered shadow buttons (Material-inspired) ---- */

.btn-save {
    background: linear-gradient(to bottom, #d9a400 0%, #b8860b 100%) !important;
    color: #031B83 !important;
    border: none !important;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-save:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
}

.btn-save:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    background: #031B83 !important;
    color: #CC9900 !important;
}

.btn-save.unsaved {
    animation: pulse-gold 1.5s ease infinite;
}

.btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    animation: none;
    transform: none !important;
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(184, 134, 11, 0.2), 0 0 0 0 rgba(204, 153, 0, 0.4) !important; }
    50% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(184, 134, 11, 0.2), 0 0 0 8px rgba(204, 153, 0, 0) !important; }
}

.btn-reset {
    background: linear-gradient(to bottom, #d9a400 0%, #b8860b 100%) !important;
    color: #031B83 !important;
    border: none !important;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s, color 0.15s !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-reset:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
}

.btn-reset:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    background: #031B83 !important;
    color: #CC9900 !important;
}

/* Toolbar buttons — gold default, press inverts to blue bg + gold text */
/* Glass toggle */
.btn-glass {
    background: linear-gradient(to bottom, #d9a400 0%, #b8860b 100%) !important;
    color: #031B83 !important;
    border: none !important;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s, color 0.15s !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-glass:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
}

.btn-glass:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    background: #031B83 !important;
    color: #CC9900 !important;
}

.btn-glass.active {
    background: linear-gradient(to bottom, #031B83 0%, #021466 100%) !important;
    color: #CC9900 !important;
    border: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(3, 27, 131, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-glass.active:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(3, 27, 131, 0.2) !important;
}

.btn-glass.active:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Colours toggle */
.btn-colors {
    background: linear-gradient(to bottom, #d9a400 0%, #b8860b 100%) !important;
    color: #031B83 !important;
    border: none !important;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s, color 0.15s !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-colors:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
}

.btn-colors:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    background: #031B83 !important;
    color: #CC9900 !important;
}

.btn-colors.active {
    background: linear-gradient(to bottom, #031B83 0%, #021466 100%) !important;
    color: #CC9900 !important;
    border: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(3, 27, 131, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-colors.active:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Colour Picker toolbar button */
.btn-color-picker {
    background: linear-gradient(to bottom, #d9a400 0%, #b8860b 100%) !important;
    color: #031B83 !important;
    border: none !important;
    padding: 9px 14px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s, color 0.15s !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
    transform: translateY(-1px) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-color-picker .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
}
.btn-color-picker:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(184, 134, 11, 0.3) !important;
}
.btn-color-picker:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    background: #031B83 !important;
    color: #CC9900 !important;
}
.btn-color-picker.active {
    background: linear-gradient(to bottom, #031B83 0%, #021466 100%) !important;
    color: #CC9900 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(3, 27, 131, 0.2) !important;
}
.btn-color-picker.active:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ===== Colour Picker Modal ===== */
.color-picker-modal {
    position: fixed;
    z-index: 100010;
    width: 280px;
    background: var(--color-surface, #FFFFFF);
    border: 2px solid var(--color-gold, #CC9900);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: 'Montserrat', sans-serif;
    user-select: none;
}
.cpm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(to right, #031B83, #0a2494);
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid var(--color-gold, #CC9900);
}
.cpm-title {
    color: var(--color-gold, #CC9900);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cpm-title .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
.cpm-close {
    background: none;
    border: 1px solid rgba(204, 153, 0, 0.4);
    color: var(--color-gold, #CC9900);
    font-size: 18px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.cpm-close:hover {
    background: rgba(204, 153, 0, 0.15);
}
.cpm-body {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Kill Seeko margin overrides on all cpm-body children */
.cpm-body > * {
    margin-bottom: 0 !important;
}
.cpm-spectrum-wrap {
    position: relative;
    width: calc(100% - 28px);
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: crosshair;
}
.cpm-spectrum {
    display: block;
    width: 100%;
    height: 160px;
}
.cpm-spectrum-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: translate(-7px, -7px);
    top: 0;
    left: 220px;
}
.cpm-hue-wrap {
    position: relative;
    width: 20px;
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.cpm-hue {
    display: block;
    width: 20px;
    height: 160px;
}
.cpm-hue-cursor {
    position: absolute;
    left: -2px;
    width: 24px;
    height: 6px;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    pointer-events: none;
    transform: translateY(-3px);
    top: 0;
}
.cpm-output {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 0;
}
.cpm-preview-swatch {
    width: 31px;
    height: 31px;
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: #CC9900;
    flex-shrink: 0;
}
.cpm-fields {
    flex: 1;
    min-width: 0;
}
.cpm-field-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cpm-field-row label {
    color: #666;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    min-width: 28px;
}
.cpm-hex {
    flex: 1;
    min-width: 0;
    padding: 6px 8px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-family: 'Montserrat', monospace !important;
    font-weight: 600;
    background: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 5px;
    color: #1a1a2e;
    text-transform: uppercase;
    height: auto !important;
    line-height: 1.3 !important;
}
.cpm-hex:focus {
    outline: none;
    border-color: var(--color-gold, #CC9900);
    box-shadow: 0 0 0 2px rgba(204, 153, 0, 0.2);
}
.cpm-copy {
    background: rgba(204, 153, 0, 0.1);
    border: 1px solid rgba(204, 153, 0, 0.3) !important;
    color: #b8860b;
    border-radius: 5px;
    padding: 5px 7px !important;
    margin: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cpm-copy .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.cpm-copy:hover {
    background: rgba(204, 153, 0, 0.2);
}
.cpm-copy.copied {
    background: rgba(0, 180, 0, 0.1);
    border-color: rgba(0, 180, 0, 0.3);
    color: #4caf50;
}

/* View Profile button in toolbar */
.btn-view-profile {
    background: linear-gradient(to bottom, #d9a400 0%, #b8860b 100%) !important;
    color: #031B83 !important;
    border: none !important;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s, color 0.15s !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-view-profile:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
    color: #031B83 !important;
    text-decoration: none;
}

.btn-view-profile:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    background: #031B83 !important;
    color: #CC9900 !important;
}

/* .btn-dashboard rule retired S100 (26/05/26) — class name now owned by the
   universal button system (page-polish.css §43.2). The original use was an
   orphaned gold-gradient toolbar button class with no remaining HTML emit
   point. Recoverable from git if a legitimate toolbar button needs restyling. */

/* S77 Rob: toolbar button text rendering 1px low \u2014 Montserrat bold caps
   sit high in the em-box so vertical centring looks wrong. Asymmetric
   padding (-1px top, +1px bottom) pushes the glyph baseline up without
   changing overall button height or the shadow/transform layering. /da
   rule 23a. */
.btn-save,
.btn-reset,
.btn-glass,
.btn-glass.active,
.btn-colors,
.btn-colors.active,
.btn-color-picker,
.btn-add-photo {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}

/* Add Photo Panel button */
.btn-add-photo {
    background: linear-gradient(to bottom, #d9a400 0%, #b8860b 100%) !important;
    color: #031B83 !important;
    border: none !important;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s, color 0.15s !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-add-photo:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(184, 134, 11, 0.2) !important;
}

.btn-add-photo:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    background: #031B83 !important;
    color: #CC9900 !important;
}

/* ============================================================
   Background Picker (glass mode)
   ============================================================ */

.bg-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    /* S76-006 Rob: shrink to content + horizontally centred, not full width. */
    margin: 8px auto 12px auto !important;
    width: fit-content !important;
    max-width: 100%;
    padding: 10px 18px;
    /* Match sidenav grey. */
    background: #f5f5f5;
    border-radius: 10px;
    border: 2px solid #CC9900;
    line-height: 1 !important;
    font-size: 0 !important;
}

.bg-picker-label {
    font-size: 11px !important;
    font-weight: 600;
    color: #031B83 !important;
    font-family: 'Montserrat', sans-serif;
    line-height: 1 !important;
    padding: 6px 0;
    border: 1px solid transparent;
}

.bg-chip {
    font-size: 11px !important;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid #CC9900;
    background: #fff;
    color: #031B83;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.2s ease;
    line-height: 1 !important;
    margin: 0 !important;
}

.bg-chip:hover {
    border-color: #CC9900;
    background: #CC9900;
    color: #031B83;
}

.bg-picker .bg-chip.active,
.bg-chip.active {
    background: #031B83 !important;
    color: #CC9900 !important;
    border-color: #CC9900 !important;
}
/* S76 Rob: remove stuck focus/hover grey after modal closes. */
.bg-chip:focus,
.bg-chip:focus-visible {
    outline: none;
}
.bg-chip:not(.active):focus {
    background: #fff;
    color: #031B83;
    border-color: #CC9900;
}

/* ============================================================
   Status Indicators
   ============================================================ */

.save-status-row {
    text-align: center;
    min-height: 16px;
    margin-bottom: 2px;
}

.save-status {
    font-size: 11px;
    font-weight: 600;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.status-unsaved { color: #CC9900; }
.status-saving  { color: #666; }
.status-saved   { color: #28a745; }
.status-error   { color: #dc3545; }

/* ============================================================
   Editor Content — Grid + Sidebar flex container
   ============================================================ */

.editor-content {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* ============================================================
   CSS Grid Container
   ============================================================ */

/* S77 Rob: workspace border \u2014 the grid where widgets drop needs a visible
   gold frame on the customise page so the user sees where the workspace
   ends. Hidden on public profile view where the grid chrome is irrelevant. */
.profile-editor-wrapper .profile-grid {
    border: 2px solid #CC9900;
    border-radius: 12px;
    padding: 12px;
}
.profile-public-wrapper .profile-grid,
body.bp-user .profile-grid-public {
    border: 0 !important;
    padding: 0 !important;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 10px;
    gap: 10px;
    min-height: 400px;
    position: relative;
    flex: 1;
    transition: background 0.3s ease, padding 0.3s ease;
}

/* ============================================================
   Widget Cards
   ============================================================ */

/* S63 Phase 1c — profile-widget (T455 C13/C14): 16px radius (D090), gold hairline
   instead of grey border (LB-024 no greys). */
.profile-widget {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(204, 153, 0, 0.35);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

/* Per-widget border colour override — set via colour picker, persisted as
   --widget-border-color on the widget element (Rob 11/05/26). Use LONGHAND
   properties because shorthand `border:` was getting its colour overridden
   somewhere in the cascade despite !important (only width+style were
   winning, colour kept reverting to the default rgba(204,153,0,0.35)).
   Longhand `border-color !important` beats shorthand reliably. */
/* Specificity bumped to (0,4,1) on the public side to beat the existing
   `body.bp-user .profile-grid-public .profile-widget { border-color: ...
   !important }` rule (0,3,1) further up the file. Without that prefix our
   override loses despite !important. The bare selector still covers the
   customise editor where no body-prefix rule competes. */
body.bp-user .profile-grid-public .profile-widget[data-border-color]:not(.profile-widget--quote-autofit),
.profile-widget[data-border-color]:not(.profile-widget--quote-autofit) {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--widget-border-color) !important;
}
/* Public chrome-strip variants (.profile-widget--sigil / --party)
   use `border: 0 none !important` shorthand which clobbers even our
   longhand widths. Restore explicitly with matching specificity.
   --quote-autofit is INTENTIONALLY excluded: the autofit widget is
   invisible (transparent, max-content), so adding a border on the wrapper
   draws a second outer stroke around the visible bubble. For quote the
   bubble alone gets the border-colour treatment (rule below). */
body.bp-user .profile-grid-public .profile-widget--sigil[data-border-color],
body.bp-user .profile-grid-public .profile-widget--party[data-border-color] {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--widget-border-color) !important;
}
/* Quote widget's visible element on public is the inner bubble, not the
   widget wrapper — so the border-colour override paints the bubble. */
.profile-widget[data-widget-id="quote"][data-border-color] .widget-quote,
.profile-widget--quote-autofit[data-border-color] .widget-quote {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--widget-border-color) !important;
}

/* S63 Phase 1c — profile-widget body text (T455 C16/C17): override Seeko Muli/grey
   inheritance to brand Nunito Sans + navy inside public-profile widgets. */
.profile-grid-public .profile-widget,
.profile-grid-public .profile-widget * {
    font-family: 'Nunito Sans', sans-serif;
}
.profile-grid-public .profile-widget p,
.profile-grid-public .profile-widget li,
.profile-grid-public .profile-widget span:not(.interest-tag):not(.music-tag):not(.bio-level):not([class*="badge"]) {
    color: #031B83;
}
.profile-grid-public .profile-widget h1,
.profile-grid-public .profile-widget h2,
.profile-grid-public .profile-widget h3,
.profile-grid-public .profile-widget h4,
.profile-grid-public .profile-widget .widget-title {
    font-family: 'Montserrat', sans-serif;
    color: #031B83;
}

/* Dragging state — dim the original */
.profile-widget.dragging {
    opacity: 0.4;
    pointer-events: none;
}

/* Ghost clone following cursor */
.profile-widget-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    border: 2px solid #CC9900;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* S77 Rob item 24: match the widget's 16px radius on the ghost so the
       photo-panel placeholder's bottom corners don't go square during drag.
       Previous 8px ghost radius was clipping the inner 16px corner. */
    border-radius: 16px;
    background: #fff;
    opacity: 0.9;
    overflow: hidden;
}

/* Preserve glass effect on ghost during drag */
.profile-widget-ghost.glass-ghost {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* Drop placeholder in grid */
.grid-placeholder {
    border: 2px dashed #CC9900;
    background: rgba(204, 153, 0, 0.05);
    border-radius: 8px;
    pointer-events: none;
}

/* ============================================================
   Drag Handle (editor) / Header (public)
   ============================================================ */

.widget-drag-handle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    touch-action: none;
    border-radius: 8px 8px 0 0;
    transition: background 0.2s ease;
    position: relative;
}

.widget-drag-handle:active {
    cursor: grabbing;
}

.widget-drag-handle .dashicons {
    color: #CC9900;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.widget-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #031B83;
    flex: 1;
}

.drag-grip {
    display: none;
}

/* Photo panel — corner label instead of full header */
.profile-widget[data-is-photo-panel="1"] {
    position: relative;
    /* S76 Rob: defensive explicit 4-corner radius so the bottom-left never
       renders square due to cascade order or Seeko overrides. */
    border-radius: 16px !important;
}
/* S76 Rob: lift overflow:hidden during photo reposition mode so the Save /
   Reset / Cancel toolbar (positioned just below the panel) isn't clipped. */
.profile-widget.is-repositioning {
    overflow: visible !important;
    z-index: 20;
}
.photo-panel-handle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background: var(--color-gold, #CC9900) !important;
    border: none !important;
    border-bottom: none !important;
    /* S76 Rob: header's bottom corners are square so they meet the body's
       top edge flat (no round-meets-round mismatch). Top-left still rounds
       with the outer widget corner. */
    border-radius: 8px 0 0 0 !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.photo-corner-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #031B83;
    /* Base rule. The actual nudge lives on the higher-specificity selector
       `.profile-widget[data-is-photo-panel="1"] .photo-corner-label` further
       down — translateY(4px) per /da rule 23a. */
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
}
.photo-panel-handle .widget-title,
.photo-panel-handle .dashicons {
    display: none;
}
.photo-panel-handle .widget-delete-btn {
    color: #031B83 !important;
    opacity: 1 !important;
    font-size: 14px;
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    /* S76-006 Rob: round bubble on hover, not a tight rectangle. */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    transition: background 120ms ease, color 120ms ease;
}
.photo-panel-handle .widget-delete-btn:hover {
    color: #031B83 !important;
    background: #FFFBE6 !important;
    opacity: 1 !important;
}
.photo-panel-body {
    padding: 0 !important;
    height: 100%;
}
.photo-panel-body .photo-panel-content {
    height: 100%;
    position: relative;
    overflow: hidden;
}
.photo-panel-body .photo-panel-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* S77 T-FU-S76-05: bottom corners must match outer widget (16px) — not 8px.
       Per-corner !important to defeat any cascade override that was leaving
       bottom-left square while bottom-right curved. */
    border-radius: 0 0 16px 16px !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    /* S76 Rob: drag is only enabled while in reposition mode. Show grab
       cursor only then — not by default, or users accidentally drag. */
    cursor: default;
}
.photo-panel-content.reposition-active img {
    cursor: grab;
}
.photo-panel-content.reposition-active img.dragging,
.photo-panel-content.reposition-active img:active {
    cursor: grabbing;
}
/* S76 Rob: hide the resize-handle's grey right-angle marker on photo panels
   (it looked like a stray artefact in the bottom-right). The handle itself
   still works — it just has no visual marker. */
.profile-widget[data-is-photo-panel="1"] .resize-handle::after {
    display: none !important;
}
.photo-panel-body {
    container-type: size;
    container-name: photopanel;
    overflow: hidden;
}
.photo-panel-body .photo-panel-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    gap: 6px;
}
/* Public profile: no label at all, image fills widget */
.profile-grid-public .photo-panel-public {
    overflow: hidden;
    border-radius: 8px;
}
.profile-grid-public .photo-panel-public .widget-body {
    padding: 0 !important;
    height: 100%;
}
.profile-grid-public .photo-panel-public .photo-panel-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   Minimize Button (replaces remove — sends to sidebar)
   ============================================================ */

.widget-minimize-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    margin-left: 4px;
    transition: color 0.2s;
}

.widget-minimize-btn:hover {
    color: #CC9900;
}

/* ============================================================
   Widget Body — NO scrollbars
   ============================================================ */

.widget-body {
    padding: 12px;
    flex: 1;
    overflow: auto;
    overflow-x: hidden;
    font-size: 14px;
    color: #333;
}

/* When body text color is set, force ALL descendants to use it */
.profile-widget[data-body-color] .widget-body,
.profile-widget[data-body-color] .widget-body * {
    color: var(--body-text-color) !important;
}

/* ============================================================
   Resize Handle
   ============================================================ */

.resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    touch-action: none;
    z-index: 2;
}

.resize-handle::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
}

.profile-widget:hover .resize-handle::after {
    border-color: #CC9900;
}

/* ============================================================
   Per-Widget Color Picker
   ============================================================ */

.color-swatch-btn {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: none;           /* hidden until Colors mode is on */
    position: absolute;
    right: 56px;             /* S76: shifted right to make room for always-on visibility-btn at right:32px */
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    color: #031B83;
    transition: color 0.2s;
    z-index: 2;
}

.colors-active .color-swatch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-swatch-btn:hover {
    color: #CC9900;
    transform: translateY(-50%) scale(1.15);
}

/* S76: Per-widget visibility button — always visible in the editor (not gated
   by colours mode). Opens the visibility-popover anchored to this button. */
.widget-visibility-btn {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    color: #031B83;
    transition: color 0.2s;
    z-index: 2;
}

.widget-visibility-btn:hover {
    color: #CC9900;
    transform: translateY(-50%) scale(1.15);
}

/* Hide on the public-facing grid */
.profile-grid-public .widget-visibility-btn {
    display: none;
}

/* Colour popover — S76-005: reverted to pre-rebrand chrome per Rob.
   Original white+grey was fine; other page elements were the real target. */
.color-popover {
    position: absolute;
    z-index: 999999;
    background: #fff;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 4px 7px 7px;
    display: none;
    width: 148px;
}

.color-popover.open {
    display: block;
}

.color-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin: 8px 0 2px 0;
    line-height: 1;
}
.color-section-label:first-of-type {
    margin-top: 0;
}

.color-presets {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.color-preset {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    transition: border-color 0.2s, transform 0.15s;
}

.color-preset:hover {
    transform: scale(1.15);
    border-color: #CC9900;
}

.color-preset.selected {
    border-color: #CC9900;
    box-shadow: 0 0 0 2px rgba(204, 153, 0, 0.3);
}

.color-hex-input {
    width: 100%;
    padding: 3px 5px !important;
    margin: 2px 0 2px !important;
    border: 1px solid #ddd !important;
    border-radius: 3px;
    font-family: 'Montserrat', monospace !important;
    font-size: 11px !important;
    color: #555;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    background: #fafafa !important;
}

.color-hex-input:focus {
    outline: none;
    border-color: #CC9900;
}

/* T337: Widget visibility dropdown in popover */
.widget-visibility-select {
    width: 100%;
    padding: 5px 8px;
    margin: 4px 0 2px;
    border: 2px solid #CC9900;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #031B83;
    background: #fff;
    cursor: pointer;
    appearance: auto;
}
.widget-visibility-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(204, 153, 0, 0.3);
}

/* S76: Branded background-picker modal — replaces the native prompt() and
   the wp.media() modal. One dialog: URL input at top, user photo gallery
   below. Uses cream/gold/navy brand tokens (D055 + LB-023). */
.bg-picker-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 27, 131, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    font-family: 'Nunito Sans', sans-serif;
}
.bg-picker-modal {
    position: relative;
    background: #FFFFFF;
    border: 2px solid #CC9900;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(3, 27, 131, 0.2);
    padding: 24px;
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    color: #031B83;
}
.bg-picker-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #031B83;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}
.bg-picker-modal-close:hover { color: #CC9900; }
.bg-picker-modal-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #031B83;
    margin: 0 0 16px 0;
    text-align: center;
}
.bg-picker-modal-section { margin-bottom: 14px; }
.bg-picker-modal-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #031B83;
    margin-bottom: 6px;
    /* S76-006 Rob: centre labels above each input. */
    text-align: center;
}
.bg-picker-modal-url-row {
    display: flex;
    gap: 8px;
}
.bg-picker-modal-url-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #CC9900 !important;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Nunito Sans', sans-serif;
    background: #fff;
    color: #031B83;
}
.bg-picker-modal-url-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(204, 153, 0, 0.3);
}
.bg-picker-modal-url-apply {
    background: #FFFBE6;
    border: 2px solid #CC9900;
    color: #031B83;
    border-radius: 20px;
    padding: 6px 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.bg-picker-modal-url-apply:hover {
    background: #CC9900;
    color: #031B83;
}
.bg-picker-modal-upload-btn {
    width: 100%;
    padding: 10px 16px;
    background: #FFFBE6;
    border: 2px solid #CC9900;
    color: #031B83;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 160ms ease, color 160ms ease;
}
.bg-picker-modal-upload-btn:hover { background: #CC9900; color: #031B83; }
.bg-picker-modal-upload-btn .dashicons {
    font-size: 16px; width: 16px; height: 16px; line-height: 1;
}
/* S76 Rob: Uploading state no longer dim/grey — stays on-brand with a navy
   fill + gold text (D055 invert) so it reads as "in progress" not "disabled". */
.bg-picker-modal-upload-btn[disabled] { opacity: 1; cursor: wait; background: #031B83; color: #CC9900; }
.bg-picker-modal-upload-btn[disabled] .dashicons { animation: bg-picker-upload-spin 1s linear infinite; }
@keyframes bg-picker-upload-spin { to { transform: rotate(360deg); } }
.bg-picker-modal-divider {
    text-align: center;
    color: #031B83;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 10px 0;
    position: relative;
}
.bg-picker-modal-divider::before,
.bg-picker-modal-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 24px);
    height: 1px;
    background: rgba(204, 153, 0, 0.6);
}
.bg-picker-modal-divider::before { left: 0; }
.bg-picker-modal-divider::after { right: 0; }
.bg-picker-modal-divider span {
    background: #FFFBE6;
    padding: 0 8px;
    position: relative;
    z-index: 1;
}
.bg-picker-modal-gallery {
    /* S76-006 Rob: force true centring with flex-wrap + centered justification
     instead of auto-fill grid which packs left. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    padding: 10px;
    border: 2px solid #CC9900;
    border-radius: 8px;
    background: #fff;
}
.bg-picker-modal-thumb {
    flex: 0 0 90px;
}
.bg-picker-modal-thumb {
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    background: #fff;
    transition: border-color 120ms ease, transform 120ms ease;
}
.bg-picker-modal-thumb:hover {
    border-color: #CC9900;
    transform: scale(1.04);
}
.bg-picker-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bg-picker-modal-loading,
.bg-picker-modal-empty {
    grid-column: 1 / -1;
    padding: 24px 12px;
    text-align: center;
    color: #666;
    font-size: 12px;
    font-family: 'Nunito Sans', sans-serif;
}

/* S76 Rob pt2: Public profile — hide widget header/title bar on ALL widgets.
   Public profile shows content only; chrome (icon + label + minimize) is
   Customise-only. Photo panels already render without a header. Sigils / party
   logos have their own handle rules further down. */
.profile-grid-public .profile-widget .widget-drag-handle.widget-header-public {
    display: none !important;
}
.profile-grid-public .profile-widget .widget-body {
    padding-top: 0;
}

/* S76 Rob pt2: Social-link buttons on public profile — branded cream pill
   with gold border, navy text, dashicon + label vertically centred. Hover
   flips to gold bg + navy text per D055. */
.profile-grid-public .widget-social-links .social-links-list,
.widget-social-links .social-links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.widget-social-links .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: #FFFBE6;
    border: 2px solid #CC9900;
    border-radius: 10px;
    color: #031B83;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, transform 120ms ease;
    line-height: 1;
}
.widget-social-links .social-link .dashicons {
    color: #CC9900;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 160ms ease;
}
.widget-social-links .social-link-label {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.widget-social-links .social-link:hover {
    background: #CC9900;
    color: #031B83;
    transform: translateY(-1px);
}
.widget-social-links .social-link:hover .dashicons {
    color: #031B83;
}

/* S76 Rob pt2: Photo-panel placeholder on-brand. Previously dashicon +
   "Click to choose photo" both rendered grey. Now: gold camera icon, navy
   text, cream background. Also vertically centre the "PHOTO" corner label. */
.profile-widget[data-is-photo-panel="1"] .widget-drag-handle.photo-panel-handle {
    display: flex;
    align-items: center;
}
.profile-widget[data-is-photo-panel="1"] .photo-corner-label,
.profile-widget[data-is-photo-panel="1"].dragging .photo-corner-label,
.widget-fly-clone[data-is-photo-panel="1"] .photo-corner-label,
.profile-widget-ghost[data-is-photo-panel="1"] .photo-corner-label,
.widget-fly-clone .photo-corner-label,
.profile-widget-ghost .photo-corner-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #031B83;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    /* S77 Rob item 11: transform persists across static + dragging + ghost +
       fly-clone states so the "PHOTO" label stays centred whenever the panel
       is visible. Per /da rule 23a. */
    transform: translateY(6px) !important;
}
.photo-panel-placeholder,
.photo-panel-content.photo-panel-empty {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    background: #FFFFFF;
    color: #031B83;
    border: 2px dashed rgba(204, 153, 0, 0.6);
    /* S77 Rob item 7: rounded bottom corners must hold in BOTH static and
       drag-ghost states. Using the widget's 16px radius on every side means
       the placeholder stays consistent when the header is off-screen (ghost
       clone) and when it's present (static). The outer widget's overflow:hidden
       clips the top edges under the header so top-radius is invisible where
       not needed \u2014 no visual regression. */
    border-radius: 16px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
}
.widget-fly-clone .photo-panel-placeholder,
.profile-widget-ghost .photo-panel-placeholder {
    border-radius: 16px !important;
}
.photo-panel-placeholder .dashicons,
.photo-panel-content.photo-panel-empty .dashicons {
    color: #CC9900 !important;
    font-size: 32px !important;
    width: 32px;
    height: 32px;
}

/* S76 Rob pt2: Social-field save tick — instant toggle feedback, not a
   delayed flash. Saved state = filled gold bg (until dirty again). */
.social-link-save-field {
    transition: background 60ms ease, color 60ms ease, transform 80ms ease;
}
.social-link-save-field.saved {
    background: #CC9900 !important;
    color: #fff !important;
}
.social-link-save-field:active {
    transform: scale(0.92);
}

/* S77 Rob item 18: Visibility popover — white bg (was cream), gold border,
   navy text. Header row uses flex so title + X are vertically centred and
   symmetrically aligned. */
.visibility-popover {
    position: absolute;
    z-index: 999999;
    background: #ffffff;
    border: 2px solid #CC9900;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(3, 27, 131, 0.15);
    padding: 14px;
    display: none;
    width: 200px;
    font-family: 'Nunito Sans', sans-serif;
    color: #031B83;
}
.visibility-popover.open {
    display: block;
}
/* Header row: title on the left, X on the right, vertically centred,
   consistent 4px gap above the options below. */
.visibility-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.visibility-popover-close {
    background: transparent;
    border: none;
    color: #031B83;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.visibility-popover-close:hover { color: #CC9900; }
.visibility-popover-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #031B83;
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

/* S76: Colour reset-dial — sits on the presets row after the colour chips.
   Resets the section's colour to #FFFFFF. Half-circle-arc-with-arrow icon. */
.color-reset-btn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: #fff !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #031B83;
    transition: border-color 0.2s, transform 0.15s, color 0.2s;
}
.color-reset-btn .dashicons {
    font-size: 11px;
    width: 11px;
    height: 11px;
    line-height: 1;
}
.color-reset-btn:hover {
    transform: scale(1.15);
    border-color: #CC9900;
    color: #CC9900;
}

.popover-drag-bar {
    cursor: grab;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
    user-select: none;
    min-height: 0;
    line-height: 1;
}
.popover-drag-bar:active {
    cursor: grabbing;
}
.popover-close-btn {
    background: none;
    border: none !important;
    font-size: 13px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 2px !important;
    margin: 0 !important;
    border-radius: 3px;
    transition: all 0.15s;
}
.popover-close-btn:hover {
    color: #333;
    background: #f0f0f0;
}

/* Empty widget tooltip */
.widget-empty-tooltip {
    position: absolute;
    background: #fff;
    color: #031B83;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #CC9900;
    white-space: nowrap;
    z-index: 999999;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* ============================================================
   Grid min-height — ensures background has a sensible minimum
   ============================================================ */

.profile-grid {
    min-height: 600px;
}

/* ============================================================
   Height Pin — thin full-width widget in normal grid flow.
   Draggable and minimisable like any other widget.
   Size fixed at w=12 h=1 — resize handle hidden.
   Minimize button centred.
   ============================================================ */

.widget-spacer-bar {
    display: none;
}

/* S77 Rob item 12: spacer \u2014 gold border (was grey), remove the grey top
   separator line inside the spacer header, reduce overall height by ~70%.
   S80 T559: `grid-row-end: span 2 !important` clamps the cell to 2 rows
   (~30px including gap) regardless of saved h, so existing user layouts
   with h=6 / h=11 render as a thin pin too. Resize handle is already
   hidden at line ~1977 so users can't expand it manually. */
.profile-widget[data-widget-id="spacer"],
.profile-widget-ghost[data-widget-id="spacer"] {
    grid-row-end: span 2 !important;
    min-height: unset !important;
    max-height: 22px !important;
    background: #ffffff !important;
    border: 2px solid #CC9900 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* S108 11/06/26 — Spacer (height pin) = single full-area drag bar.
   - widget-drag-handle fills the entire widget so the whole pin is the
     grab target (was just a 2px strip — fiddly to grab).
   - Every descendant inside the handle hidden so no "HEIGHT PIN" label,
     icons or buttons leak through.
   - Selectors include `.profile-widget-ghost[data-widget-id="spacer"]`
     because the drag library deep-clones the widget then overwrites the
     className to "profile-widget-ghost", dropping ".profile-widget" and
     making rules scoped to `.profile-widget[...]` stop matching the ghost.
   - Resize handle also hidden so its clone doesn't draw a second bar. */
.profile-widget[data-widget-id="spacer"] .widget-drag-handle,
.profile-widget-ghost[data-widget-id="spacer"] .widget-drag-handle {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    cursor: grab;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}
.profile-widget[data-widget-id="spacer"] .widget-drag-handle:active,
.profile-widget-ghost[data-widget-id="spacer"] .widget-drag-handle:active {
    cursor: grabbing;
}
.profile-widget[data-widget-id="spacer"] .widget-drag-handle *,
.profile-widget[data-widget-id="spacer"] .widget-drag-handle::before,
.profile-widget[data-widget-id="spacer"] .widget-drag-handle::after,
.profile-widget-ghost[data-widget-id="spacer"] .widget-drag-handle *,
.profile-widget-ghost[data-widget-id="spacer"] .widget-drag-handle::before,
.profile-widget-ghost[data-widget-id="spacer"] .widget-drag-handle::after {
    display: none !important;
    content: none !important;
}
.profile-widget[data-widget-id="spacer"] .widget-body,
.profile-widget[data-widget-id="spacer"] .resize-handle,
.profile-widget-ghost[data-widget-id="spacer"] .widget-body,
.profile-widget-ghost[data-widget-id="spacer"] .resize-handle {
    display: none !important;
}

.profile-widget[data-widget-id="spacer"] .resize-handle {
    display: none;
}

/* S79 Rob: spacer ("Height Pin") is rendered on public but invisible —
   `visibility: hidden` keeps the grid space (so the workspace size matches
   customise), `display: none` was removing it entirely and shoving every
   widget up over the iframe etc.
   S80 T559: `grid-row-end: span 2 !important` mirrors the customise clamp
   so the public cell is the same thin pin too. (The real "widgets pushed
   up onto iframe" symptom Rob saw in S79 was the music widget's row-span
   inflation in profile_system_render_profile_public — fixed in collect_visible
   so the breakpoint JSON used by the public render's resize handler reflects
   the inflated h, not the saved h.) */
.profile-widget-public[data-widget-id="spacer"] {
    grid-row-end: span 2 !important;
    visibility: hidden;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Glass mode styling */
.glass-on .profile-widget[data-widget-id="spacer"] {
    background: rgba(235, 240, 255, 0.7) !important;
    border-color: rgba(200, 215, 255, 0.4) !important;
}
.glass-on .profile-widget[data-widget-id="spacer"] .widget-drag-handle {
    background: rgba(220, 230, 255, 0.5) !important;
}

/* ============================================================
   Photo Panels — decorative image blocks
   ============================================================ */

.photo-panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
}

.photo-panel-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-panel-placeholder {
    text-align: center;
    /* S77 Rob: navy not grey. Was overriding the on-brand colour from the
       earlier rule via source-order (same specificity, later in file). */
    color: #031B83;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
    box-sizing: border-box;
}

.photo-panel-placeholder:hover {
    color: #CC9900;
}

.photo-panel-placeholder .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    display: block;
    margin: 0;
    flex-shrink: 0;
}

.photo-panel-placeholder span:not(.dashicons) {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

/* Short panel — drop the text, keep only the icon so nothing clips the edges. */
@container photopanel (max-height: 90px) {
    .photo-panel-placeholder span:not(.dashicons) { display: none; }
    .photo-panel-placeholder .dashicons { font-size: 24px; width: 24px; height: 24px; line-height: 24px; }
}
/* Very short panel — shrink the icon too. */
@container photopanel (max-height: 60px) {
    .photo-panel-placeholder .dashicons { font-size: 18px; width: 18px; height: 18px; line-height: 18px; }
    .photo-panel-placeholder { padding: 4px; }
}

/* Photo panel header — compact */
.profile-widget[data-is-photo-panel="1"] .widget-drag-handle {
    padding: 4px 8px;
}

.profile-widget[data-is-photo-panel="1"] .widget-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
}

/* Photo panel delete button (replaces minimize) */
.widget-delete-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.widget-delete-btn:hover {
    opacity: 1;
}

/* ============================================================
   Background Images — independent of glass effect
   Applied via data-bg attribute on .profile-grid, always active.
   ============================================================ */

.profile-grid[data-bg] {
    border-radius: 12px;
    padding: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 800px;
}

/* Pre-made background textures (applied via data-bg attribute) */
.profile-grid[data-bg="mountains"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0%25" stop-color="%23091428"/><stop offset="40%25" stop-color="%23142952"/><stop offset="100%25" stop-color="%231a3a6c"/></linearGradient><linearGradient id="mtn1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%25" stop-color="%23162a50"/><stop offset="100%25" stop-color="%230a1a35"/></linearGradient><linearGradient id="mtn2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%25" stop-color="%231e3460"/><stop offset="100%25" stop-color="%23122040"/></linearGradient></defs><rect fill="url(%23sky)" width="1200" height="600"/><circle cx="900" cy="120" r="40" fill="%23d4d4e8" opacity="0.15"/><polygon fill="url(%23mtn1)" points="0,600 200,280 400,380 600,220 800,340 1000,260 1200,320 1200,600"/><polygon fill="url(%23mtn2)" points="0,600 100,380 300,420 500,350 700,400 900,330 1100,380 1200,360 1200,600"/><polygon fill="%230d1830" points="0,600 150,450 350,480 550,440 750,470 950,430 1200,460 1200,600"/></svg>');
}

.profile-grid[data-bg="ocean"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><linearGradient id="osky" x1="0" y1="0" x2="0" y2="1"><stop offset="0%25" stop-color="%23a8d5e2"/><stop offset="50%25" stop-color="%236bb7c8"/><stop offset="100%25" stop-color="%23156b8a"/></linearGradient></defs><rect fill="url(%23osky)" width="1200" height="600"/><circle cx="200" cy="100" r="60" fill="%23fff8e1" opacity="0.4"/><ellipse cx="600" cy="500" rx="800" ry="200" fill="%231a6b8a" opacity="0.3"/><ellipse cx="600" cy="540" rx="700" ry="150" fill="%23145a75" opacity="0.4"/></svg>');
}

.profile-grid[data-bg="sunset"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><linearGradient id="ssky" x1="0" y1="0" x2="0" y2="1"><stop offset="0%25" stop-color="%231a0a2e"/><stop offset="30%25" stop-color="%234a1942"/><stop offset="60%25" stop-color="%23c94b4b"/><stop offset="85%25" stop-color="%23e8a87c"/><stop offset="100%25" stop-color="%23f7d794"/></linearGradient></defs><rect fill="url(%23ssky)" width="1200" height="600"/><circle cx="600" cy="420" r="70" fill="%23f7d794" opacity="0.6"/><polygon fill="%231a0a20" points="0,600 100,480 250,500 400,460 550,490 700,450 850,480 1000,440 1150,470 1200,450 1200,600"/></svg>');
}

.profile-grid[data-bg="forest"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><linearGradient id="fsky" x1="0" y1="0" x2="0" y2="1"><stop offset="0%25" stop-color="%23e8f5e9"/><stop offset="100%25" stop-color="%23a5d6a7"/></linearGradient></defs><rect fill="url(%23fsky)" width="1200" height="600"/><polygon fill="%232e7d32" opacity="0.3" points="0,600 60,350 120,600"/><polygon fill="%231b5e20" opacity="0.3" points="100,600 180,300 260,600"/><polygon fill="%232e7d32" opacity="0.25" points="220,600 310,320 400,600"/><polygon fill="%231b5e20" opacity="0.3" points="360,600 440,280 520,600"/><polygon fill="%232e7d32" opacity="0.25" points="480,600 560,310 640,600"/><polygon fill="%231b5e20" opacity="0.3" points="600,600 690,290 780,600"/><polygon fill="%232e7d32" opacity="0.25" points="740,600 820,300 900,600"/><polygon fill="%231b5e20" opacity="0.3" points="860,600 950,280 1040,600"/><polygon fill="%232e7d32" opacity="0.25" points="1000,600 1080,310 1160,600"/><rect fill="%231b5e20" opacity="0.15" y="500" width="1200" height="100"/></svg>');
}

.profile-grid[data-bg="city"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><linearGradient id="csky" x1="0" y1="0" x2="0" y2="1"><stop offset="0%25" stop-color="%23070b1a"/><stop offset="100%25" stop-color="%231a1a3e"/></linearGradient></defs><rect fill="url(%23csky)" width="1200" height="600"/><circle cx="100" cy="80" r="1.5" fill="%23fff" opacity="0.6"/><circle cx="300" cy="50" r="1" fill="%23fff" opacity="0.4"/><circle cx="500" cy="90" r="1.5" fill="%23fff" opacity="0.5"/><circle cx="700" cy="40" r="1" fill="%23fff" opacity="0.4"/><circle cx="900" cy="70" r="1.5" fill="%23fff" opacity="0.6"/><circle cx="1100" cy="55" r="1" fill="%23fff" opacity="0.3"/><rect fill="%230d0d2b" x="50" y="350" width="80" height="250"/><rect fill="%23111133" x="160" y="300" width="60" height="300"/><rect fill="%230d0d2b" x="260" y="380" width="100" height="220"/><rect fill="%23111133" x="400" y="280" width="70" height="320"/><rect fill="%230d0d2b" x="510" y="320" width="90" height="280"/><rect fill="%23111133" x="640" y="250" width="80" height="350"/><rect fill="%230d0d2b" x="760" y="340" width="70" height="260"/><rect fill="%23111133" x="870" y="290" width="100" height="310"/><rect fill="%230d0d2b" x="1010" y="360" width="80" height="240"/><rect fill="%23111133" x="1120" y="310" width="60" height="290"/></svg>');
}

/* Custom image background (set via inline style on .profile-grid) */
.profile-grid[data-bg="custom"] {
    /* background-image set via inline style */
}

/* ============================================================
   Glass Toggle Effect — frosted glassmorphism on widget cards
   Independent of background. Adds translucent blur to cards.
   ============================================================ */

.glass-on .profile-widget {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-on .widget-drag-handle {
    background: rgba(255, 255, 255, 0.25);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* S76 Rob: glass mode was washing body text out — the white halo text-shadow
   was combining with 0.7-opacity labels to make "MEMBERSHIP" and questionnaire
   text nearly invisible. Remove the halo; force brand navy + full opacity on
   the low-contrast labels so everything stays readable when glass is on. */
.glass-on .widget-body {
    /* intentionally no text-shadow */
}
.glass-on .tier-label,
.glass-on .quest-label {
    color: #031B83 !important;
    opacity: 1 !important;
}
.glass-on .quest-pct {
    color: #031B83 !important;
}

/* When glass is on WITHOUT a background, use subtle fallback tint */
.glass-on .profile-grid:not([data-bg]) {
    background: linear-gradient(135deg, rgba(200, 220, 255, 0.25) 0%, rgba(220, 230, 255, 0.15) 100%);
    border-radius: 12px;
    padding: 10px;
}

/* Glass text adjustments for readability on translucent cards */
.glass-on .widget-title {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* When background is dark + glass is on, boost card visibility slightly */
.glass-on .profile-grid[data-bg="mountains"] .profile-widget,
.glass-on .profile-grid[data-bg="city"] .profile-widget,
.glass-on .profile-grid[data-bg="sunset"] .profile-widget {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Dark background glass — light text for contrast */
.glass-on .profile-grid[data-bg="mountains"] .widget-title,
.glass-on .profile-grid[data-bg="city"] .widget-title,
.glass-on .profile-grid[data-bg="sunset"] .widget-title {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.glass-on .profile-grid[data-bg="mountains"] .widget-drag-handle .dashicons,
.glass-on .profile-grid[data-bg="city"] .widget-drag-handle .dashicons,
.glass-on .profile-grid[data-bg="sunset"] .widget-drag-handle .dashicons {
    color: #f0c040;
}

.glass-on .profile-grid[data-bg="mountains"] .widget-body,
.glass-on .profile-grid[data-bg="city"] .widget-body,
.glass-on .profile-grid[data-bg="sunset"] .widget-body {
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   Icon Sidebar Tray (editor only)
   ============================================================ */

.widget-sidebar {
    width: 48px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 4px;
    background: #f5f5f5;
    border-radius: 10px;
    border: 2px solid #CC9900;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    min-height: 200px;
    align-self: stretch;
}

/* S76-006: Custom wish-list fingers-crossed icon — dashicons has no
   fingers emoji, so we use unicode 🤞 via ::before with its own emoji
   font. Renders white background + gold icon per Rob. */
.icon-wishlist-fingers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #CC9900;
    border-radius: 50%;
    /* S78 Rob: fixed 20px to match dashicons alongside in sidenav. */
    width: 20px;
    height: 20px;
}
.icon-wishlist-fingers::before {
    content: "🤞";
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    line-height: 1;
}

/* S77 Interests = question mark emoji — same emoji-class pattern as wishlist.
   White bg + gold bubble. translateY(1px) nudge because emoji glyphs render
   upper in em-box (/da rule 23a).
   S158 29/07/26 (T594): `.icon-reputation-mouth` REMOVED from all three rules.
   The Reputation glyph is now an SVG megaphone emitted by
   profile_system_reputation_icon(), and this class was emitted by nothing at all
   anyway - the sidenav has taken its glyph from the $group2 array since S77, so
   these rules had been dead for months (D-243 principle 4: dead code is deleted,
   not hidden). `.icon-wishlist-fingers` IS still live (venue-organiser-widgets.php)
   and `.icon-interests-question` is left untouched as out of scope. */
.icon-wishlist-fingers,
.icon-interests-question {
    transform: translateY(1px);
}
.icon-interests-question {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #CC9900;
    border-radius: 50%;
    /* S78 Rob: fixed even px (was 1.4em → 19.6px fractional on 14px base) so
       the bubble lines up pixel-perfectly with the 18px dashicons alongside
       them in the sidenav. Same treatment for wishlist-fingers below. */
    width: 20px;
    height: 20px;
}
.icon-interests-question::before {
    content: "❓";
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    line-height: 1;
}

.sidebar-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f8f8f8;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.sidebar-icon:hover {
    background: #CC9900;
    border-color: #b8860b;
}

.sidebar-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #666;
    transition: color 0.2s;
}

.sidebar-icon:hover .dashicons {
    color: #031B83;
}

/* Shrink-to-sidebar animation clone */
.widget-fly-clone {
    position: fixed;
    pointer-events: none;
    z-index: 2000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out,
                width 0.4s ease-in-out, height 0.4s ease-in-out,
                left 0.4s ease-in-out, top 0.4s ease-in-out;
}

.widget-fly-clone.flying {
    opacity: 0.4;
}

/* ============================================================
   Widget Content Styles
   ============================================================ */

.widget-empty {
    color: #031B83;
    font-style: italic;
    text-align: center;
    padding: 16px 8px;
    margin: 0;
    font-weight: 500;
}
/* S77 Rob item 22: on glass mode the grey was invisible against the
   transparent sand backdrop. Navy with subtle text-shadow reads cleanly
   over any custom background. */
.profile-editor-wrapper.glass-on .widget-empty,
body.bp-user .profile-grid-public.glass-on .widget-empty {
    color: #031B83 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* Bio widget */
.widget-bio-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.bio-avatar img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* S77 Rob item 23: Wish List as a grid of circular sigils, not a list of
   names. Each badge is a 60x60 circle with the target's logo/featured image.
   Hover reveals the name as a tooltip below; clicking goes to the target. */
.widget-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 12px;
    padding: 8px;
    justify-items: center;
}
.wishlist-sigil {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid #CC9900;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: transform 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.wishlist-sigil img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.wishlist-sigil .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #CC9900;
}
.wishlist-sigil:hover {
    transform: scale(1.08);
    border-color: #031B83;
}
.wishlist-sigil-name {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #031B83;
    color: #CC9900;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}
.wishlist-sigil:hover .wishlist-sigil-name {
    opacity: 1;
}

.bio-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bio-name {
    font-family: 'Montserrat', sans-serif;
    color: #031B83;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.bio-gender,
.bio-joined {
    font-size: 13px;
    color: #666;
}

/* S63 Phase 1c — bio-level pill (T455 C1-C4): per-tier tint, Admin exception (D089),
   16px radius (D090), Montserrat heading font (LB-024 on-brand). */
.bio-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px 5px;
    border-radius: 9999px; /* pill — stays 9999 per D090 pill exception */
    margin-top: 4px;
    width: fit-content;
    line-height: 1;
    text-align: center;
    border: 0 none;
}

/* Per-tier tint + matching text + no border (B23/B24/B25 sign-off; canonical
   palette from BRAND_GUIDE.md §11 Membership Level Badges).
   Admin exception per D089 — solid green bg + navy text + navy border.
   Note: PHP profile-system.php:595 emits `badge-<level-lowercased>`.
   Note: page-polish.css §13.5 defines a DIFFERENT legacy palette for
   `#buddypress #members-list .member-card-level.level-*` (gold-family only).
   Those rules are scoped to #members-list so they do not collide with
   `.bio-level` on /profile/. */
.badge-free,       .bio-level.level-free       { background: rgba(107, 114, 128, 0.08); color: #6B7280; border: 0 none; }
.badge-standard,   .bio-level.level-standard   { background: rgba(3, 27, 131, 0.06);     color: #031B83; border: 0 none; }
.badge-premium,    .bio-level.level-premium    { background: rgba(204, 153, 0, 0.08);    color: #CC9900; border: 0 none; }
.badge-organiser,  .bio-level.level-organiser  { background: rgba(40, 167, 69, 0.08);    color: #28a745; border: 0 none; }
.badge-venue,      .bio-level.level-venue      { background: rgba(111, 66, 193, 0.08);   color: #6f42c1; border: 0 none; }
.badge-admin,      .bio-level.level-admin      { background: rgb(74, 222, 128);          color: #031B83; border: 1px solid #031B83; }

/* Photos grid */
.widget-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.photo-thumb {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BUG-17: Interest / music tags — compact branded pills (D055) */
.widget-interests-list,
.widget-music-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    line-height: 1.4;
}

/* AMENDMENT S58 2026-04-14: interest pills white bg + gold border + navy text (Rob 2026-04-14).
   S63 Phase 1c T455 C10: Montserrat font override (was inheriting Seeko Muli).
   S63 Phase 1c T455 C12: .interest-tag-personality visually distinct from generic .interest-tag
   (D055 invert — navy bg + gold text + gold border) to mark the primary personality indicator. */
.interest-tag,
.music-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff !important;
    color: #031B83 !important;
    font-family: 'Montserrat', sans-serif !important;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    border: 1.5px solid #CC9900 !important;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Personality-primary pill — D055 invert for visual distinction (S63 Phase 1c C12). */
.interest-tag.interest-tag-personality,
span.interest-tag-personality {
    background: #031B83 !important;
    color: #CC9900 !important;
    border: 1.5px solid #031B83 !important;
}

.music-tag {
    background: #fff8e1;
    color: #b8860b;
    border-color: #b8860b;
}

/* BUG-17: Personality chip — visually distinct, leads the interests widget */
/* AMENDMENT S58 2026-04-14: unify to white bg + gold border + navy text (Rob 2026-04-14). */
.interest-tag-personality {
    background: #ffffff !important;
    color: #031B83 !important;
    border: 1.5px solid #CC9900 !important;
    padding: 5px 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}
.interest-tag-personality .interest-tag-emoji {
    font-size: 14px;
    line-height: 1;
}

/* Spotify embed + search — height left to default flow (Rob S79: do not
   shorten container; let iframe HTML height attribute govern). */
.widget-spotify-embed {
    margin-bottom: 8px;
    position: relative;
    line-height: 0;
}
.widget-spotify-embed iframe {
    border-radius: 8px;
    display: block;
    width: 100%;
    height: 100%;
}

/* S79 Rob — Quote widget ALWAYS chrome-strips on public; only the visible
   bubble shows, no widget rectangle ever. Bubble auto-sizes to content
   so the dead-space rule isn't violated even when the user has resized
   the widget bigger in customise. Bubble bg/text colour comes from CSS
   vars set by the colour popover (so changing "Body Background" paints
   the visible bubble — not the invisible widget-body wrapper). */
body.bp-user .profile-grid-public .profile-widget--quote-autofit,
body.bp-user .profile-grid-public .profile-widget--quote-autofit:hover,
body.bp-user .profile-grid-public .profile-widget--quote-autofit:focus-within {
    width: max-content !important;
    max-width: 100% !important;
    height: max-content !important;
    min-height: 0 !important;
    align-self: start !important;
    justify-self: start !important;
    background: transparent !important;
    border: 0 none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
body.bp-user .profile-grid-public .profile-widget--quote-autofit > .widget-header-public {
    display: none !important;
}
body.bp-user .profile-grid-public .profile-widget--quote-autofit > .widget-body {
    padding: 0 !important;
    height: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 none !important;
}
/* The quote bubble — the only visible element on public for a quote
   widget. Bubble bg and text colour read from CSS vars set by the colour
   popover (or default white if no popover colour saved). Rendered as a
   <div>, not <blockquote>, to sidestep the Seeko-parent
   `theme-dynamic.css` rule that paints a 4px left "eyebrow" on every
   blockquote site-wide. With the bubble being a <div>, no override is
   needed — it inherits normal widget rules. */
body.bp-user .profile-grid-public .profile-widget--quote-autofit .widget-quote,
.profile-widget[data-widget-id="quote"] .widget-quote {
    margin: 0;
    padding: 12px 18px;
    max-width: 360px;
    white-space: normal;
    word-break: break-word;
    background-color: var(--quote-bg-color, #FFFFFF);
    background-clip: padding-box;
    color: var(--quote-text-color, #031B83);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
}

/* S77 Rob — chrome-free Spotify widget on public profiles. Looks like just
   the embedded player + the small login hint underneath. Mirrors the sigil /
   party widgets' chrome-strip pattern. Only the body and its content render —
   no header bar, no border, no card background, no shadow. Widget shrinks to
   content height (auto) so there's no empty whitespace below the hint. */
/* S79 Rob: chrome-strip needs (0,3,1)+ specificity to beat Seeko's
   `body.bp-user .profile-grid-public .profile-widget { border-style: solid
   !important }` rule. Mirrors the sigil chrome-strip specificity pattern. */
.profile-widget.profile-widget--spotify,
body.bp-user .profile-grid-public .profile-widget.profile-widget--spotify,
body .profile-grid-public .profile-widget.profile-widget--spotify {
    background: transparent !important;
    border: 0 none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    align-self: start !important;
    height: auto !important;
    overflow: visible !important;
}
.profile-widget--spotify .widget-drag-handle,
.profile-widget--spotify .widget-header-public {
    display: none !important;
}
body.bp-user .profile-grid-public .profile-widget.profile-widget--spotify .widget-body,
.profile-widget--spotify .widget-body {
    padding: 0 !important;
    background: transparent !important;
    border: 0 none !important;
    overflow: visible !important;
    height: auto !important;
}
.profile-widget--spotify .widget-spotify-embed {
    margin: 0 !important;
}
.profile-widget--spotify .spotify-login-hint {
    /* S77 Rob: hint replaced by a hover-tooltip "i" trigger on the embed.
       Hide the legacy paragraph entirely. */
    display: none !important;
}

/* S79 Rob: stripped all Spotify info-button CSS. Reverted to baseline —
   just the iframe, no overlay button. Will rebuild from clean state. */
.spotify-login-hint {
    font-size: 10px;
    color: #031B83;
    text-align: center;
    margin: 4px 0 0;
    font-style: italic;
    line-height: 1.3;
}

/* S77 — Spotify brand mark for the Music widget's sidebar icon. Official
   green (#1ED760) per Spotify branding guidelines for integrations.
   Sized to match the dashicons-format-audio it replaces (22px square inside
   the 48px circular sidebar button). */
.icon-spotify {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('../images/spotify-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

/* S79 Rob: customise-mode music widget — shrinks to content (no iframe
   on customise, just controls) and the controls inside have symmetric
   spacing. flex column with `gap` gives equal vertical rhythm; height:
   auto on the widget shells stop the grid cell painting empty space
   below the visible controls. */
.profile-widget[data-widget-id="music"]:not(.profile-widget-public) {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
}
.profile-widget[data-widget-id="music"]:not(.profile-widget-public) > .widget-body {
    /* S79 Rob: padding + gap unified at 14px so all 3 vertical spacings
       (above input, between input and selected track, below track) are
       visually equal. */
    padding: 14px !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
/* Info popup is a sibling of .spotify-search-ui — no own margin so
   the parent flex gap controls all spacing. */
.profile-widget[data-widget-id="music"] .spotify-info-popup {
    margin: 0 !important;
}

/* Spotify search UI (editor only). Single flex column with consistent
   12px gap between every direct child — search bar, results, selected
   track, admin OAuth block. No more ad-hoc margin-top on individual
   children, no margin-bottom on the wrapper. */
.spotify-search-ui {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}
.spotify-search-bar {
    position: relative;
}
.spotify-search-input {
    width: 100%;
    padding: 6px 10px;
    /* S79 Rob: kill Seeko's `input[type=text] { margin-bottom: 1rem }` —
       it was adding 14-16px below the input ON TOP of the flex parent's
       14px gap, doubling the visible distance to the track banner. */
    margin: 0 !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Nunito Sans', sans-serif;
    outline: none;
    box-sizing: border-box;
}
.spotify-search-input:focus {
    border-color: #CC9900;
    box-shadow: 0 0 0 2px rgba(204, 153, 0, 0.15);
}
.spotify-results {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}
/* S79 Rob: hide empty results so the parent flex `gap` doesn't apply on
   either side of an empty zero-height div — without this, the gap above
   input and below track was 14px while the gap between them was 28px
   (two flex gaps with an invisible 0-height element in the middle). */
.spotify-results:empty {
    display: none !important;
    margin: 0 !important;
}
.spotify-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.spotify-result:hover {
    background: #f0f7ff;
}
.spotify-result-art {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
}
.spotify-result-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.spotify-result-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spotify-result-artist {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spotify-searching,
.spotify-no-results,
.spotify-not-configured {
    font-size: 11px;
    color: #999;
    text-align: center;
    padding: 8px;
    font-style: italic;
}

/* Current selected track — gap handled by parent .spotify-search-ui flex
   gap, no margin-top needed. */
.spotify-current-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0faf0;
    border: 1px solid #c3e6c3;
    border-radius: 6px;
    padding: 6px 8px;
    margin: 0;
}
.spotify-current-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}
.spotify-current-art {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
}
.spotify-current-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.spotify-current-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spotify-current-artist {
    font-size: 11px;
    color: #666;
}
.spotify-clear-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #c00;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.spotify-clear-btn:hover {
    color: #900;
}

/* Events list */
.widget-events-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-events-list li {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: baseline;
}

.widget-events-list li:last-child {
    border-bottom: none;
}

/* S181 (18/08/26, D-389): the owner's per-event Hide/Show control on the Upcoming Events widget,
   and the muted look of a row the owner has hidden from everyone else. First pass; Rob's sweep. */
.widget-events-list .widget-event-vis {
    margin-left: auto;
    font-size: 11px;
    padding: 3px 8px;
    white-space: nowrap;
}
.widget-events-list .widget-event-row--hidden .event-title,
.widget-events-list .widget-event-row--hidden .event-date {
    opacity: 0.55;
}

.event-date {
    font-size: 12px;
    font-weight: 600;
    color: #CC9900;
    white-space: nowrap;
    min-width: 70px;
}

.event-title {
    font-size: 13px;
    color: #333;
}

/* Attendance stats */
.widget-attendance-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 8px 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #031B83;
}

.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    font-weight: 600;
}

/* Reputation badges */
.widget-reputation-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reputation-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f7ff;
    border: 1px solid #d0e3f7;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
}

.badge-label {
    color: #031B83;
    font-weight: 600;
}

.badge-count {
    color: #999;
    font-size: 11px;
}

/* Social links */
.widget-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.social-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: #f0f0f0;
    color: #333;
    transition: background 0.2s;
}

.social-link:hover {
    background: #e0e0e0;
    color: #333;
    text-decoration: none;
}

/* Wish list */
.widget-wishlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-wishlist li {
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.widget-wishlist li:last-child {
    border-bottom: none;
}

.wishlist-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #CC9900;
    margin-right: 6px;
}

/* 14.10 Favourite Venues & Organisers widgets */
/* 14.10.1 Widget container — vertical stack */
.widget-favourites {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* end of 14.10.1 */
/* 14.10.2 Card row — flex */
.fav-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: background 150ms;
    color: inherit;
}
/* end of 14.10.2 */
/* 14.10.3 Card hover — raised bg */
.fav-card:hover {
    background: var(--color-surface-raised, #F8F7F4);
}
/* end of 14.10.3 */
/* 14.10.4 Card sigil — square thumbnail with gold border */
.fav-card-sigil {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md, 8px);
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-gold, #CC9900);
}
/* end of 14.10.4 */
/* 14.10.5 Round sigil variant — circular */
.fav-card-sigil-round {
    border-radius: 50%;
}
/* end of 14.10.5 */
/* 14.10.6 Placeholder sigil — sunken bg */
.fav-card-sigil-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-sunken, #F3F2EF);
    color: var(--color-text-muted, #9B9BAB);
}
/* end of 14.10.6 */
/* 14.10.7 Placeholder icon */
.fav-card-sigil-placeholder .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}
/* end of 14.10.7 */
/* 14.10.8 Card info column */
.fav-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* end of 14.10.8 */
/* 14.10.9 Card name — Montserrat navy */
.fav-card-name {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-navy, #031B83);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* end of 14.10.9 */
/* 14.10.10 Card detail — secondary text */
.fav-card-detail {
    font-size: 11px;
    color: var(--color-text-secondary, #6B6B7B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* end of 14.10.10 */
/* 14.10.11 Manage button — corner overlay, hover-revealed */
.fav-manage-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-surface-raised, #F8F7F4);
    border: 1px solid var(--color-border, rgba(26,26,46,0.08));
    border-radius: var(--radius-sm, 4px);
    padding: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms;
}
/* end of 14.10.11 */
/* 14.10.12 Manage button reveal on widget hover */
.profile-widget:hover .fav-manage-btn,
.profile-widget-public:hover .fav-manage-btn {
    opacity: 1;
}
/* end of 14.10.12 */
/* 14.10.13 Manage button icon */
.fav-manage-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--color-text-muted, #9B9BAB);
}
/* end of 14.10.13 */
/* end of 14.10 */

/* Quote — legacy fallback rule (the §2.x autofit rule above takes
   precedence on the widget render path). Gold eyebrow removed
   per Rob 11/05/26. */
.widget-quote {
    font-style: italic;
    color: #555;
    padding: 8px 16px;
    margin: 8px 0;
    font-size: 15px;
    line-height: 1.5;
}

/* Membership */
.widget-membership-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.membership-tier {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
}

.tier-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.tier-name {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.membership-questionnaire {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.quest-bar {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.quest-fill {
    height: 100%;
    background: linear-gradient(90deg, #CC9900, #b8860b);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.quest-pct {
    font-size: 12px;
    font-weight: 600;
    color: #CC9900;
    min-width: 32px;
}

/* ============================================================
   Public Profile — read-only view
   ============================================================ */

.profile-public-wrapper {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.profile-grid-public .profile-widget {
    cursor: default;
}

.profile-grid-public .widget-drag-handle {
    cursor: default;
}

.profile-grid-public .resize-handle,
.profile-grid-public .drag-grip,
.profile-grid-public .widget-minimize-btn,
.profile-grid-public .widget-delete-btn,
.profile-grid-public .color-swatch-btn {
    display: none;
}

/* Public photo panels — borderless, just the image */
.photo-panel-public {
    overflow: hidden;
}

.photo-panel-public .widget-body {
    padding: 0;
    flex: 1;
}

.photo-panel-public .widget-drag-handle {
    display: none;
}

/* "Customise Your Profile" CTA button on own public profile —
   positioned absolute so it doesn't create a grid row */
.profile-customise-cta {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 10;
    margin: 0;
    padding: 0;
}

.btn-customise-profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(to bottom, #d9a400 0%, #b8860b 100%);
    color: #031B83 !important;
    padding: 10px 22px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(184, 134, 11, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

/* AMENDMENT S47: D055 — gold bg = blue text on hover */
.btn-customise-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(184, 134, 11, 0.25);
    color: #031B83 !important;
}

.btn-customise-profile:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-customise-profile .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ============================================================
   Responsive — hide editor on phones, single column public view
   ============================================================ */

/* Phone: hide the entire editor, show a message instead */
@media (max-width: 767px) {
    /* Hide the Customise (My Profile) tab on mobile — editor doesn't work on small screens */
    #customise-personal-li {
        display: none !important;
    }

    /* Hide editor chrome, show message */
    .profile-editor-wrapper .editor-toolbar,
    .profile-editor-wrapper .editor-hint,
    .profile-editor-wrapper .bg-picker,
    .profile-editor-wrapper .editor-content,
    .profile-editor-wrapper .save-status-row {
        display: none !important;
    }

    .profile-editor-wrapper::before {
        content: 'Profile customisation is available on desktop or tablet only.';
        display: block;
        text-align: center;
        padding: 20px;
        color: #031B83; /* S82 Rob — was #999 grey, brand says navy on copy */
        font-family: 'Montserrat', sans-serif; /* intentional: mobile-only pseudo-element (no base ::before exists) — Phase 2a S65 */
        font-size: 13px;
        font-style: italic;
        line-height: 1.5;
    }

    /* S82 — kill the dashboard "scroll →" hint on the customise page at mobile.
       Customise itself is blocked at this width (the .profile-editor-wrapper::before
       above shows the explanation), so the sidenav-scroll affordance is meaningless. */
    body.profile-editor-active #item-body .col-inner::before {
        display: none !important;
        content: none !important;
    }

    /* Hide "Customise Your Profile" CTA on mobile — editor doesn't work on phones */
    .profile-customise-cta,
    div.profile-customise-cta,
    body .profile-customise-cta,
    body.profile-public-active .profile-customise-cta,
    .btn-customise-profile {
        display: none !important;
    }

    /* Public profile: single column on phones — flexbox for auto-height stacking */
    .profile-public-wrapper {
        max-width: 100% !important;
        padding: 0 16px !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Keep all content within viewport on mobile */
    body.profile-public-active .bp-member-layout > .container,
    body.profile-dashboard-active .bp-member-layout > .container {
        max-width: 100% !important;
        padding: 0 !important;
        overflow-x: hidden;
    }
    body.profile-public-active .row.sidebar-single,
    body.profile-dashboard-active .row,
    body.profile-dashboard-active #item-body,
    body.profile-public-active #item-body,
    body.profile-dashboard-active #item-body .container,
    body.profile-public-active #item-body .container,
    body.profile-dashboard-active #item-body .col-inner,
    body.profile-public-active #item-body .col-inner {
        overflow-x: hidden;
        max-width: 100%;
    }
    /* Kill negative margins that push content beyond viewport on mobile */
    #item-body {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #item-body > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* S108 11/06/26 — KEEP the grid intact at narrow viewports.
       Previously this block converted .profile-grid-public to flex-column,
       which threw away every widget's saved grid-column/grid-row span — so
       saved customise dimensions were lost and sigil/party widgets (whose
       images use container-query units min(100cqw, 100cqh)) collapsed to 0
       because their parent had no defined height in flex-column.
       The grid honours the saved w/h and scales proportionally with viewport
       width — exactly what the customise workspace stores. */
    .profile-grid-public {
        min-height: auto !important;
    }

    .profile-grid-public .profile-widget-public {
        min-height: auto !important;
        overflow: visible !important;
    }

    .profile-grid-public .profile-widget-public .widget-body {
        overflow: visible !important;
    }

    .widget-bio-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .widget-attendance-stats {
        flex-direction: column;
        gap: 12px;
    }

    .widget-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet: editor works but in compact mode */
@media (min-width: 768px) and (max-width: 1024px) {
    .editor-toolbar {
        flex-wrap: wrap;
    }
}


/* ============================================================================
   15. SECTION: Dashboard Layout (customise page only — see ARCHITECTURE NOTE)
   ============================================================================
   ARCHITECTURE NOTE (S89, 10/05/26):
   The OLD layout where .col-inner was a 2-column CSS grid (sidenav in column 1,
   workspace content in column 2) has been retired for every sidenav-driven page.
   Every sidenav page (account, attendance, invites, messages, settings, etc.)
   now uses the design-agent's .app shell instead — see page-polish.css §42.0.

   Remaining rules in §15 cover the CUSTOMISE PAGE ONLY (`/customise/`), which is
   the widget editor and never appears in the sidenav. Customise has its own
   layout where .col-inner is `display: block` and content is the
   `.profile-editor-wrapper`. Rules scoped to `body.profile-dashboard-active.profile-editor-active`
   are customise-only.

   Inert rules (`.dashboard-sidenav`, `.sidenav-item`, `.sidenav-label`,
   `.sidenav-badge`) below also pre-date the new BEM markup. The new sidenav
   emitted by profile_system_open_app_shell() uses BEM classes (.sidenav,
   .sidenav__item, etc.) styled in page-polish.css §41. The legacy classes
   are kept as dead code for now; they don't match anything in the live DOM.
   ============================================================================ */

/* 15.1 (REMOVED) — Legacy .col-inner grid (sidenav col 1 + content col 2).
   Retired in S89; .app handles its own internal grid. See page-polish.css
   §42.0.1 for the .app rule. */

/* 15.2 Side nav */
/* 15.2.1 Sidenav rail — sticky vertical, gold border, white bg */
.dashboard-sidenav {
    grid-row: 1 / span 50;
    grid-column: 1;
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: var(--space-md, 12px) 0 var(--space-lg, 16px) 0;
    /* S67 Phase 9 sidenav-brand fix (Rob 2026-04-18):
       white bg, navy text (on items), gold border — on-brand across all platforms. */
    border: 2px solid var(--color-gold, #CC9900);
    border-radius: var(--radius-lg, 12px);
    background: #FFFFFF;
}
/* end of 15.2.1 */

/* 15.2.2 Sidenav item — flex row, navy text */
.sidenav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md, 12px);
    padding: var(--space-md, 12px) var(--space-xl, 24px) var(--space-md, 12px) 24px;
    /* S67 Phase 9 sidenav-brand fix: navy text on all platforms per Rob's 2026-04-18 directive */
    color: var(--color-navy, #031B83);
    text-decoration: none;
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    line-height: 1.4;
    border-left: 4px solid transparent;
    transition: all var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.25,1,0.5,1));
}
/* end of 15.2.2 */

/* 15.2.3 Sidenav item hover — raised bg */
.sidenav-item:hover {
    color: var(--color-text, #1A1A2E);
    background: var(--color-surface-raised, #F8F7F4);
    text-decoration: none;
}
/* end of 15.2.3 */

/* 15.2.4 Active item — bold navy + gold left border */
.sidenav-item-active {
    color: var(--color-navy, #031B83);
    font-weight: 700;
    border-left-color: var(--color-gold, #CC9900);
    background: var(--color-surface-raised, #F8F7F4);
}
/* end of 15.2.4 */

/* 15.2.5 Sidenav item icon */
.sidenav-item .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
/* end of 15.2.5 */

/* 15.2.6 Sidenav label — flex grow */
.sidenav-label {
    flex: 1;
}
/* end of 15.2.6 */

/* 15.2.7 Sidenav badge — pill */
.sidenav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill, 9999px);
    background: #FFF0C2; /* AMENDMENT S58 2026-04-14: reverted — Rob prefers darker cream for sidenav badges. NOTE: #FFF0C2 is NON-BRAND, tracked for future colour sweep. */
    color: var(--color-navy, #031B83);
    border: 1px solid var(--color-gold, #CC9900);
    border-bottom-width: 2px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    box-shadow: none;
}
/* end of 15.2.7 */

/* 15.2.9 Protect <style>, <script>, and screen-reader elements from wildcard selectors */
#item-body style,
#item-body script,
#item-body .bp-screen-reader-text {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 15.3 (REMOVED) — Legacy workspace-content positioning rules.
   Set padding/grid-column:2/display:flex on every direct child of .col-inner
   except the customise-specific elements. With the new .app shell, the workspace
   IS .app and handles its own content layout. Retired in S89. */
/* 15.3.4 D049 — common workspace wrapper widths so max-width/margin:auto children still centre inside the flex column */
body.profile-dashboard-active .suggestions-container,
body.profile-dashboard-active .questionnaire-complete-panel,
body.profile-dashboard-active .workspace-content {
    width: 100%;
    margin-top: 0;
}
/* Questionnaire CTA banner — JS sets dynamic negative margin based on identity bar height */
/* NOTE (S135, T-S135-003): this z-index is overridden by an inline style set in
   profile_system_position_cta_banner() (profile-system.php §1.4), and raising it
   does not help anyway - the banner is trapped in an ancestor stacking context
   (.container, z-index 3) below .col-header (z-index 4), so the identity bar always
   paints over the banner's "Back to Summary" link. Logged for Rob, not patched here. */
body.profile-dashboard-active .cta-banner {
    position: relative;
    z-index: 2;
}
/* 15.3a Customise editor wrapper — only fires on customise page (where
   .profile-editor-wrapper exists). Now scoped to .profile-editor-active to make
   that explicit. */
body.profile-dashboard-active.profile-editor-active #item-body .col-inner > .profile-editor-wrapper {
    min-width: 0;
}

/* 15.4 Break editor out of dashboard grid — hide sidenav on editor page */
/* 15.4.1 Editor col-inner — block layout (no grid) */
body.profile-dashboard-active.profile-editor-active #item-body .col-inner {
    display: block;
}
/* end of 15.4.1 */
/* 15.4.2 Hide sidenav on editor */
body.profile-dashboard-active.profile-editor-active .dashboard-sidenav {
    display: none;
}
/* end of 15.4.2 */

/* 15.5 Dashboard responsive — tablet: icon-only sidebar */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 15.5.1 (REMOVED) — Legacy narrow grid (48px collapsed sidebar col). Retired S89. */

    /* 15.5.2 Sidenav — tighter padding */
    .dashboard-sidenav {
        padding: var(--space-sm, 8px) 0;
    }
    /* end of 15.5.2 */

    /* 15.5.3 Sidenav item — icon-centred, thicker border */
    .sidenav-item {
        padding: var(--space-md, 12px);
        justify-content: center;
        /* S78 Rob: restored to 4px (was 3px) so the compact sidenav's inner
           width (48 − 4 border − 24 padding = 20px) exactly matches the
           20px icon → pixel-perfect horizontal centering, no "1px off". */
        border-left-width: 4px;
    }
    /* end of 15.5.3 */

    /* 15.5.4 Sidenav label — hidden */
    .sidenav-label {
        display: none;
    }
    /* end of 15.5.4 */

    /* 15.5.5 Sidenav item icon — larger */
    .sidenav-item .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }
    /* end of 15.5.5 */

    /* 15.5.6 (REMOVED S89) — Legacy absolute-overlay sidenav badge for the
       768–1023 compact-sidebar layout. Caused the new BEM `.sidenav__badge`
       to render as a top-right corner dot instead of inline next to the
       label at that breakpoint. */
    /* 15.5.7 (REMOVED S89) — Legacy relative-anchor on .sidenav-item paired
       with the deleted absolute badge above. */
}

/* 15.6 Dashboard responsive — mobile: horizontal pill bar */
@media (max-width: 767px) {
    /* 15.6.0 Full-width mobile content — zero ALL Bootstrap padding/margin in the nesting chain.
       Without this: col-12(15) + container(12) + col-12(15) + col-12(15) + row(-15) = 42px per side
       giving only 261px of 360px viewport for content.
       With this: all zeroed, col-inner gets full viewport width, then its own padding creates margins. */
    /* 15.6.0.2 Outer .row — kill horizontal margin */
    /* Outer chain: bp-member-layout > container > row > col-12 */
    body.profile-dashboard-active .bp-member-layout > .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* end of 15.6.0.2 */
    /* 15.6.0.3 Outer .col-12 — kill horizontal padding */
    body.profile-dashboard-active .bp-member-layout > .container > .row > .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* end of 15.6.0.3 */
    /* 15.6.0.4 Inner #item-body container — kill horizontal padding */
    /* Inner chain: #item-body > container > row > col-12 */
    body.profile-dashboard-active #item-body > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* end of 15.6.0.4 */
    /* 15.6.0.5 Inner .row — kill horizontal margin */
    body.profile-dashboard-active #item-body > .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* end of 15.6.0.5 */
    /* 15.6.0.6 Inner .col-12 — kill horizontal padding */
    body.profile-dashboard-active #item-body > .container > .row > .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* end of 15.6.0.6 */
    /* 15.6.0.7 (REMOVED) — Legacy narrow flex column on .col-inner. Retired S89.
       The new .app shell handles its own narrow-width layout via @container vp queries. */

    /* 15.6.0.1 Long text wrapping — prevent email addresses, URLs etc overflowing cards */
    body.profile-dashboard-active #item-body .col-inner,
    body.profile-dashboard-active #item-body .col-inner * {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* 15.6.1 T288+T293: Sidenav card — gold border, drop shadow, horizontal pill bar
       S67 Phase 9 fix: justify-content changed from center to flex-start. With overflow-x
       scrolling and items wider than container, "center" put the scroll position at the
       middle of the list so members opened the page seeing "Notifications"/"Reputation"
       (around item 7-8) instead of Dashboard. flex-start shows Dashboard first on load. */
    /* 15.6.1.1 Sidenav card — flex pill bar with gold border + shadow */
    .dashboard-sidenav {
        position: relative;
        top: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: var(--space-sm, 8px);
        padding: var(--space-md, 12px) var(--space-lg, 16px);
        max-height: none;
        scrollbar-width: none;
        white-space: nowrap;
        flex-wrap: nowrap;
        width: 100%;
        left: auto;
        transform: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        /* Card styling — on-brand */
        /* background removed: duplicated base var(--color-surface, #fff) at L2476 — Phase 2a S65 cascade cleanup */
        border: 2px solid var(--color-gold, #CC9900); /* intentional: mobile card treatment (base sidenav uses right-border only, no full border) — Phase 2a S65 */
        border-radius: var(--radius-lg, 12px); /* intentional: mobile pill-bar card (base is vertical rail, no radius) — Phase 2a S65 */
        box-shadow: 0 2px 8px rgba(3, 27, 131, 0.10), 0 1px 3px rgba(204, 153, 0, 0.08); /* intentional: mobile card elevation (base has no shadow) — Phase 2a S65 */
        margin-bottom: 0;
    }
    /* end of 15.6.1.1 */

    /* 15.6.1.2 Hide WebKit scrollbar */
    .dashboard-sidenav::-webkit-scrollbar {
        display: none;
    }
    /* end of 15.6.1.2 */

    /* 15.6.2 Scroll hint — OUTSIDE the card, below-right.
       col-inner is display:flex, so ::before gets order:1 to sit between sidenav(0) and content(2). */
    /* 15.6.2.1 Sidenav order — first */
    .dashboard-sidenav {
        order: 0;
    }
    /* end of 15.6.2.1 */
    /* 15.6.2.2 (REMOVED S89) — Legacy grey "scroll →" ::before pseudo on .col-inner.
       This was the legacy layout's scroll hint. The new design ships its own
       sidenav scroll-cue (`<div class="sidenav__scroll-cue">…</div>`) emitted by
       profile_system_open_app_shell(); the legacy ::before was a leftover. */
    /* 15.6.2.3 (REMOVED) — Legacy narrow content order. Retired S89. */

    /* 15.6.2.4 (REMOVED S89) — Legacy `.sidenav-item` pill-shape (border-radius: 9999px)
       was fighting the new BEM `.sidenav__item { border-radius: 10px }` at narrow widths,
       producing inconsistent button shapes (default 10px, hover/active 9999px). */
    /* 15.6.2.5 (REMOVED S89) — Legacy `.sidenav-item-active` gold-fill mobile variant.
       Replaced by the BEM `.sidenav__item--active` rule in page-polish.css §41.5. */
    /* 15.6.2.6 (REMOVED S89) — Legacy `.sidenav-item-active:hover` darker-gold variant. */

    /* 15.6.2.7 Sidenav item icon — smaller */
    .sidenav-item .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
    }
    /* end of 15.6.2.7 */

    /* 15.6.2.8 Sidenav badge — static positioning */
    .sidenav-badge {
        position: static;
    }
    /* end of 15.6.2.8 */

    /* 15.6.3.1 (REMOVED) — Legacy narrow workspace-children centring. Retired S89.
       The new .app shell handles its own content width and centring per breakpoint. */
    /* 15.6.3.2 Forms + tables — left-align inside centred content */
    /* T292: Re-allow left-align for form fields and tables inside centered content */
    body.profile-dashboard-active #item-body .standard-form,
    body.profile-dashboard-active #item-body table,
    body.profile-dashboard-active #item-body .suggestion-card-message,
    body.profile-dashboard-active #item-body .account-details-table {
        text-align: left;
    }
    /* end of 15.6.3.2 */

    /* 15.6.4 Hide Customise button + Profile/Customise pills on mobile */
    body.profile-dashboard-active .btn-customise-profile {
        display: none !important;
    }

    /* 15.6.5 Hide photo upload/reposition icons + Profile/Customise nav on mobile */
    .profile-cover-change-btn,
    .profile-cover-reposition-btn,
    .profile-avatar-change-btn,
    .profile-avatar-reposition-btn,
    .btn-view-profile,
    .btn-customise-profile,
    .profile-preview-nav {
        display: none !important;
    }

    /* 15.6.6 Center the main Dashboard/Account nav tabs */
    #item-nav .item-list-tabs ul,
    .item-list-tabs#object-nav ul {
        display: flex;
        justify-content: center;
    }

    /* 15.6.7 Banner image — match content area margins (12px each side) */
    /* 15.6.7.1 Cover image — 24px-margin centred */
    #header-cover-image,
    #item-header-cover-image {
        width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        border-radius: var(--radius-md, 8px);
    }
    /* end of 15.6.7.1 */
    /* 15.6.7.2 #item-header — match horizontal padding */
    /* Also constrain the header container to match */
    #item-header {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* end of 15.6.7.2 */
}

/* end of 15 */

/* ============================================================================
   16. SECTION: Cover Image + Avatar Redesign
   ============================================================================ */

/* 16.1 Cover image container — single full-bleed banner, no white split */
.profile-cover-redesign {
    position: relative;
    margin-bottom: 0;
}

/* 16.1.1 Cover image — full banner, avatar positioned inside.
   S63 Phase 1c T455 C19: radius 16px uniform (D090) — updated fallback + token. */
/* 16.1.1.1 Cover image base */
.profile-cover-image {
    width: 100%;
    height: 240px;
    background-color: var(--color-navy, #031B83);
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: var(--radius-lg, 16px);
    overflow: visible;
}
/* end of 16.1.1.1 */

/* 16.1.1.2 No-cover state — design-agent placeholder fill (S111 24/06/26).
   Two stacked backgrounds: diagonal navy tint over 45° striped pattern.
   Caption centred via ::before. Live sizes (height/border/radius/gutters)
   are owned by 16.1.1.1 + page-polish §42.0.4a/b — unchanged. */
.profile-cover-redesign.no-cover .profile-cover-image {
    background:
        linear-gradient(135deg, rgba(3, 27, 131, 0.4), rgba(0, 204, 255, 0.2)),
        repeating-linear-gradient(45deg, #2a3556 0 12px, #1f2848 12px 24px);
}
.profile-cover-redesign.no-cover .profile-cover-image::before {
    /* S163: the EM DASH was removed (D-202). S165, D-350: THE STRING IS DELIBERATE AND STAYS.
       Rob, 01/08/26, rejecting both offered replacements: "No that's there to let them know what
       size it should be for when they replace it with their own. The other platforms don't say and
       you have to go googling for it... Amazes me that even now they still haven't put the size of
       the images to help people." It is member-facing guidance, not a leaked spec artefact.
       Do NOT replace it with a pattern or prompt copy, and do not re-raise it as a defect. */
    content: 'IMAGE BANNER 1920x340';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 251, 230, 0.45);
    pointer-events: none;
}
/* end of 16.1.1.2 */
/* end of 16.1.1 */

/* 16.1.2 Gradient overlay — subtle, no text on banner */
.profile-cover-gradient {
    display: none;
}

/* 16.1.3 Cover change button */
/* 16.1.3.1 Button base — translucent circle */
.profile-cover-change-btn {
    position: absolute;
    top: var(--space-md, 12px);
    right: var(--space-md, 12px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 2;
}
/* end of 16.1.3.1 */

/* 16.1.3.2 Button hover — brighter translucent */
.profile-cover-change-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}
/* end of 16.1.3.2 */

/* 16.1.3.3 Button icon */
.profile-cover-change-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}
/* end of 16.1.3.3 */
/* end of 16.1.3 */

/* 16.2 Identity bar — below banner, name aligned with sidenav center */
/* 16.2.0.1 Identity bar wrapper */
/* T169: Equal whitespace above/below action buttons */
.profile-identity-bar {
    padding: 12px 0 12px 46px;
    background: transparent;
}
/* end of 16.2.0.1 */

/* 16.2.0.2 Identity inner — flex row */
.profile-identity-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 2;
}
/* end of 16.2.0.2 */

/* 16.2.0.3 Identity text block — sidenav-width centred */
/* Name block: width matches sidenav (220px), centered text aligns with avatar + sidenav center */
.profile-identity-text {
    width: 220px;
    flex-shrink: 0;
    text-align: center;
}
/* end of 16.2.0.3 */

/* 16.2.0.4 Header actions — push to right */
.profile-header-actions {
    margin-left: auto;
}
/* end of 16.2.0.4 */

/* 16.2.1 Avatar — inside the banner, vertically centered, center-aligned with sidenav (46px offset + half of 220px sidebar - half of 190px avatar = 61px) */
/* 16.2.1.1 Avatar wrap — absolute positioned */
.profile-avatar-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 67px;
    z-index: 5;
    flex-shrink: 0;
}
/* end of 16.2.1.1 */

/* 16.2.1.2 Avatar image — circle + gold border */
.profile-avatar-img {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 5px solid var(--color-gold, #CC9900);
    object-fit: cover;
    background: var(--color-surface, #FFFFFF);
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.18);
}
/* end of 16.2.1.2 */
/* end of 16.2.1 */

/* 16.2.2 Avatar nav buttons — navigate between Dashboard/Profile/Customise */
/* 16.2.2.1 Preview nav row */
.profile-preview-nav {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 4px;
    width: 100%;
}
/* end of 16.2.2.1 */
/* 16.2.2.2 Preview nav button base */
.preview-nav-btn {
    display: inline-block;
    padding: 3px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-gold, #CC9900);
    background: var(--color-navy, #031B83);
    border: 1px solid var(--color-gold, #CC9900);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.4;
}
/* end of 16.2.2.2 */
/* 16.2.2.3 Preview nav button hover — gold fill */
.preview-nav-btn:hover {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
    text-decoration: none;
}
/* end of 16.2.2.3 */

/* 16.2.2.4 Avatar change button — gold circle, bottom-right */
.profile-avatar-change-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-gold, #CC9900);
    border: 2px solid var(--color-surface, #FFFFFF);
    color: var(--color-navy, #031B83);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* end of 16.2.2.4 */

/* 16.2.2.5 Avatar change button hover — darker gold */
.profile-avatar-change-btn:hover {
    background: var(--color-gold-dark, #80641D);
}
/* end of 16.2.2.5 */

/* 16.2.2.6 Avatar change button icon */
.profile-avatar-change-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
/* end of 16.2.2.6 */
/* end of 16.2.2 */

/* 16.2.6 Identity text — compact bar, doesn't push content down */
/* 16.2.6.1 Identity text wrapper — compact */
.profile-identity-text {
    min-width: 0;
    padding-top: 2px;
}
/* end of 16.2.6.1 */

/* 16.2.6.2 Display name — Montserrat heading */
.profile-display-name {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-navy, #031B83);
    letter-spacing: -0.3px;
    margin: 0 0 2px 0;
    line-height: 1.2;
}
/* end of 16.2.6.2 */

/* 16.2.6.3 Meta line — handle only, centred. Joined-date hidden per Rob
   04/05/26 ("remove the joined at entirely because it's pushed everything
   down"). Brand-pass: navy text, NEVER grey (was inheriting #6B7280 grey
   via --color-text-muted; replaced with brand navy #031B83). */
.profile-meta-line {
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 14px;
    color: #031B83;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: var(--space-sm, 8px);
    text-align: center;
}
.profile-meta-line .profile-username {
    color: #031B83;
}
/* end of 16.2.6.3 */

/* 16.2.6.4 Hidden secondary meta — separator dot + joined-date both removed */
.profile-meta-sep,
.profile-join-date {
    display: none;
}
/* end of 16.2.6.4 */
/* end of 16.2.6 */

/* 16.2.3 Badges */
/* 16.2.3.1 Badges container — flex wrap */
.profile-badges {
    display: flex;
    gap: var(--space-xs, 4px);
    flex-wrap: wrap;
    justify-content: center;
}
/* end of 16.2.3.1 */

/* 16.2.3.2 Badge base — pill shape */
.profile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px 5px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}
/* end of 16.2.3.2 */

/* 16.2.3.3 Personality badge — navy bg, gold text */
.profile-badge-personality {
    background: var(--color-navy, #031B83);
    color: var(--color-gold, #CC9900);
}
/* end of 16.2.3.3 */

/* 16.2.3.4 Level badge — gold bg, navy text */
.profile-badge-level {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
}
/* end of 16.2.3.4 */
/* end of 16.2.3 */

/* 16.2.5 T274 (still active): Hide camera/reposition icons on non-Customise pages.
   T456 (S62, 2026-04-17): Reversed T275 — restored 3-button cycle (.profile-preview-nav) and header action buttons (.btn-view-profile, .btn-customise-profile, .profile-header-actions) on ALL workspace pages per Rob's new direction. Only the camera/reposition icons remain gated to /customise. */
body.profile-dashboard-active:not(.profile-editor-active) .profile-cover-change-btn,
body.profile-dashboard-active:not(.profile-editor-active) .profile-cover-reposition-btn,
body.profile-dashboard-active:not(.profile-editor-active) .profile-avatar-change-btn,
body.profile-dashboard-active:not(.profile-editor-active) .profile-avatar-reposition-btn {
    display: none !important;
}

/* 16.2.4 Header action buttons */
/* 16.2.4.1 Action row container */
.profile-header-actions {
    display: flex;
    gap: var(--space-sm, 8px);
    justify-content: center;
}
/* end of 16.2.4.1 */

/* 16.2.4.2 Profile button base — visual properties retired S100 (25/05/26).
   Visual (bg, border, font, shadow, hover) now owned by .btn-option per D-174 v2.
   This rule keeps ONLY the layout/grouping properties needed to keep .profile-btn
   instances flowing correctly in the profile header actions row. */
.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 4px);
}
/* end of 16.2.4.2 */

/* 16.2.4.3 + 16.2.4.4 — .profile-btn-primary rules retired S100 (25/05/26).
   The Message button now uses class="profile-btn btn-option". All visual
   styling (cream/gold/navy border, hover, etc.) is owned by .btn-option in
   page-polish.css §43. Original CSS preserved in git pre-S100. */
/* end of 16.2.4.3 + 16.2.4.4 */

/* 16.2.4.5 Outline button — transparent + gold border */
.profile-btn-outline {
    background: transparent;
    color: var(--color-gold, #CC9900);
    border-color: var(--color-gold, #CC9900);
}
/* end of 16.2.4.5 */

/* 16.2.4.6 Outline button hover — gold fill */
.profile-btn-outline:hover {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
}
/* end of 16.2.4.6 */

/* 16.2.4.7 Profile button icon */
.profile-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
/* end of 16.2.4.7 */
/* end of 16.2.4 */

/* 16.3 Responsive — tablet */
@media (max-width: 1023px) {
    /* 16.3.1 Cover image — slightly shorter */
    .profile-cover-image {
        height: 200px;
    }
    /* end of 16.3.1 */

    /* 16.3.2 Avatar — smaller */
    .profile-avatar-img {
        width: 150px;
        height: 150px;
    }
    /* end of 16.3.2 */

    /* 16.3.3 Display name — smaller font */
    .profile-display-name {
        /* S67 Phase 9 SW4 fix (Rob 2026-04-18): was 24px at ≤1023px — inverted ladder.
           Rob's target: 22px at ≥1024 (base rule L3016), 20px at <1024. */
        font-size: 20px;
    }
    /* end of 16.3.3 */
}

/* 16.4 Responsive — mobile */
@media (max-width: 639px) {
    /* 16.4.1 Cover image — shorter, true full-bleed on small mobile.
       B10 (S85 04/05/26): selector boosted ID+class (1,1,0) to beat §15.6.7.1's
       #item-header-cover-image rule at (1,0,0) which forces width: calc(100% - 24px),
       margin: 0 auto, border-radius: var(--radius-md, 8px). At ≤639px we want
       genuine edge-to-edge: zero radius, zero margin, full width. */
    #item-header-cover-image.profile-cover-image,
    .profile-cover-image {
        height: 160px;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* end of 16.4.1 */

    /* 16.4.2 Avatar wrap — left edge */
    .profile-avatar-wrap {
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
    /* end of 16.4.2 */

    /* 16.4.3 Avatar image — smaller + thinner border */
    .profile-avatar-img {
        width: 110px;
        height: 110px;
        border-width: 4px; /* intentional: border scaled to smaller avatar size on mobile (base uses 5px for 190px avatar) — Phase 2a S65 */
    }
    /* end of 16.4.3 */

    /* 16.4.4 Identity bar — tighter padding */
    .profile-identity-bar {
        padding: var(--space-sm, 8px) var(--space-md, 12px) var(--space-md, 12px);
    }
    /* end of 16.4.4 */

    /* 16.4.5 Identity inner — stack column */
    .profile-identity-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    /* end of 16.4.5 */

    /* 16.4.6 Identity text — full width */
    .profile-identity-text {
        width: 100%;
    }
    /* end of 16.4.6 */

    /* 16.4.7 Display name — smaller font */
    .profile-display-name {
        font-size: 20px;
    }
    /* end of 16.4.7 */

    /* 16.4.8 Meta line — centred */
    .profile-meta-line {
        justify-content: center;
    }
    /* end of 16.4.8 */

    /* 16.4.9 Badges — centred */
    .profile-badges {
        justify-content: center;
    }
    /* end of 16.4.9 */

    /* 16.4.10 Header actions — full width centred */
    .profile-header-actions {
        width: 100%;
        justify-content: center;
    }
    /* end of 16.4.10 */

    /* 16.4.11 Profile buttons — flex grow */
    .profile-btn {
        flex: 1;
        justify-content: center;
    }
    /* end of 16.4.11 */

    /* 16.4.12 Hide Customise button on mobile — pill-nav has it */
    /* Hide Customise button on mobile — it's in the pill nav */
    .profile-header-actions .profile-btn-outline[href*="customise"],
    .profile-header-actions .profile-btn-outline:has(.dashicons-admin-customizer) {
        display: none !important;
    }
    /* end of 16.4.12 */
}

/* 16.5 Hide Seeko's default header styling on redesigned profiles */
.profile-cover-redesign + .item-header-content,
.profile-cover-redesign ~ #item-header-avatar {
    display: none !important;
}

/* 16.6 Kill dead space between banner and content below */
/* 16.6.1 #item-header — zero bottom space */
#item-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* end of 16.6.1 */
/* 16.6.2 .col-header — zero bottom space */
.col-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* end of 16.6.2 */
/* 16.6.3 #item-body — zero top space */
#item-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* end of 16.6.3 */
/* 16.6.4 BP-member-layout row — zero bottom margin */
/* Seeko adds margin to .bp-member-layout rows */
.bp-member-layout > .container > .row {
    margin-bottom: 0;
}
/* end of 16.6.4 */
/* 16.6.5 BP-member-layout col-12 — zero top padding */
.bp-member-layout > .container > .row > .col-12 {
    padding-top: 0;
}
/* end of 16.6.5 */
/* 16.6.6 Own-profile col-inner — zero top space */
/* Kill inner container spacing between header and content on own-profile pages */
body.profile-editor-active #item-body .col-inner,
body.profile-dashboard-active #item-body .col-inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* end of 16.6.6 */
/* 16.6.7 Own-profile container — zero top space */
body.profile-editor-active #item-body .container,
body.profile-dashboard-active #item-body .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* end of 16.6.7 */
/* 16.6.8 Own-profile row — zero top margin */
body.profile-editor-active #item-body .row,
body.profile-dashboard-active #item-body .row {
    margin-top: 0 !important;
}
/* end of 16.6.8 */
/* 16.6.9 Own-profile #item-nav — collapse hidden space */
/* Hidden nav still reserves space — collapse it */
body.profile-editor-active #item-nav,
body.profile-dashboard-active #item-nav {
    margin: 0 !important;
    padding: 0 !important;
}
/* end of 16.6.9 */
/* 16.6.10 Own-profile #subnav — fully hide */
/* Empty subnav still has padding — collapse it on own-profile pages */
body.profile-editor-active #subnav,
body.profile-dashboard-active #subnav {
    display: none !important;
}
/* end of 16.6.10 */
/* end of 16.6 */

/* 16.7 Public profile action buttons — clean layout when viewing another member */
/* 16.7.1 Hide BP's duplicate message + mention buttons */
/* Hide BP's duplicate message button and mention button */
#item-buttons #send-private-message,
#item-buttons #post-mention,
#item-buttons #invite-modal-root {
    display: none !important;
}
/* end of 16.7.1 */

/* 16.7.2 Action buttons container — horizontal row */
/* Action buttons container — horizontal row, vertically centered with name area */
#item-buttons.profile-header-actions {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}
/* end of 16.7.2 */

/* 16.7.3 Children — kill flex grow + margins */
/* Ensure children don't expand to fill flex space — kill ALL margins on wrappers AND their children */
#item-buttons.profile-header-actions > * {
    flex-shrink: 0;
    width: auto !important;
    margin: 0 !important;
}
/* end of 16.7.3 */
/* 16.7.4 Grandchildren — kill margins */
#item-buttons.profile-header-actions > * > * {
    margin: 0 !important;
}
/* end of 16.7.4 */

/* 16.7.5 Identical height for all action buttons/links */
/* Force all action buttons/links to identical height for perfect alignment */
#item-buttons.profile-header-actions .profile-btn,
#item-buttons.profile-header-actions #invite-btn-holder button,
#item-buttons.profile-header-actions .interest-button-wrap > a {
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* end of 16.7.5 */

/* 16.7.6 + 16.7.7 — Invite button visual rules retired S100 (25/05/26).
   Now uses class="invite-btn btn-option". All visual styling owned by
   .btn-option in page-polish.css §43. Original CSS preserved in git. */
/* end of 16.7.6 + 16.7.7 */

/* 16.7.8 Interest button wrapper */
/* Interest button — outline style */
#item-buttons .interest-button-wrap {
    position: relative;
}
/* end of 16.7.8 */
/* 16.7.9 + 16.7.10 — Interest button visual rules retired S100 (25/05/26).
   Now uses class="interest-btn ... btn-option". All visual owned by .btn-option. */
/* end of 16.7.9 + 16.7.10 */

/* 16.7.11 Interest reasons popover — position below button */
/* Interest reasons popover — position below button */
#item-buttons .interest-reasons-popover {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    margin-top: 0;
    z-index: 100;
    min-width: 240px;
}
/* end of 16.7.11 */

/* 16.7.12 Mobile @media — stack buttons full-width */
/* Mobile: stack buttons vertically */
@media (max-width: 768px) {
    #item-buttons.profile-header-actions {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 8px;
    }
}
/* end of 16.7.12 */
/* end of 16.7 */

/* end of 16 */

/* ============================================================================
   17. SECTION: Messages Panel Redesign
   ============================================================================ */

/* 17.1 Split-panel layout (desktop) */
.messages-split-panel {
    display: flex;
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 500px;
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(26, 26, 46, 0.12));
    overflow: hidden;
}

/* 17.1.1 Conversation list */
/* 17.1.1.1 List panel container */
.messages-list-panel {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border, #E5E7EB);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* end of 17.1.1.1 */

/* 17.1.1.2 List header row */
.messages-list-header {
    padding: var(--space-lg, 16px);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* end of 17.1.1.2 */

/* 17.1.1.3 List header title */
.messages-list-header h3 {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-navy, #031B83);
    margin: 0;
}
/* end of 17.1.1.3 */

/* 17.1.1.4 Compose button — gold circle */
.messages-compose-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-gold, #CC9900);
    border: none;
    color: var(--color-navy, #031B83);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* end of 17.1.1.4 */

/* 17.1.1.5 Compose button hover — darker gold */
.messages-compose-btn:hover {
    background: var(--color-gold-dark, #80641D);
}
/* end of 17.1.1.5 */

/* 17.1.1.6 Thread list scroll container */
.messages-thread-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* end of 17.1.1.6 */
/* end of 17.1.1 */

/* 17.1.2 Thread item */
/* 17.1.2.1 Thread row base — flex */
.messages-thread-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    cursor: pointer;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
    border-bottom: 1px solid var(--color-border-light, #F3F4F6);
}
/* end of 17.1.2.1 */

/* 17.1.2.2 Thread hover — raised bg */
.messages-thread-item:hover {
    background: var(--color-surface-raised, #F9F8F5);
}
/* end of 17.1.2.2 */

/* 17.1.2.3 Active thread — gold left border */
.messages-thread-item.active {
    background: var(--color-surface-raised, #F9F8F5);
    border-left: 3px solid var(--color-gold, #CC9900);
    padding-left: calc(var(--space-lg, 16px) - 3px);
}
/* end of 17.1.2.3 */

/* 17.1.2.4 Unread thread — tinted bg */
.messages-thread-item.unread {
    background: var(--color-bg, #FDFCF9);
}
/* end of 17.1.2.4 */

/* 17.1.2.5 Thread avatar */
.messages-thread-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* end of 17.1.2.5 */

/* 17.1.2.6 Thread info column */
.messages-thread-info {
    flex: 1;
    min-width: 0;
}
/* end of 17.1.2.6 */

/* 17.1.2.7 Thread name */
.messages-thread-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text, #1A1A2E);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* end of 17.1.2.7 */

/* 17.1.2.8 Thread preview text */
.messages-thread-preview {
    font-size: 13px;
    color: var(--color-text-muted, #6B7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
/* end of 17.1.2.8 */

/* 17.1.2.9 Thread meta column — time + dot */
.messages-thread-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
/* end of 17.1.2.9 */

/* 17.1.2.10 Thread timestamp */
.messages-thread-time {
    font-size: 11px;
    color: var(--color-text-muted, #6B7280);
}
/* end of 17.1.2.10 */

/* 17.1.2.11 Unread dot */
.messages-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gold, #CC9900);
}
/* end of 17.1.2.11 */
/* end of 17.1.2 */

/* 17.2 Conversation panel */
/* 17.2.0.1 Convo panel container */
.messages-convo-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* end of 17.2.0.1 */

/* 17.2.0.2 Convo header row */
.messages-convo-header {
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
}
/* end of 17.2.0.2 */

/* 17.2.0.3 Back button — hidden by default (mobile only) */
.messages-convo-back {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--color-navy, #031B83);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
/* end of 17.2.0.3 */

/* 17.2.0.4 Convo avatar */
.messages-convo-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
/* end of 17.2.0.4 */

/* 17.2.0.5 Convo name */
.messages-convo-name {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-navy, #031B83);
}
/* end of 17.2.0.5 */

/* 17.2.1 Message bubbles */
/* 17.2.1.1 Body scroll container */
.messages-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
}
/* end of 17.2.1.1 */

/* 17.2.1.2 Bubble base */
.message-bubble {
    max-width: 70%;
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    border-radius: var(--radius-lg, 12px);
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}
/* end of 17.2.1.2 */

/* 17.2.1.3 Sent bubble — navy filled, right-aligned */
.message-bubble.sent {
    align-self: flex-end;
    background: var(--color-navy, #031B83);
    color: var(--color-gold, #CC9900);
    border-bottom-right-radius: var(--radius-xs, 2px);
}
/* end of 17.2.1.3 */

/* 17.2.1.4 Received bubble — raised bg, left-aligned */
.message-bubble.received {
    align-self: flex-start;
    background: var(--color-surface-raised, #F9F8F5);
    color: var(--color-text, #1A1A2E);
    border-bottom-left-radius: var(--radius-xs, 2px);
}
/* end of 17.2.1.4 */

/* 17.2.1.5 Timestamp base */
.message-timestamp {
    font-size: 11px;
    color: var(--color-text-muted, #6B7280);
    margin-top: 2px;
}
/* end of 17.2.1.5 */

/* 17.2.1.6 Sent-bubble timestamp — translucent, right-aligned */
.message-bubble.sent .message-timestamp {
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}
/* end of 17.2.1.6 */
/* end of 17.2.1 */

/* 17.2.2 Input area */
/* 17.2.2.1 Input row — flex */
.messages-input-area {
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    border-top: 1px solid var(--color-border, #E5E7EB);
    display: flex;
    gap: var(--space-sm, 8px);
    align-items: flex-end;
}
/* end of 17.2.2.1 */

/* 17.2.2.2 Textarea — flex grow + resize cap */
.messages-input-area textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 14px;
    line-height: 1.5;
    max-height: 120px;
    transition: border-color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* end of 17.2.2.2 */

/* 17.2.2.3 Textarea focus — gold border + halo */
.messages-input-area textarea:focus {
    outline: none;
    border-color: var(--color-gold, #CC9900);
    box-shadow: 0 0 0 3px rgba(204, 153, 0, 0.15);
}
/* end of 17.2.2.3 */

/* 17.2.2.4 Send button — gold circle */
.messages-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-gold, #CC9900);
    border: none;
    color: var(--color-navy, #031B83);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* end of 17.2.2.4 */

/* 17.2.2.5 Send button hover — darker gold */
.messages-send-btn:hover {
    background: var(--color-gold-dark, #80641D);
}
/* end of 17.2.2.5 */
/* end of 17.2.2 */

/* 17.2.3 Empty state */
/* 17.2.3.1 Empty-state container — centred column */
.messages-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #6B7280);
    gap: var(--space-sm, 8px);
}
/* end of 17.2.3.1 */

/* 17.2.3.2 Empty-state icon — large + faded */
.messages-empty-state .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    opacity: 0.3;
}
/* end of 17.2.3.2 */
/* end of 17.2.3 */

/* 17.3 Responsive — tablet */
@media (max-width: 1023px) {
    .messages-list-panel {
        width: 240px;
    }
}

/* 17.4 Responsive — mobile */
@media (max-width: 639px) {
    /* 17.4.3 Split panel — full-bleed, no radius */
    .messages-split-panel {
        height: calc(100vh - 160px);
        border-radius: 0; /* intentional: full-bleed chat on small mobile (base has --radius-lg) — Phase 2a S65 */
        position: relative;
        overflow: hidden;
    }
    /* end of 17.4.3 */

    /* 17.4.4 List panel — absolute overlay */
    .messages-list-panel {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 2;
        background: var(--color-surface, #FFFFFF); /* intentional: absolutely-positioned overlay panel needs opaque bg to cover convo panel underneath — Phase 2a S65 */
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* end of 17.4.4 */

    /* 17.4.5 Convo panel — absolute, slid off-screen */
    .messages-convo-panel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        background: var(--color-surface, #FFFFFF); /* intentional: absolutely-positioned overlay panel needs opaque bg to cover list panel underneath — Phase 2a S65 */
        transform: translateX(100%);
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* end of 17.4.5 */

    /* 17.4.6 Convo-open state — slide in convo panel */
    .messages-split-panel.convo-open .messages-convo-panel {
        transform: translateX(0);
    }
    /* end of 17.4.6 */

    /* 17.4.7 Back button — visible on mobile */
    .messages-convo-back {
        display: flex;
    }
    /* end of 17.4.7 */
}

/* 17.5 BP messages override — restyle existing markup
   BuddyPress uses TABLE > TBODY > TR (not UL > LI). BP core CSS sets display:grid
   on the TR which breaks visual rendering. Override to flex layout. */

/* 17.5.0 Reorder .messages children: form (threads) before pagination */
/* 17.5.0.2 .messages container — flex column */
#buddypress div.messages {
    display: flex;
    flex-direction: column;
}
/* end of 17.5.0.2 */
/* 17.5.0.3 Bulk-management form — order 1 */
#buddypress div.messages > form#messages-bulk-management {
    order: 1;
}
/* end of 17.5.0.3 */
/* 17.5.0.4 Pagination — order 2 */
#buddypress div.messages > .pagination {
    order: 2;
}
/* end of 17.5.0.4 */

/* 17.5.0.5 Message-threads tables — block layout, full width */
#buddypress #message-threads,
#buddypress table.messages-notices {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
/* end of 17.5.0.5 */
/* end of 17.5.0 */

/* 17.5.0.1 TBODY must also be block — table-row-group + flex children = no paint */
#buddypress #message-threads tbody,
#buddypress table.messages-notices tbody {
    display: block !important;
    width: 100%;
}

/* 17.5.1 Hide table header — our flex layout replaces it */
#buddypress #message-threads thead,
#buddypress table.messages-notices thead {
    display: none;
}

/* 17.5.2 Override BP display:grid on TR — use flex instead */
/* 17.5.2.1 TR base — flex layout */
#buddypress #message-threads tbody tr,
#buddypress table.messages-notices tbody tr {
    display: flex !important;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    border-bottom: 1px solid var(--color-border-light, #F3F4F6);
    cursor: pointer;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* end of 17.5.2.1 */

/* 17.5.2.2 TR hover — raised bg */
#buddypress #message-threads tbody tr:hover,
#buddypress table.messages-notices tbody tr:hover {
    background: var(--color-surface-raised, #F9F8F5);
}
/* end of 17.5.2.2 */

/* 17.5.2.3 TR unread — gold left border */
#buddypress #message-threads tbody tr.unread,
#buddypress table.messages-notices tbody tr.unread {
    background: var(--color-bg, #FDFCF9);
    border-left: 3px solid var(--color-gold, #CC9900);
}
/* end of 17.5.2.3 */
/* end of 17.5.2 */

/* 17.5.3 Message row cell layout */
/* 17.5.3.1 Bulk-select checkbox column */
#buddypress #message-threads tbody tr td.bulk-select-check {
    flex: 0 0 30px;
}
/* end of 17.5.3.1 */
/* 17.5.3.2 Thread-from column */
#buddypress #message-threads tbody tr td.thread-from {
    flex: 0 0 160px;
    font-weight: 600;
}
/* end of 17.5.3.2 */
/* 17.5.3.3 Thread-info column — flex grow + ellipsis */
#buddypress #message-threads tbody tr td.thread-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* end of 17.5.3.3 */
/* 17.5.3.4 Thread-info link — navy, no underline */
#buddypress #message-threads tbody tr td.thread-info a {
    color: var(--color-navy, #031B83);
    text-decoration: none;
}
/* end of 17.5.3.4 */
/* 17.5.3.5 Thread-star column */
#buddypress #message-threads tbody tr td.thread-star {
    flex: 0 0 40px;
    text-align: center;
}
/* end of 17.5.3.5 */
/* 17.5.3.6 Thread-options column */
#buddypress #message-threads tbody tr td.thread-options {
    flex: 0 0 80px;
    text-align: right;
}
/* end of 17.5.3.6 */

/* 17.5.3.7 Message metadata row */
#buddypress .message-metadata {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    margin-bottom: var(--space-xs, 4px);
}
/* end of 17.5.3.7 */

/* 17.5.3.8 Message bubble box */
#buddypress #message-thread .message-box {
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    margin-bottom: var(--space-sm, 8px);
    border-radius: var(--radius-lg, 12px);
    max-width: 70%;
}
/* end of 17.5.3.8 */

/* 17.5.3.9 Send-reply container */
#buddypress #send-reply {
    border-top: 1px solid var(--color-border, #E5E7EB);
    padding: var(--space-md, 12px) var(--space-lg, 16px);
}
/* end of 17.5.3.9 */

/* 17.5.3.10 Send-reply textarea */
#buddypress #send-reply textarea {
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 14px;
    width: 100%;
    resize: none;
}
/* end of 17.5.3.10 */

/* 17.5.3.11 Send-reply textarea focus — gold halo */
#buddypress #send-reply textarea:focus {
    outline: none;
    border-color: var(--color-gold, #CC9900);
    box-shadow: 0 0 0 3px rgba(204, 153, 0, 0.15);
}
/* end of 17.5.3.11 */

/* 17.5.3.12 Send-reply submit — gold filled */
#buddypress #send-reply input[type="submit"] {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
    border: none;
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm, 8px) var(--space-xl, 24px);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
    margin-top: var(--space-sm, 8px);
}
/* end of 17.5.3.12 */

/* 17.5.3.13 Send-reply submit hover — darker gold */
#buddypress #send-reply input[type="submit"]:hover {
    background: var(--color-gold-dark, #80641D);
}
/* end of 17.5.3.13 */
/* end of 17.5.3 */

/* 17.3.1 T257: Hide "notice to all users" checkbox for non-admin */
/* 17.3.1.1 Default — hide for everyone */
#buddypress #send_message_form .form-check:has(#send-notice) {
    display: none;
}
/* end of 17.3.1.1 */
/* 17.3.1.2 Admin override — show for admins only */
body.uks-role-admin #buddypress #send_message_form .form-check:has(#send-notice) {
    display: block;
}
/* end of 17.3.1.2 */
/* end of 17.3.1 */

/* 17.3.3 T255: Hide Send To field for non-admin */
/* 17.3.3.1 Default — hide for everyone */
#buddypress #send_message_form .form-group:has(#send-to-input) {
    display: none;
}
/* end of 17.3.3.1 */
/* 17.3.3.2 Admin override — show for admins only */
body.uks-role-admin #buddypress #send_message_form .form-group:has(#send-to-input) {
    display: block;
}
/* end of 17.3.3.2 */
/* end of 17.3.3 */

/* 17.3.2 T262: Send Reply button brand + larger reply textarea */
#buddypress #send-reply textarea {
    min-height: 100px;
}

/* 17.8 Messages full-width workspace override */
/* 17.8.1 Containers — full-width box */
body.profile-dashboard-active #item-body #message-threads,
body.profile-dashboard-active #item-body #send-reply,
body.profile-dashboard-active #item-body .bp-messages-content,
body.profile-dashboard-active #item-body #send_message_form,
body.profile-dashboard-active #item-body .messages-notices-table {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* end of 17.8.1 */
/* 17.8.2 Form fields + tables — force 100% width */
body.profile-dashboard-active #item-body #send_message_form textarea,
body.profile-dashboard-active #item-body #send_message_form input[type="text"],
body.profile-dashboard-active #item-body #send-reply textarea,
body.profile-dashboard-active #item-body table.messages-notices,
body.profile-dashboard-active #item-body #message-threads table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
/* end of 17.8.2 */

/* 17.9 Content top alignment — kill first-child margins in workspace */
/* 17.9.1 Generic first-child — zero top margin */
body.profile-dashboard-active #item-body .col-inner > *:not(.dashboard-sidenav) > *:first-child {
    margin-top: 0 !important;
}
/* end of 17.9.1 */
/* 17.9.2 First-child h2/h3/div — also zero top padding */
body.profile-dashboard-active #item-body .col-inner > *:not(.dashboard-sidenav):not(.profile-editor-wrapper):not(.profile-customise-cta) > h2:first-child,
body.profile-dashboard-active #item-body .col-inner > *:not(.dashboard-sidenav):not(.profile-editor-wrapper):not(.profile-customise-cta) > h3:first-child,
body.profile-dashboard-active #item-body .col-inner > *:not(.dashboard-sidenav):not(.profile-editor-wrapper):not(.profile-customise-cta) > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* end of 17.9.2 */

/* 17.6 Messages sub-navigation (Inbox/Sent/Compose) — show BP native subnav */
/* 17.6.1 Subnav UL — block, no list bullets */
body.profile-dashboard-active #subnav {
    display: block !important;
    margin: 0 0 var(--space-lg, 16px) 0;
    padding: 0;
    list-style: none;
}
/* end of 17.6.1 */
/* 17.6.2 Subnav LI — inline blocks */
body.profile-dashboard-active #subnav li {
    display: inline-block;
    margin-right: var(--space-md, 12px);
}
/* end of 17.6.2 */
/* 17.6.3 Subnav links — base styling */
body.profile-dashboard-active #subnav li a {
    display: inline-block;
    padding: var(--space-xs, 4px) var(--space-md, 12px);
    color: var(--color-text-secondary, #6B6B7B);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-sm, 0.875rem);
    border-bottom: 2px solid transparent;
    transition: all var(--duration-fast, 150ms);
}
/* end of 17.6.3 */
/* 17.6.4 Active + hover — navy text + gold underline */
body.profile-dashboard-active #subnav li.current a,
body.profile-dashboard-active #subnav li a:hover {
    color: var(--color-navy, #031B83);
    border-bottom-color: var(--color-gold, #CC9900);
}
/* end of 17.6.4 */
/* end of 17.6 */

/* 17.7 Global dashboard content centering
   Headings, empty-state messages, and descriptions should be centered.
   Content blocks (forms, tables, message threads) stay left-aligned. */

/* 17.7.1 Center page-level headings inside the dashboard body */
body.profile-dashboard-active #item-body .col-inner > h2,
body.profile-dashboard-active #item-body .col-inner > h3,
body.profile-dashboard-active #item-body .col-inner > .profile > h2,
body.profile-dashboard-active #item-body .col-inner > .profile > h3,
body.profile-dashboard-active #item-body h2:first-of-type,
body.profile-dashboard-active .bp-feedback,
body.profile-dashboard-active .info,
body.profile-dashboard-active #message {
    text-align: center;
}

/* 17.7.2 Center empty-state / info messages */
body.profile-dashboard-active #item-body .col-inner p:only-child,
body.profile-dashboard-active .bp-template-notice,
body.profile-dashboard-active #message p {
    text-align: center;
}

/* 17.7.3 Messages sub-nav — tighter spacing so all tabs fit on one line */
/* 17.7.3.1 Subnav items — tighter right margin */
body.profile-dashboard-active #subnav li {
    margin-right: var(--space-sm, 8px);
}
/* end of 17.7.3.1 */
/* 17.7.3.2 Subnav links — tighter padding + smaller font */
body.profile-dashboard-active #subnav li a {
    padding: var(--space-xs, 4px) var(--space-sm, 8px);
    font-size: 0.82rem;
}
/* end of 17.7.3.2 */
/* end of 17.7.3 */

/* 17.7.4 Reduce dead space between sidenav card and page content */
/* 17.7.4.1 Workspace children — kill top margin */
body.profile-dashboard-active #item-body .col-inner > *:not(.dashboard-sidenav):not(.profile-editor-wrapper):not(.profile-customise-cta) {
    margin-top: 0;
}
/* end of 17.7.4.1 */
/* 17.7.4.2 First-of-type h2 — small breathing space */
body.profile-dashboard-active #item-body .col-inner > h2:first-of-type,
body.profile-dashboard-active #item-body .col-inner > .profile > h2:first-of-type {
    margin-top: var(--space-sm, 8px);
}
/* end of 17.7.4.2 */
/* end of 17.7.4 */

/* 17.7.5 Suggestions page — center heading and description */
body.profile-dashboard-active .suggestions-form-wrap h2,
body.profile-dashboard-active .suggestions-form-wrap > p {
    text-align: center;
}

/* 17.7.9 SW4 h2 font-size ladder (S67 Phase 9, Rob 2026-04-18):
   22px for laptop/desktop (≥1024), 20px for tablet/mobile (<1024).
   Scoped to workspace content h2 (inside .col-inner) — banner h2 in
   cover-image-header.php is outside .col-inner so this rule doesn't touch it. */
body.profile-dashboard-active #item-body .col-inner h2 {
    font-size: 22px;
}
@media (max-width: 1023px) {
    body.profile-dashboard-active #item-body .col-inner h2 {
        font-size: 20px;
    }
}

/* 17.7.6 Notifications — center empty messages */
body.profile-dashboard-active .notifications-empty,
body.profile-dashboard-active .bp-feedback.bp-messages.info {
    text-align: center;
    padding: 24px 16px;
}

/* 17.7.7 Mark All Read button fix — apply brand styling */
body.profile-dashboard-active .notification-actions .mark-read-btn,
body.profile-dashboard-active .action.mark-read a,
body.profile-dashboard-active a[href*="action=read"],
body.profile-dashboard-active .generic-button a.mark-read {
    background: var(--color-navy, #031B83) !important;
    color: var(--color-gold, #CC9900) !important;
    border: 2px solid var(--color-navy, #031B83) !important;
    border-radius: 9999px;
    padding: 6px 16px;
    font-weight: 600;
    text-decoration: none;
}

/* 17.7.8 Mobile: Messages sub-nav — horizontal scroll, no wrapping */
@media (max-width: 767px) {
    /* 17.7.8.1 Subnav container — flex scroll row */
    body.profile-dashboard-active #subnav,
    body.profile-dashboard-active #subnav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding-bottom: 4px;
    }
    /* end of 17.7.8.1 */
    /* 17.7.8.2 Subnav items — no shrink, nowrap */
    body.profile-dashboard-active #subnav li {
        margin-right: 2px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    /* end of 17.7.8.2 */
    /* 17.7.8.3 Subnav links — tight padding, smaller font */
    body.profile-dashboard-active #subnav li a {
        padding: 3px 6px;
        font-size: 0.78rem;
    }
    /* end of 17.7.8.3 */
    /* 17.7.8.4 Hide WebKit scrollbar */
    /* Hide scrollbar but keep scroll functional */
    body.profile-dashboard-active #subnav::-webkit-scrollbar,
    body.profile-dashboard-active #subnav ul::-webkit-scrollbar {
        display: none;
    }
    /* end of 17.7.8.4 */
    /* 17.7.8.5 Hide IE/Firefox scrollbar */
    body.profile-dashboard-active #subnav,
    body.profile-dashboard-active #subnav ul {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    /* end of 17.7.8.5 */
}
/* end of 17.7.8 */

/* end of 17 */

/* ============================================================================
   18. SECTION: Notifications Feed Redesign
   ============================================================================ */

/* 18.1 Notifications container */
.notifications-feed {
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26, 26, 46, 0.08));
    overflow: hidden;
}

/* 18.1.1 Time group headers */
.notifications-group-header {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted, #6B7280);
    padding: var(--space-md, 12px) var(--space-lg, 16px) var(--space-xs, 4px);
    background: var(--color-surface, #FFFFFF);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 18.1.2 Notification item */
/* 18.1.2.1 Item base — flex row */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md, 12px);
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    border-bottom: 1px solid var(--color-border-light, #F3F4F6);
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* end of 18.1.2.1 */

/* 18.1.2.2 Item hover — raised bg */
.notification-item:hover {
    background: var(--color-surface-raised, #F9F8F5);
}
/* end of 18.1.2.2 */

/* 18.1.2.3 Unread item — gold left border */
.notification-item.unread {
    background: var(--color-bg, #FDFCF9);
    border-left: 4px solid var(--color-gold, #CC9900);
    padding-left: calc(var(--space-lg, 16px) - 4px);
}
/* end of 18.1.2.3 */

/* 18.1.2.4 Read item — fade */
.notification-item.read {
    opacity: 0.75;
}
/* end of 18.1.2.4 */

/* 18.1.2.5 Icon circle */
.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface-raised, #F9F8F5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-navy, #031B83);
}
/* end of 18.1.2.5 */

/* 18.1.2.6 Unread icon — gold filled */
.notification-item.unread .notification-icon {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
}
/* end of 18.1.2.6 */

/* 18.1.2.7 Content column */
.notification-content {
    flex: 1;
    min-width: 0;
}
/* end of 18.1.2.7 */

/* 18.1.2.8 Text */
.notification-text {
    font-size: 14px;
    color: var(--color-text, #1A1A2E);
    line-height: 1.4;
}
/* end of 18.1.2.8 */

/* 18.1.2.9 Strong emphasis — navy */
.notification-text strong {
    font-weight: 600;
    color: var(--color-navy, #031B83);
}
/* end of 18.1.2.9 */

/* 18.1.2.10 Timestamp */
.notification-time {
    font-size: 12px;
    color: var(--color-text-muted, #6B7280);
    margin-top: 2px;
}
/* end of 18.1.2.10 */
/* end of 18.1.2 */

/* 18.1.3 Mark all as read */
/* 18.1.3.1 Mark-all container */
.notifications-mark-all {
    display: flex;
    justify-content: center;
    padding: var(--space-md, 12px);
    border-top: 1px solid var(--color-border, #E5E7EB);
}
/* end of 18.1.3.1 */

/* 18.1.3.2 Mark-all button */
.notifications-mark-all button {
    background: transparent;
    border: none;
    color: var(--color-gold, #CC9900);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-xs, 4px) var(--space-md, 12px);
    border-radius: var(--radius-md, 8px);
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* end of 18.1.3.2 */

/* 18.1.3.3 Mark-all button hover — gold tint */
.notifications-mark-all button:hover {
    background: rgba(204, 153, 0, 0.1);
}
/* end of 18.1.3.3 */
/* end of 18.1.3 */

/* 18.2 BP notifications override */
/* 18.2.1 List container — strip default styling */
#buddypress .notification-list,
#buddypress #notifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* end of 18.2.1 */

/* 18.2.2 List items — flex row layout */
#buddypress .notification-list li,
#buddypress #notifications-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md, 12px);
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    border-bottom: 1px solid var(--color-border-light, #F3F4F6);
}
/* end of 18.2.2 */

/* 18.2.3 Unread items — gold left border */
#buddypress .notification-list li.unread,
#buddypress #notifications-list li.unread {
    background: var(--color-bg, #FDFCF9);
    border-left: 4px solid var(--color-gold, #CC9900);
}
/* end of 18.2.3 */

/* 18.2.4 Mark-read links — gold text */
#buddypress .mark-read,
#buddypress .mark-all-read {
    color: var(--color-gold, #CC9900);
    font-weight: 600;
}
/* end of 18.2.4 */
/* end of 18.2 */

/* end of 18 */

/* ============================================================================
   19. SECTION: Messages Toolbar — Search, Sort, Mark Read
   ============================================================================ */

/* 19.1 Toolbar container */
.messages-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md, 12px);
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border-light, #F3F4F6);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: var(--space-md, 12px);
    flex-wrap: wrap;
}

/* 19.1.1 Search input */
/* 19.1.1.1 Search wrapper */
.messages-toolbar-search {
    position: relative;
    flex: 1;
    min-width: 180px;
}
/* end of 19.1.1.1 */

/* 19.1.1.2 Search input */
.messages-toolbar-search input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 14px;
    color: var(--color-text, #1A1A2E);
    background: var(--color-bg, #FDFCF9);
    transition: border-color var(--motion-fast, 150ms);
    box-sizing: border-box;
}
/* end of 19.1.1.2 */

/* 19.1.1.3 Search input focus — gold border + halo */
.messages-toolbar-search input:focus {
    outline: none;
    border-color: var(--color-gold, #CC9900);
    box-shadow: 0 0 0 3px rgba(204, 153, 0, 0.15);
}
/* end of 19.1.1.3 */

/* 19.1.1.4 Search icon — absolute positioned */
.messages-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted, #6B7280);
    font-size: 16px;
    pointer-events: none;
}
/* end of 19.1.1.4 */
/* end of 19.1.1 */

/* 19.1.2 Sort button */
/* 19.1.2.1 Sort toggle base */
.messages-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--color-surface-raised, #F9F8F5);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-navy, #031B83);
    cursor: pointer;
    transition: all var(--motion-fast, 150ms);
    white-space: nowrap;
}
/* end of 19.1.2.1 */

/* 19.1.2.2 Sort toggle hover — gold fill */
.messages-sort-toggle:hover {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83); /* D055 */
    border-color: var(--color-gold, #CC9900);
}
/* end of 19.1.2.2 */

/* 19.1.2.3 Sort toggle icon */
.messages-sort-toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
/* end of 19.1.2.3 */
/* end of 19.1.2 */

/* 19.1.3 Mark all read button */
/* 19.1.3.1 Mark-read button base */
.messages-mark-read {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--color-navy, #031B83);
    border: 2px solid var(--color-navy, #031B83);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gold, #CC9900);
    cursor: pointer;
    transition: all var(--motion-fast, 150ms);
    white-space: nowrap;
}
/* end of 19.1.3.1 */

/* 19.1.3.2 Mark-read button hover — invert to gold */
.messages-mark-read:hover {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
    border-color: var(--color-gold, #CC9900);
}
/* end of 19.1.3.2 */

/* 19.1.3.3 Mark-read button icon */
.messages-mark-read .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
/* end of 19.1.3.3 */

/* 19.1.3.4 Mark-read button disabled */
.messages-mark-read:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* end of 19.1.3.4 */
/* end of 19.1.3 */

/* 19.2 Mobile responsive */
@media (max-width: 600px) {
    /* 19.2.1 Toolbar — stack column */
    .messages-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    /* end of 19.2.1 */
    /* 19.2.2 Search — drop min-width */
    .messages-toolbar-search {
        min-width: unset;
    }
    /* end of 19.2.2 */
    /* 19.2.3 Sort + mark-read — left-aligned */
    .messages-toolbar-sort,
    .messages-mark-read {
        align-self: flex-start;
    }
    /* end of 19.2.3 */
}
/* end of 19.2 */

/* end of 19 */

/* ============================================================================ */
/* 20. Image Reposition Mode (T171) */
/* ============================================================================ */

/* 20.1 Cover reposition button — next to camera button */
/* 20.1.1 Cover reposition button base */
.profile-cover-reposition-btn {
    position: absolute;
    top: var(--space-md, 12px);
    right: 60px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 2;
}
/* end of 20.1.1 */
/* 20.1.2 Cover reposition button hover */
.profile-cover-reposition-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}
/* end of 20.1.2 */
/* 20.1.3 Cover reposition button icon */
.profile-cover-reposition-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}
/* end of 20.1.3 */
/* end of 20.1 */

/* 20.2 Avatar reposition button — next to camera button */
/* 20.2.1 Avatar reposition button base */
.profile-avatar-reposition-btn {
    position: absolute;
    bottom: 8px;
    right: 48px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-gold, #CC9900);
    border: 2px solid var(--color-surface, #FFFFFF);
    color: var(--color-navy, #031B83);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 6;
}
/* end of 20.2.1 */
/* 20.2.2 Avatar reposition button hover */
.profile-avatar-reposition-btn:hover {
    background: var(--color-gold-dark, #80641D);
}
/* end of 20.2.2 */
/* 20.2.3 Avatar reposition button icon */
.profile-avatar-reposition-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
/* end of 20.2.3 */
/* end of 20.2 */

/* 20.3 Reposition mode — active state */
/* 20.3.1 Active z-index */
.reposition-mode {
    z-index: 100;
}
/* end of 20.3.1 */
/* 20.3.2 Cover image active outline */
#item-header-cover-image.reposition-mode {
    outline: 3px solid var(--color-gold, #CC9900);
    outline-offset: -3px;
}
/* end of 20.3.2 */
/* 20.3.3 Disable text selection while dragging */
.reposition-active {
    user-select: none;
    -webkit-user-select: none;
}
/* end of 20.3.3 */
/* end of 20.3 */

/* 20.4 Reposition toolbar — save/cancel buttons */
/* 20.4.1 Toolbar container */
/* T276: Cover reposition bar at top of banner, not overlapping content */
.reposition-toolbar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 8px;
    z-index: 110;
    white-space: nowrap;
}
/* end of 20.4.1 */
/* 20.4.2 Hint text */
.reposition-hint {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-right: 8px;
}
/* end of 20.4.2 */
/* 20.4.3 Save + cancel button base */
.reposition-save-btn,
.reposition-cancel-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
/* end of 20.4.3 */
/* 20.4.4 Save button — gold filled */
.reposition-save-btn {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
}
/* end of 20.4.4 */
/* 20.4.5 Save button hover — fade */
.reposition-save-btn:hover {
    opacity: 0.85;
}
/* end of 20.4.5 */
/* 20.4.6 Cancel button — translucent outline */
.reposition-cancel-btn {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
/* end of 20.4.6 */
/* 20.4.7 Cancel button hover — translucent fill */
.reposition-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* end of 20.4.7 */
/* end of 20.4 */

/* 20.5 Photo reset button — S76 Rob: always visible (no hover-gate), white
   circle with gold border + navy icon so it reads on any image. Click = reset
   photo position to 50/50 centre. Drag the image itself to reposition (no
   toolbar mode). */
/* 20.5.1 Reset button base */
.photo-reposition-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #CC9900;
    color: #031B83;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    opacity: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: background 0.15s, color 0.15s;
}
/* end of 20.5.1 */
/* 20.5.2 Reset button hover — invert to navy */
.photo-reposition-btn:hover {
    background: #031B83;
    color: #CC9900;
}
/* end of 20.5.2 */
/* 20.5.3 Reset button icon */
.photo-reposition-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}
/* end of 20.5.3 */
/* end of 20.5 */

/* 20.6 Photo panel reposition mode */
/* 20.6.1 Active outline */
.photo-panel-content.reposition-active {
    outline: 2px solid var(--color-gold, #CC9900);
    outline-offset: -2px;
}
/* end of 20.6.1 */
/* 20.6.2 Drag cursor */
.photo-panel-content.reposition-active img {
    cursor: grab;
}
/* end of 20.6.2 */
/* 20.6.3 Active drag cursor */
.photo-panel-content.reposition-active img.dragging {
    cursor: grabbing;
}
/* end of 20.6.3 */
/* 20.6.4 Reposition toolbar container */
/* S76 Rob feedback — reposition toolbar: cream bg (not navy — too heavy and
   dark), slimmer, sits directly BELOW the panel (outside it, top:100%+6px),
   so it never overlays the photo. Buttons vertically centred via flex. */
.photo-reposition-toolbar {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-cream, #FFFBE6);
    border: 2px solid var(--color-gold, #CC9900);
    box-shadow: 0 2px 8px rgba(3, 27, 131, 0.15);
    padding: 4px 8px;
    border-radius: 9999px;
    z-index: 10;
    white-space: nowrap;
}
/* end of 20.6.4 */
/* 20.6.5 Toolbar button base */
.photo-reposition-toolbar button {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 9999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.2;
}
/* end of 20.6.5 */
/* 20.6.6 Save button — gold filled */
.photo-reposition-toolbar .reposition-save-btn {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
    border-color: var(--color-gold, #CC9900);
}
/* end of 20.6.6 */
/* 20.6.7 Save button hover — invert to navy */
.photo-reposition-toolbar .reposition-save-btn:hover {
    background: var(--color-navy, #031B83);
    color: var(--color-gold, #CC9900);
}
/* end of 20.6.7 */
/* 20.6.8 Reset button — gold outline */
.photo-reposition-toolbar .reposition-reset-btn {
    background: transparent;
    color: var(--color-gold, #CC9900);
    border-color: var(--color-gold, #CC9900);
}
/* end of 20.6.8 */
/* 20.6.9 Reset button hover — gold fill */
.photo-reposition-toolbar .reposition-reset-btn:hover {
    background: var(--color-gold, #CC9900);
    color: var(--color-navy, #031B83);
}
/* end of 20.6.9 */
/* 20.6.10 Cancel button — navy outline */
.photo-reposition-toolbar .reposition-cancel-btn {
    background: transparent;
    color: var(--color-navy, #031B83);
    border-color: var(--color-navy, #031B83);
}
/* end of 20.6.10 */
/* 20.6.11 Cancel button hover — navy fill */
.photo-reposition-toolbar .reposition-cancel-btn:hover {
    background: var(--color-navy, #031B83);
    color: var(--color-gold, #CC9900);
}
/* end of 20.6.11 */
/* end of 20.6 */

/* 20.7 T190 S53-036 — Reposition toolbar small-viewport polish
   At narrow mobile widths (<480px), the nowrap toolbar with hint text + two
   buttons pushes off-screen. Allow wrap, cap width to the container, shrink
   hint text, and tighten padding so it stays usable down to the 360px floor. */
@media (max-width: 480px) {
    /* 20.7.1 Cover reposition toolbar — wrap + tighten padding */
    .reposition-toolbar {
        max-width: calc(100% - 24px);
        flex-wrap: wrap;
        justify-content: center;
        padding: 6px 12px;
        gap: 6px;
    }
    /* end of 20.7.1 */
    /* 20.7.2 Reposition hint — full-row centred, smaller text */
    .reposition-hint {
        flex-basis: 100%;
        text-align: center;
        margin-right: 0;
        font-size: 11px;
    }
    /* end of 20.7.2 */
    /* 20.7.3 Save/cancel buttons — smaller font + tighter padding */
    .reposition-save-btn,
    .reposition-cancel-btn {
        font-size: 11px;
        padding: 5px 12px;
    }
    /* end of 20.7.3 */
    /* 20.7.4 Photo reposition toolbar — wrap + tighter padding */
    .photo-reposition-toolbar {
        max-width: calc(100% - 8px);
        flex-wrap: wrap;
        padding: 3px 6px;
    }
    /* end of 20.7.4 */
    /* 20.7.5 Photo reposition toolbar buttons — smaller font + tighter padding */
    .photo-reposition-toolbar button {
        font-size: 9px;
        padding: 2px 6px;
    }
    /* end of 20.7.5 */
}
/* end of 20.7 */

/* end of 20 */

/* S158 29/07/26 (D-326) — the party picker's consent note. Political affiliation is
   Article 9 special-category data, so the member has to be told what turning it on does
   BEFORE they turn it on. Two sentences, inside the popup, above the list. */
.sigil-chooser-note {
    margin: 0;
    padding: 10px 14px 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #031B83;
    background: #FFFBE6;
    border-bottom: 1px solid #CC9900;
}