/**
 * Revenue Engine - frontend stylesheet
 * All re_* shortcode styles live here.
 * Class names are prefixed with re- for namespace safety.
 */

/* =========================================================
   Base / shared
   ========================================================= */

.re-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    max-width: 960px;
}

/* Frontend banner notice. Base = info (brand blue). Modifiers --warning,
   --error pick up brand mustard / error red. Dark-theme only - matches the
   [re_*] frontend shell; admin pages still use WP core notices. */
.re-banner {
    background: rgba(68, 152, 216, 0.08);
    border: 1px solid #4498D8;
    color: #e6edf3;
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.re-banner--warning {
    background: rgba(230, 173, 35, 0.08);
    border-color: #E6AD23;
}

.re-banner--error {
    background: rgba(255, 138, 115, 0.08);
    border-color: #ff8a73;
}

/* Shared AI allowance gate. The banner sits at the top of the app content
   (AiAllowanceBanner prepends it). When the user is over their AI allowance,
   the body carries .re-ai-over-limit and this one rule greys out any AI
   trigger tagged data-ai-gate - no per-feature code. The server still refuses
   the call regardless, so this is purely the visible state. */
.re-ai-allowance-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.re-ai-allowance-banner > span {
    flex: 1 1 auto;
    min-width: 0;
}

.re-ai-over-limit [data-ai-gate] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Add-more-tokens / buy-more-images modal (opened from the allowance banner
   and the Social Planner editor respectively). Shared dark-theme rules. */
.re-ai-topup,
.re-image-topup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.re-ai-topup[hidden],
.re-image-topup[hidden] {
    display: none;
}

.re-ai-topup__backdrop,
.re-image-topup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.re-ai-topup__panel,
.re-image-topup__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: #16202b;
    border: 1px solid #2b3a4a;
    border-radius: 10px;
    padding: 18px 20px;
    color: #e6edf3;
}

.re-ai-topup__head,
.re-image-topup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.re-ai-topup__title,
.re-image-topup__title {
    font-size: 18px;
    margin: 0;
    color: #4498D8;
}

.re-ai-topup__x,
.re-image-topup__x {
    background: none;
    border: none;
    color: #9fb0c0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.re-ai-topup__scope,
.re-image-topup__scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 14px;
}

.re-ai-topup__scope-label,
.re-image-topup__scope-label {
    color: #9fb0c0;
}

.re-ai-topup__pack,
.re-image-topup__pack {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #2b3a4a;
}

.re-ai-topup__pack-info,
.re-image-topup__pack-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.re-ai-topup__pack-info span,
.re-image-topup__pack-info span {
    font-size: 13px;
    color: #9fb0c0;
}

.re-ai-topup__status,
.re-image-topup__status {
    margin: 12px 0 0;
    font-size: 13px;
    color: #E6AD23;
    min-height: 1em;
}

/* AI usage breakdown on [re_user_settings] (personal + shared pool). */
.re-ai-usage {
    display: grid;
    gap: 18px;
    max-width: 520px;
}

.re-ai-usage__headline {
    font-size: 15px;
    color: #cdd9e5;
}

.re-ai-usage__big {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #4498D8;
}

.re-ai-usage__reset {
    display: block;
    font-size: 13px;
    color: #9fb0c0;
    margin-top: 4px;
}

.re-ai-usage__lane h3 {
    font-size: 15px;
    margin: 0 0 8px;
    color: #e6edf3;
}

.re-ai-usage__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.re-ai-usage__list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
    color: #cdd9e5;
}

.re-ai-usage__list li span:last-child {
    font-variant-numeric: tabular-nums;
}

.re-ai-usage__total {
    font-weight: 700;
    color: #e6edf3;
    border-bottom: none !important;
}

/* "Where your tokens went" - per-feature split with a percentage bar. */
.re-ai-usage__features {
    max-width: 520px;
    margin-top: 22px;
}

.re-ai-usage__features h3 {
    font-size: 15px;
    margin: 0 0 4px;
    color: #e6edf3;
}

.re-ai-usage__featurelist {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.re-ai-usage__feature-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: #cdd9e5;
    margin-bottom: 5px;
}

.re-ai-usage__feature-num {
    color: #9fb0c0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.re-ai-usage__bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.re-ai-usage__bar span {
    display: block;
    height: 100%;
    background: #4498D8;
    border-radius: 4px;
}

/* Last-12-months usage graph (CSS vertical bars). */
.re-ai-usage__history {
    max-width: 560px;
    margin-bottom: 22px;
}

/* Separator + heading for the image-generation allowance block, which reuses
   the .re-ai-usage__* token-usage styles below the AI token allowance. */
.re-ai-usage__imagehead {
    max-width: 560px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid #2b3a4a;
}

.re-ai-usage__imagehead h3 {
    font-size: 15px;
    margin: 0 0 6px;
    color: #e6edf3;
}

.re-ai-usage__history h3 {
    font-size: 15px;
    margin: 0 0 12px;
    color: #e6edf3;
}

.re-ai-usage__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
}

.re-ai-usage__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #9fb0c0;
    white-space: nowrap;
}

.re-ai-usage__legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.re-ai-usage__chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
}

.re-ai-usage__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.re-ai-usage__colvalue {
    min-height: 13px;
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 1.2;
    color: #9fb0c0;
    white-space: nowrap;
}

.re-ai-usage__coltrack {
    flex: 1 1 auto;
    width: 60%;
    max-width: 22px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.re-ai-usage__colseg {
    width: 100%;
    min-height: 1px;
}

.re-ai-usage__collabel {
    margin-top: 6px;
    font-size: 11px;
    color: #9fb0c0;
    white-space: nowrap;
}

/* Notetaker prompt: mustard banner asking the user to schedule an AI
   notetaker on a meeting that doesn't already have one. */
.re-notetaker-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
}

.re-notetaker-prompt__body {
    flex: 1 1 320px;
    min-width: 0;
}

.re-notetaker-prompt__question {
    display: block;
    font-size: 14px;
    color: #e6edf3;
}

.re-notetaker-prompt__sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(230, 237, 243, 0.75);
}

.re-notetaker-prompt__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.re-notetaker-prompt__btn {
    background: #E6AD23;
    color: #1a1a1a;
    border: none;
}

.re-notetaker-prompt__btn:hover,
.re-notetaker-prompt__btn:focus,
.re-notetaker-prompt__btn:visited {
    background: #c8951a;
    color: #1a1a1a;
}

.re-notetaker-prompt__btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.re-notetaker-prompt__btn--secondary {
    background: transparent;
    color: #E6AD23;
    border: 1px solid #E6AD23;
}

.re-notetaker-prompt__btn--secondary:hover,
.re-notetaker-prompt__btn--secondary:focus,
.re-notetaker-prompt__btn--secondary:visited {
    background: rgba(230, 173, 35, 0.12);
    color: #E6AD23;
}

.re-notetaker-prompt__status {
    font-size: 13px;
    color: rgba(230, 237, 243, 0.85);
}

.re-notetaker-prompt__status.is-error {
    color: #ff8a73;
}

.re-notetaker-prompt.is-success {
    background: rgba(70, 180, 80, 0.08);
    border-color: #46b450;
}

.re-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 16px;
}

.re-section-heading {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
    margin-top: 28px;
    margin-bottom: 14px;
    font-size: 16px;
}

.re-section-heading--interactive {
    cursor: pointer;
}

.re-back-link {
    color: #0073aa;
    font-size: 14px;
    text-decoration: none;
}

.re-back-link:hover {
    text-decoration: underline;
}

.re-btn {
    display: inline-block;
    padding: 9px 22px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.4;
    /* Defensive: host themes (Astra in particular) uppercase button-like
       elements via a high-specificity global rule, which turns sentence-case
       labels like "Add commitment" into "ADD COMMITMENT". Sentence case is
       the codebase-wide standard (see CLAUDE.md) so we force it back. */
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* The display above beats the browser's [hidden]{display:none} (class selector
 * wins), so any .re-btn with the hidden attribute would still show and the JS
 * .hidden toggles would be inert. Keep the attribute authoritative. */
.re-btn[hidden] { display: none !important; }

.re-btn:hover,
.re-btn:focus,
.re-btn:visited {
    background: #005d8f;
    color: #fff;
    text-decoration: none;
}

.re-btn--green  { background: #46b450; }
.re-btn--green:hover  { background: #3a9c44; }
.re-btn--orange { background: #e67e22; }
.re-btn--orange:hover { background: #cf6d17; }
.re-btn--red    { background: #dc3232; }
.re-btn--red:hover    { background: #c02020; }
.re-btn--grey   { background: #f0f0f0; color: #333; border: 1px solid #ccc; }
.re-btn--grey:hover   { background: #e4e4e4; }
.re-btn--sm     { padding: 5px 12px; font-size: 12px; }
.re-btn--lg     { padding: 14px 28px; font-size: 16px; font-weight: 600; }

.re-input,
.re-select,
.re-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.re-textarea { resize: vertical; }

.re-form-group {
    margin-bottom: 12px;
}

.re-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.re-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.re-form-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.re-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.re-badge--green  { background: #e8f5e9; color: #388e3c; }
.re-badge--blue   { background: #e3f2fd; color: #1976d2; }
.re-badge--purple { background: #f3e5f5; color: #7b1fa2; }
.re-badge--orange { background: #fff3e0; color: #e65100; }
.re-badge--grey   { background: #f5f5f5; color: #616161; }
.re-badge--teal   { background: #e0f2f1; color: #00695c; }
.re-badge--red    { background: #f8e5e7; color: #842029; }

.re-progress-bar {
    background: #e0e0e0;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.re-progress-bar__fill {
    height: 8px;
    border-radius: 4px;
    background: #0073aa;
    transition: width .3s ease;
}

.re-progress-bar__fill--complete { background: #46b450; }

.re-collapsible-panel {
    display: none;
    margin-bottom: 28px;
}

/* =========================================================
   Programmes  [re_programmes]
   ========================================================= */

.re-programme-title { color: #4498D8; }

/* ── Programme page ── */

.re-programme {
    max-width: 700px;
    color: #fff;
    padding-bottom: 60px;
}

.re-programme .re-back-link {
    display: block;
    margin-bottom: 12px;
    color: #aaa;
    font-size: 14px;
    text-decoration: none;
}

.re-programme .re-back-link:hover { color: #E6AD23; }

.re-programme-desc {
    color: #ccc;
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 15px;
}

.re-programme-desc p { margin: 0 0 12px; }
.re-programme-desc p:last-child { margin-bottom: 0; }

/* ── Stripe product link cards (under programme/module title) ── */

.re-products {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 22px;
}

.re-product-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    background: linear-gradient(135deg, #E6AD23 0%, #d49b18 100%);
    color: #1a1d24;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.re-product-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    color: #1a1d24;
}

.re-product-card__img {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.1);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.re-product-card__label {
    line-height: 1.2;
}

/* ── Current section + list divider ── */

.re-current-section {
    margin-bottom: 8px;
}

.re-current-section__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E6AD23;
    margin-bottom: 8px;
}

.re-list-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.re-list-divider::before,
.re-list-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #333;
}

/* ── Progress bar header ── */

.re-prog-progress {
    margin: 20px 0 24px;
}

.re-prog-progress__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}

.re-prog-badge {
    display: inline-block;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

.re-prog-badge--progress { background: #E6AD23; color: #1a1d24; }
.re-prog-badge--complete  { background: #46b450; color: #fff; }
.re-prog-badge--new       { background: #555;    color: #fff; }

/* ── Module sections ── */

.re-module-section {
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.re-module-section__header {
    background: #4498D8;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.re-module-section__title {
    flex: 1;
}

.re-module-view-btn {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    background: #E6AD23;
    color: #1a1d24;
    border: none;
}

.re-module-view-btn:hover {
    background: #d49b15;
    color: #1a1d24;
}

.re-module-section--locked .re-module-section__header {
    background: #2d5a8a;
    opacity: 0.65;
}

.re-lock-icon { margin-right: 4px; }

.re-module-section__desc {
    background: rgba(255, 255, 255, 0.05);
    color: #bbb;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.6;
}

.re-module-section__desc p { margin: 0 0 8px; }
.re-module-section__desc p:last-child { margin-bottom: 0; }

/* ── Output rows (shared by programme and module pages) ── */

.re-output-rows {
    background: rgba(255, 255, 255, 0.03);
}

.re-output-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.re-output-row--locked { opacity: 0.4; }

.re-output-row__circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #555;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
}

.re-output-row__circle--done {
    border-color: #E6AD23;
    background: #E6AD23;
    color: #223F4C;
}

.re-output-row__title {
    flex: 1;
    color: #fff;
    font-size: 14px;
}

.re-output-optional {
    font-size: 12px;
    font-weight: normal;
    opacity: 0.65;
    margin-left: 4px;
}

.re-output-optional-notice {
    font-size: 13px;
    color: #8F9FA6;
    margin: 0 0 16px;
    font-style: italic;
}

.re-output-btn {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
}

.re-output-btn--action {
    background: #E6AD23;
    color: #1a1d24;
}

.re-output-btn--action:hover {
    background: #d49b15;
    color: #1a1d24;
}

.re-output-btn--view {
    background: #2d3748;
    color: #aaa;
    border: 1px solid #444;
}

.re-output-btn--view:hover {
    background: #3d4758;
    color: #fff;
}

/* ── Module page ── */

.re-module {
    max-width: 760px;
    color: #fff;
    padding-bottom: 60px;
}

.re-module .re-back-link {
    display: block;
    margin-bottom: 12px;
    color: #aaa;
    font-size: 14px;
    text-decoration: none;
}

.re-module .re-back-link:hover { color: #E6AD23; }

.re-module-title {
    font-size: 22px;
    margin-bottom: 12px;
    color: #fff;
}

.re-module-desc {
    color: #ccc;
    margin-bottom: 16px;
    line-height: 1.6;
}

.re-module-desc p { margin: 0 0 10px; }
.re-module-desc p:last-child { margin-bottom: 0; }

.re-module-content {
    color: #ccc;
    margin-bottom: 16px;
    line-height: 1.6;
}

.re-outcomes h3,
.re-downloads h3,
.re-outputs h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #fff;
}

.re-outcomes ul,
.re-downloads ul {
    padding-left: 20px;
    margin-bottom: 16px;
    color: #ccc;
}

.re-downloads a { color: #fff; text-decoration: none; }
.re-downloads a:hover { color: #E6AD23; }

.re-outputs-intro { color: #888; font-size: 14px; margin-bottom: 4px; }

/* ── Collapsible module content ── */

.re-content-wrap { margin-bottom: 16px; }

.re-content-preview p {
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.re-read-btn {
    display: inline-block;
    padding: 7px 18px;
    background: transparent;
    color: #E6AD23;
    border: 1px solid #E6AD23;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
}

.re-read-btn:hover {
    background: #E6AD23;
    color: #1a1d24;
}

.re-content-full {
    display: none;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 16px;
}

.re-content-wrap--open .re-content-preview { display: none; }
.re-content-wrap--open .re-content-full    { display: block; }

/* ── General link hover within programme/module contexts ── */

.re-programme a:not(.re-output-btn):not(.re-back-link):not(.re-module-view-btn):not(.re-next-module-btn):not(.re-next-output-btn):not(.re-product-card):hover,
.re-module    a:not(.re-output-btn):not(.re-back-link):not(.re-read-btn):not(.re-module-view-btn):not(.re-next-module-btn):not(.re-next-output-btn):not(.re-product-card):hover {
    color: #E6AD23;
}

/* ── Status/notice text ── */

.re-login-notice,
.re-access-denied,
.re-not-found,
.re-empty-notice,
.re-locked-notice {
    color: #aaa;
    font-style: italic;
}

/* =========================================================
   Daily View  [re_daily_view]
   ========================================================= */

.re-daily-view { max-width: 960px; }

.re-daily-view__date {
    margin-bottom: 4px;
    font-size: 22px;
}

.re-daily-view__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.re-daily-view__panel-heading {
    margin-top: 0;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 6px;
    font-size: 15px;
}

.re-daily-view__panel-heading--green   { border-bottom-color: #46b450; }
.re-daily-view__panel-heading--red     { border-bottom-color: #dc3232; }
.re-daily-view__panel-heading--yellow  { border-bottom-color: #f0b849; }
.re-daily-view__panel-heading--purple  { border-bottom-color: #9b59b6; }
.re-daily-view__panel-heading--blue    { border-bottom-color: #4498D8; }

/* Timing sub-sections inside the commitments panel (Overdue / Due today / This
   week) - native <details> so each collapses with no JS. */
.re-daily-view__section { margin-top: 8px; }
.re-daily-view__section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 8px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.75;
    cursor: pointer;
    list-style: none;
}
.re-daily-view__section-label::-webkit-details-marker { display: none; }
.re-daily-view__section-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.re-daily-view__section:not([open]) > .re-daily-view__section-label::before {
    transform: rotate(-45deg);
}

.re-pipeline-summary { list-style: none; padding: 0; margin: 0 16px 0 0; }
.re-pipeline-summary__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.re-pipeline-summary__row:last-child { border-bottom: 0; }
.re-pipeline-summary__stage { color: #cfd6e0; font-size: 14px; min-width: 0; }
.re-pipeline-summary__count { color: #fff; font-weight: 600; font-size: 14px; }

.re-task-item {
    padding: 10px 12px;
    background: rgba(220, 50, 50, 0.10);
    border: 1px solid rgba(220, 50, 50, 0.30);
    border-left: 3px solid #dc3232;
    border-radius: 6px;
    color: inherit;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.re-activity-item {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(240, 184, 73, 0.30);
    border-left: 3px solid #f0b849;
    background: rgba(240, 184, 73, 0.10);
    color: inherit;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    transition: background .15s ease, border-color .15s ease;
}

.re-activity-item:hover {
    background: rgba(240, 184, 73, 0.18);
    border-color: rgba(240, 184, 73, 0.55);
}

.re-activity-item--done {
    background: rgba(70, 180, 80, 0.10);
    border-color: rgba(70, 180, 80, 0.30);
    border-left-color: #46b450;
}

.re-activity-item--done:hover {
    background: rgba(70, 180, 80, 0.18);
    border-color: rgba(70, 180, 80, 0.55);
}

.re-activity-item--overdue {
    background: rgba(220, 50, 50, 0.12);
    border-color: rgba(220, 50, 50, 0.35);
    border-left-color: #dc3232;
}

.re-activity-item--overdue:hover {
    background: rgba(220, 50, 50, 0.20);
    border-color: rgba(220, 50, 50, 0.60);
}

.re-task-item--overdue {
    background: rgba(220, 50, 50, 0.18);
    border-color: rgba(220, 50, 50, 0.55);
    border-left-width: 4px;
}

.re-activity-item__overdue,
.re-task-item__overdue {
    color: #dc3232;
    font-weight: 600;
    font-size: 12px;
}

.re-activity-item__meta { font-size: 12px; opacity: 0.65; margin-top: 2px; }

.re-activity-item__body { flex: 1; min-width: 0; }

.re-activity-item__context {
    font-size: 12px;
    opacity: 0.70;
    font-style: italic;
    margin-top: 4px;
}

.re-activity-item__open {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #4498D8;
    text-decoration: none;
}
.re-activity-item__open:hover,
.re-activity-item__open:focus { color: #4498D8; text-decoration: underline; }
.re-activity-item__open:focus-visible {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
    border-radius: 3px;
}

.re-activity-item__action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.re-activity-item__progress { font-size: 12px; opacity: 0.75; }

.re-activity-item__check {
    color: #46b450;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Unified obligation card (Today / admin / coachee / meeting room) ─
   One card shape drives every "what's open here?" surface. Kind drives the
   left-border accent; state (overdue / done / dismissed) drives the fill
   colour. Translucent rgba over color:inherit so the card sits cleanly on
   the dark frontend theme and the light admin theme alike. Mobile-first:
   base layout works at 390px; body wraps; action column never shrinks. */
/* Merged "Today's commitments" panel card container. The panel spans the full
   page width; cards remain a single vertical list in overdue-first order. */
.re-daily-view__obligations {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.re-daily-view__obligations .re-obligation { margin-bottom: 0; }

.re-obligation {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 3px solid #4498D8;
    background: rgba(68, 152, 216, 0.08);
    color: inherit;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    transition: background .15s ease, border-color .15s ease;
}

.re-obligation:hover {
    background: rgba(68, 152, 216, 0.14);
    border-color: rgba(68, 152, 216, 0.40);
}

/* My Day commitments open an edit modal on body click; surface the
   affordance with a pointer cursor on the card body (the Done/+1 button
   keeps its own cursor). */
.re-obligation--editable .re-obligation__body { cursor: pointer; }

/* Drag-to-reorder handle on My Day commitments. The grip is the only drag
   target so the rest of the card stays tappable (edit modal / Done button).
   touch-action: none on the handle alone lets a long-press-drag start from
   the grip without the page claiming the gesture, while a swipe anywhere else
   on the card still scrolls normally. It sits at the top next to the title
   (the card is align-items: flex-start) rather than stretching the full height
   of a tall card - a fixed square keeps it a comfortable touch target. */
.re-obligation__drag-handle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -3px 2px 0 -4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
    cursor: grab;
    touch-action: none;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}
.re-obligation:hover .re-obligation__drag-handle { color: rgba(255, 255, 255, 0.55); }
.re-obligation__drag-handle:hover,
.re-obligation__drag-handle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}
.re-obligation__drag-handle:active { cursor: grabbing; }

/* SortableJS states: the placeholder gap, the picked-up card, the moving
   clone. Keep them subtle and on-theme. */
.re-obligation--sortable-ghost {
    opacity: 0.4;
    background: rgba(255, 255, 255, 0.06);
}
.re-obligation--sortable-chosen { cursor: grabbing; }
.re-obligation--sortable-drag {
    opacity: 0.95;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Kind-specific left-border tint - so a glance tells you what kind of work
   you're looking at without reading. */
.re-obligation--commitment        { border-left-color: #f0b849; background: rgba(240, 184, 73, 0.10); }
.re-obligation--commitment:hover  { background: rgba(240, 184, 73, 0.18); border-color: rgba(240, 184, 73, 0.55); }
.re-obligation--pipeline_task     { border-left-color: #dc3232; background: rgba(220, 50, 50, 0.10); }
.re-obligation--pipeline_task:hover { background: rgba(220, 50, 50, 0.18); border-color: rgba(220, 50, 50, 0.55); }
.re-obligation--meeting_action    { border-left-color: #f0b849; background: rgba(240, 184, 73, 0.08); }
.re-obligation--meeting_action:hover { background: rgba(240, 184, 73, 0.16); border-color: rgba(240, 184, 73, 0.50); }
.re-obligation--coachee_validation { border-left-color: #46b450; background: rgba(70, 180, 80, 0.10); }
.re-obligation--coachee_validation:hover { background: rgba(70, 180, 80, 0.18); border-color: rgba(70, 180, 80, 0.55); }
.re-obligation--coachee_plan_chase { border-left-color: #4498D8; background: rgba(68, 152, 216, 0.10); }
.re-obligation--coachee_plan_chase:hover { background: rgba(68, 152, 216, 0.18); border-color: rgba(68, 152, 216, 0.55); }
.re-obligation--outreach          { border-left-color: #9b59b6; background: rgba(155, 89, 182, 0.10); }
.re-obligation--outreach:hover    { background: rgba(155, 89, 182, 0.18); border-color: rgba(155, 89, 182, 0.55); }
.re-obligation--coaching_item     { border-left-color: #4498D8; background: rgba(68, 152, 216, 0.10); }

/* State modifiers - overdue wins over kind colour because urgency matters
   more than category at a glance. */
.re-obligation--overdue {
    background: rgba(220, 50, 50, 0.14) !important;
    border-color: rgba(220, 50, 50, 0.45);
    border-left-color: #dc3232;
}
.re-obligation--overdue:hover {
    background: rgba(220, 50, 50, 0.22) !important;
    border-color: rgba(220, 50, 50, 0.65);
}

.re-obligation--done {
    background: rgba(70, 180, 80, 0.10) !important;
    border-color: rgba(70, 180, 80, 0.30);
    border-left-color: #46b450;
}
.re-obligation--done:hover {
    background: rgba(70, 180, 80, 0.18) !important;
}
.re-obligation--leaving {
    overflow: hidden;
    opacity: 0;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    transition: opacity 0.35s ease, max-height 0.35s ease, margin 0.35s ease, padding 0.35s ease;
}

.re-obligation--dismissed {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12);
    border-left-color: rgba(255, 255, 255, 0.40);
    opacity: 0.65;
}

/* RAG urgency band - the single vertical band on the left of every
   outstanding-action card (Today obligation, coachee plate, coach contact
   tab). Red overrides any kind-specific left-tint above; amber is the only
   case where the band colour competes with kind colour; green renders no
   band at all (matches the user-asked "Green should be nothing"). */
.re-rag--red  { border-left: 4px solid #dc3232 !important; }
.re-rag--amber { border-left: 4px solid #f0b849 !important; }
.re-rag--green { border-left: 0 !important; }

.re-obligation__body { flex: 1; min-width: 0; }
.re-obligation__meta { font-size: 12px; opacity: 0.65; margin-top: 2px; }
.re-obligation__overdue { color: #dc3232; font-weight: 600; font-size: 12px; }
.re-obligation__due { font-weight: 600; }

.re-obligation__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.re-obligation__chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid rgba(68, 152, 216, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #4498D8;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.re-obligation__chip:hover,
.re-obligation__chip:focus { background: #FFFFFF; color: #223F4C; text-decoration: none; }
.re-obligation__chip:focus-visible { outline: 2px solid #4498D8; outline-offset: 2px; }

.re-obligation__context {
    font-size: 12px;
    opacity: 0.70;
    font-style: italic;
    margin-top: 4px;
}

.re-obligation__open {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #4498D8;
    text-decoration: none;
}
.re-obligation__open:hover,
.re-obligation__open:focus { color: #4498D8; text-decoration: underline; }
.re-obligation__open:focus-visible {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Optional user-supplied link icon, inline after the commitment title. */
.re-obligation__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    border: 1px solid rgba(68, 152, 216, 0.4);
    border-radius: 6px;
    color: #4498D8;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.re-obligation__link:hover,
.re-obligation__link:focus {
    background: rgba(68, 152, 216, 0.15);
    border-color: #4498D8;
    color: #4498D8;
}
.re-obligation__link:focus-visible {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
}

.re-obligation__action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.re-obligation__progress { font-size: 12px; opacity: 0.75; }

.re-obligation__delete {
    background: none;
    border: none;
    padding: 5px;
    font-size: 11px;
    color: #dc3232;
    cursor: pointer;
    opacity: 0.7;
}
.re-obligation__delete:hover,
.re-obligation__delete:focus { opacity: 1; text-decoration: underline; }
.re-obligation__delete:focus-visible {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
    border-radius: 3px;
}

.re-obligation__check {
    color: #46b450;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.re-obligation__hint {
    font-size: 11px;
    opacity: 0.55;
    font-style: italic;
}

/* ── Daily View calendar items ─────────────────────────────────────────
   Brand palette: primary blues for default, yellow accent for the in-progress
   event ("now"). Translucent so the panel works on light or dark page
   backgrounds. */
.re-calendar-item {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(145, 202, 234, 0.12);    /* #91CAEA tint */
    border: 1px solid rgba(68, 152, 216, 0.30); /* #4498D8 outline */
    border-radius: 8px;
    margin-bottom: 8px;
    color: inherit;
    font-size: 14px;
    transition: border-color .15s ease, background .15s ease;
}
.re-calendar-item:hover {
    background: rgba(145, 202, 234, 0.20);
    border-color: rgba(68, 152, 216, 0.55);
}
.re-calendar-item--now {
    background: rgba(230, 173, 35, 0.10);     /* #E6AD23 yellow accent */
    border-color: rgba(230, 173, 35, 0.55);
    border-left: 4px solid #E6AD23;           /* solid accent on the leading edge */
    padding-left: 13px;                       /* keep content alignment after thicker border */
}
.re-calendar-item--past {
    opacity: .55;
}

.re-calendar-item__time-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 64px;
    padding-right: 12px;
    border-right: 1px solid rgba(68, 152, 216, 0.25);
    flex-shrink: 0;
}
.re-calendar-item--now .re-calendar-item__time-block {
    border-right-color: rgba(230, 173, 35, 0.45);
}
.re-calendar-item__start { font-size: 18px; font-weight: 600; line-height: 1.1; }
.re-calendar-item__end   { font-size: 12px; opacity: .65; margin-top: 2px; }

.re-calendar-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.re-calendar-item__title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-calendar-item__meta {
    margin-top: 4px;
    font-size: 12px;
    opacity: .7;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.re-calendar-item__meta-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.re-calendar-item__join {
    align-self: center;
    padding: 6px 14px;
    background: #4498D8;                       /* primary brand blue */
    color: #fff !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s ease;
}
.re-calendar-item__join:hover { background: #357ab8; }
.re-calendar-item--now .re-calendar-item__join { background: #E6AD23; }
.re-calendar-item--now .re-calendar-item__join:hover { background: #c8951a; }

.re-target-row {
    margin-bottom: 10px;
}

.re-target-row__header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 4px;
}

.re-unreviewed-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* =========================================================
   Targets  [re_targets]
   ========================================================= */

.re-targets { max-width: 860px; }

.re-targets__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.re-target-card {
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
}

.re-target-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.re-target-card__label { font-size: 15px; }
.re-target-card__meta  { font-size: 12px; color: #888; margin-left: 8px; }
.re-target-card__value { font-size: 15px; font-weight: 600; }

.re-target-card__pct {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    text-align: right;
}

.re-period-group { margin-bottom: 28px; }

.re-period-group__heading {
    margin-bottom: 12px;
    font-size: 16px;
}

.re-add-form-panel {
    display: none;
    background: #f6f7f7;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

/* =========================================================
   Cookbooks  [re_cookbooks]
   ========================================================= */

.re-cookbooks  { max-width: 860px; }
.re-cookbooks__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.re-cookbook-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
    margin-bottom: 10px;
}

.re-cookbook-card:hover { border-color: #0073aa; }

.re-cookbook-card__bar {
    width: 4px;
    height: 40px;
    border-radius: 2px;
    flex-shrink: 0;
}

.re-cookbook-card__label { font-size: 16px; font-weight: 700; }

.re-cookbook-card__meta {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

.re-cookbook-detail { max-width: 860px; }

.re-recipe-block {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.re-recipe-block__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.re-recipe-block__name { font-size: 15px; }
.re-recipe-block__desc { font-size: 13px; color: #888; margin-top: 2px; }

.re-ingredient-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.re-ingredient-item {
    font-size: 13px;
    color: #555;
    padding-left: 12px;
    border-left: 2px solid #e0e0e0;
}

.re-ingredient-item__freq { color: #aaa; }

.re-remove-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
    margin-left: 12px;
    line-height: 1;
}

.re-remove-btn:hover { color: #dc3232; }

/* =========================================================
   Meetings  [re_meetings]
   ========================================================= */

.re-meetings { max-width: 860px; }

.re-meetings__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.re-meetings__title {
    margin: 0;
    color: #e6edf3;
    font-weight: 800;
}

.re-meetings__empty { color: #8aa0b2; }

.re-meeting-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    text-decoration: none;
    color: #e6edf3;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    margin-bottom: 10px;
}

.re-meeting-card,
.re-meeting-card:hover,
.re-meeting-card:focus,
.re-meeting-card:visited,
.re-meeting-card * { text-decoration: none !important; }

.re-meeting-card:hover {
    border-color: #4498D8;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(68, 152, 216, 0.18);
}

.re-meeting-card:hover .re-meeting-card__title { color: #91CAEA; }

/* A cancelled meeting recedes in the list but stays readable and clickable. */
.re-meeting-card.is-cancelled { opacity: .72; }

/* Cancelled pill sits inline with the plan / room header title. */
.re-meeting-plan__title .re-meeting-plan__status {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 700;
}

.re-meeting-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.re-meeting-card__body {
    flex: 1;
    min-width: 0;
}

.re-meeting-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #e6edf3;
    transition: color .15s;
}

.re-meeting-card__meta {
    font-size: 13px;
    color: #8aa0b2;
    margin-top: 4px;
    -webkit-font-smoothing: antialiased;
}

.re-meeting-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 100px;
}

.re-meeting-card__date {
    font-size: 13px;
    font-weight: 600;
    color: #e6edf3;
    line-height: 1.2;
}

.re-meeting-card__time {
    color: #8aa0b2;
    font-size: 12px;
}

.re-meeting-card__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 8px;
}

.re-meeting-detail { max-width: 780px; }

.re-meeting-detail__title { margin: 12px 0 4px; }

.re-meeting-detail__meta {
    color: #888;
    font-size: 14px;
    margin: 0;
}

.re-meeting-detail__edit-type-btn {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    opacity: .85;
}
.re-meeting-detail__edit-type-btn:hover { opacity: 1; color: #4498D8; }
.re-meeting-detail__edit-type-btn:focus {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
    border-radius: 2px;
}

.re-mt-modal__title {
    margin: 0;
    font-size: 16px; font-weight: 600;
    color: #4498D8;
}
.re-mt-modal__label {
    display: block;
    font-size: 13px; font-weight: 600;
    color: #c9d4dd;
}
.re-mt-modal__label-meta {
    display: block;
    font-size: 12px; font-weight: 400; color: #8F9FA6;
    margin: 2px 0 8px;
}
.re-mt-modal__status {
    margin-right: auto;
    font-size: 12px; color: #c9d4dd; opacity: .8;
}
.re-mt-modal__status--ok { color: #4ed09a; opacity: 1; }

.re-msa-field { margin-bottom: 12px; }

.re-msa-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.re-prep-question {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.re-prep-question__text  { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.re-prep-question__guide { font-size: 12px; color: #888; margin-bottom: 8px; }

.re-live-capture-item {
    padding: 8px 12px;
    background: rgba(26, 29, 36, 0.07);
    border-radius: 6px;
    font-size: 14px;
    border-left: 3px solid #0073aa;
    margin-bottom: 6px;
}

.re-live-capture-item__letter { color: #0073aa; }
.re-live-capture-item__meta   { color: #aaa; font-size: 12px; margin-left: 8px; }

.re-transcript-block {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 16px;
    color: #e6eef5;
    font-size: 14px;
    white-space: pre-wrap;
    line-height: 1.6;
}
.re-transcript-block--html { white-space: normal; }
.re-transcript-block--html p { margin: 0 0 12px; }
.re-transcript-block--html p:last-child { margin-bottom: 0; }
.re-transcript-block--html ul,
.re-transcript-block--html ol { margin: 0 0 12px; padding-left: 22px; }
.re-transcript-block--html li { margin-bottom: 4px; }
.re-transcript-block--html a { color: #4498D8; }

.re-melt-signals__letter {
    font-weight: 700;
    font-size: 13px;
    color: #0073aa;
    margin-bottom: 2px;
}

/* =========================================================
   Add Meeting form
   ========================================================= */

.re-add-meeting-form {
    margin-top: 28px;
    border-top: 1px solid #ddd;
    padding-top: 24px;
    max-width: 640px;
}

/* =========================================================
   Coaching Booking  [re_coaching_booking]
   ========================================================= */

.re-coaching-booking { max-width: 640px; }

.re-coach-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
    margin-bottom: 12px;
}

.re-coach-card:hover { border-color: #0073aa; }

.re-coach-card img,
.re-coach-card .avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.re-coach-card__name  { font-size: 16px; font-weight: 700; }
.re-coach-card__price { color: #555; font-size: 14px; margin-top: 2px; }

.re-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.re-slot-card {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all .15s;
    display: block;
}

.re-slot-card:hover {
    border-color: #0073aa;
    background: #f0f8ff;
}

.re-slot-card__day  { font-weight: 700; font-size: 15px; }
.re-slot-card__time { font-size: 13px; color: #555; }

.re-booking-summary {
    padding: 20px;
    background: #f6f7f7;
    border-radius: 8px;
    margin: 16px 0;
}

.re-booking-summary p { margin: 0 0 8px; font-size: 15px; }
.re-booking-summary p:last-child { margin-bottom: 0; }

.re-booking-success {
    padding: 24px;
    background: #f0fff4;
    border: 1px solid #46b450;
    border-radius: 8px;
    text-align: center;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 640px) {
    .re-daily-view__grid { grid-template-columns: 1fr; }
    .re-form-row         { grid-template-columns: 1fr; }
    .re-slot-grid        { grid-template-columns: 1fr 1fr; }
    .re-meetings__header,
    .re-targets__header,
    .re-cookbooks__header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* =========================================================
   Module Video - Plyr protection overrides
   ========================================================= */

/* 16:9 aspect-ratio container for the Plyr player */
.re-video-wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 24px;
}

/* Vimeo plain iframe fills the 16:9 wrapper */
.re-vimeo-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.re-vimeo-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    border: 0;
}

/* Plyr fills the 16:9 percentage-padding wrapper */
.re-video-wrap .plyr {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* Block all pointer interaction with the YouTube iframe itself.
   Plyr controls live in a sibling element and are unaffected. */
.re-video-wrap .plyr__video-embed iframe {
    pointer-events: none;
}

/* Next module link - shown when all outputs in the current module are approved */
.re-next-module {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(87, 110, 122, 0.3);
}

.re-next-module-btn {
    display: inline-block;
    background: #E6AD23;
    color: #1a1d24;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.re-next-module-btn:hover {
    background: #d49b15;
    color: #1a1d24;
    text-decoration: none;
}

/* ── Module reflection ────────────────────────────────────────────────────── */

.re-reflection {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(87, 110, 122, 0.3);
}

.re-reflection h3 {
    font-size: 16px;
    margin-bottom: 6px;
    color: #fff;
}

.re-reflection-intro {
    color: #888;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.re-reflection-field {
    margin-bottom: 14px;
}

.re-reflection-field label {
    font-weight: 600;
    font-size: 14px;
    color: #e6edf3;
    margin-bottom: 6px;
    display: block;
}

.re-reflection-input {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #0a1929;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #e6edf3;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.re-reflection-input:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}

.re-reflection-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.re-reflection .re-submit-btn {
    background: #4498D8;
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.re-reflection .re-submit-btn:hover { background: #61B0E0; }
.re-reflection .re-submit-btn:disabled { opacity: 0.5; cursor: wait; }

.re-reflection .re-reflection-feedback-btn,
.re-reflection .re-reflection-forward-btn {
    background: transparent;
    color: #91CAEA;
    border: 1px solid #2c5380;
}

.re-reflection .re-reflection-feedback-btn:hover,
.re-reflection .re-reflection-forward-btn:hover {
    background: rgba(68, 152, 216, 0.10);
    color: #cfe6f6;
}

.re-reflection-status {
    font-size: 13px;
    color: #8aa;
    line-height: 1.4;
}

.re-reflection-status--error { color: #e6a1a1; }

.re-reflection-result {
    margin-top: 16px;
}

.re-reflection-result .re-result-pass {
    border-left: 3px solid #4498D8;
    padding: 10px 14px;
    background: rgba(68, 152, 216, 0.08);
    color: #91CAEA;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 0 4px 4px 0;
}

.re-reflection-result .re-result-fail {
    border-left: 3px solid #E6AD23;
    padding: 10px 14px;
    background: rgba(230, 173, 35, 0.08);
    color: #e8cf95;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 0 4px 4px 0;
}

.re-reflection-result strong { display: block; margin-bottom: 6px; }
.re-reflection-result .re-result-feedback { margin: 0 0 8px; }
.re-reflection-result .re-result-feedback:last-child { margin-bottom: 0; }

/* ── Calendar scheduling section ──────────────────────────────────────────── */

.re-calendar-schedule-wrap {
    margin-top: 24px;
    border-top: 1px solid rgba(87, 110, 122, 0.3);
    padding-top: 20px;
}

.re-cal-suggest-btn {
    background: none;
    border: 1px solid #4498D8;
    color: #4498D8;
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}

.re-cal-suggest-btn:hover {
    background: #4498D8;
    color: #fff;
}

.re-cal-suggest-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.re-cal-suggest-error {
    font-size: 13px;
    color: #c0392b;
    margin: 8px 0 0;
}

.re-cal-task-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.re-cal-task-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(87, 110, 122, 0.25);
    border-radius: 4px;
}

.re-cal-task-info {
    flex: 1;
    min-width: 0;
}

.re-cal-task-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #e0e8ec;
}

.re-cal-task-meta {
    font-weight: 400;
    color: #576E7A;
    font-size: 12px;
}

.re-cal-task-desc {
    margin: 6px 0 0;
    font-size: 12px;
    color: #576E7A;
    line-height: 1.55;
    white-space: pre-wrap;
}

.re-cal-task-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.re-cal-add-btn {
    display: inline-block;
    background: #4498D8;
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    text-align: center;
}

.re-cal-add-btn:hover {
    background: #E6AD23;
    color: #223F4C;
    text-decoration: none;
}


/* ─── CRM pipeline kanban (slice 1) ─── */

.re-kanban-wrap {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    color: #223F4C;
    margin: 16px 0;
}

.re-kanban-locked {
    background: #F4F8FC;
    border: 1px solid #C8CFD3;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    color: #576E7A;
}

.re-kanban-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.re-kanban-toggle {
    display: inline-flex;
    gap: 4px;
}

/* High-specificity selectors (.re-kanban-wrap + element + class) and !important
   on visual properties to defeat WP-theme rules like .entry-content a { ... }
   that otherwise win on link colour, background and underline. */
.re-kanban-wrap a.re-kanban-toggle-btn,
.re-kanban-wrap a.re-kanban-toggle-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 20px;
    background: transparent !important;
    color: #576E7A !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
    box-shadow: none;
}

.re-kanban-wrap a.re-kanban-toggle-btn:hover {
    background: #F4F8FC !important;
    color: #223F4C !important;
    text-decoration: none !important;
}

.re-kanban-wrap a.re-kanban-toggle-btn--active,
.re-kanban-wrap a.re-kanban-toggle-btn--active:visited,
.re-kanban-wrap a.re-kanban-toggle-btn--active:hover,
.re-kanban-wrap a.re-kanban-toggle-btn--active:focus {
    background: #E6AD23 !important;
    color: #223F4C !important;
    text-decoration: none !important;
}

.re-kanban-toggle-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.re-kanban-scroller {
    position: relative;
}

.re-kanban-scroller::before,
.re-kanban-scroller::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 8px;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 1;
}

.re-kanban-scroller::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}

.re-kanban-scroller::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}

.re-kanban-scroller.is-overflowing:not(.is-at-start)::before { opacity: 1; }
.re-kanban-scroller.is-overflowing:not(.is-at-end)::after { opacity: 1; }

/* Rail spans the full scroller height so the sticky chevron inside it can track
   the viewport as the user scrolls the page vertically. pointer-events:none on
   the rail so it doesn't block clicks on cards underneath; the chevron button
   re-enables pointer-events for itself. */
.re-kanban-chevron-rail {
    position: absolute;
    top: 0;
    bottom: 8px;
    width: 36px;
    z-index: 2;
    pointer-events: none;
}

.re-kanban-chevron-rail--left  { left: 6px; }
.re-kanban-chevron-rail--right { right: 6px; }

.re-kanban-chevron {
    position: sticky;
    top: calc(50vh - 18px);
    bottom: calc(50vh - 18px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(34, 63, 76, 0.7);
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.re-kanban-chevron:hover {
    background: rgba(34, 63, 76, 0.92);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}

.re-kanban-chevron:focus-visible {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
}

.re-kanban-scroller.is-overflowing:not(.is-at-start) .re-kanban-chevron--left,
.re-kanban-scroller.is-overflowing:not(.is-at-end) .re-kanban-chevron--right {
    display: flex;
}

.re-kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.re-kanban-col {
    flex: 0 0 auto;
    width: min(85vw, 280px);
    background: #F4F8FC;
    border-radius: 12px;
    padding: 12px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.re-kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 12px;
    border-bottom: 2px solid #91CAEA;
    margin-bottom: 12px;
}

.re-kanban-col-label {
    font-weight: 700;
    color: #223F4C;
    font-size: 14px;
    letter-spacing: 0.2px;
}

.re-kanban-col-count {
    font-size: 12px;
    color: #8F9FA6;
    font-weight: 500;
}

.re-kanban-col-body {
    flex: 1 1 auto;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.re-kanban-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #C8CFD3;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.re-kanban-card-playbook-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #FFFFFF;
}

.re-kanban-card-playbook-dot--on { background: #2EA84F; }
.re-kanban-card-playbook-dot--off { background: #D5483B; }

.re-kanban-card:active {
    cursor: grabbing;
}

.re-kanban-card:hover {
    box-shadow: 0 2px 6px rgba(34, 63, 76, 0.08);
}

.re-kanban-card-title {
    font-weight: 600;
    color: #223F4C;
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.re-kanban-card-meta {
    font-size: 12px;
    color: #576E7A;
    margin-bottom: 4px;
}

.re-kanban-card-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4498D8;
    background: #F4F8FC;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}

.re-kanban-card--ghost {
    opacity: 0.4;
}

.re-kanban-card--chosen {
    box-shadow: 0 4px 12px rgba(68, 152, 216, 0.25);
}

.re-kanban-card--drag {
    transform: rotate(1deg);
}

.re-kanban-flash {
    margin-top: 12px;
    padding: 10px 14px;
    background: #FCEBC9;
    border: 1px solid #E6AD23;
    border-radius: 8px;
    color: #223F4C;
    font-size: 13px;
}

/* Contact-scoped draggable pipeline: the shared kanban board rendered inside a
   detail panel on the contact page. min-width:0 keeps the scroller from forcing
   the grid panel wider than the viewport. */
.re-detail-pipeline {
    min-width: 0;
    margin-top: 10px;
}

.re-detail-pipeline .re-kanban-board {
    min-width: 0;
}

.re-kanban-card-remove {
    display: block;
    margin: 8px 0 0 auto;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #D5483B;
    background: transparent;
    border: 1px solid #E7C3BF;
    border-radius: 10px;
    cursor: pointer;
}

.re-kanban-card-remove:hover {
    background: #FBECEA;
    border-color: #D5483B;
}

.re-detail-closed-opps {
    margin-top: 16px;
}

@media (min-width: 1024px) {
    .re-kanban-col {
        width: calc((100% - 36px) / 3.5);
        min-width: 280px;
    }
}

/* ─── CRM pipeline: New button + create modal ─── */

.re-kanban-toolbar {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.re-kanban-new-btn {
    background: #4498D8;
    color: #FFFFFF;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.re-kanban-new-btn:hover {
    background: #61B0E0;
}

.re-kanban-form {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.re-kanban-fs {
    border: 1px solid #C8CFD3;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0;
}

.re-kanban-fs legend {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4498D8;
    padding: 0 6px;
}

.re-kanban-fs label {
    display: block;
    font-size: 12px;
    color: #576E7A;
    font-weight: 600;
    margin-top: 8px;
}

.re-kanban-fs label:first-of-type {
    margin-top: 0;
}

.re-kanban-fs-hint {
    margin: 0 0 8px;
    font-size: 12px;
    color: #8aa0b2;
    font-style: italic;
}

.re-add-opp-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.re-add-opp-contact-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.re-add-opp-contact-list label:hover {
    background: rgba(68, 152, 216, 0.08);
}

.re-add-opp-contact-list input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

.re-add-opp-contact-list span {
    flex: 1 1 auto;
    min-width: 0;
}

.re-add-opp-contact-list small {
    margin-left: 6px;
    color: #8aa0b2;
    font-weight: 400;
}

.re-kanban-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 8px 10px;
    height: 38px;
    line-height: 1.4;
    border: 1px solid #C8CFD3;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: #223F4C;
    background: #FFFFFF;
}

.re-kanban-textarea {
    height: auto;
    min-height: 70px;
    resize: vertical;
}

.re-kanban-input:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 2px rgba(68, 152, 216, 0.2);
}

.re-kanban-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
    margin-top: 12px;
}

.re-kanban-row > label {
    margin-top: 0;
}

.re-kanban-required {
    color: #E6AD23;
}

.re-kanban-typeahead {
    position: relative;
}

.re-kanban-typeahead-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #C8CFD3;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(34, 63, 76, 0.12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 10;
}

.re-kanban-typeahead-results[hidden] {
    display: none;
}

.re-kanban-typeahead-results li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #223F4C;
}

.re-kanban-typeahead-results li:hover,
.re-kanban-typeahead-results li.is-active {
    background: #F4F8FC;
}

.re-kanban-typeahead-results li small {
    display: block;
    color: #8F9FA6;
    font-size: 11px;
    margin-top: 2px;
}

.re-kanban-typeahead-results li.re-kanban-typeahead-new {
    border-top: 1px solid #C8CFD3;
    color: #4498D8;
    font-weight: 600;
}

.re-kanban-typeahead-state {
    margin: 6px 0 0;
    font-size: 11px;
    color: #8F9FA6;
}

.re-kanban-new-fields {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #C8CFD3;
}

.re-kanban-new-fields[hidden] {
    display: none;
}

.re-kanban-form-error {
    flex: 1 1 auto;
    margin: 0;
    color: #E6AD23;
    font-size: 12px;
}

.re-kanban-form-error[hidden] {
    display: none;
}

.re-kanban-btn {
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.re-kanban-btn--primary {
    background: #4498D8;
    color: #FFFFFF;
}

.re-kanban-btn--primary:hover {
    background: #61B0E0;
}

.re-kanban-btn--primary[disabled] {
    background: #91CAEA;
    cursor: not-allowed;
}

.re-kanban-btn--ghost {
    background: transparent;
    color: #576E7A;
}

.re-kanban-btn--ghost:hover {
    color: #223F4C;
}

/* ─── CRM kanban: override modal + card action menu (Phase 2A) ─── */

.re-kanban-override-headline {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #223F4C;
}

.re-kanban-override-failures {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #FCEBC9;
    border-left: 3px solid #E6AD23;
    border-radius: 6px;
    list-style: disc inside;
    font-size: 13px;
    color: #223F4C;
}

.re-kanban-override-failures[hidden] {
    display: none;
}

.re-kanban-override-failures li {
    margin-bottom: 4px;
}

.re-kanban-override-feedback {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #F4F8FC;
    border-left: 3px solid #61B0E0;
    border-radius: 6px;
    font-size: 13px;
    color: #223F4C;
    white-space: pre-wrap;
}

.re-kanban-override-feedback[hidden] {
    display: none;
}

/* Per-card 3-dot action menu */

.re-kanban-card {
    position: relative;
}

.re-kanban-card-action {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #8F9FA6;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
}

.re-kanban-card-action:hover {
    background: #F4F8FC;
    color: #223F4C;
}

.re-kanban-card-menu {
    position: absolute;
    top: 28px;
    right: 4px;
    background: #FFFFFF;
    border: 1px solid #C8CFD3;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(34, 63, 76, 0.12);
    min-width: 130px;
    z-index: 5;
    padding: 4px 0;
}

.re-kanban-card-menu[hidden] {
    display: none;
}

.re-kanban-card-menu button {
    display: block;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #223F4C;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.re-kanban-card-menu button:hover:not([disabled]) {
    background: #F4F8FC;
}

.re-kanban-card-menu button[disabled] {
    color: #C8CFD3;
    cursor: not-allowed;
}

.re-kanban-input--frozen,
.re-kanban-input--frozen:focus {
    background: #F4F8FC;
    color: #576E7A;
    cursor: not-allowed;
    box-shadow: none;
    border-color: #C8CFD3;
}

/* ─── Override modal: friendly context block ─── */

.re-kanban-override-context {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #F4F8FC;
    border-left: 3px solid #4498D8;
    border-radius: 6px;
    font-size: 13px;
    color: #223F4C;
    line-height: 1.5;
}

.re-kanban-override-context[hidden] {
    display: none;
}

.re-kanban-override-context-headline {
    font-size: 14px;
    margin-bottom: 4px;
}

.re-kanban-override-context-sub {
    color: #576E7A;
    margin-bottom: 8px;
}

.re-kanban-override-context-detail {
    color: #576E7A;
    font-size: 12px;
    margin-bottom: 8px;
}

.re-kanban-override-context-others-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8F9FA6;
    margin-bottom: 4px;
}

.re-kanban-override-context-others ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.re-kanban-override-context-others li {
    padding: 3px 0;
    font-size: 12px;
    color: #576E7A;
    border-top: 1px dashed #C8CFD3;
}

.re-kanban-override-context-others li:first-child {
    border-top: none;
}

/* ── CRM detail views (Phase 2B) ─────────────────────────────────────────────── */
/* Title-only click target on kanban cards. The wrapping <a> reuses the card
   title typography and stays a normal block - the rest of the card body is
   still grabbable by Sortable. */
.re-kanban-wrap a.re-kanban-card-title-link,
.re-kanban-wrap a.re-kanban-card-title-link:visited {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    margin-bottom: 4px;
}
.re-kanban-wrap a.re-kanban-card-title-link .re-kanban-card-title {
    display: block;
    margin-bottom: 0;
    transition: color 0.15s ease;
}
.re-kanban-wrap a.re-kanban-card-title-link:hover .re-kanban-card-title {
    color: #4498D8 !important;
    text-decoration: underline;
}
.re-kanban-wrap a.re-kanban-card-tag.re-kanban-card-tag--link,
.re-kanban-wrap a.re-kanban-card-tag.re-kanban-card-tag--link:visited {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
}
.re-kanban-wrap a.re-kanban-card-tag.re-kanban-card-tag--link:hover {
    color: #4498D8 !important;
}

.re-detail-notfound {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    background: #F4F8FC;
    border: 1px solid #C8CFD3;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #223F4C;
}
.re-detail-notfound a.re-detail-back-link {
    color: #4498D8;
    font-weight: 600;
}

.re-detail {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    margin: 16px 0 0;
    /* padding-bottom rather than margin-bottom: the Astra theme's
       `.entry-content > :last-child { margin-bottom: 0 }` rule has higher
       specificity and would otherwise zero out our footer gap. */
    padding-bottom: 40px;
    max-width: 100%;
    /* min-width: 0 lets every grid/flex descendant honour its own
       max-width: 100% instead of being pushed wider by long content. */
    min-width: 0;
}

.re-detail-back {
    margin: 0 0 12px;
    font-size: 13px;
}
.re-detail-back a, .re-detail-back a:visited {
    color: #4498D8;
    text-decoration: none;
    font-weight: 500;
}
.re-detail-back a:hover { text-decoration: underline; }

.re-detail-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
}
.re-detail-header-main { flex: 1 1 auto; min-width: 0; }
/* Header actions row: a visible primary CTA plus a 3-dot menu trigger that
   opens a dropdown holding the remaining actions. No overflow-x scroll here
   - the dropdown is `position: absolute` and would be clipped by any scroll
   container. */
.re-detail-header-actions {
    position: relative;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}
.re-detail-header-actions > * {
    flex: 0 0 auto;
}
@media (min-width: 640px) {
    .re-detail-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }
}

.re-detail-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}
.re-detail-title--accent {}

.re-detail-email {
    font-weight: 500;
    word-break: break-all;
}
.re-detail-email--btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0;
    font: inherit;
    color: #91CAEA !important;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    border-radius: 0;
    /* Astra (and similar themes) force text-transform: uppercase on every
       <button> via a high-specificity wildcard rule. Defeat it so emails
       render in their stored case. */
    text-transform: none !important;
    letter-spacing: normal !important;
}
.re-detail-email--btn:hover,
.re-detail-email--btn:focus-visible {
    text-decoration: underline;
    color: #4498D8 !important;
}
.re-detail-email--btn:focus { outline: none; }
.re-detail-email--btn:focus-visible {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
}

.re-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: #576E7A;
    font-size: 13px;
}
.re-detail-meta-item { display: inline-flex; align-items: center; }
.re-detail-meta-item a, .re-detail-meta-item a:visited { text-decoration: none; }
.re-detail-meta-item a:hover { text-decoration: underline; }

.re-detail-meta-value {
    font-weight: 700;
    color: #223F4C;
}

.re-detail-tag {
    background: #E6AD23;
    color: #223F4C;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.re-detail-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.re-detail-chip--dnt {
    background: #F8E5E5;
    color: #7A2A2A;
    border: 1px solid #E8C9C9;
    cursor: help;
}

.re-detail-stage,
.re-detail-stage-pill {
    background: #F4F8FC;
    border: 1px solid #C8CFD3;
    color: #223F4C;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.re-detail-stage--bench    { background: #ECF1F4; color: #576E7A; border-color: #DCE3E7; }
.re-detail-stage--contact  { background: #DEEEFA; color: #1B5070; border-color: #B7D6F0; }
.re-detail-stage--connect  { background: #DEEEFA; color: #1B5070; border-color: #B7D6F0; }
.re-detail-stage--discover { background: #FFF1CF; color: #6F4E0F; border-color: #F0D88B; }
.re-detail-stage--fulfil   { background: #FFE3B0; color: #6F4E0F; border-color: #ECC568; }
.re-detail-stage--decide   { background: #E1E8FF; color: #2A3A78; border-color: #B6C1EF; }
.re-detail-stage--execute  { background: #C9E8C9; color: #235823; border-color: #A0D4A0; }
.re-detail-stage-pill--won  { background: #C9E8C9; color: #235823; border-color: #A0D4A0; }
.re-detail-stage-pill--lost { background: #F4D8D8; color: #7A2A2A; border-color: #E8B0B0; }

/* Coachee portal access status chip - pastel chip, same convention as the
   stage pills so it reads on the dark contact-detail panel without an
   override. Mustard stays reserved for selected states, so none here. */
.re-portal-pill {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #C8CFD3;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: #ECF1F4;
    color: #576E7A;
}
.re-portal-pill--active    { background: #C9E8C9; color: #235823; border-color: #A0D4A0; }
.re-portal-pill--linkable  { background: #DEEEFA; color: #1B5070; border-color: #B7D6F0; }
.re-portal-pill--invitable { background: #ECF1F4; color: #576E7A; border-color: #DCE3E7; }
.re-portal-pill--no_email  { background: #E3E8EC; color: #5A6A73; border-color: #CFD7DC; }

.re-detail-banner {
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
}
.re-detail-banner--won  { background: #E5F4E5; color: #235823; }
.re-detail-banner--lost { background: #F8E5E5; color: #7A2A2A; }

.re-detail-flash {
    margin: 0 0 12px;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.15s ease;
}
.re-detail-flash--ok    { background: #E5F4E5; color: #235823; }
.re-detail-flash--error { background: #F8E5E5; color: #7A2A2A; }

/* minmax(0, 1fr) not 1fr: a bare `1fr` track is `minmax(auto, 1fr)`, and the
   `auto` minimum is min-content - a wide email table or a long unbroken token
   inside a panel would blow the track out and scroll the whole page. */
.re-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
@media (min-width: 720px) {
    .re-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.re-detail-panel {
    background: transparent;
    border: 1px solid rgba(145, 202, 234, 0.25);
    border-radius: 12px;
    padding: 16px 18px;
    /* min-width: 0 so the panel can shrink below its content's intrinsic
       width instead of pushing the grid track wider than the viewport. */
    min-width: 0;
    overflow-wrap: anywhere;
}
.re-detail-panel--span { grid-column: 1 / -1; }
.re-detail-panel h2 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4498D8;
}
.re-detail-subhead {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #576E7A;
}
.re-detail-helper {
    margin: 0 0 8px;
    font-size: 12px;
    color: #576E7A;
}
.re-detail-empty {
    margin: 0;
    color: #8F9FA6;
    font-size: 13px;
    font-style: italic;
}
.re-detail-card-note {
    margin: 32px 0 0;
    color: #8F9FA6;
    font-size: 13px;
    font-style: italic;
}
.re-detail-value-static {
    padding: 6px 0;
    font-size: 14px;
    color: #E6E9EC;
}

/* Admin Mine / All-in-org toggle */
.re-kanban-scope-toggle {
    display: inline-flex;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    overflow: hidden;
    margin-left: 8px;
}
.re-kanban-scope-toggle .re-kanban-toggle-btn {
    padding: 8px 14px;
    text-decoration: none;
    color: #C5CDD3;
}
.re-kanban-scope-toggle .re-kanban-toggle-btn--active {
    background: #4498D8;
    color: #fff;
}

/* ============================================================
   Canonical modal - .re-dialog
   ------------------------------------------------------------
   The single source of truth for modal chrome. A modal opts in
   by putting .re-dialog on the overlay and using the __ parts
   below - no per-modal re-declaration of padding, borders,
   backdrop, radius, or footer spacing. Because __foot padding
   lives here once, the "buttons flush to the bottom edge" bug
   cannot recur for anything on this base.

   Mobile-first: the base fits 390px (dialog is width:100%);
   --md / --lg only bump max-width, so no media query is needed.
   Dark by default; add --light to the overlay for white panels.

   Structure to copy:
     <div class="re-dialog" hidden>
       <div class="re-dialog__backdrop" data-close></div>
       <div class="re-dialog__panel" role="dialog" aria-modal="true">
         <div class="re-dialog__head"><h3>Title</h3>
           <button class="re-dialog__close" data-close>&times;</button></div>
         <div class="re-dialog__body"> ...fields... </div>
         <div class="re-dialog__foot"> ...buttons... </div>
       </div>
     </div>

   New full-page/app modals should use this base rather than a
   fresh .re-<feature>-modal family. The pre-existing modal
   families (.re-addc-modal, .re-why-modal, .re-kanban-modal, ...)
   migrate onto it opportunistically when next touched.
   ============================================================ */
.re-dialog {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 24px 16px; overflow-y: auto;
}
.re-dialog[hidden] { display: none; }
.re-dialog__backdrop { position: fixed; inset: 0; background: rgba(5, 12, 22, 0.7); }
.re-dialog__panel {
    position: relative;
    width: 100%; max-width: 480px;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 48px);
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    color: #e6edf3;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    min-width: 0;
}
.re-dialog__panel--md { max-width: 560px; }
.re-dialog__panel--lg { max-width: 720px; }
.re-dialog__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid #1e3a5f;
}
.re-dialog__head h2, .re-dialog__head h3 { margin: 0; font-size: 18px; color: #4498D8; }
/* Title used by modals that render it outside a __head (directly in the panel
   or body) - keep it visually consistent with the head title. */
.re-dialog__title { margin: 0 0 8px; font-size: 18px; color: #4498D8; }
.re-dialog__close {
    background: transparent; border: 0; color: #8aa0b2;
    font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.re-dialog__close:hover { color: #e6edf3; }
.re-dialog__body { padding: 20px; overflow-y: auto; min-width: 0; }
.re-dialog__foot {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    padding: 16px 20px; border-top: 1px solid #1e3a5f;
}
.re-dialog__foot-spacer { flex: 1 1 auto; }
/* Legacy modals migrated onto the base sometimes place content (a form, a
   step, a title) directly in the panel instead of inside a __body wrapper.
   Without this it would sit flush against the panel's left/right edges. Give
   any such loose panel child the same 20px horizontal inset as __body. Uses
   padding-left/right (not the shorthand) so wrappers that set their own
   vertical/horizontal padding keep it - this overrides the left/right rather
   than adding to it, so nothing double-pads. Content that lives in __head /
   __body / __foot (already padded) and the floating __close are excluded. */
.re-dialog__panel > :not(.re-dialog__head):not(.re-dialog__body):not(.re-dialog__foot):not(.re-dialog__close):not(.re-dialog__backdrop) {
    padding-left: 20px;
    padding-right: 20px;
}

/* Content helpers inside .re-dialog__body - shared by any modal on the base. */
.re-dialog__lead { margin: 0 0 16px; color: #c4d2de; font-size: 14px; }
.re-dialog__error {
    background: rgba(220, 50, 50, 0.15);
    border: 1px solid rgba(220, 50, 50, 0.45);
    color: #f3b5b5;
    border-radius: 6px; padding: 8px 10px; font-size: 13px;
    margin-bottom: 12px;
}
.re-dialog__field { display: block; margin-bottom: 14px; min-width: 0; }
.re-dialog__field[hidden] { display: none; }
.re-dialog__field > span {
    display: block; font-size: 13px; font-weight: 600;
    margin-bottom: 4px; color: #c4d2de;
}
.re-dialog__field .re-req { color: #E6AD23; }
.re-dialog .re-input {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: 14px;
}
.re-dialog .re-input:focus { outline: none; border-color: #4498D8; }
.re-dialog textarea.re-input { resize: vertical; }

/* Light-panel variant - for surfaces that live on a white page
   (kanban / prospect / detail). Only the colours change. */
.re-dialog--light .re-dialog__backdrop { background: rgba(34, 63, 76, 0.5); }
.re-dialog--light .re-dialog__panel {
    background: #fff; border-color: #C8CFD3; color: #223f4c;
    box-shadow: 0 12px 32px rgba(34, 63, 76, 0.25);
}
.re-dialog--light .re-dialog__head { border-bottom-color: #ECF1F4; }
.re-dialog--light .re-dialog__foot { border-top-color: #ECF1F4; }
.re-dialog--light .re-dialog__field > span { color: #4a5b66; }
.re-dialog--light .re-input {
    background: #fff; border-color: #C8CFD3; color: #223f4c;
}

/* Why Statement options modal (contact detail) */
.re-why-intro { margin: 0 0 16px; color: #C5CDD3; font-size: 14px; }
.re-why-tip {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 3px solid #4498D8;
    background: rgba(68, 152, 216, 0.08);
    border-radius: 4px;
    color: #C5CDD3;
    font-size: 13px;
    line-height: 1.5;
}
.re-why-fieldset {
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 12px 14px 8px;
    margin: 0 0 14px;
    min-width: 0;
}
.re-why-fieldset legend {
    padding: 0 6px;
    color: #4498D8;
    font-size: 13px;
    font-weight: 600;
}
.re-why-check {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 6px 0;
    color: #E6E9EC;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    min-width: 0;
}
.re-why-check input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
}
.re-why-check span { min-width: 0; }
.re-why-check strong { color: #E6E9EC; font-weight: 600; }
.re-why-note {
    margin: 4px 0 0;
    color: #8F9FA6;
    font-size: 12px;
}

/* LinkedIn engagement modal (contact detail) */
.re-linkedin-intro { margin: 0 0 16px; color: #C5CDD3; font-size: 14px; line-height: 1.45; }
.re-linkedin-field { display: block; margin: 0 0 14px; min-width: 0; }
.re-linkedin-label {
    display: block;
    margin-bottom: 6px;
    color: #E6E9EC;
    font-size: 13px;
    font-weight: 600;
}
.re-linkedin-optional { color: #8F9FA6; font-weight: 400; }
.re-linkedin-tones {
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 12px 14px 8px;
    margin: 0 0 12px;
    min-width: 0;
}
.re-linkedin-tones legend {
    padding: 0 6px;
    color: #4498D8;
    font-size: 13px;
    font-weight: 600;
}
.re-linkedin-tone {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 6px 0;
    color: #E6E9EC;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    min-width: 0;
}
.re-linkedin-tone input[type="radio"] {
    margin-top: 3px;
    flex: 0 0 auto;
}
.re-linkedin-tone-label { display: block; min-width: 0; }
.re-linkedin-tone-label strong { display: block; color: #E6E9EC; font-weight: 600; }
.re-linkedin-tone-label span { color: #8F9FA6; font-size: 13px; }
.re-linkedin-error { margin: 8px 0 0; color: #ff8a73; font-size: 13px; }

/* Offer meeting modal (contact view) - dark theme, mobile-first. */
.re-offer-label {
    display: block;
    margin-bottom: 6px;
    color: #E6E9EC;
    font-size: 13px;
    font-weight: 600;
}
.re-offer-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.re-offer-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: #4498D8;
    cursor: pointer;
}
.re-offer-check .re-offer-label { margin-bottom: 0; font-weight: 500; }
.re-offer-empty { list-style: none; color: #8F9FA6; font-size: 14px; padding: 4px 0; }
.re-offer-selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    min-width: 0;
}
.re-offer-selected-label { color: #E6E9EC; font-size: 13px; font-weight: 600; }
.re-offer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px !important;
    background: rgba(230, 173, 35, 0.18) !important;
    border: 1px solid #E6AD23 !important;
    border-radius: 14px;
    color: #F4E2B4 !important;
    font: inherit;
    font-size: 13px;
    text-transform: none !important;
    cursor: pointer;
}
.re-offer-chip span { font-size: 15px; line-height: 1; }
.re-offer-slot-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
@media (min-width: 480px) {
    .re-offer-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.re-offer-slot {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 8px;
    /* !important throughout: themes (Astra) carry a high-specificity `button`
       wildcard that otherwise overrides the chip background / border / colour. */
    background: rgba(5, 13, 24, 0.6) !important;
    border: 1px solid #2A3A48 !important;
    border-radius: 6px;
    color: #E6E9EC !important;
    font: inherit;
    font-weight: 600;
    text-transform: none !important;
    text-decoration: none;
    cursor: pointer;
}
.re-offer-slot:hover,
.re-offer-slot:focus-visible {
    background: rgba(68, 152, 216, 0.16) !important;
    border-color: #4498D8 !important;
    outline: none;
}
.re-offer-slot.is-selected {
    background: rgba(230, 173, 35, 0.18) !important;
    border-color: #E6AD23 !important;
    color: #F4E2B4 !important;
}
.re-linkedin-loading { margin: 0; color: #C5CDD3; font-size: 14px; }

.re-linkedin-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 8px;
}
.re-linkedin-card {
    display: flex; gap: 12px; align-items: flex-start;
    background: #0B1820;
    border: 1px solid #2A3A48;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s ease;
}
.re-linkedin-card:hover { border-color: #4498D8; }
.re-linkedin-card input[type="radio"] {
    margin-top: 3px;
    flex: 0 0 auto;
}
.re-linkedin-card:has(input[type="radio"]:checked) {
    border-color: #E6AD23;
    background: rgba(230, 173, 35, 0.06);
}
.re-linkedin-card-body { flex: 1 1 auto; min-width: 0; }
.re-linkedin-card-num {
    color: #4498D8;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.re-linkedin-card-text {
    margin: 0 0 8px;
    color: #E6E9EC;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.re-linkedin-card-why {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-left: 2px solid #2A3A48;
    background: rgba(68, 152, 216, 0.04);
    border-radius: 0 6px 6px 0;
}
.re-linkedin-card-why-label {
    color: #4498D8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.re-linkedin-card-why-text {
    margin: 0;
    color: #8F9FA6;
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
}
.re-linkedin-copy {
    background: transparent;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    padding: 4px 10px;
    color: #C5CDD3;
    font-size: 12px;
    cursor: pointer;
}
.re-linkedin-copy:hover { border-color: #4498D8; color: #4498D8; }

/* Custom "your own words" card + regenerate-with-feedback panel. */
.re-linkedin-card--custom { cursor: default; }
.re-linkedin-card-hint {
    margin: 0 0 8px;
    color: #8F9FA6;
    font-size: 13px;
    line-height: 1.45;
}
.re-linkedin-regen {
    margin: 4px 0 8px;
    border: 1px solid #2A3A48;
    border-radius: 10px;
    background: rgba(5, 13, 24, 0.4);
    min-width: 0;
}
.re-linkedin-regen-summary {
    padding: 12px 14px;
    color: #4498D8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.re-linkedin-regen-summary::-webkit-details-marker { display: none; }
.re-linkedin-regen-summary::after { content: ' +'; color: #8F9FA6; }
.re-linkedin-regen[open] .re-linkedin-regen-summary::after { content: ' -'; }
.re-linkedin-regen-body { padding: 0 14px 14px; min-width: 0; }
.re-linkedin-regen-body .re-linkedin-field { margin-bottom: 12px; }
.re-linkedin-regen-btn { width: 100%; }

/* Reassign modal */
.re-reassign-current { color: #8F9FA6; font-size: 13px; }
.re-reassign-label { display: block; margin: 16px 0; }
.re-reassign-label > span { display: block; margin-bottom: 6px; font-size: 13px; color: #C5CDD3; }
.re-reassign-label > select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    background: #0F1A22;
    color: #E6E9EC;
    font-size: 14px;
}
.re-reassign-cascade-note { color: #8F9FA6; font-size: 12px; margin-top: 16px; }
.re-reassign-flash {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.re-reassign-flash--ok    { background: rgba(75, 175, 110, 0.15); color: #A5E0B9; }
.re-reassign-flash--error { background: rgba(220, 90, 90, 0.15);  color: #F0B0B0; }

/* Merge contact modal (contact detail three-dot menu) */
.re-merge-intro { color: #C5CDD3; font-size: 13px; margin: 0 0 14px; }
.re-merge-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    background: #0F1A22;
    color: #E6E9EC;
    font-size: 14px;
}
.re-merge-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.re-merge-hint { color: #8F9FA6; font-size: 13px; margin: 6px 0; }
.re-merge-result {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    background: #0F1A22;
    color: #E6E9EC;
    cursor: pointer;
}
.re-merge-result:hover { border-color: #4498D8; background: #122A38; }
.re-merge-result-name { font-size: 14px; font-weight: 600; }
.re-merge-result-sub { font-size: 12px; color: #8F9FA6; }
.re-merge-confirm-lead { color: #E6E9EC; font-size: 15px; margin: 0 0 10px; }
.re-merge-confirm-detail { color: #C5CDD3; font-size: 13px; margin: 0; }
.re-merge-flash {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.re-merge-flash--ok    { background: rgba(75, 175, 110, 0.15); color: #A5E0B9; }
.re-merge-flash--error { background: rgba(220, 90, 90, 0.15);  color: #F0B0B0; }
.re-detail-btn--danger {
    background: #C0392B;
    border-color: #C0392B;
    color: #FFFFFF;
}
.re-detail-btn--danger:hover {
    background: #A93226;
    border-color: #A93226;
    color: #FFFFFF;
}

/* Add contact modal (org detail page three-dot menu) */
.re-newc-label {
    display: block;
    margin: 0 0 14px;
}
.re-newc-label > span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8F9FA6;
}
.re-newc-static {
    padding: 10px 12px;
    border: 1px solid #1A2530;
    border-radius: 6px;
    background: #0B141B;
    color: #C5CDD3;
    font-size: 14px;
}
.re-newc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .re-newc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.re-newc-subhead {
    margin: 8px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #C5CDD3;
}
.re-newc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-newc-row-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}
.re-newc-row-item input[type="email"],
.re-newc-row-item input[type="tel"] {
    min-width: 0;
}
.re-newc-row-item select {
    width: auto;
    min-width: 110px;
}
@media (max-width: 539px) {
    .re-newc-row-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .re-newc-row-item select {
        grid-column: 1 / -1;
        width: 100%;
    }
}
.re-newc-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #C5CDD3;
}
.re-newc-inline-check input { margin: 0; }
.re-newc-row-remove {
    background: none;
    border: 1px solid #2A3A48;
    color: #8F9FA6;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 18px;
    cursor: pointer;
}
.re-newc-row-remove:hover { color: #F0B0B0; border-color: #5A2A2A; }
.re-newc-add-row {
    display: inline-block;
    margin: 8px 0 16px;
    background: none;
    border: 1px dashed #2A3A48;
    color: #4498D8;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.re-newc-add-row:hover { border-color: #4498D8; }
.re-newc-flash {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.re-newc-flash--error { background: rgba(220, 90, 90, 0.15); color: #F0B0B0; }

/* Paste-to-autofill block at the top of the add-contact modal. */
.re-newc-detect {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    background: #0F1A22;
}
.re-newc-detect .re-newc-label { margin-bottom: 10px; }
.re-newc-detect textarea { background: #0B141B; }
.re-newc-detect-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.re-newc-detect-status {
    font-size: 13px;
    color: #8FC79B;
}
.re-newc-detect-status--error { color: #F0B0B0; }

/* Link picker modal (add contact to opp / link opp to contact) */
.re-link-picker-search { display: block; margin: 0 0 12px; }
.re-link-picker-search input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    background: #0B141B;
    color: #E6E9EC;
    font-size: 14px;
    font-family: inherit;
}
.re-link-picker-search input[type="search"]:focus {
    outline: none;
    border-color: #4498D8;
}
.re-link-picker-status {
    margin: 0;
    color: #8F9FA6;
    font-size: 13px;
}
.re-link-picker-results {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* !important throughout defeats Astra's <button> wildcard (which forces
   text-transform: uppercase + a dark background + its own colour/border at
   high specificity). Without it the picked state never shows and the names
   render ALL CAPS. Selected state uses the brand mustard #E6AD23 (reserved
   for selected states) so it reads clearly as chosen, distinct from the blue
   hover - the picker is multi-select, so the highlight must be unmistakable. */
.re-link-picker-result {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: transparent !important;
    color: #E6E9EC !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-family: inherit;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer;
}
.re-link-picker-result:hover {
    background: rgba(68, 152, 216, 0.10) !important;
    border-color: rgba(68, 152, 216, 0.35) !important;
}
.re-link-picker-result.is-picked {
    background: rgba(230, 173, 35, 0.16) !important;
    border-color: #E6AD23 !important;
    color: #ffffff !important;
}
.re-link-picker-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(220, 90, 90, 0.15);
    color: #F0B0B0;
    font-size: 13px;
}
.re-link-picker-create {
    margin: 12px 0 0;
}
.re-link-picker-create-btn {
    width: 100%;
    box-sizing: border-box;
    background: rgba(68, 152, 216, 0.12);
    border: 1px dashed rgba(68, 152, 216, 0.55);
    color: #E6E9EC;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.re-link-picker-create-btn:hover,
.re-link-picker-create-btn:focus {
    background: rgba(68, 152, 216, 0.22);
    border-color: #4498D8;
    color: #ffffff;
    outline: none;
}

.re-detail-field {
    display: block;
    margin: 0 0 12px;
}
.re-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .re-detail-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.re-detail-row .re-detail-field { margin-bottom: 12px; }

.re-detail-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #576E7A;
    margin-bottom: 4px;
}
.re-detail-label--with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.re-detail-field--checkbox .re-detail-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.re-detail-field--checkbox .re-detail-checkbox {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    margin: 2px 0 0;
}
.re-detail-field--checkbox .re-detail-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #8F9FA6;
}
.re-detail-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid rgba(68, 152, 216, 0.4);
    border-radius: 6px;
    background: #F0F8FE;
    color: #2D6FA8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.re-detail-ai-btn:hover:not(:disabled) {
    background: #E1F0FB;
    border-color: #4498D8;
}
.re-detail-ai-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.re-detail-linkedin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(10, 102, 194, 0.4);
    border-radius: 6px;
    background: #F0F8FE;
    color: #0A66C2;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.re-detail-linkedin-icon:hover,
.re-detail-linkedin-icon:focus {
    background: #E1EFFB;
    border-color: #0A66C2;
    color: #0A66C2;
}
.re-detail-linkedin-icon[hidden] { display: none; }
.re-detail-website-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(60, 90, 130, 0.4);
    border-radius: 6px;
    background: #F4F6FA;
    color: #3C5A82;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.re-detail-website-icon:hover,
.re-detail-website-icon:focus {
    background: #E6ECF4;
    border-color: #3C5A82;
    color: #3C5A82;
}
.re-detail-website-icon[hidden] { display: none; }
/* Save bar that slides in at the top of a detail view when there are unsaved
   edits. Sticky so it stays visible as the user scrolls a long form. */
.re-detail-save-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 16px;
    border-radius: 10px;
    background: #FFF1CF;
    border: 1px solid #E6AD23;
    color: #6F4E0F;
    font-weight: 600;
    font-size: 14px;
}
.re-detail-save-bar[hidden] { display: none; }
.re-detail-save-bar-label { flex: 1 1 auto; }

/* Inputs deliberately leave colour/background unset so the surrounding theme's
   form styling cascades through (the Output submission form is the reference).
   Only shape, sizing and feedback states are owned here. */
.re-detail-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(145, 202, 234, 0.4);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.re-detail-input:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 2px rgba(68, 152, 216, 0.18);
}
.re-detail-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.45;
}
.re-detail-input--saving {
    border-color: #E6AD23;
    box-shadow: 0 0 0 2px rgba(230, 173, 35, 0.18);
}

.re-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.re-detail-list li {
    padding: 6px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.re-detail-list-item { padding: 8px 0 !important; border-bottom: 1px dashed #ECF1F4; }
.re-detail-list-item:last-child { border-bottom: none; }
.re-detail-list-title {
    font-weight: 600;
    text-decoration: none;
}
.re-detail-list-title:hover { color: #4498D8; }
.re-detail-list-meta { color: #576E7A; font-size: 12px; }
.re-detail-list-warning { color: #B85B12; font-size: 12px; font-weight: 500; }
.re-detail-list-remove {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 11px;
    color: #6B7780;
    background: transparent;
    border: 1px solid #D4DBE0;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
}
.re-detail-list-remove:hover {
    color: #842029;
    border-color: #842029;
}
.re-detail-list-remove:disabled {
    opacity: 0.5; cursor: not-allowed;
}

/* Reachability row icon buttons + Add button (contact detail page).
   Dark-themed: lives inside a .re-detail-panel that already overrides to
   dark in the frontend dark-theme block. Compact icon-only edit/delete
   sit at the end of each email/phone row; the Add button drops below
   each list. Hover lifts the icon to white; danger variant goes red. */
.re-detail-reach-list li { gap: 6px; }
.re-detail-tel {
    color: inherit;
    text-decoration: none;
}
.re-detail-tel:hover,
.re-detail-tel:focus-visible {
    text-decoration: underline;
}
.re-detail-reach-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 4px;
}
.re-detail-icon-btn {
    background: transparent;
    color: #91CAEA;
    border: 1px solid rgba(145, 202, 234, 0.35);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.re-detail-icon-btn:hover:not(:disabled) {
    background: rgba(68, 152, 216, 0.18);
    border-color: #4498D8;
    color: #e6edf3;
}
.re-detail-icon-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.re-detail-icon-btn--danger { color: #f0a59a; border-color: rgba(255, 138, 115, 0.35); }
.re-detail-icon-btn--danger:hover:not(:disabled) {
    background: rgba(255, 138, 115, 0.18);
    border-color: #ff8a73;
    color: #ffd5cd;
}
.re-detail-icon-btn[data-sms-compose] { color: #E6AD23 !important; border-color: rgba(230, 173, 35, 0.4); }
.re-detail-icon-btn[data-sms-compose]:hover:not(:disabled) {
    background: rgba(230, 173, 35, 0.18);
    border-color: #E6AD23;
    color: #ffe6a8 !important;
}
.re-detail-add-btn {
    margin-top: 8px;
    background: transparent;
    color: #91CAEA;
    border: 1px dashed rgba(145, 202, 234, 0.5);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.re-detail-add-btn:hover {
    background: rgba(68, 152, 216, 0.12);
    border-color: #4498D8;
    color: #e6edf3;
}

/* Reachability add/edit modal (dark-themed from the start). */
.re-reach-modal-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.re-reach-modal-checkbox input { margin: 0; }
.re-reach-modal-error {
    color: #ff8a73;
    background: rgba(255, 138, 115, 0.12);
    border: 1px solid rgba(255, 138, 115, 0.4);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    margin: 0;
}

.re-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.re-detail-table td {
    padding: 8px 12px 8px 0;
    border-bottom: 1px dashed #ECF1F4;
    vertical-align: middle;
}
.re-detail-table td:last-child { padding-right: 0; }
.re-detail-table tr:last-child td { border-bottom: none; }
.re-detail-table-name {
    font-weight: 600;
    width: 1%;
    white-space: nowrap;
}
.re-detail-table-name a { text-decoration: none; }
.re-detail-table-name a:hover { color: #4498D8; }
.re-detail-table-stage {
    width: 1%;
    white-space: nowrap;
}
.re-detail-table-title {
    color: #576E7A;
    font-size: 12px;
}
.re-detail-table-warning {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.re-detail-tag-mini {
    background: #ECF1F4;
    color: #576E7A;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.re-detail-tag-mini--verified { background: #E5F4E5; color: #235823; }
.re-detail-tag-mini--invalid  { background: #F8E5E5; color: #7A2A2A; }

/* Data-source chips (operator-only) - a tiny coloured initials chip next to an
   email / phone showing which provider supplied it, or a person glyph when a
   human typed it. Rendered by Support\SourceChip, gated to WP admins in the
   payload builder. */
.re-source-chips {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.re-source-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    color: #fff;
    background: #5A6B75;
    cursor: help;
}
.re-source-chip:focus-visible {
    outline: 2px solid #91CAEA;
    outline-offset: 1px;
}
/* Styled hover / focus tooltip carrying the source name - the native title is
   dropped so the two don't double up. */
.re-source-chip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #0D2233;
    color: #E6EDF3;
    border: 1px solid #26506F;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 40;
}
.re-source-chip[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #26506F;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 40;
}
.re-source-chip[data-tooltip]:hover::after,
.re-source-chip[data-tooltip]:focus-visible::after,
.re-source-chip[data-tooltip]:hover::before,
.re-source-chip[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}
.re-source-chip--manual {
    background: rgba(255, 255, 255, 0.12);
    color: #C7D4DC;
    padding: 0 3px;
}
.re-source-chip--pdl             { background: #6C5CE7; }
.re-source-chip--lusha           { background: #E6407A; }
.re-source-chip--apollo          { background: #3E8E7E; }
.re-source-chip--companies-house { background: #2A5DB0; }
.re-source-chip--exa,
.re-source-chip--exa-websets     { background: #17A2A2; }

.re-detail-problem {
    border-left: 3px solid #91CAEA;
    padding: 8px 0 8px 14px;
    margin-bottom: 12px;
}
.re-detail-problem--orphan { border-left-color: #DCE3E7; }
.re-detail-problem-title {
    display: inline-block;
    font-weight: 700;
    color: #223F4C;
    text-decoration: none;
    margin: 0 0 6px;
}
.re-detail-problem-title:hover { color: #4498D8; }

.re-detail-pain-list { list-style: none; margin: 0; padding: 0; }
.re-detail-pain-list li {
    padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}
.re-detail-pain-list li a {
    font-weight: 600;
    color: #4498D8;
    text-decoration: none;
}
.re-detail-pain-score {
    background: #ECF1F4;
    color: #576E7A;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}
.re-detail-pain-excerpt { color: #576E7A; font-size: 12px; }

.re-detail-rule-hints { background: #FFFCEF; border-color: #F0D88B; }
.re-detail-rule-hints h2 { color: #6F4E0F; }
.re-detail-rule-intro { margin: 0 0 12px; color: #6F4E0F; font-size: 13px; }
.re-detail-rule-list { list-style: none; margin: 0; padding: 0; }
.re-detail-rule-list > li {
    padding: 8px 0;
    border-bottom: 1px dashed #F0D88B;
}
.re-detail-rule-list > li:last-child { border-bottom: none; }
.re-detail-rule-headline {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}
.re-detail-rule-headline a { color: #223F4C; text-decoration: none; }
.re-detail-rule-headline a:hover { color: #4498D8; }
.re-detail-rule-arrow {
    color: #6F4E0F;
    font-weight: 500;
    margin-left: 6px;
}
.re-detail-rule-failures {
    margin: 4px 0 0 18px;
    padding: 0;
    font-size: 13px;
    color: #6F4E0F;
}
.re-detail-rule-failures li { padding: 1px 0; }

.re-detail-activity-list { list-style: none; margin: 0; padding: 0; }
.re-detail-activity-list li {
    padding: 10px 0;
    border-bottom: 1px dashed #ECF1F4;
}
.re-detail-activity-list li:last-child { border-bottom: none; }
.re-detail-activity-date {
    color: #8F9FA6;
    font-size: 12px;
    margin-right: 8px;
}
.re-detail-activity-type {
    background: #DEEEFA;
    color: #1B5070;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.re-detail-activity-contact { color: #576E7A; font-size: 12px; margin-left: 8px; }
.re-detail-activity-summary { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.re-detail-activity-nextstep { margin: 4px 0 0; font-size: 13px; color: #576E7A; }

.re-detail-history-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.re-detail-history-list li { padding: 6px 0; border-bottom: 1px dashed #ECF1F4; }
.re-detail-history-list li:last-child { border-bottom: none; }
.re-detail-history-date { color: #8F9FA6; font-size: 12px; margin-right: 8px; }
.re-detail-history-move { font-weight: 600; color: #223F4C; }
.re-detail-history-reason { margin: 2px 0 0 0; color: #576E7A; font-size: 12px; }

.re-detail-pain-score-pill {
    background: #FFF1CF;
    color: #6F4E0F;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.re-detail-pain-score-pill--full {
    background: #C9E8C9;
    color: #235823;
}

.re-detail-melt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .re-detail-melt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.re-detail-timeline-placeholder {
    background: #F4F8FC;
    border-style: dashed;
}
.re-detail-timeline-placeholder p { margin: 4px 0; font-size: 14px; }
.re-detail-timeline-target { color: #576E7A; }

.re-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #C8CFD3;
    border-radius: 20px;
    background: #FFFFFF;
    color: #223F4C;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.re-detail-btn:hover { background: #F4F8FC; border-color: #91CAEA; color: #1B5070; }
.re-detail-btn--primary {
    background: #E6AD23;
    border-color: #E6AD23;
    color: #223F4C;
}
.re-detail-btn--primary:hover {
    background: #D49B13;
    border-color: #D49B13;
    color: #223F4C;
}

/* Modals (Mark Lost, Log Conversation) - chrome supplied by the .re-dialog base. */
.re-detail-form-error {
    margin: 8px 0 0;
    color: #7A2A2A;
    font-size: 13px;
    font-weight: 500;
}

/* ── Prospect Finder (v1.25.0) ───────────────────────────────────────────────── */
.re-kanban-wrap .re-kanban-find-btn {
    margin-left: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #4498D8;
    background: #4498D8;
    color: #ffffff;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.re-kanban-wrap .re-kanban-find-btn:hover { background: #1B5070; border-color: #1B5070; }
.re-kanban-wrap .re-kanban-find-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.re-kanban-wrap .re-kanban-find-btn[hidden] { display: none; }

/* Modal scaffold (separate from kanban modals so we can iterate freely). */
.re-prospect-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.re-prospect-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(34, 63, 76, 0.55);
}
.re-prospect-modal-dialog {
    position: relative;
    width: min(720px, 92vw);
    max-height: 88vh;
    display: flex; flex-direction: column;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    overflow: hidden;
}
.re-prospect-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #ECF1F4;
}
.re-prospect-modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: #223F4C; }
.re-prospect-modal-head-actions {
    display: flex; align-items: center; gap: 4px;
}
.re-prospect-modal-close,
.re-prospect-modal-minimise {
    background: transparent; border: none;
    font-size: 22px; line-height: 1;
    color: #8F9FA6; cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
}
.re-prospect-modal-close:hover,
.re-prospect-modal-minimise:hover { background: #F4F7F9; color: #223F4C; }

/* v27.7.1 - minimised pill. The whole .re-prospect-modal element stays in
   the DOM (so the JS closure / polling loop don't have to be rebuilt). In
   the minimised state we hide the overlay + dialog and show the floating
   pill instead. The pill is fixed in the bottom-right corner. Clicking it
   restores the dialog; clicking the inner X closes the search entirely. */
.re-prospect-modal.is-minimised { pointer-events: none; }
.re-prospect-modal.is-minimised .re-prospect-modal-overlay,
.re-prospect-modal.is-minimised .re-prospect-modal-dialog { display: none; }
.re-prospect-pill { display: none; }
.re-prospect-modal.is-minimised .re-prospect-pill {
    pointer-events: auto;
    display: inline-flex; align-items: center; gap: 10px;
    position: fixed; right: 24px; bottom: 24px;
    padding: 10px 14px 10px 12px;
    background: #223F4C; color: #FFFFFF;
    border: none; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px; font-weight: 600; cursor: pointer;
    max-width: min(420px, calc(100vw - 48px));
    /* v29.3.0 - Astra's button wildcard forces text-transform: uppercase
       + letter-spacing on every <button>; the pill was rendering ALL CAPS
       even though the JS writes sentence case. Override here to match the
       sentence-case writes. */
    text-transform: none !important; letter-spacing: normal !important;
}
.re-prospect-modal.is-minimised .re-prospect-pill:hover { background: #2C5263; }
.re-prospect-pill-spinner {
    flex: 0 0 14px;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #FFFFFF; border-radius: 50%;
    animation: re-pf-pill-spin 0.9s linear infinite;
}
.re-prospect-modal[data-pf-pill-state="ready"] .re-prospect-pill {
    background: #1f883d;
}
.re-prospect-modal[data-pf-pill-state="ready"] .re-prospect-pill:hover {
    background: #1a7331;
}
.re-prospect-modal[data-pf-pill-state="ready"] .re-prospect-pill-spinner { display: none; }
.re-prospect-modal[data-pf-pill-state="failed"] .re-prospect-pill {
    background: #cf222e;
}
.re-prospect-modal[data-pf-pill-state="failed"] .re-prospect-pill:hover {
    background: #b21d27;
}
.re-prospect-modal[data-pf-pill-state="failed"] .re-prospect-pill-spinner { display: none; }
.re-prospect-pill-text {
    flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
    /* v29.3.0 - belt-and-braces with the parent rule; some themes hit
       inline children too. Keep the text sentence case the JS writes. */
    text-transform: none !important; letter-spacing: normal !important;
}
.re-prospect-pill-close {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #FFFFFF;
    font-size: 14px; line-height: 1;
}
.re-prospect-pill-close:hover { background: rgba(255,255,255,0.3); }
@keyframes re-pf-pill-spin { to { transform: rotate(360deg); } }
.re-prospect-modal-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1 1 auto;
    color: #223F4C;
}
/* Theme rules like `label, legend { color: #fff }` (Astra/etc.) outrank
   simple inheritance from .re-prospect-modal-body. Scope a class-prefixed
   selector here to win on specificity without resorting to !important. */
.re-prospect-modal label,
.re-prospect-modal legend { color: inherit; }
.re-prospect-modal-foot {
    padding: 12px 18px;
    border-top: 1px solid #ECF1F4;
    display: flex; justify-content: flex-end; gap: 8px;
}

.re-prospect-btn {
    padding: 8px 16px; border-radius: 20px;
    border: 1px solid #C8CFD3; background: #FFFFFF;
    color: #223F4C; font-size: 13px; font-weight: 600;
    cursor: pointer;
    text-transform: none !important; letter-spacing: normal !important;
}
.re-prospect-btn:hover { background: #F4F8FC; border-color: #91CAEA; }
.re-prospect-btn--primary {
    background: #E6AD23; border-color: #E6AD23; color: #223F4C;
}
.re-prospect-btn--primary:hover { background: #D49B13; border-color: #D49B13; }

/* Contact-detail Enrich modal - chrome supplied by the .re-dialog base. */
.re-enrich-list { list-style: disc; margin: 0 0 8px 18px; padding: 0; font-size: 13px; }
.re-enrich-list li { margin: 0 0 4px; }
.re-enrich-list small { color: #8F9FA6; }
.re-enrich-note { font-size: 12px; color: #8F9FA6; margin-top: 8px; }
.re-enrich-cost { margin-top: 12px; padding: 8px 10px; background: #F4F8FC; border-radius: 6px; font-size: 13px; }
.re-enrich-error { color: #B12727; font-weight: 600; }

.re-prospect-progress {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 36px 12px;
    color: #576E7A;
}
.re-prospect-progress-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid #ECF1F4; border-top-color: #4498D8;
    animation: re-prospect-spin 0.9s linear infinite;
}
@keyframes re-prospect-spin { to { transform: rotate(360deg); } }

.re-prospect-steps {
    list-style: none; padding: 0; margin: 0 0 12px;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 8px;
}
.re-prospect-step {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: #8F9FA6;
    position: relative;
}
.re-prospect-step + .re-prospect-step::before {
    content: ''; position: absolute;
    left: 11px; top: -8px;
    width: 2px; height: 8px; background: #C8CFD3;
}
.re-prospect-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #ECF1F4; color: #8F9FA6;
    font-size: 12px; font-weight: 700;
}
.re-prospect-step--active  .re-prospect-step-num { background: #4498D8; color: #FFFFFF; box-shadow: 0 0 0 4px rgba(68, 152, 216, 0.18); }
.re-prospect-step--active  .re-prospect-step-label { color: #223F4C; font-weight: 600; }
.re-prospect-step--done    .re-prospect-step-num { background: #61B0E0; color: #FFFFFF; }
.re-prospect-step--done    .re-prospect-step-label { color: #576E7A; }

.re-prospect-progress-current { margin: 0; font-size: 14px; color: #223F4C; font-weight: 500; }
.re-prospect-progress-hint    { margin: 0; font-size: 12px; color: #8F9FA6; }
.re-prospect-progress-elapsed { margin: 0; font-size: 12px; color: #8F9FA6; font-variant-numeric: tabular-nums; }
.re-prospect-empty { color: #8F9FA6; font-style: italic; }
.re-prospect-error { color: #7A2A2A; font-weight: 500; }
.re-prospect-success { font-size: 15px; }

.re-prospect-quality {
    border-radius: 8px; padding: 10px 14px; margin-bottom: 12px;
    font-size: 13px; font-weight: 500;
}
.re-prospect-quality--mixed { background: #FFF1CF; color: #6F4E0F; border: 1px solid #F0D88B; }
.re-prospect-quality--poor  { background: #F8E5E5; color: #7A2A2A; border: 1px solid #E8B0B0; }

.re-prospect-subtitle { color: #576E7A; font-size: 13px; margin: 0 0 12px; }

.re-prospect-cards { display: flex; flex-direction: column; gap: 8px; }
.re-prospect-card {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #DCE3E7; border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.re-prospect-card:hover { border-color: #91CAEA; background: #F8FBFD; }
/* v28.2.0 - candidates the latest Look-for-new freshen surfaced get a
   blue accent so the user can tell what's new at a glance. The flag is
   set on the candidate JSON (is_new_since_last_check) at runScoreFinalize
   and reset on items carried forward from a prior run. */
.re-prospect-card--just-found {
    background: linear-gradient(to right, rgba(68, 152, 216, 0.08), rgba(68, 152, 216, 0.02) 35%, transparent 70%);
    border-color: #4498D8;
    box-shadow: inset 3px 0 0 #4498D8;
}
.re-prospect-card-new-badge {
    background: #4498D8;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 6px;
    text-transform: none;
}
.re-prospect-card input { margin-top: 4px; }
.re-prospect-card-body { flex: 1 1 auto; min-width: 0; }
.re-prospect-card-headline {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin-bottom: 4px;
}
.re-prospect-card-name { font-weight: 700; color: #223F4C; }
.re-prospect-card-score {
    background: #E6AD23; color: #223F4C;
    padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
}
.re-prospect-card-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 12px; color: #576E7A;
    margin-bottom: 4px;
}
.re-prospect-card-headline {
    align-items: center;
}
.re-prospect-card-logo {
    width: 28px; height: 28px; border-radius: 4px;
    object-fit: contain; background: #fff;
    border: 1px solid #E5EAEE;
    flex: 0 0 auto;
    margin-right: 4px;
}
.re-prospect-card-links {
    margin: 2px 0 4px; font-size: 12px;
}
.re-prospect-card-links a {
    color: #2F6F8F; text-decoration: none; font-weight: 600;
}
.re-prospect-card-links a:hover { text-decoration: underline; }
.re-prospect-card-reason {
    margin: 4px 0 0; font-size: 13px; color: #223F4C; line-height: 1.4;
}
.re-prospect-card-signals {
    margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px;
}
.re-prospect-signal {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 1.5;
    background: #EEF4FA; color: #223F4C;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-prospect-signal--intent     { background: #E1EFFA; color: #2F6F8F; }
.re-prospect-signal--hiring     { background: #FBE9C3; color: #6E5413; }
.re-prospect-signal--people     { background: #FBE9C3; color: #6E5413; }
.re-prospect-signal--growth     { background: #DDF1E2; color: #1F5A33; }
.re-prospect-signal--commercial { background: #DDF1E2; color: #1F5A33; }
.re-prospect-signal--strategy   { background: #E2DCEF; color: #432C7A; }
.re-prospect-signal--financial  { background: #E2DCEF; color: #432C7A; }
.re-prospect-signal--market     { background: #EEF4FA; color: #2F4F6A; }
.re-prospect-signal--product    { background: #EEF4FA; color: #2F4F6A; }
.re-prospect-signal--risk       { background: #F5D8D8; color: #712B2B; }

/* v27.2.0 - widening + dismissal UI */
.re-prospect-loosen-notice {
    background: #EEF4FA;
    border-left: 4px solid #4498D8;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 0 0 12px;
    color: #1F3A52;
    font-size: 14px;
    line-height: 1.5;
}
.re-prospect-widen-prompt {
    padding: 8px 0 16px;
    color: #2F4F6A;
}
.re-prospect-widen-prompt p { margin: 0 0 10px; }
/* v28.2.0 - "Look for new prospects" banner that sits above the candidate
   list. Caption + button on one row when the modal is wide enough;
   stacks on small screens. The button switches to a disabled "Looking..."
   state while the background freshen is in flight. */
.re-prospect-freshen-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 14px;
    background: #F4F8FC;
    border: 1px solid #C6DAEC;
    border-radius: 8px;
}
.re-prospect-freshen-caption {
    color: #2F4F6A;
    font-size: 13px;
    flex: 1 1 auto;
    min-width: 0;
}
.re-prospect-freshen-btn {
    background: #FFFFFF !important;
    border: 1px solid #4498D8 !important;
    color: #2F6F8F !important;
    font-weight: 500 !important;
    text-transform: none !important;
}
.re-prospect-freshen-btn:hover {
    background: #E6EFF7 !important;
    border-color: #357AB5 !important;
}
.re-prospect-freshen-btn[disabled],
.re-prospect-freshen-btn:disabled {
    opacity: 0.65;
    cursor: progress;
}
.re-prospect-widen-steps {
    margin: 8px 0 0 18px;
    padding: 0;
    color: #4F6B83;
}
/* v28.0.0 - "Widen the search" surfaced below the candidate list when
   the backend reports can_widen_further. Sits clearly separate from the
   cards above with a top border so it reads as a follow-up action, not
   another candidate. */
.re-prospect-widen-from-results {
    margin: 18px 0 0;
    padding: 16px 0 4px;
    border-top: 1px solid #DCE3EA;
    text-align: center;
}
.re-prospect-widen-from-results-caption {
    margin: 0 0 10px;
    color: #4F6B83;
    font-size: 14px;
}
.re-prospect-widen-from-results-btn {
    /* Inherits the .re-prospect-btn shape but overrides the chrome so it
       doesn't compete with the primary action button in the footer. */
    background: #F4F8FC !important;
    border: 1px solid #91CAEA !important;
    color: #2F6F8F !important;
    font-weight: 500 !important;
}
.re-prospect-widen-from-results-btn:hover {
    background: #E6EFF7 !important;
    border-color: #4498D8 !important;
}
/* v28.1.0 - "Narrow the search" mirrors widen visually but in a different
   chrome so the two controls read as opposite actions. Sits below widen
   when both are visible (the user previously widened, isn't at max yet). */
.re-prospect-narrow-from-results {
    margin: 12px 0 0;
    padding: 4px 0 4px;
    text-align: center;
}
.re-prospect-narrow-from-results-caption {
    margin: 0 0 10px;
    color: #4F6B83;
    font-size: 14px;
}
.re-prospect-narrow-from-results-btn {
    background: #F4F1F8 !important;
    border: 1px solid #C6B8DC !important;
    color: #5F4477 !important;
    font-weight: 500 !important;
}
.re-prospect-narrow-from-results-btn:hover {
    background: #E8E0F0 !important;
    border-color: #8E6FB0 !important;
}
.re-prospect-dismissed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 12px;
    color: #4F6B83;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.re-prospect-dismissed-toggle input { margin: 0; }
.re-prospect-dismissed-count {
    color: #91A4B6;
}
.re-prospect-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
/* v27.7.4 - explicit !important overrides to defeat Astra's button
   wildcard (which forces text-transform: uppercase + a dark background
   on every <button> at high specificity). Without these the dismiss
   button reads as a dark "NOT INTERESTED" status chip that looks like
   it's labelling the prospect, not offering an action. We want an
   obvious outlined-button affordance: white background, gray border,
   sentence-case text, rectangular-ish corners (not pill-shaped). */
.re-prospect-card-dismiss,
.re-prospect-card-reconsider {
    background: #FFFFFF !important;
    border: 1px solid #C7D0D8 !important;
    color: #4F5D68 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}
.re-prospect-card-dismiss:hover {
    color: #BA4040 !important;
    border-color: #BA4040 !important;
    background: #FFF6F6 !important;
}
.re-prospect-card-reconsider:hover {
    color: #4498D8 !important;
    border-color: #4498D8 !important;
    background: #F2F8FC !important;
}
.re-prospect-card--dismissed {
    opacity: 0.55;
    background: #F4F6F8;
}
.re-prospect-card-dismissed-pill {
    display: inline-block;
    background: #DCE3E7;
    color: #4F6B83;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}
.re-prospect-undo-toast {
    position: sticky;
    bottom: 8px;
    margin: 12px auto 0;
    background: #2F3A4A;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    width: fit-content;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.re-prospect-undo-toast[hidden] {
    display: none;
}
.re-prospect-toast-undo {
    background: transparent;
    color: #91CAEA;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.re-prospect-group {
    border: 1px solid #DCE3E7; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px;
}
.re-prospect-group--blocked { opacity: 0.5; }
.re-prospect-group h3 {
    margin: 0 0 8px; font-size: 14px; font-weight: 700;
    color: #223F4C;
}
.re-prospect-conflict {
    border-radius: 6px; padding: 6px 10px; margin-bottom: 6px;
    font-size: 12px; font-weight: 500;
}
.re-prospect-conflict--soft { background: #FFF1CF; color: #6F4E0F; }
.re-prospect-conflict--hard { background: #F8E5E5; color: #7A2A2A; }

.re-prospect-contact {
    display: grid;
    grid-template-columns: auto 1.4fr 1fr 1fr;
    gap: 10px; align-items: center;
    padding: 6px 0;
    border-top: 1px dashed #ECF1F4;
    font-size: 13px;
}
.re-prospect-contact:first-of-type { border-top: none; }
.re-prospect-contact-name { font-weight: 600; }
.re-prospect-contact-name--hidden { font-weight: 400; font-style: italic; color: #8F9FA6; }
.re-prospect-select-all {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 12px 0; padding: 6px 10px;
    background: #F5F8FA; border: 1px solid #E1E8EC; border-radius: 6px;
    font-weight: 600; font-size: 13px; color: #2C3E50;
    cursor: pointer; user-select: none;
}
.re-prospect-select-all input { margin: 0; }
.re-prospect-contact-title { color: #576E7A; min-width: 0; }
.re-prospect-contact-mask { color: #8F9FA6; font-size: 12px; }
.re-prospect-contact-mask .re-prospect-have { color: #E6AD23; font-weight: 700; margin: 0 2px; }
.re-prospect-contact-mask .re-prospect-missing { color: #91CAEA; font-weight: 700; margin: 0 2px; }

/* AI fit score badge - shown next to the contact's job title. Bucketed
   colours: high (7-10) green-ish, mid (5-6) muted, low (1-4) amber. The
   LOCATION RULE in AiContactScoringService caps mismatches at 4 so any
   low-banded badge usually carries a "location mismatch" reason. */
.re-prospect-contact-score {
    display: inline-block; padding: 1px 7px; border-radius: 10px;
    font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: baseline;
}
.re-prospect-contact-score--high { background: #E1F1DE; color: #2F6B26; }
.re-prospect-contact-score--mid  { background: #FFF1CF; color: #6F4E0F; }
.re-prospect-contact-score--low  { background: #F8E5E5; color: #7A2A2A; }
.re-prospect-contact-location {
    display: inline-block; margin-left: 6px;
    color: #8F9FA6; font-size: 12px; font-style: italic;
}
.re-prospect-contact-reason {
    grid-column: 1 / -1;
    color: #576E7A; font-size: 12px; font-style: italic;
    padding-left: 24px;
}

.re-prospect-summary {
    background: #F4F8FC; border-radius: 8px;
    padding: 10px 14px; margin-top: 12px;
    font-size: 13px; color: #223F4C;
}
.re-prospect-summary p { margin: 0 0 4px; }
.re-prospect-bench-warning {
    margin-top: 6px !important;
    padding: 8px 10px;
    background: #F8E5E5; color: #7A2A2A; border-radius: 6px;
}
.re-prospect-btn--disabled,
.re-prospect-btn[disabled],
.re-prospect-btn--disabled:hover,
.re-prospect-btn[disabled]:hover {
    opacity: 0.5; cursor: not-allowed;
    background: #E6E9EB; border-color: #C8CFD3; color: #5A6770;
}

/* ── Activity timeline ───────────────────────────────────────────────── */

.re-activity-timeline { padding-bottom: 16px; }
.re-activity-timeline__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 12px;
    flex-wrap: wrap;
}
.re-activity-timeline__head h2 { margin: 0; }
.re-activity-timeline__actions {
    display: inline-flex; align-items: center; gap: 8px;
}
.re-activity-timeline__attach {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    padding: 0; border: 1px solid currentColor; border-radius: 6px;
    background: transparent; color: inherit; cursor: pointer;
    opacity: 0.75;
}
.re-activity-timeline__attach:hover,
.re-activity-timeline__attach:focus-visible { opacity: 1; }
.re-activity-timeline__attach svg { display: block; }

.re-activity-filter {
    border: 1px solid #DDE5EA; border-radius: 8px;
    padding: 8px 12px; margin: 0 0 12px;
    display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
}
.re-activity-filter__legend { padding: 0 4px; font-weight: 600; color: inherit; }
.re-activity-filter__check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 13px; color: inherit; }

.re-activity-pinned-section { margin: 0 0 16px; padding: 8px 12px; background: #F4F8FC; border-radius: 8px; }
.re-activity-pinned__title { margin: 0 0 8px; font-size: 13px; color: #576E7A; text-transform: uppercase; letter-spacing: 0.04em; }

.re-activity-playbook-toggle { margin: 0 0 12px; }
.re-activity-playbook-toggle button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px dashed #C5D1D8;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.re-activity-playbook-toggle button:hover,
.re-activity-playbook-toggle button:focus-visible {
    border-color: #4498D8;
    color: #4498D8;
}
.re-activity-list--pending-playbook { margin: 0 0 12px; }

.re-activity-list { list-style: none; padding: 0; margin: 0; }
.re-activity {
    border: 1px solid #E4E9EC; border-radius: 10px;
    padding: 10px 14px; margin: 0 0 8px;
    background: #FFFFFF;
    min-width: 0;
    overflow: hidden;
}
.re-activity--virtual { background: #F8F9FB; border-style: dashed; }

.re-activity__head {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px 10px; font-size: 12px; color: #576E7A;
    margin: 0 0 4px;
}
.re-activity__date { color: #8F9FA6; }
.re-activity__chip {
    display: inline-block; padding: 2px 8px;
    border-radius: 999px; font-weight: 600;
    background: #EEF3F6; color: #223F4C;
}
.re-activity__chip--note { background: #EFF7E5; color: #355F0B; }
.re-activity__chip--email { background: #E3F0F9; color: #134A6F; }
.re-activity__chip--linkedin { background: #DEEBF7; color: #0A66C2; }
.re-activity__chip--call { background: #FBE6CC; color: #6F3F00; }
.re-activity__chip--meeting { background: #E7E1F4; color: #36227A; }
.re-activity__chip--conversation { background: #F4DCEC; color: #6B1B58; }
.re-activity__chip--sms { background: #FFE0EB; color: #842029; }
.re-activity__chip--whatsapp { background: #DCF7DD; color: #0F5132; }
.re-activity__chip--task { background: #DDF3EE; color: #1F5B4F; }
.re-activity__chip--commitment { background: #E1F0FC; color: #0F4977; }
.re-activity__chip--system { background: #ECEEF1; color: #4B5560; font-style: italic; }
/* Research / news triggers found by the Enrich button. Violet accent so
   AI-found signal stands out at a glance without colliding with the
   brand blue (links) or mustard (selected state). */
.re-activity__chip--research { background: #E7DDFB; color: #4C1D95; font-weight: 700; letter-spacing: 0.02em; }
/* FVIP chips - same four colours as the My Day capture surface so the
   visual association from quickadd -> timeline is one to one. Failure
   green, Victory mustard, Insight blue, Problem purple. */
.re-activity__chip--failure { background: #E6F4E0; color: #1F5C16; }
.re-activity__chip--victory { background: #FCE9BC; color: #6B4A03; }
.re-activity__chip--insight { background: #DBECF8; color: #134A6F; }
.re-activity__chip--problem { background: #ECE2F7; color: #432269; }
a.re-activity__chip--link {
    text-decoration: none;
    cursor: pointer;
}
a.re-activity__chip--link:hover {
    filter: brightness(0.94);
    text-decoration: none;
}

.re-activity__subtype { color: #8F9FA6; font-style: italic; }
.re-activity__direction {
    padding: 1px 6px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
}
.re-activity__direction--in  { background: #E1F0FE; color: #0A66C2; }
.re-activity__direction--out { background: #FFE9D6; color: #B0571E; }

/* Draft / Sent / Dismissed pill on outbound email rows. Brand mustard for
   Draft, brand blue for Sent, muted grey for Dismissed. Inbound rows keep
   the In direction chip and get no pill. */
.re-activity__status {
    display: inline-block;
    padding: 1px 6px; border-radius: 4px;
    font-size: 11px; font-weight: 600; line-height: 1.4;
}
.re-activity__status--draft     { background: #E6AD23; color: #4A3604; }
.re-activity__status--sent      { background: #4498D8; color: #FFFFFF; }
.re-activity__status--dismissed { background: #DDE5EA; color: #576E7A; }
/* Playbook step states surfaced as virtual entries on the timeline. Failed
   reads as a problem (soft red); manual_task is "needs you"; scheduled and
   snoozed are quiet neutrals so the row doesn't shout. */
.re-activity__status--failed    { background: #E0594D; color: #FFFFFF; }
.re-activity__status--manual    { background: #F2D6B0; color: #7A4A12; }
.re-activity__status--scheduled { background: #DCE6EE; color: #4A6A82; }
.re-activity__status--snoozed   { background: #DDE5EA; color: #576E7A; }

/* Email click-tracking chip ("Links Clicked: N" or "Tracking off"). The
   wrapper is the chip itself; a child .popover reveals on hover / focus-
   within so touch-screen users get tap-to-reveal via tabindex=0. Mobile-
   first - no positioning hacks until we have room. Open-tracking was
   removed because proxy pre-fetches drowned out the signal. */
.re-activity__chip--clicks,
.re-activity__chip--tracking-off {
    display: inline-block;
    position: relative;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    cursor: help;
    outline: none;
}
.re-activity__chip--clicks       { background: #E3F0F9; color: #134A6F; }
.re-activity__chip--tracking-off { background: #ECEEF1; color: #4B5560; }
.re-activity__chip-label { display: inline-block; }
.re-activity__chip-popover {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    margin-top: 6px;
    z-index: 50;
    min-width: 260px;
    /* Wider on desktop so typical mid-length URLs fit on one line; the
       inner viewport-minus-32 cap keeps it readable on narrow phones. */
    max-width: min(560px, calc(100vw - 32px));
    width: max-content;
    padding: 8px 10px;
    background: #1F2A33;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    white-space: normal;
    text-align: left;
    pointer-events: none;
}
/* URLs inside the click popover. `overflow-wrap: anywhere` breaks on
   the first available character (slash, dot, hyphen) when the URL is
   longer than the popover, instead of the aggressive mid-word breaking
   that `word-break: break-all` produces. */
.re-activity__chip-url {
    overflow-wrap: anywhere;
    word-break: normal;
}
.re-activity__chip--clicks:hover .re-activity__chip-popover,
.re-activity__chip--clicks:focus-within .re-activity__chip-popover,
.re-activity__chip--clicks:focus .re-activity__chip-popover,
.re-activity__chip--tracking-off:hover .re-activity__chip-popover,
.re-activity__chip--tracking-off:focus-within .re-activity__chip-popover,
.re-activity__chip--tracking-off:focus .re-activity__chip-popover {
    display: block;
}

.re-activity__actor { color: #8F9FA6; }

/* Action buttons row (Open / Pin / Edit / Cancel / Delete / Restore). On a
   390px viewport these total ~300px+, so they need to be allowed to wrap
   both within themselves and onto a new line of the head row. */
.re-activity__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}
@media (max-width: 480px) {
    .re-activity__actions {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}
.re-activity__btn {
    background: transparent; border: 1px solid #DDE5EA;
    color: #576E7A; font-size: 12px;
    padding: 2px 8px; border-radius: 4px; cursor: pointer;
}
.re-activity__btn:hover { background: #F4F8FC; color: #223F4C; }
.re-activity__btn--danger:hover { background: #FFE7E7; color: #842029; border-color: #F8B4B4; }

.re-activity__subject { margin: 0 0 4px; font-size: 15px; color: #223F4C; }
.re-activity__body, .re-activity__outcome, .re-activity__next-step, .re-activity__due {
    margin: 4px 0; font-size: 13px; color: #4B5560;
}

/* LinkedIn engagement "Replying to" block: the original post (and optional
   URL + tone) the user was replying to, shown under their chosen reply on
   the timeline. Gated server-side on system_event_key so only rows from
   the LinkedIn engagement modal carry this block. */
.re-activity__reply-to {
    margin: 8px 0 4px;
    padding: 10px 12px;
    border-left: 3px solid #4498D8;
    background: rgba(68, 152, 216, 0.04);
    border-radius: 0 8px 8px 0;
    min-width: 0;
}
/* Recorded call whose transcript is still being fetched - reads as pending,
   not failed, and resolves in place when the recording lands. */
.re-activity__transcript--pending { border-left-color: #E6AD23; background: rgba(230, 173, 35, 0.06); }
.re-activity__transcript--pending .re-activity__reply-to-quote { color: #B7935A; font-style: italic; }
.re-activity__transcript-spinner {
    display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px;
    border: 2px solid rgba(230, 173, 35, 0.35); border-top-color: #E6AD23; border-radius: 50%;
    animation: re-transcript-spin 0.8s linear infinite;
}
@keyframes re-transcript-spin { to { transform: rotate(360deg); } }
.re-activity__reply-to-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 6px;
    min-width: 0;
}
.re-activity__reply-to-label {
    color: #4498D8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.re-activity__reply-to-link {
    color: #4498D8;
    font-size: 12px;
    text-decoration: none;
}
.re-activity__reply-to-link:hover { text-decoration: underline; }
.re-activity__reply-to-tone {
    color: #8F9FA6;
    font-size: 11px;
    padding: 1px 6px;
    border: 1px solid #2A3A48;
    border-radius: 999px;
}
.re-activity__reply-to-quote {
    margin: 0;
    color: #C5CDD3;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    min-width: 0;
    overflow-wrap: anywhere;
}
.re-activity__reply-to-quote.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}
.re-activity__reply-to-toggle {
    margin-top: 6px;
    background: transparent;
    border: none;
    color: #4498D8;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.re-activity__reply-to-toggle:hover { text-decoration: underline; }

/* Email / meeting bodies render sanitised arbitrary HTML. Constrain wide
   descendants (images, tables, pre blocks, long URLs) so they cannot push
   the detail view wider than the viewport on mobile. Tables and pre blocks
   keep their own internal horizontal scroll so wide content is still
   readable, just not at the cost of the whole page. */
.re-activity__body--html {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.re-activity__body--html img,
.re-activity__body--html iframe,
.re-activity__body--html video {
    /* !important: imported email HTML often carries inline width/height
       attributes that would otherwise win on specificity and blow the
       container open on mobile. */
    max-width: 100% !important;
    height: auto !important;
    display: block;
}
.re-activity__body--html table {
    display: block;
    max-width: 100% !important;
    width: auto !important;
    overflow-x: auto;
    border-collapse: collapse;
}
.re-activity__body--html pre,
.re-activity__body--html code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}
.re-activity__body--html a { overflow-wrap: anywhere; }

/* Imported email/meeting bodies render in a sandboxed iframe (EmailHtml::
   renderIsolated) so a malformed/hostile body cannot restructure the page or
   run in the app origin. Emails are authored for a white canvas; JS sizes the
   height to the content, min-height is the pre-load / opaque-origin fallback. */
.re-activity__frame {
    display: block;
    width: 100%;
    border: 0;
    margin: 6px 0;
    background: #ffffff;
    border-radius: 8px;
    min-height: 48px;
    color-scheme: light;
}

.re-activity__links { list-style: none; padding: 0; margin: 6px 0 0; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.re-activity__links li { margin: 0; }
.re-activity__link {
    display: inline-block; padding: 1px 8px;
    border: 1px solid #DDE5EA; border-radius: 999px;
    font-size: 11px; color: #576E7A; text-decoration: none;
    background: #FFFFFF;
}
.re-activity__link:hover { background: #F4F8FC; color: #223F4C; }
.re-activity__rollup {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border: 1px solid #DDE5EA; border-radius: 999px;
    font-size: 11px; color: #576E7A; text-decoration: none;
    background: #FFFFFF;
    white-space: nowrap;
}
.re-activity__rollup:hover { background: #F4F8FC; color: #223F4C; }

/* Add-activity modal - chrome supplied by the .re-dialog base. */
.re-activity-modal__label { display: block; font-size: 12px; color: #576E7A; margin: 0 0 4px; font-weight: 600; }
.re-activity-modal__radio { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-size: 13px; color: #223F4C; }
.re-activity-modal__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
    font-size: 13px;
    color: #223F4C;
    cursor: pointer;
}
.re-activity-modal__check input[type="checkbox"] { margin: 0; }

/* ── Future / cancelled activity treatments ─────────────────────────── */
.re-activity[data-future="1"]:not([data-cancelled="1"]) {
    opacity: 0.78;
    border-style: dashed;
}
.re-activity[data-cancelled="1"] {
    opacity: 0.65;
    background: #FAF3F4;
}
.re-activity[data-cancelled="1"] .re-activity__subject {
    text-decoration: line-through;
}
.re-activity__chip--upcoming { background: #FFF3CD; color: #664D03; }
.re-activity__chip--cancelled { background: #F8E5E7; color: #842029; }
.re-activity__chip--done { background: #DCF7DD; color: #0F5132; }
.re-activity--done .re-activity__subject { text-decoration: line-through; opacity: 0.75; }
.re-activity__plan, .re-activity__cancel-reason, .re-activity__manual-reason {
    margin: 4px 0; font-size: 13px; color: #4B5560;
}
.re-activity__btn--warn {
    border-color: rgba(232, 154, 35, 0.4);
    color: #8a5a00;
}
.re-activity__btn--warn:hover {
    background: #FFF3CD; color: #664D03; border-color: #E89A23;
}

/* ── Per-contact stage swimlane (opportunity detail) ─────────────────── */
.re-swim__head {
    margin: 0 0 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title  add"
        "hint   add";
    column-gap: 12px;
    align-items: start;
}
.re-swim__head h2 { margin: 0; grid-area: title; min-width: 0; }
.re-swim__hint { margin: 4px 0 0; font-size: 12px; color: #576E7A; grid-area: hint; min-width: 0; }
.re-swim__add { grid-area: add; align-self: start; }

.re-swim__grid {
    display: flex; flex-direction: column; gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.re-swim__row {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) repeat(8, minmax(0, 1fr));
    gap: 4px;
    align-items: stretch;
    min-width: 800px;
}
.re-swim__row--header .re-swim__cell,
.re-swim__row--header .re-swim__name {
    background: transparent; border: 0;
    font-size: 11px; font-weight: 600; color: #576E7A;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 4px 8px;
    text-align: center;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.re-swim__name {
    background: #F8FAFB; border: 1px solid #E4E9EC; border-radius: 8px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 2px;
    position: sticky;
    left: 0;
    z-index: 1;
}
.re-swim__row--header .re-swim__name { background: #FFFFFF; }
.re-swim__contact-link {
    font-weight: 600; color: #223F4C; text-decoration: none;
}
.re-swim__contact-link:hover { color: #0A66C2; }
.re-swim__job-title { font-size: 12px; color: #8F9FA6; }
.re-swim__remove {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: #6B7780;
    background: transparent;
    border: 1px solid #D4DBE0;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
}
.re-swim__remove:hover {
    color: #842029;
    border-color: #842029;
}
.re-swim__remove:disabled {
    opacity: 0.5; cursor: not-allowed;
}

.re-swim__cell {
    position: relative;
    border: 1px solid #E4E9EC; border-radius: 8px;
    padding: 8px 6px 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
    min-height: 64px;
    background: transparent;
}
.re-swim__cell--passed  { background: #DEEEFA; border-color: #B7D6F0; }
.re-swim__cell--current { background: #FFF3CD; border-color: #E89A23; border-width: 2px; padding: 7px 5px 5px; }
.re-swim__cell--future  { background: transparent; border-color: rgba(228, 233, 236, 0.55); }

.re-swim__cell-label {
    display: inline-block;
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
}
.re-swim__cell--current .re-swim__cell-label { font-weight: 700; }
.re-swim__cell--future .re-swim__cell-label { opacity: 0.55; }

.re-swim__date {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-size: 10px; color: #6B7780;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}
.re-swim__cell--current .re-swim__date { color: #6F4E0F; font-weight: 600; }
.re-swim__cell--passed  .re-swim__date { color: #1B5070; }

/* Methodology meeting indicator dots above Discover / Fulfil / Decide cells. */
.re-swim__dot {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #C9D2D8; text-decoration: none;
    line-height: 1; font-size: 14px;
}
.re-swim__dot--past      { color: #2D6FA8; }
.re-swim__dot--upcoming  { color: #E89A23; }
.re-swim__dot--cancelled { color: #842029; text-decoration: line-through; }
.re-swim__dot:hover { transform: translateX(-50%) scale(1.15); }

@media (min-width: 900px) {
    .re-swim__grid { overflow-x: visible; }
    .re-swim__row { min-width: 0; }
    .re-swim__name { position: static; }
}

/*/* ── Comms integration UI ────────────────────────────────────────────── */

.re-followup-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.re-followup-status { font-size: 13px; color: #666; }
.re-followup-sent { color: #4498D8; font-weight: 500; margin-top: 6px; }
.re-followup-sent-meta { color: #8aa0b2; font-weight: 400; }
.re-followup-cta { margin-top: 10px; }

.re-comms-bulk-add { margin-bottom: 12px; }
.re-cal-comms-status { margin-left: 10px; font-size: 13px; color: #666; }

.re-comms-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 99999;
    background: #1d2327; color: #fff; padding: 10px 16px;
    border-radius: 6px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
    transition: opacity .8s ease;
}
.re-comms-toast--out { opacity: 0; }
.re-comms-toast--inbox {
    display: flex; align-items: center; gap: 12px;
    max-width: 480px;
}
.re-comms-toast--inbox .re-comms-connect-btn {
    background: #E6AD23 !important; color: #fff !important;
    border: 0 !important; border-radius: 6px;
    padding: 6px 12px; font-size: 13px; font-weight: 600;
    text-transform: none !important; letter-spacing: normal !important;
}

/* Daily View - inbox connect pill (sits next to "Today's Calendar" heading) */
.re-daily-view__calendar-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.re-daily-view__calendar-header .re-daily-view__panel-heading { margin: 0; }

/* "You're marked as away today" banner + the all-day holiday marker. */
.re-daily-view__holiday-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 4px;
    padding: 12px 14px;
    background: rgba(68, 152, 216, 0.10);
    border: 1px solid rgba(68, 152, 216, 0.4);
    border-radius: 8px;
    color: #d5e2ee; font-size: 14px; line-height: 1.45;
}
.re-daily-view__holiday-icon { font-size: 18px; line-height: 1; }
.re-calendar-allday {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px; font-weight: 600;
}
.re-calendar-allday--away { background: rgba(68, 152, 216, 0.12); color: #9cc7ea; }
.re-calendar-allday__dot { width: 8px; height: 8px; border-radius: 50%; background: #4498D8; }

/* Top bar - date on the left, FVIP quickadd + "Add commitment" on the right. */
.re-daily-view__topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.re-daily-view__topbar .re-daily-view__date { margin-bottom: 0; }
.re-daily-view__topbar-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    min-width: 0;
}

/* FVIP quickadd pills (+F / +V / +I / +P). Compact dark buttons with a
   left-edge tint per kind so the colour from the column heading repeats
   on the button you click to fill that column. */
.re-fvip-quickadd {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px;
    background: #0d1f33;
    color: #e6edf3 !important;
    border: 1px solid #1e3a5f;
    border-left-width: 3px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background 120ms ease, border-color 120ms ease;
}
.re-fvip-quickadd:hover,
.re-fvip-quickadd:focus { background: #13283f; outline: none; }
/* Per-kind tint also paints the "+F" / "+V" / "+I" / "+P" letters so the
   button colour mirrors the column heading underline and the timeline chip
   for the same kind. !important beats the host theme's wildcard
   `button { color: …!important }` rule. */
.re-fvip-quickadd--failure { border-left-color: #4caf73; color: #4caf73 !important; }
.re-fvip-quickadd--victory { border-left-color: #E6AD23; color: #E6AD23 !important; }
.re-fvip-quickadd--insight { border-left-color: #4498D8; color: #4498D8 !important; }
.re-fvip-quickadd--problem { border-left-color: #9c6dd1; color: #9c6dd1 !important; }

/* FVIP four-column row above The 20 / Today's Targets. Mobile default is
   a 2x2 grid (390px iPhone portrait); desktop expands to four columns. */
.re-fvip-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 12px 0 20px;
}
@media (min-width: 720px) {
    .re-fvip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.re-fvip-col {
    background: rgba(13, 31, 51, 0.6);
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
}
.re-fvip-col__heading {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #e6edf3;
    padding-bottom: 6px;
    border-bottom: 2px solid #1e3a5f;
}
.re-fvip-col__heading--failure { border-bottom-color: #4caf73; }
.re-fvip-col__heading--victory { border-bottom-color: #E6AD23; }
.re-fvip-col__heading--insight { border-bottom-color: #4498D8; }
.re-fvip-col__heading--problem { border-bottom-color: #9c6dd1; }

.re-fvip-list {
    list-style: none;
    margin: 0;
    /* !important beats the host theme's `.entry-content ul, .entry-content ol`
       rule which otherwise inflicts a left indent on every <ul> in the post
       content. */
    padding-left: 0 !important;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.re-fvip-item {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    min-width: 0;
    font-size: 13px;
    color: #e6edf3;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(5, 12, 22, 0.4);
    transition: background 120ms ease;
}
.re-fvip-item:hover { background: rgba(68, 152, 216, 0.12); }
.re-fvip-item__time {
    color: #8aa0b2; font-size: 12px; flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.re-fvip-item__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.re-fvip-item__link {
    flex: 0 0 auto;
    font-size: 11px;
    color: #c4d2de;
    background: rgba(68, 152, 216, 0.18);
    border-radius: 999px;
    padding: 2px 8px;
}
.re-fvip-empty {
    margin: 0; color: #8aa0b2; font-size: 12px; font-style: italic;
}

/* FVIP modal - built on the .re-dialog base for backdrop + dialog so the
   dark theme is shared; only the extra bits below are FVIP-specific. */
.re-fvip-modal__explainer {
    margin: 0 0 14px;
    padding: 8px 10px;
    background: rgba(68, 152, 216, 0.10);
    color: #c4d2de;
    border-left: 3px solid #4498D8;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.4;
}
.re-fvip-modal__followup {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 14px;
    padding: 8px 10px;
    background: rgba(230, 173, 35, 0.08);
    border: 1px solid rgba(230, 173, 35, 0.35);
    border-radius: 6px;
    font-size: 13px;
    color: #e6edf3;
    cursor: pointer;
}
.re-fvip-modal__followup input { margin: 0; }
.re-fvip-modal__head--failure h3 { color: #4caf73; }
.re-fvip-modal__head--victory h3 { color: #E6AD23; }
.re-fvip-modal__head--insight h3 { color: #4498D8; }
.re-fvip-modal__head--problem h3 { color: #9c6dd1; }

/* Add-a-commitment modal (dark theme, matches the room/calendar modals). */
.re-addc-req { color: #E6AD23; }

/* Side-by-side date + time row in the commitment modal. Stacks under 480px
   per the mobile-first rule. */
.re-addc-field--row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.re-addc-field--row .re-addc-field__col {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
}
.re-addc-field--row .re-addc-field__col > span {
    display: block; font-size: 13px; font-weight: 600;
    margin-bottom: 4px; color: #c4d2de;
}
.re-addc-field--row .re-addc-field__col > .re-input {
    margin-top: auto;
}
@media (min-width: 480px) {
    .re-addc-field--row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Recurring commitments (v1.67.0) - the "Make this a regular commitment"
   tickbox + reveal panel and the edit/delete scope radios for series rows.
   Dark theme to match the rest of the add-commitment modal. */
.re-addc-checkbox,
.re-addc-radio {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; color: #c4d2de;
    margin: 0; cursor: pointer;
    line-height: 1.4;
}
.re-addc-checkbox input[type="checkbox"],
.re-addc-radio input[type="radio"] {
    margin: 0; accent-color: #4498D8; flex-shrink: 0;
}
.re-addc-recur {
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 8px;
    padding: 12px; margin-bottom: 14px;
    background: rgba(68, 152, 216, 0.05);
}
.re-addc-recur[hidden] { display: none; }
.re-addc-recur > .re-dialog__field:last-child { margin-bottom: 0; }
.re-addc-recur .re-addc-field--row { margin-bottom: 12px; }
.re-addc-help {
    display: block; font-size: 12px; color: #91CAEA;
    margin-top: 4px; line-height: 1.4;
}
.re-addc-inline-select {
    width: auto !important; min-width: 80px;
    display: inline-block;
    margin: 0 4px;
    padding: 4px 8px !important;
}
.re-addc-scope[hidden] { display: none; }
.re-addc-scope__fs {
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 8px;
    padding: 10px 12px; margin: 0;
    background: rgba(68, 152, 216, 0.05);
}
.re-addc-scope__fs legend {
    padding: 0 6px;
    font-size: 13px; font-weight: 600; color: #c4d2de;
}
.re-addc-scope__fs .re-addc-radio {
    padding: 4px 0;
}

/* Repeats-* chip rendered on a recurring obligation card so the user can
   see at a glance which rows are part of a series. Sized to sit next to the
   title without crowding the layout. */
.re-obligation__recurring {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px; font-weight: 600;
    color: #4498D8;
    background: rgba(68, 152, 216, 0.12);
    border: 1px solid rgba(68, 152, 216, 0.35);
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Attach-only type-ahead picker (shared markup, dark on My Day). */
.re-typeahead { position: relative; }
.re-typeahead__results {
    list-style: none; margin: 4px 0 0; padding: 4px;
    position: absolute; left: 0; right: 0; z-index: 5;
    background: #0d1f33; border: 1px solid #1e3a5f; border-radius: 6px;
    max-height: 220px; overflow-y: auto;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.re-typeahead__results[hidden] { display: none; }
.re-typeahead__results li {
    padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.re-typeahead__results li:hover,
.re-typeahead__results li.is-active { background: rgba(68, 152, 216, 0.18); }
.re-typeahead__results li small { color: #8aa0b2; font-size: 12px; }
.re-typeahead__state { display: block; margin-top: 4px; font-size: 12px; color: #8aa0b2; }

.re-recipient-picker { position: relative; display: block; min-width: 0; }
.re-recipient-picker input { width: 100%; box-sizing: border-box; }

.re-inbox-scope-nudge {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(68, 152, 216, 0.10);
    border: 1px solid rgba(68, 152, 216, 0.30);
    color: #d6e6f4;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.re-inbox-scope-nudge p { margin: 0; font-size: 14px; line-height: 1.4; }
.re-inbox-scope-nudge--ok {
    background: rgba(102, 187, 106, 0.08);
    border-color: rgba(102, 187, 106, 0.28);
}
@media (min-width: 640px) {
    .re-inbox-scope-nudge { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .re-inbox-scope-nudge p { flex: 1 1 auto; min-width: 0; }
}

.re-inbox-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(145, 202, 234, 0.20);
    color: #4498D8;
    border: 1px solid rgba(68, 152, 216, 0.40);
    padding: 4px 10px; border-radius: 16px; font-size: 13px;
}
.re-inbox-pill--connected strong { font-weight: 600; color: inherit; }
.re-inbox-pill__action {
    color: #4498D8 !important;
    text-decoration: underline; font-size: 12px;
}
.re-inbox-pill__action:hover { color: #357ab8 !important; }

.re-inbox-empty {
    color: #666; font-size: 14px;
    background: #fafafa; border: 1px dashed #ddd; border-radius: 6px;
    padding: 14px 16px; margin: 6px 0 0;
}

/* ── [re_calendar] full-page grid ──────────────────────────────────────── */
.re-calendar { font-family: Montserrat, system-ui, sans-serif; color: inherit; }

.re-calendar__toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.re-calendar__toolbar-left, .re-calendar__toolbar-right {
    display: flex; align-items: center; gap: 8px;
}
.re-calendar__title {
    margin: 0 0 0 12px; font-size: 22px; font-weight: 700; color: #4498D8;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; font-family: inherit; line-height: 1.2; text-align: left;
    padding: 12px 22px !important;
    background: rgba(145, 202, 234, 0.15) !important;
    border: 1px solid rgba(68, 152, 216, 0.30) !important;
    border-radius: 8px !important;
    text-transform: none !important; letter-spacing: normal !important;
}
.re-calendar__title:hover {
    background: rgba(145, 202, 234, 0.25) !important;
    border-color: rgba(68, 152, 216, 0.55) !important;
}
.re-calendar__title-caret {
    font-size: 12px; color: #4498D8; opacity: .65;
    transition: transform .15s ease;
}
.re-calendar__title[aria-expanded="true"] .re-calendar__title-caret { transform: rotate(180deg); }
.re-calendar__nav-btn,
.re-calendar__today-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: rgba(145, 202, 234, 0.15);
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 8px;
    color: inherit !important; text-decoration: none !important;
    font-size: 20px; line-height: 1;
}
.re-calendar__today-btn { width: auto; padding: 0 14px; font-size: 14px; font-weight: 500; }
.re-calendar__nav-btn:hover, .re-calendar__today-btn:hover {
    background: rgba(145, 202, 234, 0.25); border-color: rgba(68, 152, 216, 0.55);
    text-decoration: none !important;
}

.re-calendar__view-switcher {
    display: inline-flex; align-items: center; padding: 3px;
    background: rgba(145, 202, 234, 0.12);
    border: 1px solid rgba(68, 152, 216, 0.25);
    border-radius: 8px;
}
.re-calendar__view {
    padding: 6px 12px; font-size: 13px; font-weight: 500;
    color: inherit !important; text-decoration: none !important;
    border-radius: 6px; transition: all .15s ease;
}
.re-calendar__view:hover { background: rgba(145, 202, 234, 0.20); text-decoration: none !important; }
.re-calendar__view.is-active { background: #4498D8; color: #fff !important; }

.re-calendar__create-btn {
    background: #E6AD23; color: #fff; border: 0;
    padding: 8px 16px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: inherit;
    text-transform: none !important; letter-spacing: normal !important;
    transition: background .15s ease;
}
.re-calendar__create-btn:hover { background: #c8951a; }
.re-calendar__create-btn:disabled { background: #8F9FA6; cursor: not-allowed; }

.re-calendar__connect-cta {
    background: rgba(145, 202, 234, 0.10);
    border: 1px dashed rgba(68, 152, 216, 0.30);
    border-radius: 8px; padding: 32px; text-align: center;
}
.re-calendar__connect-cta p { margin: 0 0 12px; }

/* Week view */
.re-calendar__week-grid {
    display: grid; gap: 8px;
}
.re-calendar__day {
    background: rgba(145, 202, 234, 0.06);
    border: 1px solid rgba(68, 152, 216, 0.18);
    border-radius: 8px; padding: 10px; min-height: 320px;
    /* Belt-and-braces with the grid-template-columns minmax(0, 1fr):
     * a grid item's default min-width is auto (= min-content), so a
     * long event title or meta string could push the day column past
     * the viewport even when the track is minmax(0, 1fr). Setting it
     * to 0 here lets every column stay within its allotted fraction
     * and keeps Thu/Fri on screen at narrow widths. */
    min-width: 0;
}
.re-calendar__day.is-today {
    background: rgba(230, 173, 35, 0.06);
    border-color: rgba(230, 173, 35, 0.40);
}
.re-calendar__day-header {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 6px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(68, 152, 216, 0.15);
}
.re-calendar__day-name { font-size: 12px; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
.re-calendar__day-num  { font-size: 18px; font-weight: 600; }
.re-calendar__day.is-today .re-calendar__day-num { color: #E6AD23; }

.re-calendar__day-empty { color: #8F9FA6; font-size: 12px; margin: 4px 0; }

.re-calendar__event {
    background: rgba(143, 159, 166, 0.10);
    border: 1px solid rgba(143, 159, 166, 0.28);
    border-left: 3px solid #8F9FA6;
    border-radius: 6px; padding: 6px 10px;
    margin-bottom: 6px; font-size: 13px;
}
.re-calendar__event.is-now {
    background: rgba(230, 173, 35, 0.12);
    border-color: rgba(230, 173, 35, 0.55);
    border-left-color: #E6AD23;
}
.re-calendar__event.is-past { opacity: .55; }
.re-calendar__event-time  { font-size: 12px; font-weight: 600; opacity: .8; }
.re-calendar__event-title {
    font-weight: 600; margin-top: 1px; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.re-calendar__event-meta {
    margin-top: 2px; font-size: 11px; opacity: .65;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-calendar__event-join {
    display: inline-block; margin-top: 6px; padding: 3px 10px;
    background: #4498D8; color: #fff !important; text-decoration: none;
    border-radius: 4px; font-size: 11px; font-weight: 600;
}
.re-calendar__event.is-now .re-calendar__event-join { background: #E6AD23; }

/* Month view */
.re-calendar__month-grid {
    border: 1px solid rgba(68, 152, 216, 0.20); border-radius: 8px; overflow: hidden;
}
.re-calendar__month-header,
.re-calendar__month-body {
    display: grid; grid-template-columns: repeat(7, 1fr);
}
.re-calendar__month-header {
    background: rgba(145, 202, 234, 0.10);
    border-bottom: 1px solid rgba(68, 152, 216, 0.20);
}
.re-calendar__month-header-cell {
    padding: 8px 10px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; opacity: .7; letter-spacing: .04em;
}
.re-calendar__month-cell {
    min-height: 110px; padding: 6px;
    border-right: 1px solid rgba(68, 152, 216, 0.12);
    border-bottom: 1px solid rgba(68, 152, 216, 0.12);
    overflow: hidden;
}
.re-calendar__month-cell:nth-child(7n) { border-right: 0; }
.re-calendar__month-cell.is-other-month { opacity: .45; }
.re-calendar__month-cell.is-today { background: rgba(230, 173, 35, 0.08); }
.re-calendar__month-cell-num {
    display: inline-block;
    font-weight: 600; font-size: 13px; margin-bottom: 4px;
    color: inherit !important; text-decoration: none !important;
}
.re-calendar__month-cell-num:hover { text-decoration: underline !important; }
.re-calendar__month-cell.is-today .re-calendar__month-cell-num { color: #E6AD23 !important; }

/* Away / on-holiday days - soft wash on the cell, with a solid mustard all-day
   chip so the holiday stands out at a glance. */
.re-calendar__month-cell.is-away,
.re-calendar__day.is-away { background: rgba(230, 173, 35, 0.08); }
.re-calendar__allday-chip {
    display: inline-block;
    margin: 0 0 4px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px; font-weight: 600; line-height: 1.5;
}
.re-calendar__allday-chip--away { background: #E6AD23; color: #1a1a1a; }
.re-calendar__month-event {
    display: flex; gap: 4px; align-items: baseline;
    padding: 2px 4px; border-radius: 3px; font-size: 11px;
    background: rgba(143, 159, 166, 0.16); color: inherit;
    margin-bottom: 2px; overflow: hidden;
}
.re-calendar__month-event-time { font-weight: 600; opacity: .85; flex-shrink: 0; }
.re-calendar__month-event-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-calendar__month-more {
    display: block;
    font-size: 10px; opacity: .65; padding: 2px 4px; font-weight: 500;
    color: inherit !important; text-decoration: none !important;
}
.re-calendar__month-more:hover { opacity: 1; text-decoration: underline !important; }

/* Make event blocks feel clickable (popover trigger) */
.re-calendar__event,
.re-calendar__month-event { cursor: pointer; }
.re-calendar__event:hover,
.re-calendar__month-event:hover { outline: 1px solid rgba(68, 152, 216, 0.55); }

.re-calendar__event.is-cancelled,
.re-calendar__month-event.is-cancelled {
    opacity: .45; text-decoration: line-through;
}

/* Transcript-attached indicator. Mustard accent so it pops against the
 * default blue event tint without clashing with the brand. */
.re-calendar__event.has-transcript {
    border-left-color: #E6AD23;
}
.re-calendar__event-tx-icon,
.re-calendar__month-event-tx-icon {
    display: inline-flex; align-items: center;
    margin-left: 4px;
    color: #E6AD23;
    vertical-align: middle;
    line-height: 1;
}
.re-calendar__month-event.has-transcript {
    background: rgba(230, 173, 35, 0.18);
}
.re-calendar__month-event-tx-icon {
    margin-left: auto;   /* push to the right end of the flex row */
}

/* Prep-completed indicator. Brand-blue accent on top of the default grey
 * event tint so meetings with a "Read this aloud" brief
 * (re_meetings.brief_generated=1) stand out and unprepared meetings stay
 * the muted grey baseline. */
.re-calendar__event.has-prep {
    background: rgba(68, 152, 216, 0.16);
    border-color: rgba(68, 152, 216, 0.40);
    border-left-color: #4498D8;
}
.re-calendar__month-event.has-prep {
    background: rgba(68, 152, 216, 0.22);
}

/* ── Event-action popover ───────────────────────────────────────────── */
.re-cal-popover {
    position: fixed; z-index: 99998;
    min-width: 260px; max-width: 340px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    color: #e6edf3;
    font-size: 13px;
}
.re-cal-popover[hidden] { display: none; }
.re-cal-popover__close {
    position: absolute; top: 6px; right: 8px;
    background: transparent; border: 0; padding: 4px 8px;
    color: #8F9FA6; font-size: 18px; line-height: 1; cursor: pointer;
}
.re-cal-popover__close:hover { color: #e6edf3; }
.re-cal-popover__title {
    margin: 0 24px 6px 0;
    font-size: 15px; font-weight: 600; color: #4498D8;
    line-height: 1.3;
}
.re-cal-popover__when {
    margin: 0 0 8px;
    font-size: 12px; color: #c9d4dd; opacity: .85;
}
.re-cal-popover__attendees {
    margin: 0 0 12px;
    font-size: 12px; color: #c9d4dd; opacity: .75;
    word-break: break-word;
}
.re-cal-popover__actions {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.re-cal-popover__actions .re-btn { font-size: 12px; padding: 6px 12px; }
.re-cal-popover__note {
    margin: 10px 0 0; font-size: 12px; color: #8F9FA6; line-height: 1.4;
}
.re-cal-popover__cancel-confirm[hidden] { display: none; }
.re-cal-popover__cancel-hint {
    margin: 0 0 10px; font-size: 12px; color: #c9d4dd; opacity: .85; line-height: 1.45;
}
.re-cal-popover__cancel-reason {
    width: 100%; box-sizing: border-box; margin-bottom: 10px; font-size: 12px;
}
.re-cal-popover__cancel-error {
    margin: 0 0 10px; font-size: 12px; color: #ff6b6b; line-height: 1.4;
}
.re-cal-popover__cancel-actions {
    display: flex; flex-direction: column; gap: 8px;
}
.re-cal-popover__cancel-actions .re-btn { font-size: 12px; padding: 6px 12px; justify-content: center; }

/* ── Jump-to-date mini-calendar popover ──────────────────────────────── */
.re-cal-jump {
    position: fixed; z-index: 99998;
    width: min(94vw, 340px);
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    color: #e6edf3;
    font-size: 13px;
}
.re-cal-jump[hidden] { display: none; }
.re-cal-jump__head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.re-cal-jump__label {
    flex: 1; min-width: 0;
    background: none; border: 0; padding: 8px; cursor: pointer;
    border-radius: 6px;
    font-family: inherit; font-size: 14px; font-weight: 600;
    color: #4498D8; text-align: center;
}
.re-cal-jump__label:hover { background: rgba(145, 202, 234, 0.20); }
.re-cal-jump__nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: none;
    background: rgba(145, 202, 234, 0.15);
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 6px;
    color: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.re-cal-jump__nav:hover {
    background: rgba(145, 202, 234, 0.25); border-color: rgba(68, 152, 216, 0.55);
}
.re-cal-jump__label,
.re-cal-jump__nav,
.re-cal-jump__day,
.re-cal-jump__month {
    text-transform: none !important; letter-spacing: normal !important;
}
.re-cal-jump__grid { display: grid; gap: 5px; }
.re-cal-jump__week,
.re-cal-jump__days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.re-cal-jump__months { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.re-cal-jump__wd {
    text-align: center; padding: 6px 0 8px;
    font-size: 11px; font-weight: 600; color: #8F9FA6;
}
.re-cal-jump__day,
.re-cal-jump__month {
    background: none; border: 0; cursor: pointer;
    font-family: inherit; color: #e6edf3;
    border-radius: 6px;
}
.re-cal-jump__day {
    aspect-ratio: 1 / 1; min-height: 40px; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.re-cal-jump__month { padding: 16px 0; font-size: 14px; }
.re-cal-jump__day:hover,
.re-cal-jump__month:hover { background: rgba(145, 202, 234, 0.20); }
.re-cal-jump__day.is-other-month { opacity: .45; }
.re-cal-jump__day.is-today { box-shadow: inset 0 0 0 1px rgba(68, 152, 216, 0.70); }
.re-cal-jump__day.is-selected,
.re-cal-jump__month.is-selected {
    background: #E6AD23; color: #fff; font-weight: 600;
}
.re-cal-jump__day.is-selected:hover,
.re-cal-jump__month.is-selected:hover { background: #c8951a; }

/* Warn variant for the Cancel meeting button */
.re-btn--warn {
    background: #C0392B !important;
    color: #fff !important;
    border-color: #C0392B !important;
}
.re-btn--warn:hover { background: #A93226 !important; border-color: #A93226 !important; }

/* ── Shared "Paste transcript" modal ─────────────────────────────────── */
/* Brand-aligned: dark navy panel + Montserrat, matching the calendar    */
/* surface that hosts it. Header / scrollable body / fixed footer so a   */
/* 2-hour transcript paste doesn't blow past the viewport.               */
.re-tx-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.re-tx-modal[hidden] { display: none; }
.re-tx-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.re-tx-modal__panel {
    position: relative; z-index: 1;
    width: min(720px, 92vw);
    max-height: 88vh;
    display: flex; flex-direction: column;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    color: #e6edf3;
    overflow: hidden;
}
.re-tx-modal__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 4px 22px;
}
.re-tx-modal__title {
    margin: 0;
    font-size: 18px; font-weight: 600; color: #4498D8;
    line-height: 1.3;
}
.re-tx-modal__close {
    background: transparent; border: 0; padding: 0 6px;
    color: #8F9FA6; font-size: 24px; line-height: 1; cursor: pointer;
    margin-top: -2px;
}
.re-tx-modal__close:hover { color: #e6edf3; }
.re-tx-modal__subtitle {
    margin: 0;
    padding: 0 22px 14px;
    font-size: 13px; color: #c9d4dd; opacity: .85;
    border-bottom: 1px solid #1e3a5f;
}
.re-tx-modal__subtitle[hidden] { display: none; }
.re-tx-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 22px 8px;
    display: flex; flex-direction: column; gap: 14px;
    min-height: 0;   /* let the inner textarea shrink rather than overflow */
}
.re-tx-modal__attendee-row,
.re-tx-modal__context-row { margin: 0; }
.re-tx-modal__panel select[data-tx-context] {
    display: block; width: 100%;
    padding: 10px 12px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #06121f;
    color: #e6edf3;
    font-family: inherit; font-size: 13px;
    box-sizing: border-box;
    margin-top: 6px;
}
.re-tx-modal__panel select[data-tx-context]:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.25);
}
.re-tx-modal__label {
    display: block;
    font-size: 13px; font-weight: 600;
    color: #c9d4dd;
}
.re-tx-modal__label--body {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    min-height: 0;
}
.re-tx-modal__label-meta {
    display: block;
    font-size: 12px; font-weight: 400;
    color: #8F9FA6;
    margin: 2px 0 6px;
}
.re-tx-modal__panel input[type="email"],
.re-tx-modal__panel textarea {
    display: block; width: 100%;
    padding: 10px 12px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #06121f;
    color: #e6edf3;
    font-family: inherit; font-size: 13px;
    box-sizing: border-box;
    margin-top: 6px;
}
.re-tx-modal__label--body textarea {
    flex: 1 1 auto;
    min-height: 260px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.45;
}
.re-tx-modal__panel input[type="email"]::placeholder,
.re-tx-modal__panel textarea::placeholder {
    color: #5b6b78;
}
.re-tx-modal__panel input[type="email"]:focus,
.re-tx-modal__panel textarea:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.25);
}
.re-tx-modal__actions {
    display: flex; align-items: center; gap: 8px;
    justify-content: flex-end;
    padding: 12px 22px;
    border-top: 1px solid #1e3a5f;
    background: #081522;
}
.re-tx-modal__status {
    margin-right: auto;
    font-size: 12px; color: #c9d4dd; opacity: .8;
    font-variant-numeric: tabular-nums;   /* keep elapsed-time counter from jittering */
}
.re-tx-modal__status--ok {
    color: #2EAA59 !important;
    font-weight: 600;
    opacity: 1 !important;
}

/* Indeterminate progress bar shown above the action row while the AI
 * runs. Sits between the body and footer so the user has an obvious
 * "still working" cue alongside the elapsed-time counter. */
.re-tx-modal__progress {
    position: relative;
    height: 3px;
    background: rgba(68, 152, 216, 0.15);
    overflow: hidden;
}
.re-tx-modal__progress[hidden] { display: none; }
.re-tx-modal__progress-bar {
    position: absolute; top: 0; bottom: 0;
    width: 30%;
    background: linear-gradient(90deg, transparent 0%, #4498D8 50%, transparent 100%);
    animation: re-tx-progress-slide 1.4s ease-in-out infinite;
}
@keyframes re-tx-progress-slide {
    0%   { left: -30%; }
    100% { left: 100%; }
}

/* Busy state: visually dim the form area and lock pointer events to
 * reinforce that the user can't interact mid-run. The buttons / inputs
 * are also disabled at the JS layer, this is just the visual cue. */
.re-tx-modal__panel.is-busy .re-tx-modal__body {
    opacity: 0.55;
    pointer-events: none;
}
.re-tx-modal__panel.is-busy textarea,
.re-tx-modal__panel.is-busy input[type="email"],
.re-tx-modal__panel.is-busy select[data-tx-context] {
    cursor: not-allowed;
}

/* ── Create-event modal ─────────────────────────────────────────────── */
.re-cal-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.re-cal-modal[hidden] { display: none; }
/* TinyMCE renders link / image / table dialogs as body-level overlays at its
   default z-index, which sits below .re-cal-modal (99999), so the dialog
   appears behind the signature edit modal. Raise both TinyMCE 4
   (.mce-window / .mce-floatpanel) and TinyMCE 5/6 (.tox-tinymce-aux,
   .tox-dialog-wrap) container chains above the modal. */
.mce-floatpanel,
.mce-window,
.mce-tooltip,
.tox.tox-tinymce-aux,
.tox-dialog-wrap,
.tox-dialog {
    z-index: 100001 !important;
}
.re-cal-modal__backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.re-cal-modal__panel {
    position: relative; background: #fff; color: #223F4C;
    border-radius: 12px; width: min(560px, 92vw);
    max-height: 94vh; overflow-y: auto; padding: 28px;
    box-shadow: 0 12px 40px rgba(0,0,0,.30);
    font-family: Montserrat, system-ui, sans-serif;
}
.re-cal-modal__panel--wide { width: min(720px, 96vw); }
.re-dialog__panel.is-dropping { outline: 3px dashed #4498D8; outline-offset: -8px; }
/* Ensure modal headings stay visible on dark site themes whose global
 * h1/h2/h3 colour rules would otherwise leak through. */
.re-cal-modal__panel h1,
.re-cal-modal__panel h2,
.re-cal-modal__panel h3 { color: #4498D8 !important; margin: 0 0 16px; }

/* Email compose attachments tray */
.re-email-attachments { margin-top: 4px; }
.re-email-attachments__list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.re-email-attachment {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(145, 202, 234, 0.15); color: #223F4C;
    border: 1px solid #91CAEA; border-radius: 18px;
    padding: 4px 6px 4px 12px; font-size: 13px; max-width: 280px;
}
.re-email-attachment__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-email-attachment__size { color: #576E7A; font-size: 12px; }
.re-email-attachment__remove {
    background: transparent !important; border: 0 !important; cursor: pointer;
    color: #576E7A; font-size: 18px; line-height: 1; padding: 0 6px !important;
    text-transform: none !important; letter-spacing: normal !important;
}
.re-email-attachment__remove:hover { color: #c0392b; }
.re-email-attachments__row { display: flex; align-items: center; gap: 12px; }
.re-email-attachments__hint { color: #8F9FA6; font-size: 12px; }
.re-email-compose-sig-label select { width: 100%; }
.re-email-compose-sig-preview { margin-top: 4px; }
.re-email-compose-sig-preview__label { margin: 0 0 6px; color: #8aa0b2; font-size: 12px; }
/* Selector intentionally raised to `.re-cal-form label.re-email-compose-tracking`
   so it beats the generic `.re-cal-form label { display: flex; flex-direction: column; }`
   that stacks every form label vertically. */
.re-cal-form label.re-email-compose-tracking {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin-top: 0;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    cursor: pointer;
}
.re-email-compose-tracking input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    margin-top: 2px;
    accent-color: #4498D8;
}
.re-email-compose-tracking__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.re-email-compose-tracking__label { color: #e6edf3; font-size: 14px; font-weight: 600; }
.re-email-compose-tracking__hint  { color: #8aa0b2; font-size: 12px; line-height: 1.4; }
.re-cal-form label.re-email-compose-tracking.is-dnt {
    background: rgba(122, 42, 42, 0.18);
    border: 1px solid rgba(232, 201, 201, 0.35);
    cursor: not-allowed;
}
.re-email-compose-tracking.is-dnt .re-email-compose-tracking__hint { color: #E8C9C9; }
.re-email-compose-tracking input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.6; }

/* "Follow up if no reply" row. The sentence flows as plain inline text so the
   picker can sit between the words and the whole thing wraps naturally at
   narrow widths. Picker selector is raised to .re-cal-form select... so it
   beats the global .re-cal-form select { width: 100%; min-height: 46px; }
   rule lower in the file. */
.re-email-compose-followup {
    margin-top: 0;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.re-cal-form label.re-email-compose-followup__line {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    min-width: 0;
}
.re-email-compose-followup__line input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    accent-color: #4498D8;
    margin: 0;
    transform: translateY(2px); /* nudge into visual baseline alignment */
}
.re-email-compose-followup__sentence {
    flex: 1 1 auto;
    min-width: 0;
    color: #e6edf3;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}
.re-email-compose-followup__label { color: #e6edf3; }
.re-cal-form select.re-email-compose-followup__picker {
    display: inline-block;
    vertical-align: middle;
    width: 4.5rem;
    min-width: 0;
    max-width: 4.5rem;
    min-height: 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.08);
    color: #e6edf3;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0 2px;
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
.re-cal-form select.re-email-compose-followup__picker:focus {
    outline: 2px solid #4498D8;
    outline-offset: 1px;
    border-color: #4498D8;
    box-shadow: none;
}
.re-email-compose-followup__hint {
    margin: 2px 0 0 24px;
    color: #8aa0b2;
    font-size: 12px;
    line-height: 1.35;
}

/* Compose-modal-specific space tightening so the form fits in a 94vh modal
   without scrolling. Scoped to .re-email-modal so other modals using
   .re-cal-form keep their existing rhythm. */
.re-email-modal .re-cal-modal__panel { padding: 20px 24px; }
.re-email-modal .re-cal-form { gap: 10px; }
.re-email-modal .re-cal-modal__panel h2 { margin: 0 0 10px; }
.re-email-modal .re-cal-form__actions { margin-top: 0; }
.re-email-modal .re-email-attachments__row { gap: 8px; }
.re-email-compose-sig-preview__body {
    background: #fff;
    color: #223F4C;
    border: 1px solid #E1E6E9;
    border-radius: 6px;
    padding: 12px 14px;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    max-width: 100%;
    overflow-x: auto;
}
.re-email-compose-sig-preview__body p { margin: 0 0 6px; }
.re-email-compose-sig-preview__body p:last-child { margin: 0; }
.re-email-compose-sig-preview__body img { max-width: 100% !important; max-height: 160px !important; height: auto; }
.re-email-compose-sig-preview__body a { color: #4498D8 !important; text-decoration: underline !important; }
.re-email-compose-sig-preview__body a:hover { color: #357ab8 !important; }
.re-email-compose-sig-preview__body table { display: block; max-width: 100%; overflow-x: auto; }

.re-email-compose-chain-preview { margin-top: 4px; }
.re-email-compose-chain-preview__label {
    margin: 0 0 6px;
    color: #8aa0b2;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.re-email-compose-chain-preview__toggle {
    background: none;
    border: 0;
    padding: 0;
    color: #4498D8;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.re-email-compose-chain-preview__toggle:hover { color: #357ab8; }
.re-email-compose-chain-preview__body {
    background: #fff;
    color: #223F4C;
    border: 1px solid #E1E6E9;
    border-radius: 6px;
    padding: 12px 14px;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    max-width: 100%;
    overflow-x: auto;
}
.re-email-compose-chain-preview__body p { margin: 0 0 6px; }
.re-email-compose-chain-preview__body p:last-child { margin: 0; }
.re-email-compose-chain-preview__body img { max-width: 100% !important; height: auto; }
.re-email-compose-chain-preview__body a { color: #4498D8 !important; text-decoration: underline !important; }
.re-email-compose-chain-preview__body table { display: block; max-width: 100%; overflow-x: auto; }
.re-email-compose-chain-preview__body blockquote {
    margin: 0 0 0 8px;
    padding-left: 10px;
    border-left: 2px solid #E1E6E9;
    color: #4a5b66;
}

/* User settings page */
.re-user-settings { max-width: 920px; margin: 0 auto; padding: 24px; font-family: Montserrat, system-ui, sans-serif; color: #223F4C; }
.re-user-settings__header h1 { color: #4498D8; margin: 0 0 4px; }
.re-user-settings__section { background: #fff; border: 1px solid #E1E6E9; border-radius: 12px; padding: 24px; margin-top: 24px; }
/* When .re-org-admin is used as a section modifier here (rather than its standalone [re_org_admin] page wrapper at L11783), restore the panel's horizontal padding. */
.re-user-settings__section.re-org-admin { padding: 24px; }

/* Invite someone to join (org-admin section of [re_user_settings]). Mobile-first. */
.re-org-invite { margin-top: 20px; padding-top: 20px; border-top: 1px solid #E1E6E9; }
.re-org-invite__title { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: #fff; }
.re-org-invite__list { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.re-org-invite__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #E1E6E9; border-radius: 8px; }
.re-org-invite__email { min-width: 0; font-weight: 500; word-break: break-word; color: #1D2B36; }
.re-org-invite__badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #4498D8; color: #fff; }
.re-org-invite__pending { font-size: 12px; color: #576E7A; margin-left: auto; }
.re-org-invite__form { display: flex; flex-direction: column; gap: 12px; }
.re-org-invite__form .re-form-input { width: 100%; box-sizing: border-box; }
.re-org-invite__admin { display: inline-flex; align-items: center; gap: 8px; }
.re-org-invite__status { color: #576E7A; font-size: 12px; }
@media (min-width: 480px) {
    .re-org-invite__form { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .re-org-invite__form .re-form-input { flex: 1 1 240px; min-width: 0; }
}
/* Members list (org-admin panel). Dark-theme mobile-first. */
.re-org-members { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.re-org-members__title { font-size: 16px; font-weight: 600; margin: 0 0 10px; color: #fff; }
.re-org-members__list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.re-org-members__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; }
.re-org-members__who { display: flex; flex-direction: column; min-width: 0; }
.re-org-members__name { font-weight: 500; color: #fff; word-break: break-word; }
.re-org-members__email { font-size: 12px; color: rgba(255, 255, 255, 0.6); word-break: break-word; }
.re-org-members__you { margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.re-org-members__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.re-org-members__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.re-org-members__confirm-q { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.re-org-members__status { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.re-org-members__note { margin-top: 4px; }
/* Calling & SMS seats (org-admin panel) */
.re-telephony-seats { margin-top: 20px; padding-top: 20px; border-top: 1px solid #E1E6E9; }
.re-telephony-seats__buy { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 16px; }
.re-telephony-seats__count { display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; color: #1D2B36; }
.re-telephony-seats__count input { width: 100px; box-sizing: border-box; }
.re-telephony-seats__members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.re-telephony-seats__member { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #E1E6E9; border-radius: 8px; }
.re-telephony-seats__name { min-width: 0; font-weight: 500; word-break: break-word; color: #1D2B36; }
.re-telephony-seats__member > .re-btn { margin-left: auto; }
.re-telephony-seats__badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #4498D8; color: #fff; }
.re-user-settings__section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.re-user-settings__section-head h2 { margin: 0; color: #4498D8; }
.re-user-settings__hint { color: #576E7A; font-size: 13px; margin: 4px 0 0; max-width: 640px; }
.re-user-settings__tel-number { font-size: 20px; font-weight: 700; letter-spacing: 0.5px; color: #4498D8; margin: 12px 0 0; }
.re-tel-badge { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0; vertical-align: middle; }
.re-tel-badge--active { background: rgba(55, 178, 77, 0.16); color: #37B24D; }
.re-tel-badge--pending { background: rgba(230, 173, 35, 0.16); color: #E6AD23; }
.re-tel-inbound { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.re-user-settings__subhead { margin: 0; font-size: 14px; font-weight: 600; color: #4498D8; }
.re-user-settings__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.re-user-settings__field > span { font-size: 13px; color: #B7C4CD; }
.re-user-settings__field > input { width: 100%; box-sizing: border-box; }
.re-sig-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.re-sig-empty { color: #8F9FA6; font-style: italic; }
.re-sig-row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 14px 16px; border: 1px solid #E1E6E9; border-radius: 8px;
    background: #fff;
}
.re-sig-row__main { flex: 1; min-width: 0; }
.re-sig-row__label { font-size: 14px; }
.re-sig-row__default-pill { display: inline-block; margin-left: 8px; padding: 1px 8px; background: #E6AD23; color: #fff; border-radius: 10px; font-size: 11px; font-weight: 600; }
.re-sig-row__preview { color: #576E7A; font-size: 13px; margin-top: 6px; border-left: 3px solid #91CAEA; padding-left: 12px; }
/* Honour any width/height the user set on the image in their signature
 * (so the preview matches what gets emailed). max-* is a safety cap only,
 * applied with !important to keep oversized or unsized images contained. */
.re-sig-row__preview img { max-width: 100% !important; max-height: 200px !important; }
/* Force readable link styling - the site theme sets `a { color: #fff }` for
 * its dark layout, which renders as invisible against the white preview. */
.re-sig-row__preview a { color: #4498D8 !important; text-decoration: underline !important; }
.re-sig-row__preview a:hover { color: #357ab8 !important; }
.re-sig-row__actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; }
.re-sig-row--readonly { background: rgba(145, 202, 234, 0.08); }
.re-inbox-row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 14px 16px; border: 1px solid #E1E6E9; border-radius: 8px; background: #fff;
}
.re-inbox-row__main { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.re-inbox-row__email { font-size: 14px; color: #223F4C; word-break: break-all; }
.re-inbox-row__upstream {
    display: inline-block; padding: 1px 8px; background: #91CAEA; color: #fff;
    border-radius: 10px; font-size: 11px; font-weight: 600;
}
.re-inbox-row__muted { color: #8F9FA6; font-style: italic; }
.re-inbox-row__actions { flex-shrink: 0; }
.re-sig-globals { margin-top: 24px; }
.re-sig-globals h3 { margin: 0 0 4px; color: #576E7A; font-size: 14px; }
.re-sig-edit-default { flex-direction: row; align-items: center; gap: 8px !important; font-size: 13px; }
.re-btn--danger { color: #c0392b !important; }

/* Working hours - per-day time-range editor (user settings page). Dark
 * theme; mustard #E6AD23 only for focus/accent per brand. One row per day:
 * checkbox + one or more [start]-[end] dropdown pairs + actions. */
.re-user-settings__section-actions { display: flex; gap: 8px; align-items: center; }
.re-wh-days { display: flex; flex-direction: column; gap: 10px; }
.re-wh-day {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
    gap: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
}
.re-wh-day.is-disabled { background: rgba(255,255,255,0.02); }
.re-wh-day__toggle {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    color: #FFFFFF;
    padding-top: 8px;
}
.re-wh-day__toggle input[type="checkbox"] {
    width: 20px; height: 20px;
    margin: 0; padding: 0;
    accent-color: #E6AD23;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none;
    background: transparent;
    border-color: rgba(255,255,255,0.4);
}
/* Astra applies background-color:white + border-color:white to checked
 * checkboxes; clear those so accent-color renders the mustard fill. */
.re-wh-day__toggle input[type="checkbox"]:checked {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}
.re-wh-day__name { font-weight: 600; font-size: 14px; }
.re-wh-day__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.re-wh-day__ranges { display: flex; flex-direction: column; gap: 6px; }
.re-wh-day__unavailable {
    color: rgba(255,255,255,0.50); font-style: italic; font-size: 13px; padding: 8px 0;
}
.re-wh-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.re-wh-range__start, .re-wh-range__end {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.08);
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 4px;
    padding: 6px 28px 6px 10px;
    font-size: 14px;
    font-family: inherit;
    height: 36px;
    width: auto;
    min-width: 96px;
    cursor: pointer;
    box-shadow: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
    background-position: calc(100% - 14px) 16px, calc(100% - 9px) 16px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.re-wh-range__start option, .re-wh-range__end option { background: #1B2C40; color: #FFFFFF; }
.re-wh-range__start:focus, .re-wh-range__end:focus {
    outline: 0; border-color: #E6AD23; box-shadow: 0 0 0 2px rgba(230,173,35,0.35);
}
.re-wh-range__sep { color: rgba(255,255,255,0.60); font-size: 13px; }
.re-wh-range__remove {
    background: transparent; border: 0; padding: 2px 8px;
    color: rgba(255,255,255,0.55); cursor: pointer;
    font-size: 22px; line-height: 1;
    border-radius: 4px; box-shadow: none;
}
.re-wh-range__remove:hover { color: #FFFFFF; background: rgba(255,255,255,0.10); }
.re-wh-day__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.re-wh-link {
    background: transparent; border: 0; padding: 0;
    color: #4498D8; cursor: pointer;
    font-size: 13px; font-family: inherit; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    box-shadow: none; line-height: 1;
}
.re-wh-link:hover { text-decoration: underline; color: #4498D8; background: transparent; }

.re-cal-modal__close {
    position: absolute; top: 8px; right: 12px;
    background: transparent; border: 0; font-size: 28px; cursor: pointer;
    color: #8F9FA6; line-height: 1; padding: 6px;
}
.re-cal-modal__close:hover { color: #223F4C; }

.re-cal-modal__minimise {
    position: absolute; top: 8px; right: 46px;
    background: transparent; border: 0; font-size: 28px; cursor: pointer;
    color: #8F9FA6; line-height: 1; padding: 6px;
}
.re-cal-modal__minimise:hover { color: #223F4C; }

/* Minimised email-draft pill. Fixed bottom-right, sitting above the
   feedback "?" trigger (which lives at bottom/right: 32px). Dark to match
   the site's frontend theme. */
.re-compose-pill {
    /* Positioning is owned by the floating dock (re-floating-dock.css). */
    display: flex; align-items: center; gap: 4px;
    max-width: min(320px, calc(100vw - 32px));
    background: #0d1f33; color: #e6edf3;
    border: 1px solid #1e3a5f; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-family: Montserrat, system-ui, sans-serif;
}
.re-compose-pill[hidden] { display: none; }
.re-compose-pill__open {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    background: transparent; border: 0; color: inherit; cursor: pointer;
    padding: 10px 6px 10px 12px; font: inherit; text-align: left;
}
.re-compose-pill__icon { flex: 0 0 auto; color: #4498D8; display: flex; }
.re-compose-pill__icon svg { width: 18px; height: 18px; }
.re-compose-pill__subject {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px;
}
.re-compose-pill__close {
    flex: 0 0 auto;
    background: transparent; border: 0; color: #8aa0b2; font-size: 22px;
    line-height: 1; cursor: pointer; padding: 8px 12px 8px 4px;
}
.re-compose-pill__close:hover { color: #e6edf3; }

.re-cal-step h2 { margin: 0 0 16px; font-size: 22px; color: #4498D8; }
.re-cal-step__sub { margin: 0 0 16px; color: #576E7A; font-size: 14px; }
.re-cal-step__back {
    background: transparent !important; border: 0 !important; cursor: pointer;
    color: #4498D8 !important; font-size: 13px; padding: 0 !important; margin: 0 0 12px;
    font-family: inherit;
    text-transform: none !important; letter-spacing: normal !important;
    box-shadow: none !important;
    display: inline-flex; align-items: center; gap: 4px;
}
.re-cal-step__back:hover { text-decoration: underline; background: transparent !important; }
.re-cal-step__back-arrow { font-size: 18px; line-height: 1; display: inline-block; }

.re-cal-duration-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.re-cal-duration {
    padding: 16px 12px; background: #fff; border: 1px solid #C8CFD3;
    color: #223F4C; border-radius: 8px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    font-family: inherit;
    text-transform: none !important; letter-spacing: normal !important;
    white-space: nowrap;
    transition: all .15s ease;
}
.re-cal-duration:hover { background: #4498D8; color: #fff; border-color: #4498D8; }

.re-cal-slot-day-row {
    display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px;
}
.re-cal-slot-day-row label {
    flex: 1; display: flex; flex-direction: column;
    font-size: 13px; font-weight: 500; gap: 4px;
}
.re-cal-slot-day-row input[type="date"] {
    padding: 8px 10px; border: 1px solid #C8CFD3; border-radius: 6px;
    font-family: inherit; font-size: 14px; color: #223F4C; background: #fff;
}
.re-cal-slot-loading, .re-cal-slot-error {
    padding: 12px; border-radius: 6px; font-size: 14px; margin-bottom: 12px;
}
.re-cal-slot-loading { background: rgba(145, 202, 234, 0.20); color: #4498D8; }
.re-cal-slot-error { background: #fdeded; color: #c0392b; }
.re-cal-slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.re-cal-slot {
    padding: 8px 14px; background: #fff; border: 1px solid #C8CFD3;
    color: #223F4C; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 500;
    text-align: center;
    transition: all .15s ease;
}
.re-cal-slot:hover { background: #4498D8; color: #fff; border-color: #4498D8; }

/* Custom-time override - sits below the slot list inside step 2. The link
 * is text-style so it sits quietly when the slot list is populated, but is
 * the obvious next step when no slots come back. */
.re-cal-slot-override { margin-top: 18px; }
.re-cal-slot-override__toggle {
    background: transparent; border: 0; padding: 0;
    color: #4498D8; cursor: pointer; font-size: 13px; font-weight: 500;
    text-decoration: underline; font-family: inherit;
}
.re-cal-slot-override__toggle:hover { color: #357ab8; }
.re-cal-slot-override__form {
    margin-top: 12px; padding: 14px; border: 1px solid #C8CFD3; border-radius: 8px;
    display: flex; flex-direction: column; gap: 12px;
}
.re-cal-slot-override__form label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px; font-weight: 500;
}
.re-cal-slot-override__form input[type="time"] {
    padding: 8px 10px; border: 1px solid #C8CFD3; border-radius: 6px;
    font-family: inherit; font-size: 14px;
}

.re-cal-form { display: flex; flex-direction: column; gap: 14px; }
.re-cal-form label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px; font-weight: 500; color: #c9d4dd !important;
}
.re-cal-form input[type="text"],
.re-cal-form textarea,
.re-cal-form select {
    padding: 10px 12px; border: 1px solid #1e3a5f !important; border-radius: 8px;
    font-family: inherit; font-size: 14px; color: #e6edf3 !important; background: #0a1929 !important;
    font-weight: normal;
}
.re-cal-slot-day-row label { color: #c9d4dd !important; }
.re-cal-slot-day-row input[type="date"] { color: #e6edf3 !important; background: #0a1929 !important; }
.re-cal-form textarea { resize: vertical; }
.re-cal-form__actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 6px;
}
.re-cal-form__status { color: #576E7A; font-size: 13px; }
.re-cal-form__note   { color: #8F9FA6; font-size: 12px; margin: 0; }

/* Notetaker checkbox in the Create-event modal */
.re-cal-notetaker-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #1e3a5f !important;
    border-radius: 8px;
    background: #0a1929 !important;
    color: #e6edf3 !important;
    font-weight: normal;
    cursor: pointer;
}
.re-cal-notetaker-row input[type="checkbox"] {
    grid-row: 1 / span 2;
    width: 18px; height: 18px;
    margin: 0;
    accent-color: #4498D8;
}
.re-cal-notetaker-row input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }
.re-cal-notetaker-label { font-size: 14px; font-weight: 500; }
.re-cal-notetaker-hint  { font-size: 12px; color: #8F9FA6; }

/* In-person travel-time blocks: a checkbox row plus a small minutes field.
   Stacks on narrow screens; the minutes label sits beside the check from 480px. */
.re-cal-travel-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #0a1929;
    color: #e6edf3;
}
.re-cal-form label.re-cal-travel-check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    min-width: 0;
}
.re-cal-travel-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin: 0;
    accent-color: #4498D8;
}
.re-cal-travel-check span { flex: 1 1 auto; min-width: 0; }
.re-cal-form label.re-cal-travel-mins {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 13px;
    color: #8F9FA6;
}
.re-cal-form .re-cal-travel-mins input[type="number"] {
    width: 100%;
    max-width: 7rem;
    box-sizing: border-box;
}
@media (min-width: 480px) {
    .re-cal-travel-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }
    .re-cal-form label.re-cal-travel-check { flex: 1 1 auto; }
    .re-cal-form label.re-cal-travel-mins  { flex: 0 0 auto; }
}

/* Notetaker status pill on meeting detail */
.re-notetaker-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    margin: 8px 0 18px;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    background: #EFF7FE;
    color: #2A6FAA;
    border: 1px solid #C6E1F4;
}
.re-notetaker-pill__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4498D8;
}
.re-notetaker-pill--joining .re-notetaker-pill__dot,
.re-notetaker-pill--pending .re-notetaker-pill__dot { animation: re-pulse 1.6s ease-in-out infinite; }
.re-notetaker-pill--joined  { background: #E8F6EE; color: #1F7A3F; border-color: #BFE3CC; }
.re-notetaker-pill--joined  .re-notetaker-pill__dot { background: #2EAA59; }
.re-notetaker-pill--left    { background: #EFF1F4; color: #4A5A66; border-color: #C8CFD3; }
.re-notetaker-pill--left    .re-notetaker-pill__dot { background: #8F9FA6; }
.re-notetaker-pill--failed,
.re-notetaker-pill--cancelled { background: #FDECEC; color: #8E2A2A; border-color: #F2C6C6; }
.re-notetaker-pill--failed    .re-notetaker-pill__dot,
.re-notetaker-pill--cancelled .re-notetaker-pill__dot { background: #C0392B; }
@keyframes re-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
.re-notetaker-pill__label { flex: 0 1 auto; }
.re-notetaker-pill__retry {
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    opacity: .85;
}
.re-notetaker-pill__retry:hover:not(:disabled) { opacity: 1; }
.re-notetaker-pill__retry:disabled { opacity: .4; cursor: default; text-decoration: none; }
.re-notetaker-pill-status {
    margin: -6px 0 18px;
    font-size: 13px;
    color: #576E7A;
}

/* Attendees + AI-output summary panel on the meeting detail page.
 * Lists each linked CRM contact with chips showing how many bot
 * records (system notes, draft emails) landed on their timeline,
 * plus a deep-link to view them in the CRM. */
.re-meeting-attendees {
    margin: 18px 0 22px;
    padding: 18px 20px;
    background: rgba(68, 152, 216, 0.08);
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 10px;
}
.re-meeting-attendees__title {
    margin: 0 0 4px;
    font-size: 16px; font-weight: 600;
    color: #4498D8;
}
.re-meeting-attendees__sub {
    margin: 0 0 14px;
    font-size: 13px; line-height: 1.5;
    color: #c9d4dd; opacity: .85;
}
.re-meeting-attendees--empty .re-meeting-attendees__sub { margin-bottom: 0; }
.re-meeting-attendees__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.re-meeting-attendee {
    padding: 12px 14px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "head cta"
        "chips chips";
    gap: 8px 14px;
}
.re-meeting-attendee__head {
    grid-area: head;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    min-width: 0;
}
.re-meeting-attendee__name {
    font-weight: 600; color: #e6edf3;
    text-decoration: none;
}
a.re-meeting-attendee__name:hover { color: #4498D8; text-decoration: underline; }
.re-meeting-attendee__email {
    font-size: 12px; color: #8F9FA6;
    overflow: hidden; text-overflow: ellipsis;
}
.re-meeting-attendee__chips {
    grid-area: chips;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.re-meeting-attendee__chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 500;
    border: 1px solid;
}
.re-meeting-attendee__chip--note  {
    background: rgba(46, 170, 89, 0.10);
    color: #79e2a3;
    border-color: rgba(46, 170, 89, 0.40);
}
.re-meeting-attendee__chip--draft {
    background: rgba(230, 173, 35, 0.10);
    color: #f0c463;
    border-color: rgba(230, 173, 35, 0.45);
}
.re-meeting-attendee__chip--empty {
    background: transparent;
    color: #8F9FA6;
    border-color: #1e3a5f;
}
.re-meeting-attendee__cta {
    grid-area: cta;
    align-self: center;
    font-size: 12px; font-weight: 500;
    color: #4498D8 !important;
    text-decoration: none;
    white-space: nowrap;
}
.re-meeting-attendee__cta:hover { text-decoration: underline; }

.re-daily-view__calendar-fullview {
    color: #4498D8 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.re-daily-view__calendar-fullview:hover { color: #357ab8 !important; text-decoration: underline; }

/* Attendee autocomplete dropdown for the Create modal */
.re-cal-attendees-wrap { position: relative; display: block; }
.re-cal-attendees-suggest {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    background: #0a1929 !important; border: 1px solid #1e3a5f !important; border-top: 0;
    border-radius: 0 0 6px 6px; max-height: 240px; overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0,0,0,.30);
    margin-top: -1px;
}
.re-cal-attendee-option {
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%; padding: 8px 12px; gap: 2px;
    background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(145, 202, 234, 0.12) !important;
    text-align: left; cursor: pointer; font-family: inherit;
    text-transform: none !important; letter-spacing: normal !important;
    transition: background .12s ease;
}
.re-cal-attendee-option:last-child { border-bottom: 0 !important; }
.re-cal-attendee-option:hover { background: rgba(68, 152, 216, 0.18) !important; }
.re-cal-attendee-option__name { font-weight: 600; font-size: 14px; color: #e6edf3 !important; }
.re-cal-attendee-option__meta { font-size: 12px; color: #8aa0b2 !important; }

/* =========================================================
   App shell (left-rail navigation drawer)
   Wraps every "app" shortcode (Calendar, Pipeline, Daily View,
   Programmes, Meetings, Targets, Cookbooks, Settings).
   Configured at Revenue Engine -> Frontend Navigation.
   ========================================================= */
.re-app-shell {
    --re-rail-w: 220px;
    --re-rail-w-collapsed: 64px;
    display: grid;
    grid-template-columns: var(--re-rail-w) 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 80vh;
    position: relative;
    transition: grid-template-columns .2s ease;
}
.re-app-shell__rail {
    background: rgba(34, 63, 76, 0.92);
    border: 1px solid rgba(68, 152, 216, 0.20);
    border-radius: 12px;
    padding: 56px 10px 18px;
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    font-family: Montserrat, system-ui, sans-serif;
    /* Flex column so the logout footer pins to the bottom of the rail via
       margin-top: auto, while the nav list takes its natural height above. */
    display: flex;
    flex-direction: column;
}
.re-app-shell__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.re-app-shell__item {
    margin: 2px 0;
}
.re-app-shell__item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: inherit !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.re-app-shell__item a:hover {
    background: rgba(145, 202, 234, 0.18);
    text-decoration: none !important;
}
.re-app-shell__item.is-active a {
    background: #4498D8;
    color: #FFFFFF !important;
}
.re-app-shell__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}
.re-app-shell__foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(68, 152, 216, 0.20);
}
.re-app-shell__logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: inherit !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.re-app-shell__logout:hover {
    background: rgba(145, 202, 234, 0.18);
    text-decoration: none !important;
}
.re-app-shell__main {
    /* padding-bottom rather than margin-bottom: Astra's
       `.entry-content > :last-child { margin-bottom: 0 }` rule has higher
       specificity and would otherwise zero out the gap before the footer. */
    padding: 0 0 40px 32px;
    min-width: 0;
    /* iOS Safari computes sticky scroll bounds incorrectly when a grid
       child stretches (default align-items: stretch). Forcing the grid
       item to be content-sized fixes position: sticky inside .re-meeting-room. */
    align-self: start;
}
.re-app-shell__toggle {
    display: inline-flex;
    background: rgba(145, 202, 234, 0.15);
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    color: inherit;
}
.re-app-shell__toggle:hover {
    background: rgba(145, 202, 234, 0.28);
    border-color: rgba(68, 152, 216, 0.55);
}
.re-app-shell__chevron {
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

/* Collapsed (icon-only) state on desktop. */
.re-app-shell[data-collapsed="1"] {
    grid-template-columns: var(--re-rail-w-collapsed) 1fr;
}
.re-app-shell[data-collapsed="1"] .re-app-shell__label {
    display: none;
}
.re-app-shell[data-collapsed="1"] .re-app-shell__item a,
.re-app-shell[data-collapsed="1"] .re-app-shell__logout {
    justify-content: center;
    padding: 10px;
}
.re-app-shell[data-collapsed="1"] .re-app-shell__main {
    padding-left: 24px;
}
.re-app-shell[data-collapsed="1"] .re-app-shell__chevron {
    transform: rotate(180deg);
}

/* Transient hover preview when pinned-collapsed on desktop. The grid stays
 * at the collapsed width so main content does not reflow; the rail overflows
 * its 64px cell to its full width and overlays the next column with a
 * shadow. Suppressed on mobile by the @media block below (mobile ignores
 * `data-collapsed` entirely). */
.re-app-shell[data-collapsed="1"][data-hover-open="1"] .re-app-shell__rail {
    width: var(--re-rail-w);
    z-index: 20;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    transition: width .18s ease, box-shadow .18s ease;
}
.re-app-shell[data-collapsed="1"][data-hover-open="1"] .re-app-shell__label {
    display: inline;
}
.re-app-shell[data-collapsed="1"][data-hover-open="1"] .re-app-shell__item a,
.re-app-shell[data-collapsed="1"][data-hover-open="1"] .re-app-shell__logout {
    justify-content: flex-start;
    padding: 10px 12px;
}

/* Drawer behaviour below ~900px: rail becomes off-canvas slide-in. The
 * desktop "collapsed" attribute is ignored down here - mobile only knows
 * about open/closed. */
@media (max-width: 900px) {
    .re-app-shell,
    .re-app-shell[data-collapsed="1"] {
        grid-template-columns: 1fr;
    }
    .re-app-shell__toggle {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 9100;
        background: #FFFFFF;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    /* Drawer closed by default on mobile; chevron points right ("open me"). */
    .re-app-shell .re-app-shell__chevron {
        transform: rotate(180deg);
    }
    .re-app-shell[data-drawer-open="1"] .re-app-shell__chevron {
        transform: rotate(0);
    }
    .re-app-shell__rail {
        position: fixed;
        top: 0;
        left: calc(-1 * min(280px, 80vw) - 16px);
        height: 100vh;
        width: min(280px, 80vw);
        z-index: 9000;
        border-radius: 0 12px 12px 0;
        transition: left .25s ease;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
        padding-top: 60px;
    }
    .re-app-shell[data-drawer-open="1"] .re-app-shell__rail {
        left: 0;
    }
    .re-app-shell[data-drawer-open="1"]::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(34, 63, 76, 0.45);
        z-index: 8999;
    }
    .re-app-shell__main {
        padding: 60px 0 0 0;
    }
}

/* ==========================================================================
   Forms ([re_form] shortcode) - dark theme
   Brand palette: navy backgrounds, blue primary (#4498D8),
   mustard accent (#E6AD23) for selected states + required asterisks.
   ========================================================================== */

.re-form-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 32px;
    font-family: 'Montserrat', sans-serif;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 14px;
    color: #e6edf3;
    box-sizing: border-box;
}

.re-form-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
}

.re-form-header-text {
    flex: 1;
    min-width: 0;
}

.re-form-header-image {
    flex-shrink: 0;
}

.re-form-header-image img {
    max-width: 180px;
    max-height: 140px;
    height: auto;
    border-radius: 8px;
    display: block;
}

.re-form-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #4498D8;
    line-height: 1.2;
}

.re-form-description {
    margin: 0 0 8px;
    line-height: 1.55;
    color: #c9d4dd;
}

.re-form-description p {
    margin: 0 0 8px;
}

.re-form-description p:last-child {
    margin-bottom: 0;
}

.re-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 28px;
}

.re-form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.re-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.re-form-label {
    font-weight: 600;
    font-size: 14px;
    color: #e6edf3;
}

.re-form-required {
    color: #E6AD23;
    margin-left: 4px;
    font-weight: 700;
}

.re-form-input,
.re-form-textarea,
.re-form-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #0a1929;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #e6edf3;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.re-form-select {
    min-height: 46px;
}

.re-form-input::placeholder,
.re-form-textarea::placeholder {
    color: #5b6f7e;
}

.re-form-input:focus,
.re-form-textarea:focus,
.re-form-select:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}

.re-form-textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}

.re-form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #c9d4dd 50%),
                      linear-gradient(135deg, #c9d4dd 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.re-form-options {
    display: grid;
    gap: 10px;
}

.re-form-options-cols-1 { grid-template-columns: 1fr; }
.re-form-options-cols-2 { grid-template-columns: repeat(2, 1fr); }
.re-form-options-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 720px) {
    .re-form-options-cols-2,
    .re-form-options-cols-3 { grid-template-columns: 1fr; }
}

.re-form-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14px;
    cursor: pointer;
    color: #e6edf3;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    transition: border-color .15s ease, background .15s ease;
}

.re-form-option:hover { border-color: #2c5380; }

.re-form-option input {
    margin: 0;
    accent-color: #E6AD23;
    flex-shrink: 0;
}

.re-form-option:has(input:checked) {
    border-color: #E6AD23;
    background: rgba(230, 173, 35, 0.06);
}

.re-form-option-label {
    flex: 1;
    line-height: 1.35;
}

.re-form-file {
    font-size: 14px;
    color: #c9d4dd;
}

/* Admin preview (test run) */
.re-form-preview-host {
    background: #0a1929;
    padding: 24px;
    border-radius: 10px;
    max-width: 820px;
    margin-top: 12px;
}

.re-form-preview-banner {
    background: rgba(230, 173, 35, 0.12);
    border: 1px solid #E6AD23;
    color: #f4e3bd;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

.re-form-preview-note {
    color: #9fb3c8;
    font-size: 13px;
    margin-top: 12px;
}

/* Per-question image (imported quiz diagrams) */
.re-form-field-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Fill-in-the-blanks - blanks sit inline within the sentence, in a card */
.re-form-fill {
    color: #e6edf3;
    font-size: 15px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 16px 18px;
}

/* Each sentence/line is a row; the leading text sits in a fixed-width column so
   short leads (e.g. the single DISC letters) line their input boxes up neatly. */
.re-form-fill-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.re-form-fill-line:last-child { margin-bottom: 0; }

.re-form-fill-lead { min-width: 2.5ch; }

.re-form-fill-input {
    display: inline-block;
    width: 10ch;
    min-width: 7ch;
    margin: 0 3px;
    padding: 6px 10px;
    vertical-align: baseline;
    color: #e6edf3;
    background: #06111d;
    border: 1px solid #2c5380;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
}

.re-form-fill-input:focus {
    outline: none;
    border-color: #4498D8;
}

/* Matching - one question stem, a labelled dropdown per row */
.re-form-matching {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.re-form-matching-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}

.re-form-matching-prompt {
    color: #e6edf3;
    font-size: 14px;
    line-height: 1.35;
}

@media (min-width: 560px) {
    .re-form-matching-row {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }
    .re-form-matching-prompt { flex: 1; min-width: 0; }
    .re-form-matching-select { flex: 0 0 auto; max-width: 55%; }
}

/* Put-in-order */
.re-form-ordering {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.re-form-ordering-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14px;
    color: #e6edf3;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    cursor: grab;
}

.re-form-ordering-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
    border-color: #E6AD23;
}

.re-form-ordering-handle {
    color: #6b8299;
    letter-spacing: -2px;
    flex-shrink: 0;
    user-select: none;
}

.re-form-ordering-label {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.re-form-ordering-pos {
    flex-shrink: 0;
    margin-left: auto;
}

.re-form-slider {
    display: flex;
    align-items: center;
    gap: 14px;
}

.re-form-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(
        to right,
        #4498D8 0%,
        #4498D8 var(--progress, 0%),
        rgba(255, 255, 255, 0.12) var(--progress, 0%),
        rgba(255, 255, 255, 0.12) 100%
    );
    outline: none;
}

.re-form-range::-webkit-slider-runnable-track {
    background: transparent;
    height: 8px;
    border-radius: 999px;
}

.re-form-range::-moz-range-track {
    background: rgba(255, 255, 255, 0.12);
    height: 8px;
    border-radius: 999px;
}

.re-form-range::-moz-range-progress {
    background: #4498D8;
    height: 8px;
    border-radius: 999px;
}

.re-form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4498D8;
    margin-top: -6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.re-form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4498D8;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.re-form-slider-value {
    min-width: 48px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #4498D8;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}

/* Scale (0-10 NPS-style) buttons */
.re-form-scale {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.re-form-scale-buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
}

@media (max-width: 720px) {
    .re-form-scale-buttons {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    }
}

.re-form-scale-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #0a1929;
    color: #e6edf3;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.re-form-scale-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.re-form-scale-btn:hover { border-color: #2c5380; }

.re-form-scale-btn-on {
    border-color: #E6AD23;
    color: #E6AD23;
    background: rgba(230, 173, 35, 0.08);
}

.re-form-scale-legends {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #E6AD23;
    margin-top: 4px;
}

.re-form-scale-legend-low,
.re-form-scale-legend-high { font-weight: 500; }

.re-form-help {
    font-size: 12px;
    color: #8aa0b2;
    margin: 0;
}

.re-form-error {
    font-size: 13px;
    color: #ff8a73;
    margin: 0;
}

.re-form-error-summary {
    margin-top: 4px;
    padding: 10px 14px;
    background: rgba(255, 138, 115, 0.08);
    border: 1px solid rgba(255, 138, 115, 0.35);
    border-radius: 6px;
}

.re-form-submit {
    align-self: flex-start;
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 24px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: filter .15s ease, transform .05s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: inherit;
}

.re-form-submit-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 14px;
    line-height: 1;
}

.re-form-submit:hover { filter: brightness(1.05); }
.re-form-submit:active { transform: translateY(1px); }
.re-form-submit:disabled { filter: grayscale(0.3) brightness(0.85); cursor: not-allowed; }

.re-form-thankyou {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: #e6edf3;
}

.re-form-thankyou-body {
    margin: 0 0 16px;
    line-height: 1.55;
}

.re-form-download-btn {
    display: inline-block;
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff !important;
    text-decoration: none;
    border-radius: 10px;
    padding: 13px 28px;
    font-weight: 600;
    font-size: 15px;
    transition: filter .15s ease;
}

.re-form-download-btn:hover { filter: brightness(1.05); }

.re-form-notice {
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #e6edf3;
}

.re-form-notice-success {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.35);
}

.re-form-notice-warning {
    background: rgba(230, 173, 35, 0.08);
    border: 1px solid rgba(230, 173, 35, 0.4);
}

.re-form-not-found,
.re-login-notice {
    text-align: center;
    color: #c9d4dd;
    padding: 28px 0;
}

/* Programme exam CTA */
.re-exam-cta {
    margin-top: 16px;
    padding: 16px 20px;
    background: #fff8ec;
    border: 1px solid #f1d6a3;
    border-radius: 10px;
}

.re-exam-cta__lead {
    margin: 0 0 6px;
    font-size: 15px;
    color: #223f4c;
}

.re-exam-cta__body {
    margin: 0 0 12px;
    font-size: 14px;
    color: #5b6f78;
}

.re-exam-cta__btn {
    display: inline-block;
    background: #2c7da0;
    color: #fff !important;
    text-decoration: none;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 14px;
}

.re-exam-cta__btn:hover { background: #235f78; }

.re-exam-cta__note {
    margin: 0;
    font-size: 13px;
    color: #5b6f78;
}

/* ==========================================================================
   CRM dark-theme overrides
   Brings the kanban, detail views, modals and other frontend CRM surfaces
   in line with the [re_form] dark theme. Targets existing class names so
   no template HTML changes; JS hook classes stay intact. Mustard #E6AD23
   reserved for selected/active states + required indicators.
   ========================================================================== */

/* Page-level wrappers */
.re-kanban-wrap,
.re-detail {
    color: #e6edf3;
    font-family: 'Montserrat', sans-serif;
}

.re-detail {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 14px;
    /* Mobile-first: 14px horizontal padding is enough to feel like a
       contained card without eating ~64px of viewport on a 390px screen.
       Bumps up to 28px / 32px at desktop widths. */
    padding: 16px 14px;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .re-detail { padding: 24px 22px; }
}
@media (min-width: 960px) {
    .re-detail { padding: 28px 32px; }
}

.re-kanban-wrap {
    background: transparent;
}

/* Kanban toolbar */
.re-kanban-toolbar {
    background: transparent;
}

.re-kanban-wrap a.re-kanban-toggle-btn,
.re-kanban-wrap a.re-kanban-toggle-btn:visited {
    background: #0d1f33;
    color: #c9d4dd;
    border: 1px solid #1e3a5f;
}

.re-kanban-wrap a.re-kanban-toggle-btn:hover {
    background: #14273f;
    border-color: #2c5380;
    color: #e6edf3;
}

.re-kanban-wrap a.re-kanban-toggle-btn--active,
.re-kanban-wrap a.re-kanban-toggle-btn--active:visited,
.re-kanban-wrap a.re-kanban-toggle-btn--active:hover,
.re-kanban-wrap a.re-kanban-toggle-btn--active:focus {
    background: rgba(68, 152, 216, 0.12);
    border-color: #4498D8;
    color: #4498D8;
}

.re-kanban-new-btn {
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
}

.re-kanban-new-btn:hover {
    filter: brightness(1.05);
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
}

/* Kanban board: columns + cards */
.re-kanban-col {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
}

.re-kanban-col-header {
    border-bottom-color: #1e3a5f;
}

.re-kanban-col-label { color: #c9d4dd; }
.re-kanban-col-count { color: #8aa0b2; background: rgba(255, 255, 255, 0.05); }

.re-kanban-card {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
}

.re-kanban-card:hover {
    border-color: #2c5380;
}

.re-kanban-card-title { color: #e6edf3; }
.re-kanban-card-meta { color: #8aa0b2; }

.re-kanban-card-tag {
    background: rgba(68, 152, 216, 0.12);
    color: #91CAEA;
    border-color: rgba(68, 152, 216, 0.4);
}

.re-kanban-card-playbook-dot { box-shadow: 0 0 0 2px #0a1929; }

.re-kanban-wrap a.re-kanban-card-title-link,
.re-kanban-wrap a.re-kanban-card-title-link:visited {
    color: #e6edf3;
}

.re-kanban-wrap a.re-kanban-card-title-link:hover .re-kanban-card-title {
    color: #4498D8;
}

/* Kanban inputs (the modal "+ New" form) */
.re-kanban-input {
    background: #0a1929;
    border-color: #1e3a5f;
    color: #e6edf3;
}

.re-kanban-input::placeholder { color: #5b6f7e; }

.re-kanban-input:focus {
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}

.re-kanban-input--frozen,
.re-kanban-input--frozen:focus {
    background: rgba(255, 255, 255, 0.04);
    color: #8aa0b2;
}

/* Detail view: panels, fields, inputs, buttons */
.re-detail-panel {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
}

.re-detail-panel h2 {
    color: #4498D8;
}

.re-detail-title { color: #e6edf3; }
.re-detail-title--accent { color: #4498D8; }

.re-detail-meta { color: #c9d4dd; }
.re-detail-meta-value { color: #e6edf3; }
.re-detail-meta-item a,
.re-detail-meta-item a:visited { color: #91CAEA; }

.re-detail-empty { color: #8aa0b2; }
.re-detail-helper { color: #8aa0b2; }
.re-detail-subhead { color: #c9d4dd; }

.re-detail-label { color: #c9d4dd; }

.re-detail-back a,
.re-detail-back a:visited { color: #91CAEA; }

.re-detail-input,
.re-detail-textarea {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
}

.re-detail-input::placeholder,
.re-detail-textarea::placeholder { color: #5b6f7e; }

.re-detail-input:focus,
.re-detail-textarea:focus {
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}

.re-detail-input--saving {
    border-color: #E6AD23;
    box-shadow: 0 0 0 2px rgba(230, 173, 35, 0.25);
}

.re-detail-btn {
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
}

.re-detail-btn:hover { filter: brightness(1.05); }
.re-detail-btn:disabled { filter: grayscale(0.3) brightness(0.85); }

/* Companies House panel - mobile-first, dark theme. Renders inside a
   .re-detail-panel so it inherits the panel chrome; these rules add the
   facts grid, people list, name-search picker, and lookup form. */
.re-ch-intro,
.re-ch-people-note { color: #8aa0b2; font-size: 13px; margin: 0 0 12px; }
.re-ch-source { color: #5b6f7e; font-size: 12px; margin: 0 0 12px; }

.re-ch-lookup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}
.re-ch-lookup-field { flex: 1 1 200px; min-width: 0; margin: 0; }
.re-ch-search-field { margin: 0 0 8px; }

.re-ch-search-results {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    overflow: hidden;
}
.re-ch-search-results li { border-top: 1px solid #1e3a5f; }
.re-ch-search-results li:first-child { border-top: none; }
.re-ch-search-empty { color: #8aa0b2; font-size: 13px; padding: 10px 12px; }
.re-ch-search-pick {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    color: #e6edf3;
}
.re-ch-search-pick:hover { background: #0a1929; }
.re-ch-search-name { display: block; font-weight: 600; font-size: 14px; }
.re-ch-search-meta { display: block; color: #8aa0b2; font-size: 12px; margin-top: 2px; }

.re-ch-error { color: #f0a3a3; font-size: 13px; margin: 8px 0 0; }

.re-ch-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 18px;
    margin-bottom: 8px;
}
@media (min-width: 640px) {
    .re-ch-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.re-ch-fact { min-width: 0; }
.re-ch-fact-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #8aa0b2;
    margin-bottom: 2px;
}
.re-ch-fact-value {
    display: block;
    font-size: 14px;
    color: #e6edf3;
    overflow-wrap: anywhere;
}
.re-ch-sic { display: block; }
.re-ch-overdue {
    color: #223F4C;
    background: #E6AD23;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
}
.re-ch-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #4498D8;
    color: #91CAEA;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
}

.re-ch-people-heading {
    margin: 18px 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: #4498D8;
}
.re-ch-people { list-style: none; margin: 0 0 12px; padding: 0; }
.re-ch-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid #1e3a5f;
}
.re-ch-person:first-child { border-top: none; }
.re-ch-person-main { min-width: 0; }
.re-ch-person-name { display: block; font-size: 14px; color: #e6edf3; font-weight: 600; }
.re-ch-person-role { display: block; font-size: 12px; color: #8aa0b2; }
.re-ch-person-status { font-size: 12px; color: #8aa0b2; }
.re-ch-person-status a { color: #4ba6e8; }
.re-ch-person-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.re-ch-add-person { padding: 6px 12px; font-size: 12px; }
.re-ch-associate-person,
.re-ch-unlink-person { padding: 6px 12px; font-size: 12px; }
.re-detail-btn--ghost {
    background: transparent;
    color: #cdd9e5;
    border: 1px solid #1e3a5f;
}
.re-detail-btn--ghost:hover {
    filter: none;
    background: rgba(68, 152, 216, 0.10);
    border-color: rgba(68, 152, 216, 0.45);
    color: #e6edf3;
}
.re-ch-assoc-list .re-link-picker-result-name { display: block; font-weight: 600; }
.re-ch-assoc-list .re-link-picker-result-meta { display: block; font-size: 12px; color: #8aa0b2; }
.re-ch-relink { margin: 6px 0 0; }
.re-ch-relink-form { margin-top: 12px; }

/* Header overflow menu (3-dot button + dropdown) - holds secondary actions
   so the header keeps a single visible primary CTA. */
.re-detail-header-menu-wrap {
    position: static;
    flex: 0 0 auto;
}

.re-detail-header-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #1e3a5f;
    border-radius: 18px;
    background: #0d1f33;
    color: #e6edf3;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.re-detail-header-menu-trigger:hover,
.re-detail-header-menu-trigger[aria-expanded="true"] {
    background: #14304f;
    border-color: #2c5380;
}

.re-detail-header-menu {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(5, 12, 22, 0.6);
    padding: 6px 0;
    z-index: 20;
}

@media (min-width: 640px) {
    .re-detail-header-menu-wrap {
        position: relative;
    }
    .re-detail-header-menu {
        left: auto;
        right: 0;
        width: auto;
        min-width: 220px;
    }
}

.re-detail-header-menu[hidden] {
    display: none;
}

.re-detail-header-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #e6edf3;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.re-detail-header-menu-item:not(:last-child) {
    margin-bottom: 7px;
}

.re-detail-header-menu-item:hover:not([disabled]) {
    background: rgba(68, 152, 216, 0.12);
}

.re-detail-header-menu-item[disabled] {
    color: #5b6f7e;
    cursor: not-allowed;
}

.re-detail-header-menu-item.is-loading {
    color: #91CAEA;
    cursor: progress;
    position: relative;
    padding-right: 28px;
}

.re-detail-header-menu-item.is-loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid rgba(68, 152, 216, 0.25);
    border-top-color: #4498D8;
    border-radius: 50%;
    animation: re-prospect-spin 0.9s linear infinite;
}

/* Opt-in "Also enrich while you're at it" checkbox inside the Find
   Contacts picklist. Visually distinct from the contact list so the
   add-on nature reads, and the long copy wraps cleanly under 390px. */
.re-fc-also-enrich {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    font-size: 13px;
    color: #C4B5FD;
    line-height: 1.45;
    cursor: pointer;
}
.re-fc-also-enrich input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
}
.re-fc-also-enrich span {
    flex: 1 1 0;
    min-width: 0;
}

/* Org Enrich progress modal. Blocking + focused so the user can't fire
   a second Enrich while the first is still running. Closes only when
   the run completes (and then reloads the page) or errors (Close button). */
.re-enrich-progress {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.re-enrich-progress__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 18, 0.78);
    backdrop-filter: blur(2px);
}
.re-enrich-progress__dialog {
    position: relative;
    background: #161D26;
    color: #E6EDF3;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 12px;
    padding: 28px 24px 22px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    text-align: center;
}
.re-enrich-progress__spinner {
    width: 38px;
    height: 38px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 3px solid rgba(139, 92, 246, 0.25);
    border-top-color: #8B5CF6;
    animation: re-prospect-spin 0.9s linear infinite;
}
.re-enrich-progress__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #E6EDF3;
}
.re-enrich-progress__stage {
    margin: 0 0 10px;
    font-size: 14px;
    color: #C4B5FD;
    min-height: 1.4em;
}
.re-enrich-progress__stage--error {
    color: #FCA5A5;
}
.re-enrich-progress__hint {
    margin: 0 0 16px;
    font-size: 12px;
    color: #94A3B8;
    line-height: 1.45;
}
.re-enrich-progress__foot {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.re-detail-ai-btn {
    background: rgba(68, 152, 216, 0.12);
    color: #91CAEA;
    border-color: rgba(68, 152, 216, 0.4);
}

.re-detail-ai-btn:hover:not(:disabled) {
    background: rgba(68, 152, 216, 0.2);
    border-color: #4498D8;
    color: #e6edf3;
}

.re-detail-linkedin-icon {
    background: rgba(10, 102, 194, 0.18);
    border-color: rgba(10, 102, 194, 0.5);
    color: #91b8e6;
}

.re-detail-linkedin-icon:hover,
.re-detail-linkedin-icon:focus {
    background: rgba(10, 102, 194, 0.3);
    color: #c9def0;
}

.re-detail-website-icon {
    background: rgba(60, 90, 130, 0.2);
    border-color: rgba(145, 202, 234, 0.4);
    color: #c9d4dd;
}

.re-detail-website-icon:hover,
.re-detail-website-icon:focus {
    background: rgba(60, 90, 130, 0.35);
    color: #e6edf3;
}

.re-detail-save-bar {
    background: rgba(230, 173, 35, 0.15);
    border-color: #E6AD23;
    color: #E6AD23;
}

/* Rule-hints panel ("What's needed to move forwards"). Legacy styling used
   dark gold text on a creamy bg; on the dark panel that reads as muted
   yellow. Drop back to white/light body text and keep the heading blue
   like every other panel. */
.re-detail-rule-hints h2 { color: #4498D8; }
.re-detail-rule-intro { color: #c9d4dd; }
.re-detail-rule-arrow { color: #e6edf3; }
.re-detail-rule-failures,
.re-detail-rule-failures li { color: #e6edf3; }
.re-detail-rule-headline a,
.re-detail-rule-headline a:visited { color: #91CAEA; }
.re-detail-rule-headline a:hover { color: #4498D8; }
.re-detail-rule-list > li {
    border-bottom-color: rgba(145, 202, 234, 0.2);
}

.re-detail-flash--ok    { background: rgba(76, 175, 80, 0.15); color: #91d094; border: 1px solid rgba(76, 175, 80, 0.4); }
.re-detail-flash--error { background: rgba(255, 138, 115, 0.12); color: #ff8a73; border: 1px solid rgba(255, 138, 115, 0.4); }

.re-detail-banner--won  { background: rgba(76, 175, 80, 0.15); color: #91d094; }
.re-detail-banner--lost { background: rgba(255, 138, 115, 0.12); color: #ff8a73; }

/* Activity timeline (used inside detail views) */
.re-activity-pinned-section {
    background: rgba(68, 152, 216, 0.06);
    border: 1px solid rgba(68, 152, 216, 0.18);
}

.re-activity-pinned__title { color: #c9d4dd; }

.re-activity-playbook-toggle button {
    border-color: rgba(255, 255, 255, 0.18);
    color: #c9d4dd;
}
.re-activity-playbook-toggle button:hover,
.re-activity-playbook-toggle button:focus-visible {
    border-color: #4498D8;
    color: #4498D8;
}

.re-activity {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
}

.re-activity--virtual {
    background: rgba(255, 255, 255, 0.025);
    border-style: dashed;
}

/* Type-specific left-border accent stripe so the timeline is colour-coded
   at a glance. Each row already carries .re-activity--<type>. Rules sit
   after the dark-theme .re-activity override above so the all-sides
   border shorthand there doesn't reset the left edge. */
.re-activity--note         { border-left: 4px solid #5A8A1A; }
.re-activity--email        { border-left: 4px solid #4498D8; }
.re-activity--linkedin     { border-left: 4px solid #0A66C2; }
.re-activity--call         { border-left: 4px solid #E07A1F; }
.re-activity--meeting      { border-left: 4px solid #6F4ECF; }
.re-activity--conversation { border-left: 4px solid #C73E89; }
.re-activity--sms          { border-left: 4px solid #E91E63; }
.re-activity--whatsapp     { border-left: 4px solid #25D366; }
.re-activity--task         { border-left: 4px solid #14A38A; }
.re-activity--commitment   { border-left: 4px solid #61B0E0; }
.re-activity--file         { border-left: 4px solid #6E7A85; }
.re-activity--system       { border-left: 4px solid #8F9FA6; }
.re-activity--research     { border-left: 4px solid #8B5CF6; background: rgba(139, 92, 246, 0.06); }
/* High-alignment research triggers (score >= 4/5) get a stronger wash so a
   rep skimming the timeline can find a strategy-aligned trigger fast. */
.re-activity--research:has(.re-activity__alignment--score-5),
.re-activity--research:has(.re-activity__alignment--score-4) {
    background: rgba(139, 92, 246, 0.14);
    border-left-color: #7C3AED;
}

/* Blueprint-alignment chip + bot rationale, rendered under the trigger
   subject on research-trigger rows. Score is colour-coded so a glance
   ranks the timeline without reading every line. */
.re-activity__alignment {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 6px;
}
.re-activity__alignment-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(139, 92, 246, 0.18);
    color: #C4B5FD;
    border: 1px solid rgba(139, 92, 246, 0.4);
}
.re-activity__alignment--score-5 .re-activity__alignment-chip { background: rgba(124, 58, 237, 0.32); color: #DDD6FE; border-color: rgba(124, 58, 237, 0.7); }
.re-activity__alignment--score-4 .re-activity__alignment-chip { background: rgba(139, 92, 246, 0.26); color: #DDD6FE; border-color: rgba(139, 92, 246, 0.55); }
.re-activity__alignment--score-3 .re-activity__alignment-chip { background: rgba(139, 92, 246, 0.15); color: #C4B5FD; }
.re-activity__alignment--score-2 .re-activity__alignment-chip,
.re-activity__alignment--score-1 .re-activity__alignment-chip,
.re-activity__alignment--score-0 .re-activity__alignment-chip {
    background: rgba(143, 159, 166, 0.18);
    color: #9CA3AF;
    border-color: rgba(143, 159, 166, 0.35);
}
.re-activity__alignment-reason {
    font-size: 12px;
    font-style: italic;
    color: #A8B5BD;
    flex: 1 1 240px;
    min-width: 0;
}

/* Draft / Sent / Dismissed pill on outbound email rows, soft variants for
   dark theme. */
.re-activity__status--draft {
    background: rgba(230, 173, 35, 0.20);
    color: #f0c463;
    border: 1px solid rgba(230, 173, 35, 0.45);
}
.re-activity__status--sent {
    background: rgba(68, 152, 216, 0.22);
    color: #91CAEA;
    border: 1px solid rgba(68, 152, 216, 0.45);
}
.re-activity__status--dismissed {
    background: rgba(200, 210, 220, 0.10);
    color: #8aa0b2;
    border: 1px solid rgba(200, 210, 220, 0.25);
}
/* Playbook step states, dark-theme variants. */
.re-activity__status--failed {
    background: rgba(224, 89, 77, 0.18);
    color: #f3a59c;
    border: 1px solid rgba(224, 89, 77, 0.45);
}
.re-activity__status--manual {
    background: rgba(220, 150, 80, 0.18);
    color: #f1c089;
    border: 1px solid rgba(220, 150, 80, 0.40);
}
.re-activity__status--scheduled {
    background: rgba(150, 175, 195, 0.12);
    color: #a8bccd;
    border: 1px solid rgba(150, 175, 195, 0.30);
}
.re-activity__status--snoozed {
    background: rgba(200, 210, 220, 0.10);
    color: #8aa0b2;
    border: 1px solid rgba(200, 210, 220, 0.25);
}

/* Dismissed draft row on the timeline: muted opacity so it reads as
   historical / archived without disappearing entirely. */
.re-activity--dismissed-draft {
    opacity: 0.55;
}
.re-activity--dismissed-draft:hover {
    opacity: 0.85;
}

/* Daily view, targets, cookbooks - inherit dark text on the dark page */
.re-daily-view,
.re-targets,
.re-cookbooks,
.re-meetings-list,
.re-meeting-detail,
.re-meeting-plan,
.re-meeting-room,
.re-coaching-booking {
    color: #e6edf3;
}

.re-target-card {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
}

.re-target-card__meta { color: #8aa0b2; }

/* Calendar create modal + email compose modal share kanban modal classes,
   so they pick up the dark theme automatically. The Plyr / calendar grid
   surfaces have their own colour scheme and are deliberately untouched. */

/* ==========================================================================
   Calendar create modal + email compose modal + user settings - dark theme
   Targets the existing .re-cal-* / .re-email-* / .re-user-settings classes
   so no template HTML changes; JS hooks unaffected.
   ========================================================================== */

.re-cal-modal__backdrop { background: rgba(5, 12, 22, 0.7); }

.re-cal-modal__panel {
    background: #0d1f33;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
}

.re-cal-modal__close { color: #8aa0b2; }
.re-cal-modal__close:hover { color: #e6edf3; }

.re-cal-step__sub { color: #c9d4dd; }

.re-cal-step__back {
    color: #91CAEA;
    background: transparent;
}

.re-cal-duration {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
}

.re-cal-duration:hover {
    background: rgba(68, 152, 216, 0.18);
    border-color: #4498D8;
    color: #e6edf3;
}

.re-cal-slot-day-row label { color: #c9d4dd; }

.re-cal-slot-day-row input[type="date"] {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 6px 8px;
}

.re-cal-slot-loading {
    background: rgba(68, 152, 216, 0.12);
    color: #91CAEA;
}

.re-cal-slot-error {
    background: rgba(255, 138, 115, 0.12);
    color: #ff8a73;
}

.re-cal-slot {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
}

.re-cal-slot:hover {
    background: rgba(68, 152, 216, 0.12);
    border-color: #4498D8;
}

/* Custom-time override - dark theme variant (frontend CRM detail pages). */
.re-cal-slot-override__form {
    background: rgba(255, 255, 255, 0.02);
    border-color: #1e3a5f;
}
.re-cal-slot-override__form input[type="time"] {
    background: #0a1929;
    color: #e6edf3;
    border-color: #1e3a5f;
}

.re-cal-form label { color: #c9d4dd; }

.re-cal-form input[type="text"],
.re-cal-form input[type="email"],
.re-cal-form input[type="url"],
.re-cal-form input[type="number"],
.re-cal-form input[type="date"],
.re-cal-form input[type="datetime-local"],
.re-cal-form textarea,
.re-cal-form select {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

.re-cal-form input::placeholder,
.re-cal-form textarea::placeholder { color: #5b6f7e; }

.re-cal-form input:focus,
.re-cal-form textarea:focus,
.re-cal-form select:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}

.re-cal-form select { min-height: 46px; }

.re-cal-form__status { color: #8aa0b2; }
.re-cal-form__note   { color: #8aa0b2; }

.re-cal-attendees-suggest {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
}

/* Generic .re-btn primary inside the dark modals */
.re-cal-modal__panel .re-btn,
.re-cal-modal__panel .re-btn:visited {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
}

.re-cal-modal__panel .re-btn:hover {
    background: #14273f;
    border-color: #2c5380;
    color: #e6edf3;
}

.re-cal-modal__panel .re-btn--primary,
.re-cal-modal__panel .re-btn--primary:visited {
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
}

.re-cal-modal__panel .re-btn--primary:hover {
    filter: brightness(1.05);
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
}

/* Email compose modal shares the .re-cal-modal classes; the attachments
   tray + signature dropdown need explicit dark variants too. */
.re-email-attachment {
    background: rgba(68, 152, 216, 0.12);
    color: #e6edf3;
    border-color: rgba(68, 152, 216, 0.4);
}

.re-email-attachment__size { color: #8aa0b2; }

.re-email-attachment__remove { color: #8aa0b2; }
.re-email-attachment__remove:hover { color: #ff8a73; }

.re-email-attachments__hint { color: #8aa0b2; }

/* User settings page (signatures) */
.re-user-settings { color: #e6edf3; }
.re-user-settings__header h1 { color: #4498D8; }

/* Settings tabs. Mobile-first: the row scrolls horizontally on narrow
   screens (mirrors the .re-coaching-tabs pattern) so it never forces the
   page wider than the viewport. */
.re-user-settings__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border-bottom: 1px solid #1e3a5f;
    margin: 16px 0 4px;
}
.re-user-settings__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #c9d4dd;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.re-user-settings__tab:hover { color: #e6edf3; }
.re-user-settings__tab.is-active { color: #4498D8; border-bottom-color: #4498D8; }

/* Tab panels: every section is assigned to a tab; only the active tab's
   sections show. Modals/overlays carry no data-settings-tab and stay
   controlled by their own hidden/modal state. */
.re-user-settings__section[data-settings-tab] { display: none; }
.re-user-settings[data-active-tab="account"]      .re-user-settings__section[data-settings-tab="account"],
.re-user-settings[data-active-tab="ai_usage"]      .re-user-settings__section[data-settings-tab="ai_usage"],
.re-user-settings[data-active-tab="email"]         .re-user-settings__section[data-settings-tab="email"],
.re-user-settings[data-active-tab="availability"]  .re-user-settings__section[data-settings-tab="availability"],
.re-user-settings[data-active-tab="outreach"]      .re-user-settings__section[data-settings-tab="outreach"],
.re-user-settings[data-active-tab="organisation"]  .re-user-settings__section[data-settings-tab="organisation"],
.re-user-settings[data-active-tab="data"]          .re-user-settings__section[data-settings-tab="data"] { display: block; }

.re-user-settings__form-flash { margin: 0 0 14px; padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.re-user-settings__form-flash--ok  { color: #8fe0b0; background: rgba(60, 200, 130, 0.10); border-left: 2px solid rgba(60, 200, 130, 0.5); }
.re-user-settings__form-flash--err { color: #ff8a73; background: rgba(255, 138, 115, 0.10); border-left: 2px solid rgba(255, 138, 115, 0.5); }
/* Time away / holidays (Availability tab) */
.re-away__add-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}
@media (min-width: 640px) {
    .re-away__add-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .re-away__add-fields .re-away__note { grid-column: 1 / -1; }
}
.re-away__add-fields label { display: block; color: #c9d4dd; font-size: 14px; min-width: 0; }
.re-away__add-fields input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 8px 10px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    color: #e6edf3;
    font-size: 14px;
}
.re-away__add-fields input:focus { outline: 2px solid #4498D8; border-color: #4498D8; }
.re-away__empty { color: #90a4b8; font-size: 14px; margin: 8px 0 0; }
.re-away__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.re-away__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
}
.re-away__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-width: 0; }
.re-away__dates { color: #e6edf3; font-size: 14px; font-weight: 600; }
.re-away__item-note { color: #90a4b8; font-size: 13px; min-width: 0; }
.re-away__item.is-past { opacity: 0.55; }
.re-away__tag { color: #90a4b8; font-size: 12px; }
.re-away__remove { margin: 0; }
.re-away__remove-btn {
    background: transparent;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    color: #c9d4dd;
    font-size: 13px;
    padding: 5px 12px;
    cursor: pointer;
}
.re-away__remove-btn:hover { border-color: #ff8a73; color: #ff8a73; }

/* "Move my scheduled work to my next working day?" confirmation panel */
.re-away__review {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: rgba(68, 152, 216, 0.08);
    border: 1px solid rgba(68, 152, 216, 0.4);
    border-radius: 8px;
}
.re-away__review-lead { margin: 0 0 12px; color: #d5e2ee; font-size: 14px; line-height: 1.5; }
.re-away__review-lead strong { color: #e6edf3; }
.re-away__review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.re-away__review-actions form { margin: 0; }
.re-away__review-meetings { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(68, 152, 216, 0.25); }
.re-away__item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.re-away__review-btn {
    background: transparent;
    border: 1px solid #4498D8;
    border-radius: 6px;
    color: #9cc7ea;
    font-size: 13px;
    padding: 5px 12px;
    cursor: pointer;
}
.re-away__review-btn:hover { background: rgba(68, 152, 216, 0.12); }

/* Holiday "review my meetings" wizard modal */
body.re-holiday-open { overflow: hidden; }
.re-holiday-modal__title { margin: 0; font-size: 17px; color: #e6edf3; }
.re-holiday-modal__progress { margin: 0 0 12px; color: #90a4b8; font-size: 12px; }
.re-holiday-modal__msg { color: #c9d4dd; font-size: 14px; }
.re-holiday-modal__msg--err { color: #ff8a73; }

.re-holiday-card__title { color: #e6edf3; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.re-holiday-card__badge {
    display: inline-block;
    font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 4px;
    background: rgba(68, 152, 216, 0.20); color: #9cc7ea;
    vertical-align: middle;
}
.re-holiday-card__when { color: #d5e2ee; font-size: 14px; margin-bottom: 4px; }
.re-holiday-card__who { color: #90a4b8; font-size: 13px; margin-bottom: 12px; }
.re-holiday-card__note { display: block; color: #c9d4dd; font-size: 13px; margin-bottom: 14px; }
.re-holiday-card__note input {
    width: 100%; box-sizing: border-box; margin-top: 4px;
    padding: 8px 10px; background: #0a1929; border: 1px solid #1e3a5f;
    border-radius: 6px; color: #e6edf3; font-size: 14px;
}
.re-holiday-card__note input:focus { outline: 2px solid #4498D8; border-color: #4498D8; }
.re-holiday-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.re-holiday-reorg { margin-top: 4px; }
.re-holiday-reorg__lead { color: #e6edf3; font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.re-holiday-reorg__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.re-holiday-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.re-change-password label { display: block; margin-bottom: 12px; color: #c9d4dd; font-size: 14px; }
.re-change-password input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 8px 10px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    color: #e6edf3;
    font-size: 14px;
}
.re-change-password input[type="password"]:focus { outline: 2px solid #4498D8; border-color: #4498D8; }
/* Embedded WP 2FA setup form ([wp-2fa-setup-form]) - restyled to match our
   dark theme. WP 2FA only documents .wp2fa-modal / .wp2fa-modal .button /
   .wp2fa-modal input, so we scope under .re-2fa-embed and lean on element-level
   selectors as fallbacks. */
.re-2fa-embed { color: #e6edf3; }
.re-2fa-embed .wp2fa-modal { color: #e6edf3; }

/* Undo the host theme (Astra) global button-uppercase, same defence as .re-btn. */
.re-2fa-embed,
.re-2fa-embed * { text-transform: none !important; letter-spacing: normal !important; }

/* Status lines + labels ("Currently configured:", "2FA configuration:"). */
.re-2fa-embed p,
.re-2fa-embed label { color: #c9d4dd; }
.re-2fa-embed > *:first-child { margin-top: 0; }
.re-2fa-embed h1,
.re-2fa-embed h2,
.re-2fa-embed h3,
.re-2fa-embed h4 {
    color: #e6edf3;
    font-size: 15px;
    margin: 16px 0 6px;
}

/* Action buttons - filled, matching .re-btn. */
.re-2fa-embed .button,
.re-2fa-embed button,
.re-2fa-embed input[type="submit"],
.re-2fa-embed input[type="button"] {
    display: inline-block;
    padding: 9px 22px;
    margin: 4px 8px 4px 0;
    background: #0073aa;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}
.re-2fa-embed .button:hover,
.re-2fa-embed button:hover,
.re-2fa-embed input[type="submit"]:hover,
.re-2fa-embed input[type="button"]:hover { background: #005d8f; color: #fff; }

/* Plain links ("Learn more about backup codes", etc.). */
.re-2fa-embed a:not(.button) { color: #91CAEA; text-decoration: none; }
.re-2fa-embed a:not(.button):hover { text-decoration: underline; }

/* "Show QR code" disclosure. */
.re-2fa-embed summary { cursor: pointer; color: #91CAEA; margin: 8px 0; }

/* Inputs (6-digit code field, etc.) - match the change-password fields. */
.re-2fa-embed input[type="text"],
.re-2fa-embed input[type="tel"],
.re-2fa-embed input[type="number"],
.re-2fa-embed input[type="email"],
.re-2fa-embed select {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 8px 10px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    color: #e6edf3;
    font-size: 14px;
}
.re-2fa-embed input:focus,
.re-2fa-embed select:focus { outline: 2px solid #4498D8; border-color: #4498D8; }

/* QR image - keep a white quiet zone so it scans, and stay responsive. */
.re-2fa-embed img {
    max-width: 100%;
    height: auto;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
}

/* WP 2FA v4.x shortcode / frontend config wrapper. [wp-2fa-setup-form] and the
   auto-created /2fa-config page render their status + "configure" view inside
   .wp-2fa-shortcode-wrapper. On [re_user_settings] this sits inside .re-2fa-embed,
   but the standalone /2fa-config page has no .re-2fa-embed, so we scope these
   rules on the wrapper itself so BOTH surfaces get the dark theme from one place.
   !important on the key surfaces beats WP 2FA's bundled "default_styling" CSS. */
/* Self-contained dark card so the config view is readable on ANY host page
   background (the standalone /2fa-config page is not one of our dark surfaces). */
.wp-2fa-shortcode-wrapper {
    color: #c9d4dd;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 18px 20px;
}
/* On the [re_user_settings] embed it already sits inside .re-user-settings__section
   (a #0d1f33 panel), so drop the nested panel to avoid a box-in-a-box. */
.re-2fa-embed .wp-2fa-shortcode-wrapper {
    background: transparent;
    border: 0;
    padding: 0;
}
.wp-2fa-shortcode-wrapper,
.wp-2fa-shortcode-wrapper * { text-transform: none !important; letter-spacing: normal !important; }
.wp-2fa-shortcode-wrapper h1,
.wp-2fa-shortcode-wrapper h2,
.wp-2fa-shortcode-wrapper h3,
.wp-2fa-shortcode-wrapper h4 { color: #4498D8 !important; }
.wp-2fa-shortcode-wrapper p,
.wp-2fa-shortcode-wrapper li,
.wp-2fa-shortcode-wrapper label,
.wp-2fa-shortcode-wrapper small,
.wp-2fa-shortcode-wrapper td,
.wp-2fa-shortcode-wrapper th { color: #c9d4dd !important; }
.wp-2fa-shortcode-wrapper a:not(.button) { color: #91CAEA; }
.wp-2fa-shortcode-wrapper a:not(.button):hover { text-decoration: underline; }

/* Buttons - primary filled brand blue, secondary outlined; never uppercase. */
.wp-2fa-shortcode-wrapper .button,
.wp-2fa-shortcode-wrapper button {
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 4px;
}
.wp-2fa-shortcode-wrapper .wp-2fa-button-primary,
.wp-2fa-shortcode-wrapper .button-primary {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: #fff !important;
}
.wp-2fa-shortcode-wrapper .wp-2fa-button-primary:hover,
.wp-2fa-shortcode-wrapper .button-primary:hover {
    background: #005d8f !important;
    border-color: #005d8f !important;
}
.wp-2fa-shortcode-wrapper .wp-2fa-button-secondary,
.wp-2fa-shortcode-wrapper .button-secondary {
    background: transparent !important;
    border: 1px solid #4498D8 !important;
    color: #91CAEA !important;
}

/* Inputs. */
.wp-2fa-shortcode-wrapper input[type="text"],
.wp-2fa-shortcode-wrapper input[type="tel"],
.wp-2fa-shortcode-wrapper input[type="number"],
.wp-2fa-shortcode-wrapper input[type="email"],
.wp-2fa-shortcode-wrapper textarea,
.wp-2fa-shortcode-wrapper select {
    width: 100%;
    box-sizing: border-box;
    background: #0a1929 !important;
    border: 1px solid #1e3a5f !important;
    color: #e6edf3 !important;
    border-radius: 6px;
}
.wp-2fa-shortcode-wrapper input:focus,
.wp-2fa-shortcode-wrapper textarea:focus,
.wp-2fa-shortcode-wrapper select:focus { outline: 2px solid #4498D8; border-color: #4498D8 !important; }

/* QR / images stay responsive with their own light quiet zone. */
.wp-2fa-shortcode-wrapper img { max-width: 100%; height: auto; border-radius: 8px; }

/* v4.x profile / status view (.wp2fa-profile): method summary + configuration
   cards. Summary uses bare <span>s (excluded from the global colour rule above),
   so colour them here - muted label, emphasised value. */
/* WP 2FA's .default_styling paints .wp2fa-profile (#wp2fa-profile-section) with a
   white card background + border/shadow meant for a light page. Strip it - incl.
   via the id selector so we beat any id-scoped default - so our dark wrapper shows
   and the light text stays readable. */
.wp-2fa-shortcode-wrapper .wp2fa-profile,
.wp-2fa-shortcode-wrapper #wp2fa-profile-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.wp-2fa-shortcode-wrapper .wp2fa-profile__summary { margin: 0 0 6px; background: transparent !important; }
.wp-2fa-shortcode-wrapper .wp2fa-profile__summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 0;
    border-bottom: 1px solid #16304d;
}
.wp-2fa-shortcode-wrapper .wp2fa-profile__summary-label { color: #9fb2c2 !important; }
.wp-2fa-shortcode-wrapper .wp2fa-profile__summary-value { color: #e6edf3 !important; font-weight: 600; }
.wp-2fa-shortcode-wrapper .wp2fa-profile__section-title { margin: 16px 0 10px; }
.wp-2fa-shortcode-wrapper .wp2fa-profile__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.wp-2fa-shortcode-wrapper .wp2fa-profile__card {
    background: #0a1929 !important;
    border: 1px solid #1e3a5f !important;
    border-radius: 10px;
    padding: 16px 18px;
}
.wp-2fa-shortcode-wrapper .wp2fa-profile__card-title { margin: 0 0 12px; }
.wp-2fa-shortcode-wrapper .wp2fa-profile__btn-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* WP 2FA v4.x setup wizard + login challenge. v4 replaced the old micromodal
   markup (.modal__container / .modal__overlay / .option-pill) with a native
   modal: .wp2fa-setup-wizard-overlay > .wp2fa-setup-wizard-modal.default_styling
   .wp2fa-modal > header / body / footer. These render at body level, OUTSIDE
   .re-2fa-embed, so they need their own dark-theme rules. Everything is scoped
   under .wp2fa-modal / .wp2fa-setup-wizard-* so we never touch unrelated
   components, and this stylesheet is frontend-only so wp-admin's WP 2FA UI is
   unaffected. !important is used on the key surfaces because we are overriding
   WP 2FA's bundled "default_styling" CSS. */
.wp2fa-setup-wizard-overlay { background: rgba(5, 12, 22, 0.7) !important; }
.wp2fa-setup-wizard-modal {
    background: #0d1f33 !important;
    color: #e6edf3 !important;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    max-width: 720px;
    width: calc(100% - 32px);
    margin: auto;
}
.wp2fa-setup-wizard-header,
.wp2fa-setup-wizard-body,
.wp2fa-setup-wizard-footer { background: transparent !important; }

/* Title. v4 injects an inline <style> in the body that hides #wp2fa-wizard-title
   and lifts the body -44px because the body carries its own <h3>; we only need to
   colour whichever title is visible. */
.wp2fa-setup-wizard-title,
.wp2fa-modal h3 { color: #4498D8 !important; }

/* WP 2FA's default text colour is meant for a white modal, so it must be
   overridden with !important or it stays near-invisible on our dark panel.
   Bare <span> is deliberately excluded so button labels keep their white. */
.wp2fa-modal p,
.wp2fa-modal li,
.wp2fa-modal label,
.wp2fa-modal small,
.wp2fa-modal b,
.wp2fa-modal strong,
.wp2fa-modal .description,
.wp2fa-email-help-text,
.wp2fa-modal .verification-response { color: #c9d4dd !important; }
.wp2fa-modal a:not(.button) { color: #91CAEA; }

/* Method / email-address option cards. Selected state uses brand mustard per the
   brand guidelines (mustard is for selected states only). */
.wp2fa-email-options-list { list-style: none; margin: 0; padding: 0; }
.wp2fa-email-option-item { margin: 0 0 10px; }
.wp2fa-email-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
}
.wp2fa-email-option-item:has(.wp2fa-email-option-radio:checked) .wp2fa-email-option-label {
    border-color: #E6AD23;
    box-shadow: inset 0 0 0 1px #E6AD23;
}
.wp2fa-email-option-radio { accent-color: #E6AD23; }

/* The IMPORTANT notice box. WP 2FA's default is a yellow warning panel, set via
   the #wp2fa-email-notice id, so we scope by the modal + id to outrank it and
   restyle it dark with a mustard accent edge. */
.wp2fa-email-notice,
.wp2fa-modal #wp2fa-email-notice {
    display: flex;
    gap: 10px;
    background: #0a1929 !important;
    border: 1px solid #1e3a5f !important;
    border-left: 3px solid #E6AD23 !important;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 14px;
    color: #c9d4dd !important;
}
.wp2fa-email-notice p { margin: 4px 0 0; }
.wp2fa-email-notice-icon { color: #E6AD23; }

/* Buttons - primary filled brand blue, secondary outlined; never uppercase.
   Some controls carry both .button-primary and .wp-2fa-button-secondary (e.g.
   Cancel); the secondary rule is last so those resolve to the outlined style. */
.wp2fa-modal .button {
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 4px;
}
.wp2fa-modal .wp-2fa-button-primary,
.wp2fa-modal .button-primary {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: #fff !important;
}
.wp2fa-modal .wp-2fa-button-primary:hover,
.wp2fa-modal .button-primary:hover {
    background: #005d8f !important;
    border-color: #005d8f !important;
}
.wp2fa-modal .wp-2fa-button-secondary,
.wp2fa-modal .button-secondary,
.wp2fa-setup-wizard-footer .button:not(.button-primary) {
    background: transparent !important;
    border: 1px solid #4498D8 !important;
    color: #91CAEA !important;
}

/* Close (x). Strip the Astra global "button { border; background }" box so it
   stays a bare glyph, and keep it visible on the dark panel. */
.wp2fa-setup-wizard-close {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #c9d4dd !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.wp2fa-setup-wizard-close:hover { color: #e6edf3 !important; }

/* Inputs: email/code fields, manual app key, verification code, backup-codes
   textarea. Full-width, box-sizing safe. */
.wp2fa-modal input[type="text"],
.wp2fa-modal input[type="tel"],
.wp2fa-modal input[type="number"],
.wp2fa-modal input[type="email"],
.wp2fa-modal textarea,
.wp2fa-modal select,
.wp2fa-modal .app-key {
    width: 100%;
    box-sizing: border-box;
    background: #0a1929 !important;
    border: 1px solid #1e3a5f !important;
    color: #e6edf3 !important;
    border-radius: 6px;
}
.wp2fa-modal input:focus,
.wp2fa-modal textarea:focus,
.wp2fa-modal select:focus { outline: 2px solid #4498D8; border-color: #4498D8 !important; }
.wp2fa-modal .click-to-copy { color: #91CAEA; text-transform: lowercase; cursor: pointer; }

/* QR keeps its own light quiet zone (the SVG is on white); stay responsive. */
.wp2fa-modal .qr-code,
.wp2fa-modal img { max-width: 100%; height: auto; border-radius: 8px; }

.re-user-settings__section {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
}
.re-user-settings__section-head h2 { color: #4498D8; }
.re-user-settings__hint { color: #c9d4dd; }
.re-sig-row {
    background: #0a1929;
    border: 1px solid #1e3a5f;
}
.re-sig-empty { color: #8aa0b2; }

.re-inbox-row {
    background: #0a1929;
    border: 1px solid #1e3a5f;
}
.re-inbox-row__email { color: #e6edf3; }
.re-inbox-row__muted { color: #8aa0b2; }

.re-pb-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e6edf3;
    font-size: 14px;
    cursor: pointer;
}
.re-pb-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: #4498D8; }
.re-pb-toggle.is-disabled { cursor: not-allowed; opacity: 0.55; }
.re-pb-toggle.is-disabled input[type="checkbox"] { cursor: not-allowed; }
.re-tracking-org__url-row { margin-top: 12px; }
.re-tracking-org__url-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #c9d4dd;
    margin-bottom: 4px;
}
.re-tracking-org__url-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #e6edf3;
    font-size: 14px;
}
.re-tracking-org__url-input:focus { outline: 2px solid #4498D8; border-color: #4498D8; }
.re-tracking-org__actions { margin-top: 12px; }
.re-pb-override-note {
    margin: 8px 0 0;
    color: #f1c089;
    background: rgba(220, 150, 80, 0.10);
    border-left: 2px solid rgba(220, 150, 80, 0.45);
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 0 6px 6px 0;
}

/* Activity timeline - dark theme overrides for body text + log-activity modal */
.re-activity__subject { color: #e6edf3; }
.re-activity__body,
.re-activity__outcome,
.re-activity__next-step,
.re-activity__due { color: #c9d4dd; }
.re-activity__manual-reason {
    color: #f1c089;
    background: rgba(220, 150, 80, 0.10);
    border-left: 2px solid rgba(220, 150, 80, 0.45);
    padding: 6px 10px;
    border-radius: 4px;
}

.re-activity__date { color: #8aa0b2; }
.re-activity__subtype { color: #8aa0b2; }

.re-activity__btn {
    background: transparent;
    border: 1px solid #1e3a5f;
    color: #c9d4dd;
}
.re-activity__btn:hover {
    background: rgba(68, 152, 216, 0.12);
    color: #e6edf3;
    border-color: #2c5380;
}
.re-activity__btn--primary,
a.re-activity__btn--primary {
    background: #4498D8;
    border-color: #4498D8;
    color: #ffffff;
    text-decoration: none;
}
.re-activity__btn--primary:hover,
a.re-activity__btn--primary:hover {
    background: #3a82c0;
    border-color: #3a82c0;
    color: #ffffff;
}
.re-activity__subject-link {
    color: inherit;
    text-decoration: none;
}
.re-activity__subject-link:hover {
    color: #4498D8;
    text-decoration: underline;
}
.re-activity__btn--danger:hover {
    background: rgba(255, 138, 115, 0.15);
    color: #ff8a73;
    border-color: rgba(255, 138, 115, 0.4);
}

.re-activity__link {
    background: rgba(68, 152, 216, 0.12);
    border-color: rgba(68, 152, 216, 0.3);
    color: #91CAEA;
}
.re-activity__link:hover {
    background: rgba(68, 152, 216, 0.2);
    color: #e6edf3;
}
.re-activity__rollup {
    background: rgba(68, 152, 216, 0.12);
    border-color: rgba(68, 152, 216, 0.3);
    color: #91CAEA;
}
.re-activity__rollup:hover {
    background: rgba(68, 152, 216, 0.22);
    color: #e6edf3;
}

/* Log activity modal - chrome supplied by the .re-dialog base. */
.re-activity-modal__label { color: #c9d4dd; }
.re-activity-modal__radio { color: #c9d4dd; }

/* Detail tables (Contacts on Org/Opportunity detail) - drop all cell
   borders so the table reads as a clean list inside the panel. Also kill
   link underlines on the contact name column (the original rule was
   getting beaten by the WP theme's global a-styling). */
.re-detail-table,
.re-detail-table td,
.re-detail-table th,
.re-detail-table tr {
    border: none !important;
    box-shadow: none !important;
}
.re-detail-table-name a,
.re-detail-table-name a:visited,
.re-detail-table-name a:hover,
.re-detail-table-name a:focus {
    text-decoration: none !important;
}

/* Email compose modal - higher-specificity dark overrides via .re-email-modal
   so this modal definitively reads on the dark theme regardless of any
   cached or third-party light-theme rules. TinyMCE internals (the .mce-*
   editor chrome) live in its own iframe and are deliberately untouched. */
.re-email-modal .re-cal-modal__panel {
    background: #0d1f33;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
}

.re-email-modal .re-cal-modal__close { color: #8aa0b2; }
.re-email-modal .re-cal-modal__close:hover { color: #e6edf3; }
.re-email-modal .re-cal-modal__minimise { color: #8aa0b2; }
.re-email-modal .re-cal-modal__minimise:hover { color: #e6edf3; }

.re-email-modal h1,
.re-email-modal h2,
.re-email-modal h3 { color: #4498D8 !important; }

.re-email-modal label,
.re-email-modal .re-cal-form label { color: #c9d4dd; }

.re-email-modal input[type="text"],
.re-email-modal input[type="email"],
.re-email-modal input[type="url"],
.re-email-modal textarea,
.re-email-modal select {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

.re-email-modal input::placeholder,
.re-email-modal textarea::placeholder { color: #5b6f7e; }

.re-email-modal input:focus,
.re-email-modal textarea:focus,
.re-email-modal select:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}

.re-email-modal .re-cal-form__status,
.re-email-modal .re-cal-form__note { color: #8aa0b2; }

.re-email-modal .re-email-attachments__hint { color: #8aa0b2; }

/* Attach + Send buttons */
.re-email-modal .re-btn,
.re-email-modal .re-btn:visited {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}
.re-email-modal .re-btn:hover {
    background: #14273f;
    border-color: #2c5380;
    color: #e6edf3;
}
.re-email-modal .re-btn--primary,
.re-email-modal .re-btn--primary:visited {
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
}
.re-email-modal .re-btn--primary:hover {
    filter: brightness(1.05);
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
}

/* Conversation reply modal (LinkedIn / SMS / WhatsApp) - dark-theme overrides
   on top of .re-cal-modal, same approach as .re-email-modal. Mobile-first:
   header chips stack, action row wraps, textareas expand to full width. */
.re-conversation-reply-modal .re-cal-modal__panel {
    background: #0d1f33;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    width: min(560px, 92vw);
}
.re-conversation-reply-modal .re-cal-modal__close { color: #8aa0b2; }
.re-conversation-reply-modal .re-cal-modal__close:hover { color: #e6edf3; }
.re-conversation-reply-modal h1,
.re-conversation-reply-modal h2,
.re-conversation-reply-modal h3 { color: #4498D8 !important; }
.re-conversation-reply-modal label,
.re-conversation-reply-modal .re-cal-form label { color: #c9d4dd; }
.re-conversation-reply-modal textarea {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
    min-height: 6em;
    resize: vertical;
}
.re-conversation-reply-modal textarea::placeholder { color: #5b6f7e; }
.re-conversation-reply-modal textarea:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}
.re-conversation-reply-modal__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}
.re-conversation-reply-modal__head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.re-conversation-reply-modal__chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(68, 152, 216, 0.18);
    color: #91CAEA;
    font-size: 12px;
    line-height: 1.6;
}
.re-conversation-reply-modal__date { color: #8aa0b2; font-size: 12px; }
.re-conversation-reply-modal__excerpt {
    margin: 0;
    color: #c9d4dd;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 6em;
    overflow-y: auto;
    overflow-wrap: anywhere;
}
.re-conversation-reply-modal__optional { color: #8aa0b2; font-weight: normal; font-size: 12px; }
.re-conversation-reply-modal__suggest-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: -4px;
    min-width: 0;
}
.re-conversation-reply-modal__suggest-row .re-cal-form__status { color: #8aa0b2; font-size: 12px; min-width: 0; }
.re-conversation-reply-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
@media (min-width: 640px) {
    .re-conversation-reply-modal__actions { justify-content: flex-end; }
}
.re-conversation-reply-modal .re-btn,
.re-conversation-reply-modal .re-btn:visited {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}
.re-conversation-reply-modal .re-btn:hover {
    background: #14273f;
    border-color: #2c5380;
    color: #e6edf3;
}
.re-conversation-reply-modal .re-btn:disabled,
.re-conversation-reply-modal .re-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.re-conversation-reply-modal .re-btn--primary,
.re-conversation-reply-modal .re-btn--primary:visited {
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
}
.re-conversation-reply-modal .re-btn--primary:hover {
    filter: brightness(1.05);
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
}

/* TinyMCE dark-surface theming.
 *
 * Add the marker class `re-tinymce-dark` to any wrapper that mounts a
 * TinyMCE editor on a dark frontend surface (email compose modal, meeting
 * follow-up form, anywhere else we grow one) - it picks up these styles
 * automatically. We previously scoped these rules to `.re-email-modal`
 * only and ended up with grey icons on every other surface; consolidating
 * here is the one-line fix every future TinyMCE host should reuse. */

/* TinyMCE wrapper - dark border, blend with panel. */
.re-tinymce-dark .mce-tinymce,
.re-tinymce-dark div.mce-edit-area,
.re-tinymce-dark .tox.tox-tinymce {
    border-color: #1e3a5f !important;
    border-radius: 8px;
    background: #0a1929 !important;
}
.re-tinymce-dark .mce-toolbar-grp,
.re-tinymce-dark .mce-statusbar,
.re-tinymce-dark .tox .tox-editor-header,
.re-tinymce-dark .tox .tox-toolbar,
.re-tinymce-dark .tox .tox-toolbar__primary,
.re-tinymce-dark .tox .tox-toolbar-overlord {
    background: #0d1f33 !important;
    border-color: #1e3a5f !important;
    box-shadow: none !important;
}

/* TinyMCE 4 toolbar icons + group separators (the WordPress-bundled
   editor that wp_enqueue_editor() loads). Icons are font-glyphs that
   inherit `color`; group dividers are a 1px right-border on each group
   except the last one in the LightGray skin. */
.re-tinymce-dark .mce-btn,
.re-tinymce-dark .mce-btn button,
.re-tinymce-dark .mce-btn .mce-ico,
.re-tinymce-dark .mce-btn i.mce-caret { color: #e6edf3 !important; }
.re-tinymce-dark .mce-btn:hover,
.re-tinymce-dark .mce-btn:hover button,
.re-tinymce-dark .mce-btn:hover .mce-ico { color: #ffffff !important; }
.re-tinymce-dark .mce-btn { background: transparent !important; border-color: transparent !important; }
.re-tinymce-dark .mce-btn:hover,
.re-tinymce-dark .mce-btn.mce-active,
.re-tinymce-dark .mce-btn:focus {
    background: rgba(68, 152, 216, 0.18) !important;
    border-color: transparent !important;
}
.re-tinymce-dark .mce-btn-group:not(:first-child) { border-left: 0 none !important; }
.re-tinymce-dark .mce-btn-group .mce-btn { border-color: transparent !important; }
.re-tinymce-dark .mce-toolbar .mce-btn-group > div { border-color: transparent !important; }
.re-tinymce-dark .mce-panel { background: #0d1f33 !important; border-color: #1e3a5f !important; }

/* TinyMCE 5/6 chrome (tox-*). */
.re-tinymce-dark .tox .tox-toolbar__group {
    border-color: transparent !important;
    border-right: none !important;
    border-left: none !important;
}
.re-tinymce-dark .tox .tox-tbtn { color: #e6edf3 !important; }
.re-tinymce-dark .tox .tox-tbtn svg { fill: #e6edf3 !important; }
.re-tinymce-dark .tox .tox-tbtn:hover { background: rgba(68, 152, 216, 0.15) !important; }
.re-tinymce-dark .tox .tox-tbtn:hover svg { fill: #ffffff !important; }
.re-tinymce-dark .tox .tox-tbtn--enabled,
.re-tinymce-dark .tox .tox-tbtn--enabled:hover { background: rgba(68, 152, 216, 0.25) !important; }

/* ── Mailbox history sync (per-contact + bulk) ────────────────────────── */

/* Pipeline header bulk-sync button (matches the find-prospects styling). */
.re-kanban-wrap .re-kanban-sync-btn {
    margin-left: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #4498D8;
    background: transparent;
    color: #4498D8;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.re-kanban-wrap .re-kanban-sync-btn:hover { background: #4498D8; color: #fff; }

/* Mailbox-sync modal - chrome supplied by the .re-dialog base. */
.re-mbsync-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #4498D8;
}
.re-mbsync-modal__sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #c9d4dd;
}
.re-mbsync-modal__sub--ok { color: #79e2a3; }
.re-mbsync-modal__elapsed {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: #8aa1b3;
    font-size: 13px;
    text-align: right;
}

/* Indeterminate-ish progress bar (used during sync + during bulk import). */
.re-mbsync-progress {
    height: 6px;
    background: #1e3a5f;
    border-radius: 3px;
    overflow: hidden;
}
.re-mbsync-progress__bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #4498D8, #79b8e8, #4498D8);
    background-size: 200% 100%;
    animation: re-mbsync-progress-shimmer 1.6s linear infinite;
    transition: width .25s ease;
}
@keyframes re-mbsync-progress-shimmer {
    0%   { background-position: 0%   0; }
    100% { background-position: 200% 0; }
}

/* Toolbar across the discovery modal. */
.re-mbsync-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.re-mbsync-filter {
    flex: 1 1 200px;
    background: #051324;
    border: 1px solid #1e3a5f;
    color: #e6eef5;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
}
.re-mbsync-filter:focus { outline: 2px solid #4498D8; outline-offset: 0; }
.re-mbsync-toggle {
    font-size: 12px;
    color: #c9d4dd;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.re-mbsync-spacer { flex: 1; }

/* Tables (review modal + discovery modal). */
.re-mbsync-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.re-mbsync-table th,
.re-mbsync-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #142a3f;
    vertical-align: middle;
}
.re-mbsync-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8aa1b3;
    font-weight: 600;
}
.re-mbsync-table tbody tr:hover td { background: rgba(68, 152, 216, 0.08); }
.re-mbsync-table__current {
    color: #8aa1b3;
    font-style: italic;
}
.re-mbsync-table--discover td:nth-child(4),
.re-mbsync-table--discover td:nth-child(5) { font-variant-numeric: tabular-nums; }

.re-mbsync-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.re-mbsync-pill--crm {
    background: rgba(121, 226, 163, 0.15);
    color: #79e2a3;
    border: 1px solid rgba(121, 226, 163, 0.45);
}

.re-mbsync-empty {
    color: #8aa1b3;
    font-size: 13px;
    text-align: center;
    padding: 18px 0;
    margin: 0;
}

/* Bulk import progress log. */
.re-mbsync-bulk-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    font-size: 13px;
    color: #e6eef5;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    background: #051324;
}
.re-mbsync-bulk-list li {
    padding: 6px 10px;
    border-bottom: 1px solid #142a3f;
}
.re-mbsync-bulk-list li:last-child { border-bottom: 0; }
.re-mbsync-bulk-item--err { color: #f0c463; }

/* Error variant of the existing comms toast for the sync flow. */
.re-comms-toast.re-comms-toast--error { background: #842029; }

/* ── Coaching roster tabs on [re_crm_pipeline] (v1.31.0) ─────────────── */
.re-kanban-roster-tabs { display: flex; gap: 0; border-bottom: 1px solid #E1E6E9; margin-bottom: 16px; }
.re-kanban-roster-tab {
    padding: 10px 16px; color: #576E7A !important; text-decoration: none !important;
    border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500;
}
.re-kanban-roster-tab:hover { color: #4498D8 !important; }
.re-kanban-roster-tab--active,
.re-kanban-roster-tab--active:visited,
.re-kanban-roster-tab--active:hover { color: #4498D8 !important; border-bottom-color: #4498D8; }
.re-kanban-roster-hint { color: #576E7A; font-size: 13px; }

/* ── Coach panel inside [re_user_settings] (v1.31.0) ─────────────────── */
.re-coach-settings__profile { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.re-coach-settings__profile label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #223F4C; }
.re-coach-settings__profile input[type="text"],
.re-coach-settings__profile textarea { padding: 8px 10px; border: 1px solid #E1E6E9; border-radius: 6px; font-size: 14px; }
.re-coach-settings__hint { color: #576E7A; font-size: 13px; }
.re-coach-settings__hint a { color: #4498D8; text-decoration: underline; }
.re-coach-settings__rates { margin-top: 32px; }
.re-coach-rate-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.re-coach-rate-row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 14px 16px; border: 1px solid #E1E6E9; border-radius: 8px; background: #fff;
}
.re-coach-rate-row__main { flex: 1; min-width: 0; }
.re-coach-rate-row__name { font-size: 14px; color: #223F4C; }
.re-coach-rate-row__meta { display: block; color: #576E7A; font-size: 13px; margin-top: 4px; }
.re-coach-rate-row__desc { color: #576E7A; font-size: 13px; margin: 6px 0 0; }
.re-coach-rate-row__actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; }
.re-coach-rate-form__row { display: flex; gap: 12px; flex-wrap: wrap; }
.re-coach-rate-form__row label { flex: 1; min-width: 130px; }

/* ── [re_coach_booking] frontend dark theme (v1.31.0) ───────────────────
 * Brand: Montserrat (inherited), #4498D8 for titles, #91CAEA for links,
 * #E6AD23 reserved for selected states / primary CTA hover, dark panels
 * (#0d1f33 / #0a1929) on the site's dark frontend.
 */
.re-coach-booking,
.re-coach-directory {
    max-width: 880px;
    margin: 0 auto;
    color: #e6edf3;
    font-family: Montserrat, system-ui, -apple-system, sans-serif;
}

/* Shared booking-page header. */
.re-coach-booking__header {
    display: flex; gap: 18px; align-items: center;
    padding-bottom: 18px; border-bottom: 1px solid #1e3a5f;
    margin-bottom: 24px;
}
.re-coach-booking__avatar { border-radius: 50%; flex-shrink: 0; }
.re-coach-booking__heading { flex: 1; min-width: 0; }
.re-coach-booking__title  { margin: 0; color: #4498D8; font-size: 26px; font-weight: 700; line-height: 1.2; }
.re-coach-booking__blurb  { margin: 10px 0 0; color: #c9d4dd; font-size: 14px; line-height: 1.55; max-width: 720px; }
.re-coach-booking__blurb p:last-child { margin-bottom: 0; }
.re-coach-booking__blurb a { color: #91CAEA; }
.re-coach-booking__step-sub { color: #c9d4dd; font-size: 14px; margin: 6px 0 0; }
.re-coach-booking__step-title { color: #e6edf3; font-size: 17px; font-weight: 600; margin: 24px 0 12px; }
.re-coach-booking__note { color: #8aa0b2; font-size: 13px; margin: 12px 0 0; }
.re-coach-booking__empty { color: #c9d4dd; font-size: 14px; padding: 16px; background: rgba(255,255,255,0.03); border: 1px dashed #1e3a5f; border-radius: 8px; }
.re-coach-booking__back { margin: 0 0 16px; }
.re-coach-booking__back a { color: #91CAEA; text-decoration: none; font-size: 13px; }
.re-coach-booking__back a:hover { color: #4498D8; }

/* Step 1: session-type cards. */
.re-coach-rate-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.re-coach-rate-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    color: #e6edf3;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.re-coach-rate-card:hover { border-color: #4498D8; }
.re-coach-rate-card__header { display: flex; flex-direction: column; gap: 6px; }
.re-coach-rate-card__name {
    margin: 0; color: #4498D8; font-size: 17px; font-weight: 600;
    text-decoration: none;
}
.re-coach-rate-card__meta {
    display: flex; gap: 12px; align-items: baseline;
    color: #c9d4dd; font-size: 13px;
}
.re-coach-rate-card__duration { color: #8aa0b2; }
.re-coach-rate-card__price { color: #e6edf3; font-weight: 600; }
.re-coach-rate-card__desc {
    margin: 0;
    color: #c9d4dd; font-size: 14px; line-height: 1.5;
}
.re-coach-rate-card__actions {
    margin-top: auto; display: flex; justify-content: flex-end;
}

/* Step 2: day picker + slot list (mirrors the calendar create-modal UX). */
.re-coach-day-picker { margin: 0 0 24px; }
.re-coach-day-picker__chips {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.re-coach-day-chip,
.re-coach-day-chip:visited {
    padding: 8px 14px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    color: #c9d4dd !important;
    border-radius: 999px;
    text-decoration: none !important;
    font-size: 13px;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.re-coach-day-chip:hover {
    border-color: #4498D8;
    color: #e6edf3 !important;
}
.re-coach-day-chip--active,
.re-coach-day-chip--active:visited,
.re-coach-day-chip--active:hover {
    background: rgba(230, 173, 35, 0.16);
    border-color: #E6AD23;
    color: #E6AD23 !important;
    font-weight: 600;
}
.re-coach-day-picker__date {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: #8aa0b2;
}
.re-coach-day-picker__date input[type="date"] {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
}
.re-coach-slot-list {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.re-coach-slot,
.re-coach-slot:visited {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 10px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    color: #e6edf3 !important;
    font-size: 14px;
    text-decoration: none !important;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.re-coach-slot:hover {
    background: rgba(68, 152, 216, 0.18);
    border-color: #4498D8;
}
.re-coach-slot__sep { color: #8aa0b2; }
.re-coach-slot__end { color: #c9d4dd; font-size: 13px; }

/* Step 3: confirm summary. */
.re-coach-booking-summary {
    margin: 0 0 22px;
    padding: 18px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    display: grid; gap: 10px;
}
.re-coach-booking-summary div { display: flex; gap: 12px; align-items: baseline; }
.re-coach-booking-summary dt { color: #8aa0b2; font-size: 13px; min-width: 88px; margin: 0; }
.re-coach-booking-summary dd { color: #e6edf3; font-size: 14px; margin: 0; }
.re-coach-booking-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* /book/ root directory. */
.re-coach-directory__header {
    text-align: left; padding-bottom: 18px;
    border-bottom: 1px solid #1e3a5f; margin-bottom: 24px;
}
.re-coach-directory__header h2 { margin: 0; color: #4498D8; font-size: 26px; font-weight: 700; }
.re-coach-directory__sub { color: #c9d4dd; font-size: 14px; margin: 8px 0 0; }
.re-coach-directory__empty { color: #c9d4dd; font-size: 14px; padding: 16px; background: rgba(255,255,255,0.03); border: 1px dashed #1e3a5f; border-radius: 8px; }
.re-coach-directory__grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.re-coach-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    transition: border-color 0.12s ease;
}
.re-coach-card:hover { border-color: #4498D8; }
.re-coach-card__head { display: flex; gap: 14px; align-items: center; }
.re-coach-card__avatar { border-radius: 50%; flex-shrink: 0; }
.re-coach-card__name { margin: 0; color: #4498D8; font-size: 18px; font-weight: 600; }
.re-coach-card__blurb { color: #c9d4dd; font-size: 14px; line-height: 1.5; }
.re-coach-card__blurb p { margin: 0 0 6px; }
.re-coach-card__blurb p:last-child { margin-bottom: 0; }
.re-coach-card__blurb a { color: #91CAEA; }
.re-coach-card__actions { margin-top: auto; display: flex; justify-content: flex-end; }

/* Brand-blue primary button scoped to the coach booking surface (matches
   the calendar create modal's primary CTA). */
.re-coach-booking .re-btn--primary,
.re-coach-booking .re-btn--primary:visited,
.re-coach-directory .re-btn--primary,
.re-coach-directory .re-btn--primary:visited {
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff !important;
    border: none;
    text-decoration: none;
}
.re-coach-booking .re-btn--primary:hover,
.re-coach-directory .re-btn--primary:hover {
    filter: brightness(1.06);
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff !important;
}

/* ==========================================================================
   Meeting Plan + Meeting Room - dark theme
   Plan: pre-meeting prep surface (read-aloud MSA + sectioned question cards).
   Room: live + post-meeting surface (open/done split, timer, pain capture).
   Both keep the brand's blue #4498D8 for titles / primary CTAs; mustard
   #E6AD23 is reserved for the "Close on this" MAP badge and required marks.
   ========================================================================== */

.re-meeting-plan,
.re-meeting-room {
    max-width: 920px;
    margin: 0 auto;
}

/* --- Plan: header ------------------------------------------------------- */

.re-meeting-plan__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin: 12px 0 24px;
    flex-wrap: wrap;
}
.re-meeting-plan__eyebrow {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8aa0b2;
    margin-bottom: 4px;
}
.re-meeting-plan__title {
    margin: 0 0 6px;
    color: #4498D8;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}
.re-meeting-plan__meta {
    margin: 0;
    color: #8aa0b2;
    font-size: 14px;
}
.re-meeting-plan__dot { margin: 0 6px; color: #4a6075; }
.re-meeting-plan__meta a { color: #4498D8; }

.re-meeting-plan__room-cta {
    align-self: center;
    white-space: nowrap;
}
.re-meeting-plan__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    align-self: center;
    margin-left: auto;
}
.re-meeting-plan__reschedule { white-space: nowrap; }
.re-meeting-plan__resync { white-space: nowrap; }
.re-meeting-plan__resync-status {
    flex-basis: 100%;
    min-width: 0;
    font-size: 13px;
    color: rgba(230, 237, 243, 0.85);
}
.re-meeting-plan__resync-status.is-error { color: #ff8a73; }

/* --- Reschedule modal (meeting plan + room) ----------------------------- */
.re-reschedule-modal__title {
    margin: 0;
    font-size: 16px;
    color: #4498D8;
    font-weight: 600;
}
.re-reschedule-modal__section { display: flex; flex-direction: column; gap: 10px; }
.re-reschedule-modal__section-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #e6edf3;
}
.re-reschedule-modal__optional { color: #8aa0b2; font-weight: 400; }
.re-reschedule-modal__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #8aa0b2;
}

/* --- Cancel-meeting modal (meeting room) -------------------------------- */

.re-cancel-modal__title {
    margin: 0;
    font-size: 16px;
    color: #4498D8;
    font-weight: 600;
}
.re-cancel-modal__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #8aa0b2;
}
.re-cancel-modal__label { font-size: 13.5px; font-weight: 600; color: #e6edf3; }
.re-cancel-modal__optional { color: #8aa0b2; font-weight: 400; }
.re-cancel-modal__reason { width: 100%; box-sizing: border-box; }

/* --- MSA card ----------------------------------------------------------- */

.re-msa-card {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 24px;
}
.re-msa-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}
.re-msa-card__title {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8aa0b2;
    font-weight: 600;
}
.re-msa-card__edit-toggle {
    background: transparent;
    border: 0;
    color: #4498D8;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
}
.re-msa-card__edit-toggle:hover { background: rgba(68, 152, 216, 0.1); }
.re-msa-card__narrative {
    margin: 0;
    color: #e6edf3;
    font-size: 16px;
    line-height: 1.55;
}
.re-msa-card__empty {
    margin: 0;
    color: #8aa0b2;
    font-size: 14px;
    line-height: 1.5;
}
.re-msa-card__edit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #16314f;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-msa-card__edit[hidden] { display: none; }
.re-msa-card__textarea {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.55;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 140px;
}
.re-msa-card__textarea:focus {
    outline: none;
    border-color: #4498D8;
}
.re-msa-card__edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.re-msa-card__edit-actions [data-re-msa-reset] {
    margin-left: auto;
}
.re-msa-card__edit-status {
    font-size: 12px;
    color: #8aa0b2;
}
/* --- Coaching relationship overview ------------------------------------- */

.re-coaching-overview {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 24px;
}
.re-coaching-overview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 12px;
}
.re-coaching-overview__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #4498D8;
    line-height: 1.3;
}
.re-coaching-overview__status {
    font-size: 12px;
    color: #8aa0b2;
}
.re-coaching-overview__status--approved { color: #4cae7d; }
.re-coaching-overview__status--pending  { color: #c7d4df; }
.re-coaching-overview__regen { margin-left: auto; }
.re-coaching-overview__regen[disabled] { opacity: 0.6; cursor: progress; }
.re-coaching-overview__body {
    color: #e6edf3;
    font-size: 16px;
    line-height: 1.6;
}
.re-coaching-overview__body p { margin: 0 0 10px; }
.re-coaching-overview__body p:last-child { margin-bottom: 0; }
.re-coaching-overview__body--empty {
    color: #8aa0b2;
    font-size: 14px;
    line-height: 1.5;
}
.re-coaching-overview__edit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #16314f;
}
.re-coaching-overview__edit[hidden] { display: none; }
.re-coaching-overview__textarea {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 160px;
}
.re-coaching-overview__textarea:focus {
    outline: none;
    border-color: #4498D8;
}
.re-coaching-overview__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.re-coaching-overview__actions[hidden] { display: none; }
.re-coaching-overview__flash {
    font-size: 12px;
    color: #8aa0b2;
}

/* --- Intake card -------------------------------------------------------- */

.re-intake-card {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 4px 0;
    margin-bottom: 24px;
}
.re-intake-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
}
.re-intake-card__title {
    margin: 0 0 2px;
    color: #4498D8;
    font-size: 16px;
    font-weight: 600;
}
.re-intake-card__sub {
    margin: 0;
    color: #8aa0b2;
    font-size: 13px;
    line-height: 1.5;
}
.re-intake-card__sub em { color: #e6edf3; font-style: normal; font-weight: 500; }
.re-intake-card__chevron {
    color: #8aa0b2;
    font-size: 14px;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.re-intake-card[data-collapsed="0"] .re-intake-card__chevron { transform: rotate(90deg); color: #4498D8; }
.re-intake-card__body {
    padding: 4px 20px 18px;
    border-top: 1px solid #1e3a5f;
    margin-top: 6px;
}
.re-intake-form { display: flex; flex-direction: column; gap: 16px; }
.re-intake-field { display: flex; flex-direction: column; gap: 6px; }
.re-intake-field--inline { flex-direction: row; align-items: center; gap: 12px; }
.re-intake-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #e6edf3;
}
.re-intake-label--inline { flex-direction: row; align-items: baseline; gap: 8px; }
.re-intake-hint {
    color: #8aa0b2;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
}
.re-intake-hint--inline { font-size: 12px; }
.re-intake-field .re-input,
.re-intake-field .re-textarea {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
}
.re-intake-field .re-input + .re-input { margin-top: 6px; }
.re-intake-field .re-input:focus,
.re-intake-field .re-textarea:focus {
    border-color: #4498D8;
    outline: none;
}
/* Specificity bump so the time input keeps its narrow width against the
   generic .re-intake-field .re-input { width: 100% } rule above. */
.re-intake-field .re-input.re-intake-field__time { width: 110px; }

.re-feared-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.re-feared-row { display: flex; align-items: center; gap: 8px; }
.re-feared-row .re-input { flex: 1; }
.re-feared-row__remove {
    background: transparent;
    border: 0;
    color: #6b7d92;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.re-feared-row__remove:hover {
    color: #dc3232;
    background: rgba(220, 50, 50, 0.08);
}

.re-prior-meetings__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-prior-meeting__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #050d16;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    cursor: pointer;
}
.re-prior-meeting__row:hover { border-color: #2d5183; }
.re-prior-meeting__row input[type="checkbox"] {
    margin: 2px 0 0;
    accent-color: #4498D8;
    flex-shrink: 0;
}
.re-prior-meeting__row:has(input:checked) { border-color: #4498D8; }
.re-prior-meeting__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.re-prior-meeting__title {
    color: #e6edf3;
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.re-prior-meeting__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #8aa0b2;
    font-size: 12px;
}
.re-prior-meeting__dot { color: #3a5170; }
.re-prior-meeting__transcript { color: #4498D8; }
.re-prior-meeting__transcript--none { color: #6b7d92; }

.re-btn--ghost {
    background: transparent !important;
    color: #4498D8 !important;
    border: 1px dashed #2d5183 !important;
}
.re-btn--ghost:hover { background: rgba(68, 152, 216, 0.08) !important; }

.re-intake-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.re-intake-card__sep {
    color: #6b7d92;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.re-intake-card__generate-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #1e3a5f;
}
.re-intake-card__generate-hint {
    margin: 8px 0 0;
    color: #8aa0b2;
    font-size: 12.5px;
}

/* --- Plan: generation progress overlay -------------------------------- */
/* Built by re-meeting-plan.js on submit of the save + generate form. The
   POST is one blocking request that reloads the page, so stage messages
   advance on a timer (estimated, not live). Dark theme, mirrors the
   .re-mbsync-modal scaffold; reuses the re-prospect-spin keyframe. */
.re-plan-progress {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.re-plan-progress__overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 12, 24, 0.78);
}
.re-plan-progress__dialog {
    position: relative;
    width: min(420px, calc(100% - 32px));
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 28px 24px;
    color: #e6eef5;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.55);
    text-align: center;
}
.re-plan-progress__spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid #1e3a5f;
    border-top-color: #4498D8;
    animation: re-prospect-spin 0.9s linear infinite;
}
.re-plan-progress__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #4498D8;
}
.re-plan-progress__sub {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #c9d4dd;
}
.re-plan-progress__note {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7d92;
    text-align: left;
}
.re-plan-progress__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
.re-plan-progress__step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #6b7d92;
    transition: color 0.2s ease;
}
.re-plan-progress__step::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #2c4a6b;
    box-sizing: border-box;
}
.re-plan-progress__step.is-active {
    color: #e6eef5;
}
.re-plan-progress__step.is-active::before {
    border-color: #1e3a5f;
    border-top-color: #4498D8;
    animation: re-prospect-spin 0.9s linear infinite;
}
.re-plan-progress__step.is-done {
    color: #c9d4dd;
}
.re-plan-progress__step.is-done::before {
    content: '\2713';
    border: none;
    color: #79e2a3;
    font-size: 15px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
}

/* --- Plan: question sections ------------------------------------------- */

.re-plan-questions__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.re-plan-questions__title {
    margin: 0;
    color: #4498D8;
    font-size: 18px;
    font-weight: 600;
}
.re-plan-questions__regen { margin: 0; }
.re-plan-questions__sub,
.re-plan-questions__empty {
    color: #8aa0b2;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 18px;
}
.re-plan-questions__empty em { color: #4498D8; font-style: normal; }

.re-plan-section {
    margin-bottom: 22px;
}
.re-plan-section__head {
    margin-bottom: 8px;
}
.re-plan-section__title {
    margin: 0;
    color: #e6edf3;
    font-size: 15px;
    font-weight: 600;
}
.re-plan-section__intro {
    margin: 2px 0 0;
    color: #8aa0b2;
    font-size: 13px;
    line-height: 1.5;
}
.re-plan-section__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-plan-section__empty {
    background: #0d1f33;
    border: 1px dashed #1e3a5f;
    border-radius: 10px;
    padding: 14px 16px;
}
.re-plan-section__empty p {
    margin: 0;
    color: #8aa0b2;
    font-size: 13px;
    line-height: 1.55;
}
.re-plan-section__empty-eg {
    margin-top: 8px !important;
    color: #c7d4e0 !important;
    border-left: 2px solid #4498D8;
    padding-left: 10px;
}

/* --- Plan: question cards ---------------------------------------------- */

.re-plan-question {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    transition: border-color 0.15s ease, opacity 0.2s ease;
}
.re-plan-question:hover { border-color: #2d5183; }
.re-plan-question--open { border-color: #4498D8; }
.re-plan-question--dismissing,
.re-room-question--dismissing { opacity: 0.4; pointer-events: none; }

.re-plan-question__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}
.re-plan-question__chevron {
    color: #8aa0b2;
    margin-top: 1px;
    transition: transform 0.15s ease;
    font-size: 12px;
    line-height: 1.4;
}
.re-plan-question--open .re-plan-question__chevron {
    transform: rotate(90deg);
    color: #4498D8;
}
.re-plan-question__main { flex: 1; min-width: 0; }
.re-plan-question__prompt {
    margin: 0;
    color: #e6edf3;
    font-size: 14.5px;
    line-height: 1.5;
    font-weight: 500;
}
.re-plan-question__context {
    margin: 4px 0 0;
    color: #8aa0b2;
    font-size: 12.5px;
    line-height: 1.5;
    font-style: italic;
}
.re-plan-question__dismiss,
.re-room-question__dismiss {
    background: transparent;
    border: 0;
    color: #6b7d92;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    flex-shrink: 0;
}
.re-plan-question__dismiss:hover,
.re-room-question__dismiss:hover {
    color: #dc3232;
    background: rgba(220, 50, 50, 0.08);
}
.re-plan-question__badge {
    background: rgba(230, 173, 35, 0.15);
    color: #E6AD23;
    border: 1px solid rgba(230, 173, 35, 0.4);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

.re-plan-question__body {
    padding: 0 14px 12px;
    border-top: 1px solid #16314f;
    padding-top: 12px;
    margin-top: -1px;
}
.re-plan-question__notes-label {
    display: block;
    font-size: 12px;
    color: #8aa0b2;
    margin-bottom: 4px;
}
.re-plan-question__notes {
    width: 100%;
    box-sizing: border-box;
    background: #050d16;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    color: #e6edf3;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    margin-top: 4px;
    resize: vertical;
    min-height: 64px;
}
.re-plan-question__notes:focus {
    outline: none;
    border-color: #4498D8;
}
.re-plan-question__notes-status {
    margin: 4px 0 0;
    font-size: 12px;
    color: #8aa0b2;
    min-height: 16px;
}

.re-plan-section--map .re-plan-question { border-color: rgba(230, 173, 35, 0.35); }
.re-plan-section--map .re-plan-question:hover { border-color: rgba(230, 173, 35, 0.65); }
.re-plan-section--map .re-plan-question--open { border-color: #E6AD23; }

.re-plan-questions__footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.re-btn--lg { padding: 10px 22px; font-size: 15px; }

/* ==========================================================================
   Meeting Room - live + post-meeting surface
   Sticky countdown timer, open / done question lists, floating right
   toolbar, and four modals (add question, add note, record pain, capture
   MAP). Inherits the dark theme from .re-meeting-plan / .re-meeting-room
   on the colour rule earlier in this file.
   ========================================================================== */

.re-meeting-room { max-width: 1040px; position: relative; }
.re-meeting-room__inner { max-width: 820px; margin: 0 auto; }

/* --- Sticky top bar (countdown timer + action toolbar) -----------------
   Sits in normal page flow between the attendee chips and the read-aloud
   card. Becomes pinned to the top of the viewport once scrolled past so
   the actions remain in reach during the meeting. */

.re-room-topbar {
    /* Lives in normal flow until the JS sentinel toggles .is-fixed.
       CSS position: sticky was unreliable here - the Astra theme puts
       overflow-x: hidden on a body/wrapper which silently breaks sticky.
       The sentinel pattern in re-meeting-room.js sidesteps that. */
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 8px 12px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(5, 12, 22, 0.4);
}
.re-room-topbar.is-fixed {
    position: fixed;
    top: 0;
    /* left + width are written inline by the JS so the bar keeps the same
       horizontal slot it had in normal flow (no jump when pinning). */
    z-index: 99998;
    border-radius: 0;
    margin: 0;
}
.re-room-topbar-sentinel { display: block; }

.re-room-timer {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
}
.re-room-timer__label {
    display: none;
}
.re-room-timer__value {
    font-size: 15px;
    font-weight: 700;
    color: #4498D8;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.re-room-timer__hint {
    color: #8aa0b2;
    font-size: 12px;
}
.re-room-timer[data-state="warning"]  .re-room-timer__value { color: #E6AD23; }
.re-room-timer[data-state="warning"]  .re-room-timer__hint  { color: #E6AD23; }
.re-room-timer[data-state="critical"] .re-room-timer__value { color: #ff6b6b; animation: re-room-flash 1.2s ease-in-out infinite; }
.re-room-timer[data-state="critical"] .re-room-timer__hint  { color: #ff6b6b; }
.re-room-timer[data-state="over"]     .re-room-timer__value { color: #ff6b6b; }
.re-room-timer[data-state="over"]     .re-room-timer__hint  { color: #ff6b6b; }
@keyframes re-room-flash {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* --- Room header / sections -------------------------------------------- */

.re-room-header { margin-bottom: 18px; }
.re-room-section { margin-bottom: 24px; }
.re-ai-status-info { color: #8aa0b2; }
.re-ai-status-alert { color: #E6AD23; }
.re-room-section__title {
    margin: 0 0 8px;
    color: #4498D8;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.re-room-done-count {
    font-size: 12px;
    color: #8aa0b2;
    background: #050d16;
    border: 1px solid #1e3a5f;
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 500;
}
.re-room-section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.re-room-section__chevron {
    color: #8aa0b2;
    font-size: 13px;
    transition: transform 0.15s ease;
}
.re-room-section[data-collapsed="0"] .re-room-section__chevron { transform: rotate(90deg); color: #4498D8; }
.re-room-section--done .re-room-section__head:hover .re-room-section__title { color: #4ba6e8; }
/* .re-room-list sets display:flex (author origin), which beats the UA
   [hidden]{display:none} rule - so collapse keys off data-collapsed here,
   the same single source of truth the chevron rule above uses. */
.re-room-section--done[data-collapsed="1"] .re-room-list--done { display: none; }

.re-room-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.re-room-section-group {
    background: rgba(13, 31, 51, 0.45);
    border-radius: 8px;
    padding: 12px 14px;
}
.re-room-section-group[data-section="agenda"] {
    border-left: 4px solid #E6AD23;
    padding-left: 14px;
}
.re-room-section-group__head { margin-bottom: 8px; }
.re-room-section-group__title {
    margin: 0;
    color: #e6edf3;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.re-room-section-group__intro {
    margin: 2px 0 0;
    color: #8aa0b2;
    font-size: 12.5px;
    line-height: 1.5;
}
.re-room-section-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.re-room-empty {
    color: #8aa0b2;
    background: rgba(13, 31, 51, 0.45);
    border: 1px dashed #1e3a5f;
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    list-style: none;
}

/* --- Room question card ------------------------------------------------ */

.re-room-question {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    transition: border-color 0.15s ease, opacity 0.2s ease;
}
.re-room-question:hover { border-color: #2d5183; }
.re-room-question--open { border-color: #4498D8; }
.re-room-question--saving { opacity: 0.55; pointer-events: none; }
.re-room-question--done {
    opacity: 0.75;
    border-color: rgba(70, 180, 80, 0.4);
    background: rgba(13, 31, 51, 0.7);
}

.re-room-question__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}
.re-room-question__tick {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #2d5183;
    background: #050d16;
    color: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
    padding: 0;
}
.re-room-question__tick > * { display: none; }
.re-room-question__tick:hover { border-color: #4498D8; }
.re-room-question__tick.is-done {
    background: #2c8a3a;
    border-color: #2c8a3a;
}
.re-room-question__tick.is-done::after {
    content: "";
    display: block;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}
.re-room-question__tick.is-done:hover { background: #34a045; }

.re-room-question__main { flex: 1; min-width: 0; }
.re-room-question__prompt {
    margin: 0;
    color: #e6edf3;
    font-size: 14.5px;
    line-height: 1.5;
    font-weight: 500;
}
.re-room-question__context {
    margin: 4px 0 0;
    color: #8aa0b2;
    font-size: 12.5px;
    line-height: 1.5;
    font-style: italic;
}
.re-room-question__chevron {
    color: #8aa0b2;
    font-size: 12px;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    margin-top: 6px;
}
.re-room-question--open .re-room-question__chevron { transform: rotate(90deg); color: #4498D8; }

.re-room-question__body {
    padding: 0 12px 12px;
    margin-top: -2px;
    border-top: 1px solid #16314f;
    padding-top: 10px;
}
.re-room-question__notes-label {
    display: block;
    font-size: 12px;
    color: #8aa0b2;
    margin-bottom: 4px;
}
.re-room-question__notes {
    width: 100%;
    box-sizing: border-box;
    background: #050d16;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    color: #e6edf3;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    margin-top: 4px;
    resize: vertical;
    min-height: 64px;
}
.re-room-question__notes:focus { outline: none; border-color: #4498D8; }
.re-room-question__notes-status {
    margin: 4px 0 0;
    font-size: 12px;
    color: #8aa0b2;
    min-height: 16px;
}

/* --- MELT WHEN sub-form on symptom cards ------------------------------ */

.re-room-melt { display: flex; flex-direction: column; gap: 10px; }
.re-room-melt__intro {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: #8aa0b2;
    line-height: 1.5;
}
.re-room-melt__field { display: flex; flex-direction: column; gap: 4px; }
.re-room-melt__label {
    font-size: 12px;
    font-weight: 600;
    color: #4498D8;
    letter-spacing: 0.02em;
}
.re-room-melt__input {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13.5px;
    resize: vertical;
    min-height: 44px;
}
.re-room-melt__input:focus { outline: none; border-color: #4498D8; }
.re-room-melt__status {
    margin: 4px 0 0;
    font-size: 12px;
    color: #8aa0b2;
    min-height: 16px;
}

/* Expand to a substantial typing area on focus, shrink back on blur. */
.re-meeting-room textarea {
    transition: min-height 180ms ease;
}
.re-meeting-room .re-msa-card__textarea:focus       { min-height: 360px; }
.re-meeting-room .re-room-question__notes:focus     { min-height: 220px; }
.re-meeting-room .re-room-melt__input:focus         { min-height: 180px; }
.re-meeting-room form textarea[name="raw_transcript"]:focus { min-height: 24em; }
.re-meeting-room .re-room-modal .re-textarea[rows="2"]:focus { min-height: 12em; }
.re-meeting-room .re-room-modal .re-textarea[rows="3"]:focus { min-height: 14em; }
.re-meeting-room .re-room-modal .re-textarea[rows="4"]:focus { min-height: 16em; }

/* --- Action toolbar (lives inside .re-room-topbar) --------------------- */

.re-room-toolbar {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    flex: 0 0 auto;
}
.re-room-toolbar__btn {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.re-room-toolbar__btn:hover {
    background: #122a44;
    border-color: #4498D8;
    color: #4498D8;
}
.re-room-toolbar__btn span[aria-hidden="true"] {
    font-size: 16px;
    line-height: 1;
}
.re-room-toolbar__btn--map {
    background: rgba(230, 173, 35, 0.12);
    border-color: rgba(230, 173, 35, 0.45);
    color: #fff;
}
.re-room-toolbar__btn--map:hover {
    background: rgba(230, 173, 35, 0.2);
    border-color: #E6AD23;
    color: #fff;
}
/* Every icon glyph rendered as plain text colour, white. Combined with the
   U+FE0E variation selectors in the HTML this stops macOS/iOS from rendering
   the warning + pencil as colour emoji. */
.re-room-toolbar__btn span[aria-hidden="true"] { color: #fff; }

@media (max-width: 900px) {
    /* The CRM drawer chevron sits fixed at top: 12px, left: 12px, 32px wide.
       Pad the topbar's left side so the timer text starts past it. */
    .re-room-topbar { padding-left: 56px; }
    /* Inside the sticky topbar on mobile/iPad: drop button labels and the
       "Meeting time" caption + hint so the timer + 5 icon buttons fit
       comfortably on one row. Bump icon glyphs 25% per the iPad request. */
    .re-room-toolbar__btn { min-width: 0; padding: 6px 8px; }
    .re-room-toolbar__btn span[aria-hidden="true"] { font-size: 20px; }
    .re-room-toolbar__label { display: none; }
    .re-room-timer__label { display: none; }
    .re-room-timer__hint  { display: none; }
    .re-room-timer__value { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Modals ------------------------------------------------------------ */

.re-room-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.re-room-modal[hidden] { display: none; }
.re-room-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 22, 0.7);
}
.re-room-modal__panel {
    position: relative;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 12px 36px rgba(5, 12, 22, 0.6);
    color: #e6edf3;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.re-room-modal__panel--lg { max-width: 620px; }
.re-room-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #1e3a5f;
}
.re-room-modal__title {
    margin: 0;
    font-size: 16px;
    color: #4498D8;
    font-weight: 600;
}
.re-room-modal__close {
    background: transparent;
    border: 0;
    color: #8aa0b2;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
}
.re-room-modal__close:hover { color: #fff; }
.re-room-modal__body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-room-modal__actions {
    padding: 12px 18px;
    border-top: 1px solid #1e3a5f;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.re-room-modal__status {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #8aa0b2;
    min-height: 16px;
}
.re-room-modal__status--error { color: #ff6b6b; }
.re-room-modal__busy {
    position: absolute;
    inset: 0;
    background: rgba(13, 31, 51, 0.94);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 5;
    cursor: wait;
}
.re-room-modal__busy-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(68, 152, 216, 0.25);
    border-top-color: #4498D8;
    border-radius: 50%;
    animation: re-room-modal-spin 0.8s linear infinite;
}
.re-room-modal__busy-caption {
    margin: 0;
    font-size: 14px;
    color: #e6edf3;
    text-align: center;
    padding: 0 24px;
    line-height: 1.5;
}
@keyframes re-room-modal-spin { to { transform: rotate(360deg); } }
.re-room-modal__error {
    color: #ff6b6b;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}
.re-room-modal__advanced {
    margin-top: 8px;
    padding: 8px 0;
    border-top: 1px dashed #1e3a5f;
}
.re-room-modal__advanced summary {
    cursor: pointer;
    font-size: 12.5px;
    color: #8aa0b2;
}
.re-room-modal__advanced summary:hover { color: #4498D8; }

.re-room-modal .re-textarea,
.re-room-modal .re-input,
.re-room-modal .re-select {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
}
.re-room-modal .re-textarea:focus,
.re-room-modal .re-input:focus,
.re-room-modal .re-select:focus { outline: none; border-color: #4498D8; }

.re-room-map-form { gap: 12px; }
.re-room-map-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) {
    .re-room-map-form__row { grid-template-columns: 1fr; }
}

/* --- Drag-to-reorder visuals (shared by plan + room) ------------------ */

.re-q-drag-handle {
    flex-shrink: 0;
    cursor: grab;
    color: #4a6075;
    padding: 2px 4px;
    user-select: none;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -2px;
    transition: color 0.15s ease;
}
.re-q-drag-handle:hover  { color: #4498D8; }
.re-q-drag-handle:active { cursor: grabbing; }

.re-q-ghost {
    opacity: 0.4;
    background: rgba(68, 152, 216, 0.08);
    border-style: dashed !important;
    border-color: #4498D8 !important;
}
.re-q-chosen {
    box-shadow: 0 4px 14px rgba(5, 12, 22, 0.6);
}
.re-q-drag {
    cursor: grabbing;
}

.re-q-list--saving { opacity: 0.7; transition: opacity 0.1s ease; }

/* Attendee chips on the Plan + Room headers. Click through to the CRM
   contact view. */
.re-meeting-attendee-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 18px;
}
.re-meeting-attendee-chips__label {
    color: #8aa0b2;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    margin-right: 4px;
}
.re-meeting-attendee-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(68, 152, 216, 0.1);
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
a.re-meeting-attendee-chip:hover {
    background: rgba(68, 152, 216, 0.2);
    border-color: #4498D8;
    color: #4ba6e8;
}
.re-meeting-attendee-chip--you { cursor: default; }

/* Inline edit button on a question card head (pencil glyph). */
.re-plan-question__edit,
.re-room-question__edit {
    background: transparent;
    border: 0;
    color: #6b7d92;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    flex-shrink: 0;
}
.re-plan-question__edit:hover,
.re-room-question__edit:hover {
    color: #4498D8;
    background: rgba(68, 152, 216, 0.08);
}

/* Inline prompt editor that replaces the prompt <p> on edit. */
.re-q-edit {
    margin: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.re-q-edit__input {
    width: 100%;
    box-sizing: border-box;
    background: #050d16;
    border: 1px solid #4498D8;
    color: #e6edf3;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}
.re-q-edit__input:focus { outline: none; border-color: #4ba6e8; }
.re-q-edit__section-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #8aa0b2;
}
.re-q-edit__section { width: 100%; box-sizing: border-box; }
.re-q-edit__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.re-q-edit__status {
    font-size: 12px;
    color: #8aa0b2;
    min-height: 16px;
}

/* AI-extracted action items on the Meeting Room: pending review + approved. */
.re-room-section--actions { margin-bottom: 24px; }
.re-room-actions__intro {
    color: #8aa0b2;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.re-room-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-room-action {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 12px 14px;
    transition: opacity 0.2s ease, border-color 0.15s ease;
}
.re-room-action:hover { border-color: #2d5183; }
.re-room-action--saving { opacity: 0.55; pointer-events: none; }
.re-room-action--approved { background: rgba(13, 31, 51, 0.5); }
.re-room-action__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.re-room-action__main { flex: 1; min-width: 0; }
.re-room-action__title {
    margin: 0 0 4px;
    color: #e6edf3;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
}
.re-room-action__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: #8aa0b2;
}
.re-room-action__side,
.re-room-action__owner,
.re-room-action__due {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(68, 152, 216, 0.08);
    border: 1px solid #1e3a5f;
}
.re-room-action__side--seller { color: #4498D8; background: rgba(68, 152, 216, 0.12); }
.re-room-action__side--buyer  { color: #E6AD23; background: rgba(230, 173, 35, 0.12); border-color: rgba(230, 173, 35, 0.35); }
.re-room-action__quote {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #8aa0b2;
    font-style: italic;
    line-height: 1.5;
}
.re-room-action__controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.re-room-action__approved-badge {
    color: #46b450;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    align-self: flex-start;
}
.re-room-action__edit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #16314f;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-room-action__edit-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 700px) { .re-room-action__edit-row { grid-template-columns: 1fr; } }
.re-room-action__edit .re-input,
.re-room-action__edit .re-select {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13.5px;
    width: 100%;
    box-sizing: border-box;
}
.re-room-action__edit .re-input:focus,
.re-room-action__edit .re-select:focus { outline: none; border-color: #4498D8; }
.re-room-action__edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.re-room-action__edit-status {
    font-size: 12px;
    color: #8aa0b2;
}
.re-room-actions-approved {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #1e3a5f;
}
.re-room-actions-approved summary {
    cursor: pointer;
    color: #8aa0b2;
    font-size: 13px;
    padding: 4px 0;
}
.re-room-actions-approved summary:hover { color: #4498D8; }
.re-room-actions-approved[open] summary { color: #4498D8; margin-bottom: 8px; }

/* Meeting Room coaching staging - AI-suggested points pending coach approval. */
.re-room-section--coaching { margin-bottom: 24px; }
.re-room-section--coaching .re-room-coaching {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-room-section--coaching .re-room-coaching li { margin: 0; list-style: none; }
.re-room-coaching-item {
    background: #06121f;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px;
    color: #e6edf3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-room-coaching-item--done { opacity: 0.75; }
.re-room-coaching-item--saving { opacity: 0.55; pointer-events: none; }
.re-room-coaching-item__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.re-room-coaching-item__type {
    font-size: 11px;
    font-weight: 700;
    color: #E6AD23;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.re-room-coaching-chip {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    color: #c9d4dd;
    background: rgba(143, 159, 166, 0.15);
    border: 1px solid rgba(143, 159, 166, 0.3);
}
.re-room-coaching-chip--progress      { color: #4ed09a; background: rgba(78, 208, 154, 0.12); border-color: rgba(78, 208, 154, 0.35); }
.re-room-coaching-chip--thinking      { color: #4498D8; background: rgba(68, 152, 216, 0.12); border-color: rgba(68, 152, 216, 0.35); }
.re-room-coaching-chip--challenges    { color: #e57373; background: rgba(229, 115, 115, 0.12); border-color: rgba(229, 115, 115, 0.35); }
.re-room-coaching-chip--opportunities { color: #b39ddb; background: rgba(179, 157, 219, 0.12); border-color: rgba(179, 157, 219, 0.35); }
.re-room-coaching-chip--commitments   { color: #E6AD23; background: rgba(230, 173, 35, 0.12); border-color: rgba(230, 173, 35, 0.35); }
.re-room-coaching-item__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #e6edf3;
}
.re-room-coaching-item__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #c9d4dd;
}
.re-room-coaching-item__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.re-room-coaching-item__field-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8aa0b2;
}
.re-room-coaching-item__title-input,
.re-room-coaching-item__desc-input {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.re-room-coaching-item__title-input {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.re-room-coaching-item__desc-input {
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 72px;
}
.re-room-coaching-item__title-input:focus,
.re-room-coaching-item__desc-input:focus {
    outline: none;
    border-color: #4498D8;
}
.re-room-coaching-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.re-room-coaching-item__status {
    font-size: 12px;
    color: #8aa0b2;
}
.re-room-coaching-approved {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #1e3a5f;
}
.re-room-coaching-approved summary {
    cursor: pointer;
    color: #8aa0b2;
    font-size: 13px;
    padding: 4px 0;
}
.re-room-coaching-approved summary:hover { color: #4498D8; }
.re-room-coaching-approved[open] summary { color: #4498D8; margin-bottom: 8px; }

/* Post-meeting summary cards on the Meeting Room. */
.re-post-summary-card {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.re-post-summary-card__title {
    margin: 0 0 8px;
    color: #4498D8;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.re-post-summary-card__body {
    margin: 0;
    color: #e6edf3;
    font-size: 14.5px;
    line-height: 1.55;
}
.re-post-summary-card__group { margin-bottom: 10px; }
.re-post-summary-card__group:last-child { margin-bottom: 0; }
.re-post-summary-card__letter {
    color: #4498D8;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}
.re-post-summary-card__group ul {
    margin: 0;
    padding-left: 20px;
    color: #e6edf3;
    font-size: 14px;
    line-height: 1.55;
}
.re-post-summary-card__email {
    background: #172a40;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 12px 14px;
    color: #e6edf3;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 8px;
}
.re-post-summary-card__email p { margin: 0 0 8px; }
.re-post-summary-card__email p:last-child { margin: 0; }
.re-post-summary-card__hint {
    margin: 0;
    color: #8aa0b2;
    font-size: 12.5px;
}

.re-post-summary-card__intro {
    margin: 0 0 14px;
    color: #8aa0b2;
    font-size: 13px;
}

/* Group label above the per-contact follow-up cards on the Meeting Room.
   Visually separates the per-contact list from the single meeting-level
   draft card above it. */
.re-post-summary-card__group-title {
    margin: 18px 0 8px;
    color: #8aa0b2;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Per-contact follow-up card on the Meeting Room. */
.re-followup-contact-card .re-post-summary-card__title a {
    color: #4498D8;
    text-decoration: none;
}
.re-followup-contact-card .re-post-summary-card__title a:hover {
    text-decoration: underline;
}
.re-followup-contact-meta {
    margin: -4px 0 8px;
    color: #8aa0b2;
    font-size: 12.5px;
}

/* Dismissed per-contact draft - rolled up by default, expandable. Muted
   background so it reads as archived next to the active cards. */
.re-followup-contact-card--dismissed,
.re-followup-meeting-card--dismissed {
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed #1e3a5f;
    padding: 10px 14px;
}
.re-followup-contact-rollup {
    margin: 0;
}
.re-followup-contact-rollup__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
    color: #8aa0b2;
    font-size: 13px;
}
.re-followup-contact-rollup__summary::-webkit-details-marker { display: none; }
.re-followup-contact-rollup__summary::before {
    content: '\25B8';  /* small right-pointing triangle */
    color: #8aa0b2;
    font-size: 10px;
    margin-right: 2px;
}
.re-followup-contact-rollup[open] > .re-followup-contact-rollup__summary::before {
    content: '\25BE';  /* small down-pointing triangle */
}
.re-followup-contact-rollup__label strong { color: #c9d4dd; font-weight: 600; }
.re-followup-contact-rollup__meta {
    color: #6f8597;
    font-size: 12px;
}
.re-followup-contact-rollup .re-post-summary-card__email--muted {
    opacity: 0.75;
    margin-top: 10px;
}
.re-btn--small {
    padding: 2px 10px;
    font-size: 12px;
    margin-left: auto;
}
.re-btn--ghost {
    background: transparent;
    color: #8aa0b2;
    border-color: rgba(200, 210, 220, 0.25);
}
.re-btn--ghost:hover {
    background: rgba(200, 210, 220, 0.10);
    color: #c9d4dd;
}

/* Reusable pain card - rendered by _partials/pain-card.php across the
   meeting room, opportunity, contact, and org views so a pain looks the
   same everywhere. Closed state shows contact + summary + score; clicking
   the head expands an inline MELT WHEN accordion. */
.re-pain-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-pain-card {
    background: #112844;
    border-radius: 8px;
    overflow: hidden;
}
.re-pain-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: 0 !important;
    outline: 0;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    /* Astra (and many WP themes) force-uppercase button text. Override
       so the pain card's contact name and summary read in natural case. */
    text-transform: none;
    letter-spacing: normal;
}
.re-pain-card__head:hover { background: rgba(68, 152, 216, 0.06); }
.re-pain-card__head:focus-visible {
    outline: 2px solid rgba(68, 152, 216, 0.55);
    outline-offset: -2px;
}
.re-pain-card__head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.re-pain-card__contact {
    color: #4498D8;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}
.re-pain-card__summary {
    color: #d6dde2;
    font-size: 13.5px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}
.re-pain-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.re-pain-card__score {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(68, 152, 216, 0.14);
    border: 1px solid rgba(68, 152, 216, 0.35);
    color: #cfe5f6;
    white-space: nowrap;
}
.re-pain-card__score.is-complete {
    background: rgba(230, 173, 35, 0.18);
    border-color: rgba(230, 173, 35, 0.6);
    color: #E6AD23;
}
.re-pain-card__chevron {
    color: #8aa0b2;
    font-size: 12px;
    transition: transform 0.18s ease;
}
.re-pain-card.is-expanded .re-pain-card__chevron { transform: rotate(180deg); }
.re-pain-card__body {
    padding: 4px 16px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.re-pain-card__melt {
    margin: 10px 0 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.re-pain-card__melt-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 10px;
    align-items: baseline;
}
@media (min-width: 480px) {
    .re-pain-card__melt-row {
        grid-template-columns: 110px 1fr;
        gap: 10px;
    }
}
.re-pain-card__melt-key {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #4498D8;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
}
.re-pain-card__melt-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(68, 152, 216, 0.16);
    color: #cfe5f6;
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
}
.re-pain-card__melt-label { opacity: 0.85; font-weight: 500; }
.re-pain-card__melt-value {
    margin: 0;
    color: #e6edf3;
    font-size: 13.5px;
    line-height: 1.5;
}
.re-pain-card__melt-row.is-empty .re-pain-card__melt-value {
    color: #8aa0b2;
}
.re-pain-card__melt-row.is-empty .re-pain-card__melt-value em { font-style: italic; }
.re-pain-card__footer {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.re-pain-card__contact-link,
.re-pain-card__link {
    color: #4498D8;
    font-size: 13px;
    text-decoration: none;
}
.re-pain-card__contact-link:hover,
.re-pain-card__link:hover { text-decoration: underline; }

/* Grouping wrapper used on contact + org detail to label "pains in this
   opportunity" / "pains not yet linked to an opportunity" above a card list. */
.re-detail-pain-group {
    margin-top: 14px;
}
.re-detail-pain-group:first-child { margin-top: 0; }
.re-detail-pain-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 8px;
    color: #1e3a5f;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
a.re-detail-pain-group-title:hover { color: #4498D8; text-decoration: underline; }

/* "Playbook running on this contact" bar above the Activity timeline. One
   button per active enrolment; clicking opens the Stop modal. Hidden when
   the contact has no active runs. */
.re-detail-pb-stop-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(145, 202, 234, 0.06);
    border: 1px solid rgba(145, 202, 234, 0.18);
}
.re-detail-pb-stop-bar__label {
    font-size: 13px;
    color: #FFFFFF;
    margin-right: 4px;
}
/* Coach-only inline meeting-type edit link on the Plan header. */
.re-meeting-plan__edit-type-btn {
    background: transparent !important;
    border: 0 !important;
    color: #4498D8 !important;
    cursor: pointer;
    padding: 0 !important;
    font-size: 13px;
    text-decoration: underline;
}
.re-meeting-plan__edit-type-btn:hover { color: #4ba6e8; }
.re-meeting-plan__edit-type-btn:focus {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Plan-page "Already had the meeting?" shortcut block. */
.re-plan-shortcut {
    margin-top: 32px;
    padding: 14px 18px;
    background: rgba(13, 31, 51, 0.45);
    border: 1px dashed #1e3a5f;
    border-radius: 10px;
}
.re-plan-shortcut__summary {
    color: #8aa0b2;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 0;
}
.re-plan-shortcut__summary:hover { color: #4498D8; }
.re-plan-shortcut__details[open] .re-plan-shortcut__summary { color: #4498D8; margin-bottom: 10px; }
.re-plan-shortcut__intro {
    color: #8aa0b2;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 12px;
}
.re-plan-shortcut__sub {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #1e3a5f;
}
.re-plan-shortcut__sub summary {
    color: #e6edf3;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    padding: 4px 0;
}
.re-plan-shortcut__sub summary:hover { color: #4498D8; }
.re-plan-shortcut__form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-plan-shortcut__form .re-textarea {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
}
.re-plan-shortcut__form .re-textarea:focus { outline: none; border-color: #4498D8; }
.re-plan-shortcut__form .re-btn { align-self: flex-start; }

/* ── Coaching dashboard (coachee contact detail) ──────────────────────── */

.re-coaching-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    border-bottom: 1px solid #1e3a5f;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}
.re-coaching-tab {
    background: transparent;
    color: #8F9FA6;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
    flex: 0 0 auto;
}
.re-coaching-tab:hover { color: #c9d4dd; }
.re-coaching-tab--active,
.re-coaching-tab[aria-selected="true"] {
    color: #4498D8;
    border-bottom-color: #4498D8;
}

.re-coaching-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 12px 0 24px;
}
@media (min-width: 640px) {
    .re-coaching-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
    .re-coaching-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.re-coaching-col {
    background: #081522;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 10px 8px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
.re-coaching-col-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 10px;
    gap: 6px;
}
.re-coaching-col-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #4498D8;
    letter-spacing: 0.04em;
}
.re-coaching-add {
    align-self: flex-start;
    background: transparent;
    border: 1px solid #1e3a5f;
    color: #c9d4dd;
    border-radius: 6px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}
.re-coaching-add:hover {
    border-color: #4498D8;
    color: #4498D8;
}
.re-coaching-empty {
    margin: 0;
    color: #576E7A;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
}

.re-coaching-board .re-coaching-items,
.re-coaching-record .re-coaching-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}
.re-coaching-board .re-coaching-items li,
.re-coaching-record .re-coaching-items li { margin: 0; padding: 0; list-style: none; }

.re-coaching-record {
    margin: 24px 0 8px;
}
.re-coaching-record-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}
.re-coaching-record-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #4498D8;
}
.re-coaching-record-group {
    margin: 0 0 18px;
}
.re-coaching-record-group:last-child {
    margin-bottom: 0;
}
.re-coaching-record-group-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #4498D8;
    letter-spacing: 0.04em;
}
.re-coaching-item-date {
    color: #8F9FA6;
    font-weight: 600;
}
.re-coaching-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    background: #06121f;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.re-coaching-item:hover {
    border-color: #4498D8;
    transform: translateY(-1px);
}
.re-coaching-item-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #E6AD23;
    letter-spacing: 0.04em;
}
.re-coaching-item-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #e6edf3;
    text-transform: none;
    letter-spacing: normal;
}
.re-coaching-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: #8F9FA6;
}
.re-coaching-item-due {
    background: rgba(68, 152, 216, 0.12);
    color: #4498D8;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.re-coaching-item-status {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    background: rgba(143, 159, 166, 0.18);
    color: #c9d4dd;
    text-transform: capitalize;
}
.re-coaching-item-status--done {
    background: rgba(78, 208, 154, 0.18);
    color: #4ed09a;
}
.re-coaching-item-status--in_progress {
    background: rgba(230, 173, 35, 0.18);
    color: #E6AD23;
}
.re-coaching-item-status--archived,
.re-coaching-item-status--cancelled {
    opacity: 0.6;
}
.re-coaching-item-source {
    background: rgba(68, 152, 216, 0.18);
    color: #4498D8;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.re-coaching-item-meeting {
    color: #4498D8;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted rgba(68, 152, 216, 0.4);
    padding-bottom: 1px;
}
.re-coaching-item-meeting:hover,
.re-coaching-item-meeting:focus {
    color: #6cb3e8;
    border-bottom-color: #6cb3e8;
}
.re-coaching-item-complete {
    align-self: flex-start;
    margin-top: 2px;
    min-height: 34px;
    padding: 6px 14px;
    background: #E6AD23;
    color: #06121f;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.re-coaching-item-complete:hover,
.re-coaching-item-complete:focus {
    background: #f0bd42;
}
.re-coaching-modal-source {
    margin: 0;
    padding: 8px 22px 0;
    font-size: 12px;
    color: #8aa0b2;
}
.re-coaching-modal-source a {
    color: #4498D8;
    text-decoration: none;
    border-bottom: 1px dotted rgba(68, 152, 216, 0.4);
}
.re-coaching-modal-source a:hover { color: #6cb3e8; border-bottom-color: #6cb3e8; }

/* Coaching item modal - dark theme matching .re-mt-modal vocabulary. */

.re-coaching-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(2, 8, 16, 0.72);
}
.re-coaching-modal-panel {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #06121f;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    font-family: 'Montserrat', system-ui, sans-serif;
}
.re-coaching-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid #1e3a5f;
}
.re-coaching-modal-header h2 {
    margin: 0;
    font-size: 16px; font-weight: 600;
    color: #4498D8;
}
.re-coaching-modal-close {
    background: none; border: 0;
    color: #8F9FA6;
    font-size: 22px; line-height: 1;
    cursor: pointer;
}
.re-coaching-modal-close:hover { color: #e6edf3; }
.re-coaching-modal-form { padding: 18px 22px; }
.re-coaching-modal-field {
    display: block;
    margin-bottom: 14px;
}
.re-coaching-modal-field > span,
.re-coaching-modal-field > legend {
    display: block;
    font-size: 13px; font-weight: 600;
    color: #c9d4dd;
    margin-bottom: 6px;
}
.re-coaching-modal-field input[type="text"],
.re-coaching-modal-field input[type="number"],
.re-coaching-modal-field input[type="datetime-local"],
.re-coaching-modal-field select,
.re-coaching-modal-field textarea {
    display: block; width: 100%;
    padding: 10px 12px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #06121f;
    color: #e6edf3;
    font-family: inherit; font-size: 13px;
    box-sizing: border-box;
}
.re-coaching-modal-field input:focus,
.re-coaching-modal-field select:focus,
.re-coaching-modal-field textarea:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.25);
}
.re-coaching-modal-field--checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}
.re-coaching-modal-field--checkbox > span {
    margin: 0;
    font-weight: 500;
    color: #c9d4dd;
}
.re-coaching-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) {
    .re-coaching-modal-row { grid-template-columns: 1fr; }
}
.re-coaching-modal-themes {
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.re-coaching-modal-themes legend {
    padding: 0 4px;
    color: #c9d4dd;
}
.re-coaching-modal-themes label {
    font-size: 12px;
    color: #e6edf3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.re-coaching-modal-flash {
    background: rgba(68, 152, 216, 0.12);
    color: #4498D8;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 12px;
}
.re-coaching-modal-flash--error {
    background: rgba(216, 68, 68, 0.18);
    color: #ff8b8b;
}
.re-coaching-modal-actions {
    display: flex; align-items: center; gap: 8px;
    border-top: 1px solid #1e3a5f;
    padding: 12px 22px;
    margin: 18px -22px -18px;
    background: #081522;
    border-radius: 0 0 12px 12px;
}
.re-coaching-modal-actions button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}
.re-coaching-modal-spacer { flex: 1 1 auto; }
.re-coaching-modal-cancel {
    background: transparent;
    color: #c9d4dd;
    border: 1px solid #1e3a5f;
}
.re-coaching-modal-cancel:hover {
    border-color: #4498D8;
    color: #4498D8;
}
.re-coaching-modal-save {
    background: #4498D8;
    color: #06121f;
    border: 1px solid #4498D8;
}
.re-coaching-modal-save:hover { background: #5aa7e0; }
.re-coaching-modal-delete {
    background: transparent;
    color: #ff8b8b;
    border: 1px solid rgba(216, 68, 68, 0.5);
}
.re-coaching-modal-delete:hover {
    background: rgba(216, 68, 68, 0.18);
    color: #ffb6b6;
}
.re-coaching-modal-status {
    background: #4498D8;
    color: #06121f;
    border: 1px solid #4498D8;
}
.re-coaching-modal-status:hover { background: #5aa7e0; }
.re-coaching-modal-status:disabled { opacity: 0.6; cursor: default; }
.re-coaching-modal-unapprove {
    background: transparent;
    color: #c9d4dd;
    border: 1px solid #1e3a5f;
}
.re-coaching-modal-unapprove:hover {
    border-color: #4498D8;
    color: #4498D8;
}

/* ── Coaching item notes thread (shared coach <-> coachee) ─────────────── */
.re-coaching-notes {
    border-top: 1px solid #1e3a5f;
    padding: 16px 22px 20px;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.re-coaching-notes-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #4498D8;
}
.re-coaching-notes-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-coaching-note {
    min-width: 0;
    background: #081522;
    border: 1px solid #1e3a5f;
    border-left: 3px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px;
}
.re-coaching-note--coachee { border-left-color: #4498D8; }
.re-coaching-note__meta {
    font-size: 11px;
    font-weight: 600;
    color: #88a0b4;
    margin-bottom: 4px;
}
.re-coaching-note__body {
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #e6edf3;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.re-coaching-notes-empty {
    margin: 0 0 14px;
    font-size: 12px;
    color: #88a0b4;
}
.re-coaching-notes-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-coaching-notes-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #06121f;
    color: #e6edf3;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
.re-coaching-notes-form textarea:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.25);
}
.re-coaching-notes-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.re-coaching-notes-flash {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #4498D8;
}
.re-coaching-notes-flash--error { color: #ff8b8b; }
.re-coaching-notes-add {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    background: #4498D8;
    color: #06121f;
    border: 1px solid #4498D8;
}
.re-coaching-notes-add:hover { background: #5aa7e0; }

/* ── [re_my_coaching] coachee portal ──────────────────────────────────── */
.re-my-coaching {
    color: #e6edf3;
    padding: 24px 0;
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.re-my-coaching__title {
    color: #4498D8;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 18px;
}
.re-my-coaching__empty {
    color: #c9d4dd;
    font-size: 14px;
    line-height: 1.6;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 20px;
}
.re-my-coaching__account-link { text-align: right; margin: 0 0 12px; }
.re-my-coaching__account-link a { color: #91CAEA; font-size: 13px; text-decoration: none; }
.re-my-coaching__account-link a:hover { text-decoration: underline; }
.re-my-coaching__section { margin-bottom: 28px; }
.re-my-coaching__section-title {
    color: #4498D8;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
}
.re-my-coaching__none {
    color: #8aa0b2;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* No-JS "Show all" disclosure for the coachee's older previous sessions. */
.re-show-all { margin-top: 6px; }
.re-show-all__summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    color: #4498D8;
    font-size: 13px;
    font-weight: 600;
}
.re-show-all__summary::-webkit-details-marker { display: none; }
.re-show-all__less { display: none; }
.re-show-all[open] .re-show-all__more { display: none; }
.re-show-all[open] .re-show-all__less { display: inline; }
.re-show-all__list { margin-top: 10px; }

.re-my-coaching__board-title {
    color: #4498D8;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
}

/* Soft "your session is soon and you have not shared anything yet" nudge
   above the agenda form. Renders only on [re_my_coaching] when the next
   session is within 3 working days and the agenda is empty. */
.re-coachee-plan-nudge {
    background: rgba(68, 152, 216, 0.12);
    border: 1px solid rgba(68, 152, 216, 0.45);
    border-radius: 10px;
    color: #e6f0fb;
    font-size: 14px;
    line-height: 1.5;
    margin: 12px 0 0;
    padding: 12px 16px;
}
.re-coachee-plan-nudge strong { color: #ffffff; }

/* Coachee pre-session agenda. Two variants share the .re-intake-card dark
   vocabulary: --form is a collapsible <details> the coachee fills (portal
   next-session card + their meeting-room view); --readonly is the static
   panel the coach sees on the Meeting Plan. */
.re-coachee-agenda {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    margin-top: 12px;
}

/* --form: native <details> disclosure (no JS; same pattern as .re-show-all). */
.re-coachee-agenda--form { overflow: hidden; }
.re-coachee-agenda__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.re-coachee-agenda__summary::-webkit-details-marker { display: none; }
.re-coachee-agenda__summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.re-coachee-agenda__chevron {
    color: #8aa0b2;
    font-size: 13px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.re-coachee-agenda--form[open] .re-coachee-agenda__chevron { transform: rotate(90deg); color: #4498D8; }
.re-coachee-agenda__body {
    padding: 4px 16px 16px;
    border-top: 1px solid #1e3a5f;
    margin-top: 6px;
}

.re-coachee-agenda__head { margin-bottom: 12px; }
.re-coachee-agenda__title {
    margin: 0;
    color: #4498D8;
    font-size: 15px;
    font-weight: 600;
}
.re-coachee-agenda__sub {
    margin: 0;
    color: #8aa0b2;
    font-size: 12.5px;
    line-height: 1.5;
}
.re-coachee-agenda__form { display: flex; flex-direction: column; gap: 14px; }
.re-coachee-agenda__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.re-coachee-agenda__label {
    font-size: 13px;
    font-weight: 600;
    color: #e6edf3;
    line-height: 1.4;
}
.re-coachee-agenda__input {
    background: #050d16;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}
.re-coachee-agenda__input:focus { border-color: #4498D8; outline: none; }
.re-coachee-agenda__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.re-coachee-agenda__status {
    font-size: 12.5px;
    color: #8aa0b2;
    min-width: 0;
}
.re-coachee-agenda__status--ok { color: #5fb37a; }
.re-coachee-agenda__status--error { color: #e07a7a; }

.re-coachee-agenda--readonly { padding: 14px 16px 16px; margin-top: 0; margin-bottom: 24px; }
.re-coachee-agenda__readout { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.re-coachee-agenda__readout-q {
    margin: 0;
    color: #8aa0b2;
    font-size: 12.5px;
    font-weight: 600;
}
.re-coachee-agenda__readout-a {
    margin: 4px 0 0;
    color: #e6edf3;
    font-size: 14px;
    line-height: 1.6;
}

/* Approved action items on the coachee's sanitised session view. */
.re-coachee-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-coachee-action {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #081522;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}
.re-coachee-action__title {
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #e6edf3;
    overflow-wrap: anywhere;
}
.re-coachee-action__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #88a0b4;
}
.re-coachee-action__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.re-coachee-action__summary::-webkit-details-marker { display: none; }
.re-coachee-action__head {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.re-coachee-action__state {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
}
.re-coachee-action__state--coachee_requested { color: #c9d4dd; }
.re-coachee-action__state--completed { color: #4498D8; }

/* Disclosure affordance: makes it obvious the row opens to add a note /
   mark complete (the summary hides the native marker). Hint reads as an
   invitation when collapsed; the chevron points down when open. */
.re-coachee-action__cue {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #4498D8;
}
.re-coachee-action__cue-text { min-width: 0; }
.re-coachee-action__details[open] .re-coachee-action__cue-text { display: none; }
.re-coachee-action__chev {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    transition: transform .15s ease;
}
.re-coachee-action__details[open] .re-coachee-action__chev { transform: rotate(90deg); }
.re-coachee-action__panel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #1e3a5f;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.re-coachee-action__desc {
    min-width: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #c9d4dd;
    overflow-wrap: anywhere;
}
.re-coachee-action__waiting,
.re-coachee-action__done {
    margin: 0 0 8px;
    font-size: 12px;
    color: #88a0b4;
}
.re-coachee-action__btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: #c9d4dd;
    border: 1px solid #1e3a5f;
}
.re-coachee-action__btn:hover { border-color: #4498D8; color: #4498D8; }
.re-coachee-action__btn:disabled { opacity: 0.6; cursor: default; }
.re-coachee-action__btn--primary {
    background: #4498D8;
    color: #06121f;
    border-color: #4498D8;
}
.re-coachee-action__btn--primary:hover { background: #5aa7e0; color: #06121f; }
.re-coachee-action__notes-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-coachee-note {
    min-width: 0;
    background: #06121f;
    border: 1px solid #1e3a5f;
    border-left: 3px solid #1e3a5f;
    border-radius: 6px;
    padding: 8px 10px;
}
.re-coachee-note--coachee { border-left-color: #4498D8; }
.re-coachee-note__meta {
    font-size: 11px;
    font-weight: 600;
    color: #88a0b4;
    margin-bottom: 4px;
}
.re-coachee-note__body {
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #e6edf3;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.re-coachee-action__notes-empty {
    margin: 0 0 10px;
    font-size: 12px;
    color: #88a0b4;
}
.re-coachee-action__notes-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-coachee-action__notes-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #06121f;
    color: #e6edf3;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
.re-coachee-action__notes-form textarea:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.25);
}
.re-coachee-action__notes-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.re-coachee-action__notes-flash {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #4498D8;
}
.re-coachee-action__notes-flash--error { color: #ff8b8b; }
.re-coachee-action__notes-add {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    background: #4498D8;
    color: #06121f;
    border: 1px solid #4498D8;
}
.re-coachee-action__notes-add:hover { background: #5aa7e0; }

/* MSA card wrapping a <details> (e.g. Completed actions disclosure on the
   coachee's sanitised meeting view). The whole card is the disclosure so the
   summary owns the card's head spacing. */
.re-msa-card__details { margin: 0; }
.re-msa-card__details > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}
.re-msa-card__details[open] > summary { margin-bottom: 12px; }
.re-msa-card__details > summary::-webkit-details-marker { display: none; }
.re-msa-card__details > summary::after {
    content: '\203A';
    margin-left: auto;
    color: #4498D8;
    font-size: 18px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 120ms ease;
}
.re-msa-card__details[open] > summary::after { transform: rotate(-90deg); }

/* Coaching points linked to this session on the coachee's meeting view -
   reuses the kanban CSS (.re-coaching-board / -col / -item) from the coach
   view. The --readonly modifier removes click affordance + restores natural
   wrapping for the longer-form description the meeting card carries. The
   coachee manages the full board on [re_my_coaching]. */
.re-coaching-item--readonly { cursor: default; }
.re-coaching-item--readonly:hover {
    border-color: #1e3a5f;
    transform: none;
}
.re-coaching-item-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #c9d4dd;
    overflow-wrap: anywhere;
}

/* Coach Meeting Room: action completion + notes thread. */
.re-room-action__completion-note {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #4498D8;
}
.re-room-action__approved-badge--done { color: #4498D8; }
.re-room-action__notes { margin-top: 10px; }
.re-room-action__notes-summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #4498D8;
    list-style: none;
}
.re-room-action__notes-summary::-webkit-details-marker { display: none; }
.re-room-action__notes-list {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-room-action__note {
    min-width: 0;
    background: #06121f;
    border: 1px solid #1e3a5f;
    border-left: 3px solid #1e3a5f;
    border-radius: 6px;
    padding: 8px 10px;
}
.re-room-action__note--coachee { border-left-color: #4498D8; }
.re-room-action__note-meta {
    font-size: 11px;
    font-weight: 600;
    color: #88a0b4;
    margin-bottom: 4px;
}
.re-room-action__note-body {
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #e6edf3;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.re-room-action__notes-empty {
    margin: 8px 0;
    font-size: 12px;
    color: #88a0b4;
}
.re-room-action__notes-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-room-action__notes-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #06121f;
    color: #e6edf3;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
.re-room-action__notes-form textarea:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.25);
}
.re-room-action__notes-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.re-room-action__notes-flash {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #88a0b4;
}
.re-room-action__notes-flash--error { color: #ff7a7a; }

/* Outstanding agreed-actions summary on the coaching pages (sits between the
   "Your coaching so far" overview and the kanban board). Re-uses the per-row
   action card styles - this rule set only handles the surrounding section
   chrome so each card looks identical to its meeting-room counterpart. */
.re-coaching-outstanding {
    margin: 0 0 24px;
}
.re-coaching-outstanding__head {
    margin: 0 0 12px;
}
.re-coaching-outstanding__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #4498D8;
}
/* "From <meeting>, <date> >" backlink rendered on each card in the
   outstanding-actions summary so it's clear which session the commitment
   came from. Both the coach card (.re-room-action) and the coachee card
   (.re-coachee-action) use the same compact link styling. */
.re-coachee-action__meeting,
.re-room-action__meeting {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #88a0b4;
}
.re-coachee-action__meeting a,
.re-room-action__meeting a {
    color: #4498D8;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.re-coachee-action__meeting a:hover,
.re-room-action__meeting a:hover {
    color: #5aa7e0;
    text-decoration: underline;
}
.re-room-action__meeting { margin-top: 6px; }

/* "Marked done by your coachees" panel on [re_daily_view]. Reuses the
   .re-room-action class so re-outstanding-actions.js binds Validate / Send
   back without duplication; the --today modifier tightens the card layout
   and surfaces the coachee name. */
.re-coaching-outstanding--today { margin: 28px 0 0; }
.re-room-action--today { padding: 10px 12px; }
.re-room-action--today .re-room-action__head {
    flex-direction: column;
    align-items: stretch;
}
.re-room-action--today .re-room-action__title {
    font-size: 14px;
    margin: 0 0 4px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 2px;
    align-items: baseline;
}
.re-completion-card__who { color: #4498D8; font-weight: 600; }
.re-completion-card__sep { color: #4a6e96; }
.re-completion-card__what { color: #e6edf3; min-width: 0; }
.re-room-action--today .re-room-action__meta {
    color: #7a8da0;
    font-size: 12px;
    margin: 0;
    border: 0;
    padding: 0;
    background: none;
    border-radius: 0;
}
.re-room-action--today .re-room-action__controls {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-self: flex-end;
}
.re-completion-card__note {
    margin-top: 6px;
    color: #b8c5d2;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
}
.re-completion-card__note-toggle {
    background: none;
    border: 0;
    padding: 0 0 0 6px;
    color: #4498D8;
    font-size: 12px;
    font-style: normal;
    cursor: pointer;
}
.re-completion-card__note-toggle:hover { text-decoration: underline; }

@media (min-width: 640px) {
    .re-room-action--today .re-room-action__head {
        flex-direction: row;
        align-items: flex-start;
    }
    .re-room-action--today .re-room-action__controls {
        margin-top: 0;
        align-self: flex-start;
    }
}

/* Collapsible read-only transcript (coachee session view). Collapsed by
   default so it never fills the page; preserves the transcript's own line
   breaks and scrolls inside a bounded box when open. */
.re-transcript-toggle__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.re-transcript-toggle__summary::-webkit-details-marker { display: none; }
.re-transcript-toggle__hint {
    font-size: 12px;
    font-weight: 600;
    color: #4498D8;
    flex: 0 0 auto;
}
.re-transcript-toggle__hint::after { content: 'Show'; }
.re-transcript-toggle[open] .re-transcript-toggle__hint::after { content: 'Hide'; }
.re-transcript-readonly {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.6;
    color: #c9d4dd;
}

.re-transcript-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font: inherit;
    font-size: 13px;
    line-height: normal;
    color: #4498D8;
    background: transparent;
    border: 1px solid rgba(68, 152, 216, 0.5);
    border-radius: 6px;
    cursor: pointer;
}

.re-transcript-copy:hover { background: rgba(68, 152, 216, 0.15); }

.re-transcript-copy.is-copied {
    color: #1FAF59;
    border-color: #1FAF59;
}

/* ── [re_org_admin] shortcode (v1.36.0) ────────────────────────────────── */
.re-org-admin { color: #c9d4dd; padding: 24px 0; max-width: 1100px; margin: 0 auto; }
.re-org-admin-locked { color: #c9d4dd; padding: 24px; background: #0a1929; border: 1px solid #1e3a5f; border-radius: 8px; }
.re-org-admin-header { margin-bottom: 20px; }
.re-org-admin-title { color: #4498D8; font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.re-org-admin-subtitle { color: #88a0b4; font-size: 14px; margin: 0; }
.re-org-admin-back { color: #4498D8; text-decoration: none; font-size: 13px; }
.re-org-admin-back:hover { text-decoration: underline; }

.re-org-admin-tabs { display: flex; gap: 0; border-bottom: 1px solid #1e3a5f; margin-bottom: 20px; }
.re-org-admin-tab {
    padding: 10px 16px; color: #88a0b4; text-decoration: none;
    border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500;
}
.re-org-admin-tab:hover { color: #4498D8; }
.re-org-admin-tab--active,
.re-org-admin-tab--active:visited,
.re-org-admin-tab--active:hover { color: #4498D8; border-bottom-color: #4498D8; }
.re-org-admin-tab--external { margin-left: auto; color: #4498D8; }

.re-org-admin-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.re-org-admin-promote-btn {
    background: #4498D8; color: #06121f; border: 1px solid #4498D8;
    padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.re-org-admin-promote-btn:hover { background: #5aa7e0; }

.re-org-admin-empty { color: #88a0b4; font-size: 14px; padding: 16px 0; }
.re-org-admin-empty--inline { padding: 8px 0; }

.re-org-admin-members,
.re-org-admin-subs {
    width: 100%; border-collapse: collapse; background: #0a1929;
    border: 1px solid #1e3a5f; border-radius: 8px; overflow: hidden;
}
.re-org-admin-members th,
.re-org-admin-members td,
.re-org-admin-subs th,
.re-org-admin-subs td {
    padding: 10px 14px; text-align: left; font-size: 14px;
    border-bottom: 1px solid #1e3a5f;
}
.re-org-admin-members th,
.re-org-admin-subs th { color: #88a0b4; font-weight: 500; background: #061626; }
.re-org-admin-members tr:last-child td,
.re-org-admin-subs tr:last-child td { border-bottom: none; }

.re-org-admin-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: #E6AD23; color: #06121f;
}
.re-org-admin-badge--user { background: #1e3a5f; color: #c9d4dd; }

.re-org-admin-link { color: #4498D8; text-decoration: none; font-size: 14px; cursor: pointer; background: none; border: none; padding: 0; }
.re-org-admin-link:hover { text-decoration: underline; }

.re-org-admin-subhead { color: #4498D8; font-size: 16px; font-weight: 600; margin: 24px 0 12px; }
.re-org-admin-billing-org { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; max-width: 600px; }
.re-org-admin-billing-org dt { color: #88a0b4; font-size: 13px; }
.re-org-admin-billing-org dd { color: #c9d4dd; font-size: 14px; margin: 0; }

.re-org-admin-module {
    background: #0a1929; border: 1px solid #1e3a5f; border-radius: 8px;
    padding: 16px 18px; margin-bottom: 16px;
}
.re-org-admin-module-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.re-org-admin-module-title { color: #4498D8; font-size: 16px; font-weight: 600; margin: 0; }
.re-org-admin-module-status {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.re-org-admin-module-status--completed     { background: #46b450; color: #06121f; }
.re-org-admin-module-status--available     { background: #4498D8; color: #06121f; }
.re-org-admin-module-status--locked        { background: #1e3a5f; color: #88a0b4; }
.re-org-admin-module-status--exam-pending  { background: #E6AD23; color: #06121f; }

.re-org-admin-output { padding: 12px 0; border-top: 1px solid #1e3a5f; }
.re-org-admin-output:first-of-type { border-top: none; padding-top: 0; }
.re-org-admin-output-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.re-org-admin-output-title { color: #c9d4dd; font-size: 14px; }
.re-org-admin-output-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #1e3a5f; color: #88a0b4; }
.re-org-admin-output-status--approved { background: #46b450; color: #06121f; }
.re-org-admin-output-status--submitted { background: #4498D8; color: #06121f; }
.re-org-admin-output-status--ai-rejected,
.re-org-admin-output-status--rejected { background: #dc3232; color: #fff; }
.re-org-admin-output-body { color: #c9d4dd; font-size: 14px; line-height: 1.5; }
.re-org-admin-output-body p { margin: 0 0 8px; }
.re-org-admin-output-empty { color: #88a0b4; font-size: 13px; font-style: italic; }
.re-org-admin-output-note { color: #88a0b4; font-size: 12px; margin: 6px 0 0; }

/* Promote modal */
body.re-org-admin-modal-open { overflow: hidden; }
.re-org-admin-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 18, 31, 0.85); }
.re-org-admin-modal-panel {
    position: relative; z-index: 1; width: min(640px, 92vw); max-height: 86vh; overflow: auto;
    background: #0a1929; border: 1px solid #1e3a5f; border-radius: 10px; color: #c9d4dd;
    display: flex; flex-direction: column;
}
.re-org-admin-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #1e3a5f; }
.re-org-admin-modal-header h2 { color: #4498D8; font-size: 18px; font-weight: 600; margin: 0; }
.re-org-admin-modal-close {
    background: transparent; border: none; color: #88a0b4;
    font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.re-org-admin-modal-close:hover { color: #c9d4dd; }
.re-org-admin-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.re-org-admin-modal-body p { margin: 0; line-height: 1.5; }
.re-org-admin-modal-field { display: flex; flex-direction: column; gap: 6px; }
.re-org-admin-modal-field span { font-size: 13px; color: #88a0b4; }
.re-org-admin-modal-field select {
    background: #06121f; color: #c9d4dd; border: 1px solid #1e3a5f;
    border-radius: 6px; padding: 8px 10px; font-size: 14px;
}
.re-org-admin-modal-outputs { display: flex; flex-direction: column; gap: 12px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.re-org-admin-modal-actions { display: flex; gap: 12px; }
.re-org-admin-modal-module {
    border: 1px solid #1e3a5f; border-radius: 6px; padding: 10px 12px; margin: 0;
}
.re-org-admin-modal-module legend { color: #4498D8; font-size: 13px; font-weight: 600; padding: 0 4px; }
.re-org-admin-modal-output { display: flex; align-items: center; gap: 10px; padding: 4px 0; cursor: pointer; }
.re-org-admin-modal-output input { accent-color: #4498D8; }
.re-org-admin-modal-targets {
    border: 1px solid #1e3a5f; border-radius: 6px; padding: 10px 12px; margin: 0;
}
.re-org-admin-modal-targets legend { color: #4498D8; font-size: 13px; font-weight: 600; padding: 0 4px; }
.re-org-admin-modal-target { display: flex; align-items: center; gap: 10px; padding: 4px 0; cursor: pointer; font-size: 14px; }
.re-org-admin-modal-target input { accent-color: #4498D8; }
.re-org-admin-modal-target--all { padding-bottom: 8px; border-bottom: 1px solid #1e3a5f; margin-bottom: 8px; }
.re-org-admin-modal-target-list { display: flex; flex-direction: column; gap: 0; max-height: 200px; overflow-y: auto; padding-right: 4px; }
.re-org-admin-modal-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.re-org-admin-modal-check input { margin-top: 3px; accent-color: #4498D8; }
.re-org-admin-modal-error { color: #ff8b8b; font-size: 13px; margin: 0; }
.re-org-admin-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #1e3a5f; }
.re-org-admin-modal-cancel {
    background: transparent; color: #c9d4dd; border: 1px solid #1e3a5f;
    padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.re-org-admin-modal-cancel:hover { border-color: #4498D8; color: #4498D8; }
.re-org-admin-modal-submit {
    background: #4498D8; color: #06121f; border: 1px solid #4498D8;
    padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.re-org-admin-modal-submit:hover:not(:disabled) { background: #5aa7e0; }
.re-org-admin-modal-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Promote banner on output detail (also rendered by OutputSubmitShortcode) */
.re-output-banner {
    background: rgba(68, 152, 216, 0.15);
    border-left: 3px solid #4498D8;
    color: #c9d4dd;
    padding: 10px 14px;
    border-radius: 4px;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* =========================================================================
   Playbooks  [re_playbooks]  - dark, mobile-first
   ========================================================================= */
.re-playbooks { max-width: 960px; color: #e6edf3; }
.re-playbooks__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.re-playbooks__header h1 { margin: 0; color: #4498D8; }
.re-playbooks__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.re-playbooks__subhead { margin: 28px 0 12px; color: #4498D8; }
.re-playbooks__runs-details { margin-top: 28px; }
.re-playbooks__runs-details > summary.re-playbooks__subhead {
    margin: 0 0 12px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5em;
    font-weight: 700;
}
.re-playbooks__runs-details > summary.re-playbooks__subhead::-webkit-details-marker { display: none; }
.re-playbooks__runs-details > summary.re-playbooks__subhead::before {
    content: "\25B8"; /* right-pointing triangle */
    color: #4498D8;
    font-size: 0.7em;
    transition: transform 0.15s ease;
}
.re-playbooks__runs-details[open] > summary.re-playbooks__subhead::before { transform: rotate(90deg); }
.re-playbooks__empty {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 20px;
    color: #c9d4dd;
    line-height: 1.5;
}
.re-playbooks__runs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.re-playbook-run {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 14px;
    min-width: 0;
}
.re-playbook-run__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.re-playbook-run__contact { font-weight: 600; }
.re-playbook-run__pb,
.re-playbook-run__steps { font-size: 13px; color: #8aa0b2; margin-top: 6px; }
.re-playbook-run__stop { margin-top: 10px; }

.re-playbook-detail__back {
    display: inline-block;
    margin-bottom: 12px;
    color: #4498D8;
    text-decoration: none;
}
.re-playbook-enrol-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.re-playbook-enrol-form .re-select { min-width: 0; flex: 1 1 220px; }

/* Daily View - "My outreach to complete today" panel */
.re-pb-queue { max-width: 960px; }

/* Channel filter chips above the queue. Card visibility is driven by JS
   adding .is-hidden when the active chip doesn't match the card's data-channel. */
.re-pb-queue-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.re-pb-queue-filter__chip {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    color: #c8d3de;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.re-pb-queue-filter__chip:hover { border-color: #4498D8; color: #e6edf3; }
.re-pb-queue-filter__chip.is-active {
    background: #1a3556;
    border-color: #4498D8;
    color: #fff;
}
.re-pb-queue-filter__count {
    font-size: 11px;
    color: #8aa0b2;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 1px 7px;
}
.re-pb-queue-filter__chip.is-active .re-pb-queue-filter__count {
    color: #fff;
    background: rgba(255,255,255,0.18);
}
.re-pb-queue-item.is-hidden { display: none; }
.re-pb-queue-filter__chip[hidden] { display: none; }

.re-pb-queue-item {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    min-width: 0;
}
.re-pb-queue-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: #e6edf3;
}
.re-pb-queue-item__who {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    align-items: baseline;
    min-width: 0;
    flex: 1 1 220px;
    font-weight: 500;
}
.re-pb-queue-item__link {
    color: #e6edf3;
    text-decoration: none;
    border-bottom: 1px dotted rgba(230, 237, 243, 0.4);
}
.re-pb-queue-item__link:hover { color: #4498D8; border-bottom-color: #4498D8; }
.re-pb-queue-item__sep { color: #8aa0b2; }
.re-pb-queue-item__role { color: #8aa0b2; }
.re-pb-queue-item__pb { flex: 1 1 100%; font-size: 12px; color: #8aa0b2; }
.re-pb-queue-item--later-today { opacity: 0.55; transition: opacity 0.15s ease; }
.re-pb-queue-item--later-today:hover,
.re-pb-queue-item--later-today:focus-within { opacity: 1; }
.re-pb-queue-item__later-today {
    margin-left: auto;
    font-size: 12px;
    color: #c8d3de;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.re-pb-queue-item__headline {
    margin: 10px 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #e6edf3;
}
.re-pb-queue-item__body-wrap { position: relative; }
.re-pb-queue-item__body {
    color: #c8d3de;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 6px;
    padding-right: 24px;
}
.re-pb-queue-item__body-copy {
    position: absolute;
    top: 0;
    right: 0;
}
.re-pb-queue-item__body-wrap:not(.is-expanded) .re-pb-queue-item__body {
    max-height: 96px;
    overflow: hidden;
}
.re-pb-queue-item__body-wrap.is-clamped:not(.is-expanded) .re-pb-queue-item__body::after {
    content: '';
    position: absolute;
    inset: auto 0 24px 0;
    height: 32px;
    background: linear-gradient(180deg, rgba(13, 31, 51, 0) 0%, #0d1f33 100%);
    pointer-events: none;
}
.re-pb-queue-item__body-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 6px;
    color: #4498D8;
    font-size: 13px;
    cursor: pointer;
}
.re-pb-queue-item__body-toggle:hover,
.re-pb-queue-item__body-toggle:focus { text-decoration: underline; }
.re-pb-queue-item__helpers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0 0;
}
.re-pb-queue-item__helper {
    color: #4498D8;
    font-size: 13px;
    text-decoration: none;
}
.re-pb-queue-item__helper:hover { text-decoration: underline; }
.re-pb-queue-item__helper-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.re-pb-queue-item__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 0;
    background: transparent;
    color: #4498D8;
    cursor: pointer;
    border-radius: 4px;
    line-height: 0;
    transition: color 0.15s ease, background 0.15s ease;
}
.re-pb-queue-item__copy:hover { background: rgba(68, 152, 216, 0.15); }
.re-pb-queue-item__copy.is-copied { color: #1FAF59; }
.re-pb-queue-item__reason {
    margin-top: 8px;
    font-size: 13px;
    color: #E6AD23;
}
.re-pb-queue-item__missing {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 3px solid #dc3232;
    background: rgba(220, 50, 50, 0.12);
    color: #f0a0a0;
    font-size: 13px;
    font-weight: 600;
}

/* Per-channel coloured chip on the top-left of each card and the filter row.
   All variants stay on the brand-blue family so the chip reads as a chip,
   not a status badge - colour just hints at the channel. */
.re-channel-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: #4498D8;
    text-transform: none;
    line-height: 1.4;
    white-space: nowrap;
}
.re-channel-chip--email     { background: #4498D8; }
.re-channel-chip--phone     { background: #1FAF59; }
.re-channel-chip--linkedin  { background: #0a66c2; }
.re-channel-chip--whatsapp  { background: #25D366; }
.re-channel-chip--sms       { background: #8b5cf6; }
.re-channel-chip--video_message { background: #ec4899; }

/* Playbook action modals (snooze / skip / log-call). Shared dark-theme
   styling that matches the rest of the [re_*] frontend modals. */
/* Shared "send a text" composer (window.reSmsCompose). Dark theme, mobile-first. */
.re-sms-modal__title { font-size: 17px; }
.re-sms-modal__to { margin: 0 0 10px; font-size: 13px; color: #8aa0b2; }
.re-sms-modal__body {
    width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical;
    padding: 10px 12px; border-radius: 8px;
    background: #0a1929; color: #e6edf3; border: 1px solid #1e3a5f;
}
.re-sms-modal__meta { margin-top: 6px; }
.re-sms-modal__count { font-size: 12px; color: #8aa0b2; }
.re-sms-modal__count.is-over { color: #E6AD23; }
[data-sms-send]:disabled { opacity: 0.5; cursor: not-allowed; }
.re-sms-modal__status { margin-top: 8px; font-size: 12px; color: #8aa0b2; min-height: 16px; }

.re-pb-modal__form { display: flex; flex-direction: column; gap: 12px; }
.re-pb-modal__field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #c8d3de; }
.re-pb-modal__field input,
.re-pb-modal__field select,
.re-pb-modal__field textarea {
    width: 100%;
    box-sizing: border-box;
    background: #061425;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
}
.re-pb-modal__field textarea { resize: vertical; min-height: 64px; }
.re-pb-modal__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #c8d3de;
    cursor: pointer;
}
.re-pb-modal__check input[type="checkbox"] { margin: 0; }
.re-pb-modal__context {
    background: rgba(68, 152, 216, 0.08);
    border: 1px solid rgba(68, 152, 216, 0.25);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    color: #c8d3de;
    margin-bottom: 4px;
}
.re-pb-modal__context strong { color: #e6edf3; }
.re-pb-modal__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 6px;
}
.re-pb-modal__status {
    font-size: 12px;
    color: #8aa0b2;
    margin-right: auto;
}
.re-pb-modal .re-btn--primary,
.re-pb-modal .re-btn--primary:visited {
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
}
.re-pb-queue-item__detail { margin-top: 10px; }
.re-pb-queue-item__detail summary {
    cursor: pointer;
    color: #4498D8;
    font-size: 14px;
}
/* Clickable subject preview on email cards - styled as a link, not a button,
   so the card reads as "label that opens compose" rather than "form action". */
.re-pb-queue-item__label-btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 8px 0 0;
    margin: 0;
    color: #4498D8;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-pb-queue-item__label-btn:hover,
.re-pb-queue-item__label-btn:focus { text-decoration: underline; }
.re-pb-queue-item__label {
    display: block;
    margin: 10px 0 4px;
    font-size: 12px;
    color: #8aa0b2;
}
.re-pb-queue-item .re-input {
    width: 100%;
    box-sizing: border-box;
}
.re-pb-queue-item__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.re-pb-queue-item .re-btn--primary,
.re-pb-queue-item .re-btn--primary:visited {
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
}
.re-pb-queue-item .re-btn--primary:hover { filter: brightness(1.05); }
.re-pb-queue-item .re-btn--grey,
.re-pb-queue-item .re-btn--grey:visited {
    background: transparent;
    color: #c8d3de;
    border: 1px solid #2c5380;
}
.re-pb-queue-item .re-btn--grey:hover {
    background: #1a3556;
    border-color: #4498D8;
    color: #fff;
}
.re-pb-queue-item__status {
    margin-top: 18px;
    font-size: 13px;
    color: #8aa0b2;
}

.re-pb-queue-item__status--ready {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #E6AD23;
}

.re-pb-queue-item__copy--text {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font: inherit;
    line-height: normal;
    color: #E6AD23;
    background: transparent;
    border: 1px solid #E6AD23;
    border-radius: 6px;
    cursor: pointer;
}

.re-pb-queue-item__copy--text:hover {
    background: rgba(230, 173, 35, 0.12);
}

.re-pb-queue-item__copy--text.is-copied {
    color: #1FAF59;
    border-color: #1FAF59;
}

@media (min-width: 640px) {
    .re-playbooks__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Playbooks - CRUD table (stacked cards at base, real table at >=640px) */
.re-pb-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.re-pb-table__head { display: none; }
.re-pb-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 16px;
    min-width: 0;
}
/* Status accent - the row's left edge and a subtle tint carry the state that
   the removed status chip used to: enabled = green, draft = mustard,
   disabled = blue. Hover the row for the word (title attr). */
.re-pb-row--enabled  { border-left: 4px solid #46b450; background: #0d1f33; }
.re-pb-row--draft    { border-left: 4px solid #E6AD23; background: #1c1a10; }
.re-pb-row--disabled { border-left: 4px solid #4498D8; background: #0c1a2b; }
.re-pb-cell { min-width: 0; font-size: 14px; color: #c9d4dd; }
.re-pb-cell::before {
    content: attr(data-label) ": ";
    color: #8aa0b2;
    font-size: 12px;
}
.re-pb-cell--name { font-size: 16px; }
.re-pb-cell--name::before { content: none; }
.re-pb-cell--name a { color: #e6edf3; text-decoration: none; font-weight: 600; }
.re-pb-cell--name a:hover { color: #4498D8; }
.re-pb-cell--name .re-badge { margin-left: 8px; }
.re-pb-cell--actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.re-pb-cell--actions::before { content: none; }

/* Create form + editor shared fields */
.re-playbook-create__intro { color: #c9d4dd; line-height: 1.5; margin-bottom: 20px; }
.re-pb-field { margin-bottom: 20px; }
.re-pb-field > label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #e6edf3;
}
.re-req { color: #E6AD23; }
.re-pb-hint { font-size: 13px; color: #8aa0b2; margin: 8px 0 0; }
.re-pb-form .re-input { width: 100%; box-sizing: border-box; }

.re-pb-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.re-pb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    color: #c9d4dd;
    cursor: pointer;
}
.re-pb-chip input { margin: 0; }
.re-pb-roles__add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.re-pb-roles__add .re-input { flex: 1 1 200px; min-width: 0; }
.re-pb-roles__groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}
.re-pb-role-group {
    min-width: 0;
    border: 1px solid rgba(230, 173, 35, 0.4);
    border-radius: 10px;
    background: rgba(230, 173, 35, 0.05);
    padding: 12px;
}
.re-pb-role-group[hidden] { display: none; }
.re-pb-role-group__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #e6edf3;
    cursor: pointer;
}
.re-pb-role-group__toggle input { margin: 0; accent-color: #E6AD23; }
.re-pb-role-group__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.re-pb-radios,
.re-pb-field--toggles { display: flex; flex-direction: column; gap: 10px; }
.re-pb-radio,
.re-pb-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c9d4dd;
    font-size: 14px;
}
.re-pb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* Editor */
.re-pb-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.re-pb-name-input { flex: 1 1 240px; min-width: 0; }
.re-playbook-editor__meta { color: #8aa0b2; font-size: 14px; margin: 0 0 16px; }
.re-playbook-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.re-playbook-editor__content,
.re-playbook-editor__schedule,
.re-playbook-editor__timeline,
.re-playbook-editor__enrol,
.re-playbook-editor__runs { margin-top: 28px; }
.re-playbook-editor__content h2,
.re-playbook-editor__schedule h2,
.re-playbook-editor__timeline h2,
.re-playbook-editor__enrol h2,
.re-playbook-editor__runs h2 { color: #4498D8; margin: 0 0 12px; }
.re-pb-content-current { color: #c9d4dd; }

/* Schedule overview grid + channel filter */
.re-pb-schedule__scroll {
    overflow-x: auto;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 8px;
    min-width: 0;
}
.re-pb-schedule__grid {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 12px;
    color: #c9d4dd;
    width: max-content;
    min-width: 100%;
}
.re-pb-schedule__grid th,
.re-pb-schedule__grid td {
    padding: 0;
    text-align: center;
    font-weight: 400;
    background: transparent;
}
.re-pb-schedule__grid th.re-pb-schedule__channel-head,
.re-pb-schedule__grid th.re-pb-schedule__channel {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #0d1f33;
    text-align: left;
    padding: 4px 10px 4px 4px;
    min-width: 120px;
    color: #e6edf3;
    font-weight: 500;
    white-space: nowrap;
}
.re-pb-schedule__grid th.re-pb-schedule__channel-head { color: #8aa0b2; font-weight: 400; }
.re-pb-schedule__day-head {
    color: #8aa0b2;
    min-width: 26px;
    padding: 4px 2px;
    font-variant-numeric: tabular-nums;
}
.re-pb-schedule__count-head,
.re-pb-schedule__count {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #0d1f33;
    min-width: 44px;
    padding: 4px 8px;
    font-variant-numeric: tabular-nums;
    color: #e6edf3;
}
.re-pb-schedule__count-head { color: #8aa0b2; font-weight: 400; }
.re-pb-schedule__cell {
    width: 26px;
    height: 22px;
    border-radius: 4px;
    background: #122a44;
}
.re-pb-schedule__cell.is-scheduled { background: #E6AD23; }

.re-pb-channel-filter {
    margin-top: 12px;
    color: #c9d4dd;
    font-size: 13px;
}
.re-pb-channel-filter__label {
    display: block;
    color: #8aa0b2;
    margin-bottom: 8px;
}
.re-pb-channel-filter__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}
@media (min-width: 720px) {
    .re-pb-channel-filter__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.re-pb-channel-filter__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-width: 0;
}
.re-pb-channel-filter__opt input { accent-color: #E6AD23; }
.re-pb-step.is-hidden,
.re-pb-day.is-hidden { display: none; }

/* Timeline */
.re-playbook-timeline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
.re-pb-day { min-width: 0; }
.re-pb-day__head {
    color: #4498D8;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1e3a5f;
}
.re-pb-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-height: 14px;
}
.re-pb-step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 12px;
    min-width: 0;
}
.re-pb-step--ghost { opacity: 0.4; }
.re-pb-step__handle {
    cursor: grab;
    color: #5a708a;
    font-size: 15px;
    line-height: 1;
    padding-top: 2px;
    touch-action: none;
}
.re-pb-step__main { flex: 1 1 auto; min-width: 0; }
.re-pb-step__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.re-pb-step__when { font-size: 12px; color: #8aa0b2; }

/* DISC / VAK focus chips on a playbook step. The generator tags each step
   with the personality / sensory channel it's leading with when the user
   has opted in to varying that axis on the create-a-playbook form. DISC
   uses the standard red/yellow/green/blue palette; VAK uses a distinct
   teal/purple/orange family so the two axes stay visually separable.
   Mobile-first - the chip wraps into the step top row natively. */
.re-pb-step__focus {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.re-pb-step__focus--disc-d { background: #ffebee; color: #c62828; }
.re-pb-step__focus--disc-i { background: #fff9c4; color: #8a6d00; }
.re-pb-step__focus--disc-s { background: #e8f5e9; color: #2e7d32; }
.re-pb-step__focus--disc-c { background: #e8eaf6; color: #283593; }
.re-pb-step__focus--vak-v  { background: #e0f2f1; color: #00695c; }
.re-pb-step__focus--vak-a  { background: #f3e5f5; color: #7b1fa2; }
.re-pb-step__focus--vak-k  { background: #fff3e0; color: #e65100; }
.re-pb-step__subject { margin-top: 6px; font-weight: 600; color: #e6edf3; word-break: break-word; }
.re-pb-step__body { margin-top: 8px; font-size: 14px; color: #c9d4dd; line-height: 1.6; word-break: break-word; }
.re-pb-step__body p { margin: 0 0 0.85em; }
.re-pb-step__body p:last-child { margin-bottom: 0; }
.re-pb-step__buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
}
/* A parent card that has reply nudges lays out as an explicit grid: the drag
   handle, body and action buttons stay on row 1, the full-width replies block
   spans row 2. Grid (not flex-wrap) so a wide email body can never push the
   body or buttons onto their own line under the handle. Matches the flex
   card's 10px gap / top alignment so a card without replies looks identical. */
.re-pb-step--has-replies {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}
.re-pb-step--has-replies > .re-pb-step__handle  { grid-column: 1; grid-row: 1; }
.re-pb-step--has-replies > .re-pb-step__main     { grid-column: 2; grid-row: 1; }
.re-pb-step--has-replies > .re-pb-step__buttons  { grid-column: 3; grid-row: 1; }
.re-pb-step--has-replies > .re-pb-step__replies  { grid-column: 1 / -1; grid-row: 2; }
.re-pb-step__replies {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-left: 16px;
    border-left: 2px solid #24425f;
}
.re-pb-step--reply {
    background: #0a1a2b;
    border-style: dashed;
}
.re-pb-step__reply-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #8aa0b2;
}
.re-pb-add-row {
    margin-bottom: 14px;
    display: flex;
    justify-content: flex-start;
}

/* Edit-step modal */
.re-pb-modal__label {
    display: block;
    margin-bottom: 14px;
    color: #c9d4dd;
    font-size: 14px;
}
.re-pb-modal__label .re-input { width: 100%; box-sizing: border-box; margin-top: 6px; }
.re-pb-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* Version banner (current playbook + read-only past-version view) */
.re-pb-version-banner {
    background: #122a44;
    border: 1px solid #1e3a5f;
    border-left: 3px solid #4498D8;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 16px;
    color: #c9d4dd;
}
.re-pb-version-banner--current { border-left-color: #5fb27a; }
.re-pb-version-banner__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    color: #e3ecf2;
}
.re-pb-version-banner__head strong { color: #4498D8; }
.re-pb-version-banner__meta { font-size: 12px; color: #8aa0b2; }
.re-pb-version-banner__desc { margin: 6px 0 0; font-size: 14px; }
.re-pb-version-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Read-only editor: muted timeline cards, no drag affordance */
.re-playbook-editor--readonly .re-pb-step { opacity: 0.92; }
.re-playbook-editor--readonly .re-pb-step:hover { cursor: default; }

/* Rollback modal version list */
.re-pb-rollback__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    max-height: 50vh;
    overflow-y: auto;
}
.re-pb-version-row {
    display: block;
    padding: 12px 14px;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #0a1828;
    color: #c9d4dd;
    text-decoration: none;
}
.re-pb-version-row:hover { background: #112338; border-color: #4498D8; }
.re-pb-version-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    color: #e3ecf2;
    font-weight: 600;
}
.re-pb-version-row__when { font-size: 12px; color: #8aa0b2; font-weight: 400; }
.re-pb-version-row__desc { margin-top: 4px; font-size: 13px; color: #b6c2cc; font-weight: 400; }

/* Reanalyse-modal textarea: same look-and-feel as the create-form guidance */
.re-pb-reanalyse__guidance,
.re-pb-guidance {
    width: 100%;
    box-sizing: border-box;
    min-height: 96px;
    resize: vertical;
}
.re-pb-hint--inline { display: inline; margin-left: 4px; }

/* "Manage tags" link button inside the tag-library label. */
.re-pb-tag-manage {
    background: transparent;
    border: 0;
    color: #4498D8;
    padding: 0;
    margin-left: 8px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}
.re-pb-tag-manage:hover { color: #6fb1e6; }

/* Tag-manager modal (dark theme). Opened from the playbook-create page. */
.re-pb-tag-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-pb-tag-modal__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #06121f;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    min-width: 0;
}
.re-pb-tag-modal__row.is-system { opacity: 0.85; }
.re-pb-tag-modal__slug {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: #e3ecf2;
    word-break: break-all;
}
.re-pb-tag-modal__pill {
    flex: 0 0 auto;
    background: #E6AD23;
    color: #1d2327;
    font-size: 11px;
    text-transform: lowercase;
    padding: 2px 8px;
    border-radius: 999px;
}
.re-pb-tag-modal__actions {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}
.re-pb-tag-modal__input {
    flex: 1 1 100%;
}
.re-pb-tag-modal__locked {
    font-size: 12px;
    color: #8aa0b2;
    font-style: italic;
}
/* re-pb-tag-modal__input flex sizing declared earlier (mobile-first 100%) */
.re-pb-tag-modal__input {
    background: #06121f;
    color: #e3ecf2;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
}
.re-pb-tag-modal__empty,
.re-pb-tag-modal__loading {
    color: #8aa0b2;
    font-size: 13px;
    padding: 12px 0;
    text-align: center;
}

@media (min-width: 480px) {
    .re-pb-tag-modal__actions { flex: 0 0 auto; justify-content: flex-start; }
    .re-pb-tag-modal__input { flex: 1 1 200px; }
}

/* Read-only name header (no input, no save button) */
.re-pb-name-static {
    margin: 0;
    color: #e3ecf2;
    font-size: 22px;
}

.re-pb-copy-source {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

@media (min-width: 640px) {
    .re-pb-table__head,
    .re-pb-row {
        display: grid;
        grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
        gap: 12px;
        align-items: center;
    }
    .re-pb-table__head { padding: 0 16px; color: #8aa0b2; font-size: 12px; }
    .re-pb-cell::before { content: none; }
    .re-pb-cell--actions { margin-top: 0; }
}




/* ===========================================================
   [re_mailbox] - Inbox(0) work surface
   =========================================================== */

.re-mailbox {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    color: #e3ecf2;
    font-family: Montserrat, system-ui, sans-serif;
    max-width: 1600px;
}

.re-mailbox__connect {
    background: #1a2731;
    border: 1px solid #2a3947;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
}
.re-mailbox__connect h2 { margin: 0 0 8px; color: #4498D8; }

.re-mailbox__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a3947;
}
.re-mailbox__tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.re-mailbox__tab {
    background: transparent;
    color: #8aa0b2;
    border: 0;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    font-size: 15px;
}
.re-mailbox__tab.is-active {
    background: #1a2731;
    color: #4498D8;
}
.re-mailbox__count { margin-left: 6px; font-weight: 400; color: #8aa0b2; }
.re-mailbox__head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; align-items: center; }
/* Status sits on its own row below the header so its text never pushes the
 * action buttons onto a new line. Collapses when empty. */
.re-mailbox__statusbar { padding: 6px 0 0; }
.re-mailbox__status { font-size: 12px; color: #8aa0b2; }
.re-mailbox__status:empty { display: none; }
/* Transient in-progress states (triaging, archiving) get a mustard highlight
 * so the live progress count is hard to miss; cleared the moment work ends. */
.re-mailbox__status.is-working {
    color: #1a2731;
    background: #E6AD23;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Mobile-first: three full-pane slide strip. Selecting an email slides the
 * detail pane in from the right; tapping Context slides the related pane in.
 * Driven by [data-pane] on the root (set by re-mailbox.js, which also pushes
 * history state so the browser/iOS swipe-back gesture moves between panes).
 * Reverts to the multi-column grid layout at >= 720px (see media queries). */
.re-mailbox__layout {
    display: flex;
    width: 300%;
    height: calc(100dvh - 80px);
    transform: translate3d(0, 0, 0);
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
    gap: 0;
    align-items: stretch;
}
.re-mailbox[data-pane="detail"] .re-mailbox__layout {
    transform: translate3d(-33.3333%, 0, 0);
}
.re-mailbox[data-pane="context"] .re-mailbox__layout {
    transform: translate3d(-66.6667%, 0, 0);
}
.re-mailbox__list,
.re-mailbox__detail,
.re-mailbox__related {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    max-width: 33.3333%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}
/* Related pane stays in the slide strip on mobile, regardless of the
 * desktop "hidden until you toggle Context" behaviour. The JS toggle still
 * sets `hidden` for the desktop drawer logic - we override it here. */
.re-mailbox__related[hidden] {
    display: block;
}
/* Outer clipper so off-screen panes don't bleed out the page edge. */
.re-mailbox { overflow-x: hidden; }

/* Mobile pane top bar: appears inside the detail and related panes; sticks
 * to the top of the scrolling pane so back/context stay reachable. Hidden
 * on >= 720px where the side-by-side layout makes them unnecessary. */
.re-mailbox__pane-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #1a2731;
    border-bottom: 1px solid #2a3947;
    margin: -14px -14px 10px;
}
.re-mailbox__pane-back,
.re-mailbox__pane-context {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: #4498D8;
    border: 0;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.re-mailbox__pane-back svg,
.re-mailbox__pane-context svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.re-mailbox__pane-back:hover,
.re-mailbox__pane-back:focus-visible,
.re-mailbox__pane-context:hover,
.re-mailbox__pane-context:focus-visible {
    color: #6fb0e0;
    outline: none;
}
/* On mobile the pane-bar carries Back/Context, so the resolve-bar context
 * toggle and the related panel's "x" close button would be duplicates -
 * hide them. >= 720px restores them (see the desktop media block below). */
.re-mailbox__related-toggle,
.re-mailbox__related-close { display: none; }

/* List */
.re-mailbox__list {
    background: #1a2731;
    border: 1px solid #2a3947;
    border-radius: 10px;
    min-width: 0;
    overflow-y: auto;
}
.re-mailbox__rows { list-style: none; margin: 0; padding: 0; }
.re-mailbox__row {
    padding: 10px 14px;
    border-bottom: 1px solid #243341;
    cursor: pointer;
    min-width: 0;
}
.re-mailbox__row:hover { background: #213240; }
.re-mailbox__row.is-active { background: #213240; border-left: 3px solid #4498D8; padding-left: 11px; }
.re-mailbox__row.is-unread .re-mailbox__row-name,
.re-mailbox__row.is-unread .re-mailbox__row-subject { font-weight: 700; color: #fff; }
.re-mailbox__row-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0;
}
.re-mailbox__row-name {
    color: #e3ecf2; font-size: 13px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-mailbox__row-time { font-size: 11px; color: #8aa0b2; flex-shrink: 0; }
.re-mailbox__row-subject {
    color: #e3ecf2; font-size: 13px; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-mailbox__row-snippet {
    color: #8aa0b2; font-size: 12px; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-mailbox__list-empty { padding: 24px; text-align: center; color: #8aa0b2; }
.re-mailbox__zero h3 { color: #4498D8; margin: 0 0 6px; }
.re-mailbox__more { display: block; margin: 12px auto; }
/* Keep the hidden attribute authoritative - the display:block above would
 * otherwise beat the browser's [hidden]{display:none}, so the button could
 * never hide (in the worklist, or at the end of the list). */
.re-mailbox__more[hidden] { display: none; }

/* ── Triage worklist ─────────────────────────────────────────────────────
 * The "Triage my inbox" button sorts the same list into disposition groups.
 * Group headers pin to the top of the scrolling list; safe-to-archive rows
 * carry a checkbox for the bulk clear. Reused rowHtml() renderer, so the row
 * base styles above still apply. */
.re-mailbox__triage-btn { white-space: nowrap; }
.re-mailbox__worklist-group {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    padding: 9px 14px;
    background: #16222c;
    border-bottom: 1px solid #243341;
    position: sticky; top: 0; z-index: 1;
}
.re-mailbox__group-title {
    display: inline-flex; align-items: center; gap: 6px;
    color: #1a2731; background: #E6AD23;
    font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 10px;
}
.re-mailbox__group-count {
    display: inline-block; padding: 1px 7px;
    border-radius: 10px; background: #1a2731; color: #E6AD23;
    font-size: 11px; font-weight: 600;
}
.re-mailbox__archive-btn { flex-shrink: 0; }
.re-mailbox__row--check { position: relative; padding-left: 40px; }
.re-mailbox__row--check.is-active { padding-left: 37px; }
.re-mailbox__archive-check {
    position: absolute; left: 12px; top: 11px;
    display: inline-flex; align-items: center; cursor: pointer;
}
.re-mailbox__archive-cb { width: 16px; height: 16px; accent-color: #4498D8; cursor: pointer; }
.re-mailbox__row-reason { color: #9db3c4; font-size: 12px; margin-top: 4px; }
.re-mailbox__row-reason--muted { color: #6f8697; font-style: italic; }
/* Possible sales opportunity spotted in the thread - mustard so it stands
 * out against the disposition rows. */
.re-mailbox__row-opp {
    display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
    margin-top: 6px;
}
.re-mailbox__row-opp-tag {
    flex-shrink: 0;
    background: #E6AD23; color: #1a2731;
    font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 9px;
}
.re-mailbox__row-opp-text { color: #E6AD23; font-size: 12px; min-width: 0; }

/* ── Triage options modal ────────────────────────────────────────────── */
.re-mailbox__modal-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(8, 14, 19, 0.72);
    padding: 0;
}
/* The class sets display:flex, which would otherwise beat the browser's
 * [hidden] { display:none } - keep the attribute authoritative so the modal
 * stays closed until opened. */
.re-mailbox__modal-backdrop[hidden] { display: none; }
.re-mailbox__modal {
    width: 100%; max-width: 540px;
    background: #1a2731;
    border: 1px solid #2a3b49;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column;
    max-height: 90dvh;
}
.re-mailbox__modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 18px; border-bottom: 1px solid #243341;
}
.re-mailbox__modal-head h2 { margin: 0; font-size: 16px; color: #fff; }
.re-mailbox__modal-close {
    background: none; border: 0; color: #8aa0b2; font-size: 24px; line-height: 1;
    cursor: pointer; padding: 0 4px;
}
.re-mailbox__modal-close:hover { color: #fff; }
.re-mailbox__modal-body { padding: 16px 18px; overflow-y: auto; }
.re-mailbox__field { display: block; margin: 0 0 14px; }
.re-mailbox__field:last-child { margin-bottom: 0; }
.re-mailbox__field-label { display: block; color: #e3ecf2; font-size: 13px; margin-bottom: 6px; }
.re-mailbox__field textarea,
.re-mailbox__field input[type="date"] {
    width: 100%; box-sizing: border-box;
    background: #12202b; color: #e3ecf2;
    border: 1px solid #2a3b49; border-radius: 8px;
    padding: 9px 11px; font-size: 14px; font-family: inherit;
}
.re-mailbox__field textarea { resize: vertical; min-height: 66px; }
.re-mailbox__field--check {
    display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
}
.re-mailbox__field--check input[type="checkbox"] {
    width: 16px; height: 16px; margin-top: 1px; accent-color: #4498D8; flex-shrink: 0; cursor: pointer;
}
.re-mailbox__field--check .re-mailbox__field-label { margin-bottom: 0; }
.re-mailbox__archive-date-row { margin-top: -4px; padding-left: 25px; }
.re-mailbox__field-hint { color: #8aa0b2; font-size: 12px; margin: 6px 0 10px; }
.re-mailbox__modal-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px; border-top: 1px solid #243341;
}
.re-mailbox__modal-error { color: #E6AD23; font-size: 12px; margin-right: auto; }
@media (min-width: 560px) {
    .re-mailbox__modal-backdrop { align-items: center; }
    .re-mailbox__modal { border-radius: 14px; }
}

/* ── Triage progress overlay ─────────────────────────────────────────────
 * Blocks the screen while a triage / archive run is in flight so the user
 * sees clear progress and can't wander off or click into a half-sorted list. */
.re-mailbox__overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 14, 19, 0.9);
    padding: 24px;
}
.re-mailbox__overlay[hidden] { display: none; }
.re-mailbox__overlay-card {
    text-align: center; max-width: 360px; color: #e3ecf2;
    background: #1a2731;
    border: 1px solid #2a3b49;
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.re-mailbox__spinner {
    display: inline-block; width: 34px; height: 34px;
    border: 3px solid rgba(68, 152, 216, 0.25); border-top-color: #4498D8;
    border-radius: 50%; animation: re-mailbox-spin 0.8s linear infinite;
}
@keyframes re-mailbox-spin { to { transform: rotate(360deg); } }
.re-mailbox__overlay-text { margin: 14px 0 6px; font-size: 15px; font-weight: 600; color: #fff; }
.re-mailbox__overlay-hint { margin: 0; font-size: 12px; color: #8aa0b2; }
@media (prefers-reduced-motion: reduce) {
    .re-mailbox__spinner { animation-duration: 2s; }
}

/* ── Guided "work through them" stepper ───────────────────────────────────
 * z-index sits well below the compose / work-block / commitment modals
 * (~99999) so those open on top of a card when an action is taken. */
.re-mailbox__stepper {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(8, 14, 19, 0.82);
    padding: 0;
}
.re-mailbox__stepper[hidden] { display: none; }
.re-mailbox__stepper-panel {
    width: 100%; max-width: 640px;
    background: #16222c;
    border: 1px solid #2a3b49;
    border-radius: 14px 14px 0 0;
    display: flex; flex-direction: column;
    max-height: 92dvh;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}
.re-mailbox__stepper-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid #243341;
}
.re-mailbox__stepper-progress { flex: 1; min-width: 0; }
.re-mailbox__stepper-count { display: block; color: #8aa0b2; font-size: 12px; margin-bottom: 6px; }
.re-mailbox__stepper-bar { height: 4px; background: #243341; border-radius: 3px; overflow: hidden; }
.re-mailbox__stepper-bar-fill { display: block; height: 100%; width: 0; background: #4498D8; transition: width 220ms ease; }
.re-mailbox__stepper-close {
    background: none; border: 0; color: #8aa0b2; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; flex-shrink: 0;
}
.re-mailbox__stepper-close:hover { color: #fff; }
.re-mailbox__stepper-body { overflow-y: auto; }

.re-mailbox__card { padding: 16px 18px 0; }
.re-mailbox__card-rec { margin-bottom: 10px; }
.re-mailbox__card-rec-tag {
    display: inline-block; padding: 3px 10px; border-radius: 10px;
    font-size: 12px; font-weight: 700; color: #1a2731; background: #4498D8;
}
.re-mailbox__card-rec-tag[data-disp="opportunity"] { background: #E6AD23; }
.re-mailbox__card-rec-tag[data-disp="schedule_work"],
.re-mailbox__card-rec-tag[data-disp="quick_task"] { background: #5FBEB3; }
.re-mailbox__card-from { color: #e3ecf2; font-size: 14px; }
.re-mailbox__card-from span { color: #8aa0b2; font-size: 12px; }
.re-mailbox__card-subject { color: #fff; font-size: 15px; font-weight: 700; margin-top: 2px; }
.re-mailbox__card-reason { color: #9db3c4; font-size: 13px; margin: 8px 0 0; }
.re-mailbox__card-opp {
    display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
    margin-top: 8px; color: #E6AD23; font-size: 13px;
}
.re-mailbox__card-mail { margin-top: 12px; }
.re-mailbox__card-mail .re-mailbox__messages { max-height: 46vh; overflow-y: auto; }
.re-mailbox__card-actions {
    position: sticky; bottom: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 0 16px; margin-top: 12px;
    background: #16222c; border-top: 1px solid #243341;
}
.re-mailbox__card-skip { margin-left: auto; }

.re-mailbox__card--batch { text-align: center; padding: 28px 20px 20px; }
.re-mailbox__card--batch h3 { color: #fff; margin: 0 0 8px; }
.re-mailbox__card--batch p { color: #8aa0b2; font-size: 13px; margin: 0 0 16px; }
.re-mailbox__card--batch .re-mailbox__card-actions {
    position: static; justify-content: center; border-top: 0; padding-bottom: 4px;
}
.re-mailbox__batch-status { color: #E6AD23; font-size: 12px; min-height: 16px; }

.re-mailbox__conclusion { text-align: center; padding: 32px 24px; }
.re-mailbox__concl-check {
    width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%;
    background: #2f5d3a; color: #7ee29a; font-size: 26px; line-height: 48px;
}
.re-mailbox__conclusion h2 { color: #fff; margin: 0 0 12px; }
.re-mailbox__concl-count { font-size: 34px; font-weight: 800; color: #e3ecf2; }
.re-mailbox__concl-count span:last-child { color: #4498D8; }
.re-mailbox__concl-cleared { color: #8aa0b2; font-size: 13px; margin: 6px 0 16px; }
.re-mailbox__concl-stats { list-style: none; margin: 0 0 14px; padding: 0; color: #e3ecf2; font-size: 14px; }
.re-mailbox__concl-stats li { padding: 4px 0; border-bottom: 1px solid #243341; }
.re-mailbox__concl-stats li:last-child { border-bottom: 0; }
.re-mailbox__concl-opps { color: #E6AD23; font-size: 13px; margin: 0 0 18px; }
@media (min-width: 560px) {
    .re-mailbox__stepper { align-items: center; }
    .re-mailbox__stepper-panel { border-radius: 14px; }
}

/* Detail */
.re-mailbox__detail {
    background: #1a2731;
    border: 1px solid #2a3947;
    border-radius: 10px;
    min-width: 0;
    padding: 14px;
    overflow-y: auto;
}
.re-mailbox__detail-empty {
    color: #8aa0b2;
    text-align: center;
    padding: 40px 16px;
}
.re-mailbox__thread-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid #2a3947; padding-bottom: 10px; margin-bottom: 10px;
    min-width: 0;
}
.re-mailbox__thread-subject {
    margin: 0; color: #fff; font-size: 18px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-mailbox__related-toggle {
    background: transparent; border: 1px solid #2a3947; color: #8aa0b2;
    border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
    flex-shrink: 0;
}
.re-mailbox__messages { list-style: none; margin: 0; padding: 0; }
.re-mailbox__msg {
    border-bottom: 1px solid #2a3947;
    padding-bottom: 12px;
    margin-bottom: 12px;
    min-width: 0;
}
.re-mailbox__msg-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px;
    margin-bottom: 4px;
}
.re-mailbox__msg-from { color: #e3ecf2; font-weight: 600; font-size: 13px; min-width: 0; }
.re-mailbox__msg-date { color: #8aa0b2; font-size: 12px; }
.re-mailbox__msg-meta {
    display: flex; flex-wrap: wrap; gap: 12px; color: #8aa0b2; font-size: 11px; margin-bottom: 6px;
}
.re-mailbox__msg-frame {
    width: 100%; min-height: 100px; max-height: 1200px;
    border: 1px solid #2a3947; border-radius: 6px; background: #fff;
}
/* Per-message attachment list. Renders above the message body iframe so
 * attachments are visible on first paint instead of buried under long
 * marketing footers or quoted history. Each item is a clickable link that
 * streams the file from the /comms/mailbox/attachment endpoint. Wraps freely
 * on mobile; the filename truncates with ellipsis so a wide attachment can't
 * push the surrounding column past the viewport. */
.re-mailbox__attachments {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.re-mailbox__attachment { min-width: 0; }
.re-mailbox__attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    background: #1a2731;
    border: 1px solid #2a3947;
    border-radius: 999px;
    color: #b6c2cc;
    font-size: 12px;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.re-mailbox__attachment-link:hover,
.re-mailbox__attachment-link:focus-visible {
    background: #213240;
    border-color: #4498D8;
    color: #fff;
    outline: none;
}
.re-mailbox__attachment-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #4498D8;
}
.re-mailbox__attachment-icon svg { display: block; }
.re-mailbox__attachment-name {
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-mailbox__attachment-size {
    color: #8aa0b2;
    font-size: 11px;
    flex-shrink: 0;
}
/* Paperclip indicator on the thread-list row, sat next to the subject.
 * Renders only when t.has_attachments is true on the row payload. */
.re-mailbox__row-clip {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: #8aa0b2;
    vertical-align: middle;
}
.re-mailbox__row-clip svg { display: block; }
.re-mailbox__loading,
.re-mailbox__empty-msg,
.re-mailbox__error { color: #8aa0b2; padding: 20px 4px; }
.re-mailbox__error { color: #c0666e; }

.re-mailbox__resolve-bar {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 0 10px;
    border-bottom: 1px solid #2a3947;
    margin-bottom: 10px;
    align-items: center;
}
.re-mailbox__resolve-bar button { flex-shrink: 0; }
/* Push the Context toggle to the right edge, away from the resolve buttons. */
.re-mailbox__resolve-bar .re-mailbox__related-toggle { margin-left: auto; }

/* Icon-only buttons in the resolve bar. Square, dark, with hover lift and a
 * native title tooltip carrying the action name. */
.re-mailbox__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: #b6c2cc;
    border: 1px solid #2a3947;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.re-mailbox__icon-btn:hover,
.re-mailbox__icon-btn:focus-visible {
    background: #213240;
    color: #fff;
    border-color: #4498D8;
    outline: none;
}
.re-mailbox__icon-btn svg {
    width: 18px;
    height: 18px;
}
/* Primary (Reply) button takes the accent fill so it's the clear default
 * action in the bar - mirrors the original primary button affordance. */
.re-mailbox__icon-btn--primary {
    background: #4498D8;
    color: #fff;
    border-color: #4498D8;
}
.re-mailbox__icon-btn--primary:hover,
.re-mailbox__icon-btn--primary:focus-visible {
    background: #2f7fbf;
    border-color: #2f7fbf;
    color: #fff;
}
/* Active state on the Context toggle when the related panel is open. */
.re-mailbox__icon-btn[aria-pressed="true"] {
    background: #213240;
    color: #4498D8;
    border-color: #4498D8;
}
/* Related panel */
.re-mailbox__related {
    background: #1a2731;
    border: 1px solid #2a3947;
    border-radius: 10px;
    min-width: 0;
    padding: 14px;
    overflow-y: auto;
}
.re-mailbox__related-head {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #2a3947; padding-bottom: 6px; margin-bottom: 10px;
}
.re-mailbox__related-head h3 { margin: 0; font-size: 16px; color: #4498D8; }
.re-mailbox__related-close {
    background: transparent; border: 0; color: #8aa0b2; cursor: pointer;
    font-size: 20px; line-height: 1; padding: 0 4px;
}
.re-mailbox__related-chips {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;
}
.re-mailbox__chip {
    background: #213240; color: #e3ecf2; border: 1px solid #2a3947;
    border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer;
    min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-mailbox__chip.is-active { background: #4498D8; color: #fff; border-color: #4498D8; }
.re-mailbox__related-placeholder,
.re-mailbox__related-error { color: #8aa0b2; font-size: 13px; }
.re-mailbox__related-error { color: #c0666e; }
.re-mailbox__rel-block {
    border-top: 1px solid #2a3947;
    padding: 10px 0;
}
.re-mailbox__rel-block:first-child { border-top: 0; padding-top: 0; }
.re-mailbox__rel-block h4 { margin: 0 0 6px; color: #4498D8; font-size: 13px; }
.re-mailbox__rel-block ul { list-style: none; margin: 0; padding: 0; }
.re-mailbox__rel-block li { font-size: 13px; line-height: 1.5; padding: 4px 0; border-top: 1px dashed #243341; }
.re-mailbox__rel-block li:first-child { border-top: 0; }
.re-mailbox__rel-block a { color: #4498D8; }
.re-mailbox__rel-contact { font-size: 13px; }
.re-mailbox__rel-why { color: #b6c2cc; margin: 4px 0; font-style: italic; }
.re-mailbox__owner { color: #8aa0b2; font-size: 11px; margin-left: 4px; }
.re-mailbox__rel-unknown form { display: grid; gap: 6px; margin-top: 4px; }
.re-mailbox__rel-unknown input {
    width: 100%; box-sizing: border-box; padding: 6px 8px;
    background: #0f1820; color: #e3ecf2; border: 1px solid #2a3947; border-radius: 5px;
}
.re-mailbox__rel-status { font-size: 11px; color: #8aa0b2; }
.re-mailbox__rel-domain { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #243341; }
.re-mailbox__rel-note { color: #E6AD23; font-size: 12px; margin-top: 4px; }
.re-mailbox__stage { color: #8aa0b2; font-size: 11px; padding: 2px 6px; background: #213240; border-radius: 4px; margin-left: 4px; }
.re-mailbox__pain-score { color: #4498D8; font-weight: 700; margin-right: 6px; }
.re-mailbox__act-type { color: #8aa0b2; font-size: 11px; padding: 1px 6px; background: #213240; border-radius: 4px; margin-right: 4px; }
.re-mailbox__act-date { color: #8aa0b2; font-size: 11px; margin-left: 4px; }

/* Related panel as a slide-in drawer on 720-1099 viewports */
.re-mailbox__related-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 90;
}

/* >= 720px: revert the mobile slide-strip to the side-by-side grid layout.
 * The 2-column template is the default here; >= 1100px below adds a 3rd
 * column for the related pane. */
@media (min-width: 720px) {
    .re-mailbox { overflow-x: visible; }
    .re-mailbox__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
        width: auto;
        height: auto;
        transform: none;
        gap: 16px;
    }
    .re-mailbox[data-pane="detail"] .re-mailbox__layout,
    .re-mailbox[data-pane="context"] .re-mailbox__layout {
        transform: none;
    }
    .re-mailbox__list,
    .re-mailbox__detail,
    .re-mailbox__related {
        flex: initial;
        width: auto;
        max-width: none;
        border-radius: 10px;
        border: 1px solid #2a3947;
    }
    .re-mailbox__list { max-height: 70vh; }
    .re-mailbox__related { max-height: 70vh; }
    .re-mailbox__detail { overflow-y: visible; }
    .re-mailbox__related[hidden] { display: none; }
    .re-mailbox__pane-bar { display: none; }
    .re-mailbox__related-toggle { display: inline-flex; }
    .re-mailbox__related-close { display: inline-block; }
}

@media (min-width: 720px) and (max-width: 1099px) {
    .re-mailbox__related--drawer {
        position: fixed; right: 0; top: 0; bottom: 0; width: min(360px, 90vw);
        z-index: 100; border-radius: 0; max-height: 100vh; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
    }
}

@media (min-width: 1100px) {
    .re-mailbox__layout {
        /* List : content : context = 1 : 2 : 1 (page split into quarters). */
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    }
    .re-mailbox__related-backdrop { display: none !important; }
}

/* Shared slot-finder component
 * (assets/js/re-slot-finder.js + _partials/slot-finder.php)
 * Drop-in for any modal that needs the "pick duration, see next N slots"
 * affordance. Dark-themed because every consumer today is a frontend
 * dark-theme modal. */
.re-slot-finder { display: flex; flex-direction: column; gap: 12px; }
.re-slot-finder__duration-group {
    margin: 0; padding: 0; border: 0;
}
.re-slot-finder__duration-group legend {
    color: #c9d4dd; font-size: 13px; padding: 0; margin-bottom: 6px;
}
.re-slot-finder__pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* Note: every visual property is also guarded against theme overrides
 * (Astra and similar themes apply text-transform:uppercase + their own
 * button colors with high-specificity selectors like `.entry-content
 * button`). The .re-slot-finder__pills prefix + the .is-active double-class
 * boost specificity to (0,3,0) so we beat the common theme rules without
 * resorting to !important on every line. */
/* The host site applies `color`/`background-color`/`border` with !important
 * to every <button> via a wildcard rule (`.ast-button, .button, button,
 * input, select, textarea { ... !important }`). The only way to beat
 * !important is with !important, so the colour-bearing properties below
 * carry it too. Sizing / typography do NOT need !important - the wildcard
 * doesn't touch them. */
.re-slot-finder__pills .re-slot-finder__pill {
    background: #0a1929 !important;
    color: #e6edf3 !important;
    border: 1px solid #1e3a5f !important;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.re-slot-finder__pills .re-slot-finder__pill:hover:not(.is-active) {
    background: rgba(68, 152, 216, 0.18) !important;
    border-color: #4498D8 !important;
    color: #e6edf3 !important;
}
.re-slot-finder__pills .re-slot-finder__pill.is-active,
.re-slot-finder__pills .re-slot-finder__pill.is-active:hover {
    background: #E6AD23 !important;
    border-color: #E6AD23 !important;
    color: #0a1929 !important;
}

.re-slot-finder__slots-wrap { display: flex; flex-direction: column; gap: 8px; }
.re-slot-finder__caption { color: #c9d4dd; font-size: 13px; margin: 0; }
.re-slot-finder__loading {
    background: rgba(68, 152, 216, 0.12);
    color: #91CAEA;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.re-slot-finder__error {
    background: rgba(255, 138, 115, 0.12);
    color: #ff8a73;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}
/* Not an error - a calm prompt shown when the user has no connected calendar,
 * so we can't offer their own times. Uses the neutral blue rather than the
 * error red. */
.re-slot-finder__error--info {
    background: rgba(68, 152, 216, 0.12);
    color: #4498D8;
}
.re-slot-finder__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
/* Same !important treatment as the duration pills - the site's wildcard
 * `button { ... !important }` rule applies here too. */
.re-slot-finder__list .re-slot-finder__slot {
    background: #0a1929 !important;
    color: #e6edf3 !important;
    border: 1px solid #1e3a5f !important;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.re-slot-finder__list .re-slot-finder__slot:hover:not(.is-active) {
    background: rgba(68, 152, 216, 0.18) !important;
    border-color: #4498D8 !important;
}
.re-slot-finder__list .re-slot-finder__slot.is-active,
.re-slot-finder__list .re-slot-finder__slot.is-active:hover {
    background: #E6AD23 !important;
    border-color: #E6AD23 !important;
    color: #0a1929 !important;
}
.re-slot-finder__show-more {
    align-self: flex-start;
    background: transparent;
    color: #91CAEA;
    border: 0;
    padding: 4px 0;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.re-slot-finder__from-reset {
    background: transparent;
    color: #91CAEA;
    border: 0;
    padding: 4px 0;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.re-slot-finder__date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.re-slot-finder__date-label {
    color: #c9d4dd;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.re-slot-finder__from-date {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 6px 8px;
    min-width: 160px;
    color-scheme: dark; /* nudges Chrome/Firefox to draw the picker UI in dark mode */
}
.re-mailbox-ai-modal__hint {
    color: #b6c2cc;
    font-size: 13px;
    margin: 0 0 12px;
}

/* Mailbox folder names form on [re_user_settings] */
.re-user-settings__form { margin-top: 10px; }
.re-user-settings__inline-row {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 480px) {
    .re-user-settings__inline-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.re-user-settings__inline-row input {
    width: 100%; box-sizing: border-box; padding: 6px 8px;
    background: #0f1820; color: #e3ecf2; border: 1px solid #2a3947; border-radius: 5px;
}
.re-user-settings__inline-actions {
    margin-top: 10px;
    display: flex; align-items: center; gap: 12px;
}
.re-user-settings__status { color: #8aa0b2; font-size: 12px; }

/* Softphone ringtone controls in the "Your calling number" section.
   Mobile-first: fields stack full-width and go in-row from 480px. */
.re-ringtone { margin-top: 16px; }
.re-ringtone > h3 { margin: 0 0 4px; }
.re-ringtone__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 10px;
}
.re-ringtone__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 100%;
}
.re-ringtone__field > span { font-size: 12px; color: #8aa0b2; }
.re-ringtone__field select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: #0a1929;
    color: #dbe7f0;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}
.re-ringtone__field--vol input[type="range"] { width: 100%; accent-color: #4498D8; }
.re-ringtone__play { flex: 0 0 auto; }
.re-ringtone__status { color: #8aa0b2; font-size: 12px; }
@media (min-width: 480px) {
    .re-ringtone__field { flex: 1 1 0; }
}

/* Profile image uploader on [re_user_settings] */
.re-profile-image { margin: 0; }
.re-profile-image__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.re-profile-image__preview {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8aa0b2;
    font-size: 11px;
    text-align: center;
}
.re-profile-image__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.re-profile-image__placeholder { padding: 6px; }
.re-profile-image__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 240px;
}
.re-profile-image__pick {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.re-profile-image__pick input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.re-profile-image__hint {
    flex-basis: 100%;
    margin: 4px 0 0;
    color: #8aa0b2;
    font-size: 12px;
}
.re-profile-image__flash {
    margin: 12px 0 0;
    font-size: 13px;
}
.re-profile-image__flash--ok  { color: #5fb96a; }
.re-profile-image__flash--err { color: #e0746a; }
.re-profile-image__remove-form { margin: 12px 0 0; }

/* ──────────────────────────────────────────────────────────────────
   Presence rail (now / next / mailbox / bell / focus)
   Mobile-first, brand teal-blue (matches .re-app-shell__rail).
   Rendered inline at the top of the post content via the_content
   filter so it sits below the site header and above the CRM views;
   scrolls with the page (the theme header scrolls away on this site).
   ────────────────────────────────────────────────────────────────── */
.re-presence-rail {
    position: relative;
    margin: 0 0 16px;
    background: rgba(34, 63, 76, 0.96);
    color: #FFFFFF;
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 10px;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
/* Defensive override: themes (Astra in particular) sometimes apply
   text-transform: uppercase to button-like elements globally. Force
   sentence case across every rail control + label. */
.re-presence-rail,
.re-presence-rail * { text-transform: none !important; letter-spacing: normal; }
/* Defensive override: several rail selectors set an explicit display
   (inline-flex / flex / inline-block) which outranks the UA stylesheet's
   `[hidden] { display: none }` rule. Without this the JS toggling
   `el.hidden = true` doesn't visually hide the element. Scoped to the
   rail so it can't leak to the rest of the page. */
.re-presence-rail [hidden] { display: none !important; }

.re-presence-rail--focus { background: rgba(28, 52, 64, 0.96); }

/* Commercial Blueprint strip - the salesperson's "I help... to achieve..."
   positioning lines, collapsed by default behind a mustard teaser they can
   grab whenever they need it. Native <details> so the expand needs no JS. */
.re-pr-blueprint {
    border-top: 1px solid rgba(68, 152, 216, 0.22);
}
.re-pr-blueprint__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 7px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.re-pr-blueprint__summary::-webkit-details-marker { display: none; }
.re-pr-blueprint__teaser {
    color: #E6AD23;
    font-weight: 700;
}
.re-pr-blueprint__more,
.re-pr-blueprint__hide {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
}
.re-pr-blueprint__hide { display: none; }
.re-pr-blueprint[open] .re-pr-blueprint__more { display: none; }
.re-pr-blueprint[open] .re-pr-blueprint__hide { display: inline; }
.re-pr-blueprint__list {
    margin: 0;
    padding: 0 12px 10px 12px;
    list-style: none;
}
.re-pr-blueprint__item {
    color: #FFFFFF;
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}
.re-pr-blueprint__item:first-child { border-top: 0; }

.re-pr-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
    align-items: center;
    gap: 8px 12px;
    padding: 6px 10px;
}
/* Mobile: anchor the rail dropdowns (search / bell / focus) to the row so
   right: 0 resolves to the rail edge, not the mid-rail icon - otherwise the
   menus grow leftward off the viewport. Desktop restores per-icon anchoring. */
.re-pr-search,
.re-pr-bell,
.re-pr-focus { position: static; }
@media (min-width: 640px) {
    .re-pr-search,
    .re-pr-bell,
    .re-pr-focus { position: relative; }
}
.re-pr-row > .re-pr-now,
.re-pr-row > .re-pr-progress,
.re-pr-row > .re-pr-next {
    grid-column: 1 / -1;
}
@media (min-width: 640px) {
    .re-pr-row {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(80px, 1fr)
            minmax(0, 1.5fr)
            auto auto auto auto auto auto;
        padding: 6px 14px;
    }
    .re-pr-row > .re-pr-now,
    .re-pr-row > .re-pr-progress,
    .re-pr-row > .re-pr-next {
        grid-column: auto;
    }
}

.re-pr-label {
    color: rgba(255, 255, 255, 0.65);
    margin-right: 6px;
    font-size: 11px;
}

.re-pr-now,
.re-pr-next {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.re-pr-title {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
    min-width: 0;
}
@media (min-width: 640px) {
    .re-pr-title { max-width: 28vw; }
}
.re-pr-title--link { color: #91CAEA; }
.re-pr-title--link:hover { color: #FFFFFF; text-decoration: underline; }

.re-pr-meta { color: rgba(255, 255, 255, 0.65); font-size: 12px; white-space: nowrap; }

.re-pr-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.re-pr-pill--join {
    background: #E6AD23;
    color: #1A2937;
}
.re-pr-pill--join:hover { background: #f0b934; color: #1A2937; }

.re-pr-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(145, 202, 234, 0.18);
    color: #91CAEA;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}
.re-pr-badge:hover { background: rgba(145, 202, 234, 0.30); color: #FFFFFF; }

.re-pr-btn {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(68, 152, 216, 0.40);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
}
.re-pr-btn:hover { border-color: #91CAEA; color: #91CAEA; }
.re-pr-btn:disabled { opacity: .6; cursor: default; }
.re-pr-btn--plan { background: #4498D8; border-color: #4498D8; color: #FFFFFF; }
.re-pr-btn--plan:hover { background: #5aa9e3; border-color: #5aa9e3; color: #FFFFFF; }

/* Progress bar */
.re-pr-progress {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
    min-width: 80px;
}
.re-pr-progress__fill {
    height: 100%;
    width: 0%;
    transition: width .9s linear;
    background: #4498D8;
}
.re-pr-progress__fill--calm { background: #4498D8; }
.re-pr-progress__fill--soon { background: #E6AD23; }
.re-pr-progress__fill--over { background: #c0392b; }

/* Mailbox chip */
.re-pr-mailbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background: transparent;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.re-pr-mailbox:hover { background: rgba(145, 202, 234, 0.14); color: #FFFFFF; }
.re-pr-mailbox--unread { background: rgba(68, 152, 216, 0.22); }
.re-pr-mailbox--unread:hover { background: rgba(68, 152, 216, 0.32); }
.re-pr-mailbox__icon { width: 16px; height: 16px; flex: 0 0 16px; }
.re-pr-mailbox__counts {
    font-weight: 600;
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.re-pr-mailbox__counts:empty { display: none; }

/* Bell - wrapper positioning handled by the .re-pr-row mobile/desktop block. */
.re-pr-bell__btn {
    background: transparent;
    border: 0;
    color: #91CAEA;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    position: relative;
    line-height: 1;
}
.re-pr-bell__btn:hover { color: #FFFFFF; }
.re-pr-bell__icon { width: 18px; height: 18px; display: block; }
.re-pr-bell--has-unseen .re-pr-bell__btn { color: #E6AD23; }
.re-pr-bell--has-unseen .re-pr-bell__btn:hover { color: #FFFFFF; }
.re-pr-bell__count {
    position: absolute;
    top: -4px; right: -4px;
    background: #E6AD23;
    color: #1A2937;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    min-width: 8px;
    text-align: center;
}
.re-pr-bell__menu {
    position: absolute;
    top: 100%; right: 0;
    margin-top: 6px;
    min-width: 260px;
    max-width: 90vw;
    background: rgba(34, 63, 76, 0.98);
    color: #FFFFFF;
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    padding: 8px 0;
    z-index: 9001;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.re-pr-bell__list { list-style: none; padding: 0; margin: 0; }
.re-pr-bell__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
}
.re-pr-bell__item + .re-pr-bell__item { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.re-pr-bell__body { flex: 1 1 auto; min-width: 0; }
.re-pr-bell__link { color: #91CAEA; text-decoration: none; }
.re-pr-bell__link:hover { color: #FFFFFF; text-decoration: underline; }
.re-pr-bell__meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.re-pr-bell__time {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    white-space: nowrap;
}
.re-pr-bell__dismiss {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 18px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    cursor: pointer;
}
.re-pr-bell__dismiss:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.re-pr-bell__empty { color: rgba(255, 255, 255, 0.65); padding: 6px 14px; margin: 0; font-size: 12px; }

/* Focus mode - wrapper positioning handled by the .re-pr-row mobile/desktop block. */
.re-pr-focus__btn {
    background: transparent;
    color: #FFFFFF;
    border: 0;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.re-pr-focus__btn:hover { color: #91CAEA; background: rgba(145, 202, 234, 0.14); }
.re-presence-rail--focus .re-pr-focus__btn { color: #E6AD23; }
.re-pr-focus__icon { width: 18px; height: 18px; }

.re-pr-focus__menu {
    position: absolute;
    top: 100%; right: 0;
    margin-top: 6px;
    min-width: 200px;
    background: rgba(34, 63, 76, 0.98);
    color: #FFFFFF;
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    padding: 6px 0;
    z-index: 9001;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.re-pr-focus__opt {
    background: transparent;
    border: 0;
    color: #FFFFFF;
    text-align: left;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}
.re-pr-focus__opt:hover { background: rgba(145, 202, 234, 0.18); color: #FFFFFF; }
.re-pr-focus__opt--until-next { max-width: 260px; }
.re-pr-focus__opt--until-next .re-pr-focus__opt-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Search popover - wrapper positioning handled by the .re-pr-row mobile/desktop block. */
.re-pr-search__btn {
    background: transparent;
    border: 0;
    color: #91CAEA;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.re-pr-search__btn:hover { color: #FFFFFF; }
.re-pr-search__icon { width: 18px; height: 18px; display: block; }

/* Quick-add buttons (between search and bell): person+plus opens
   "Add to pipeline", calendar+plus opens "Add a task". */
.re-pr-add-pipeline,
.re-pr-add-task {
    background: transparent;
    border: 0;
    color: #91CAEA;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.re-pr-add-pipeline:hover,
.re-pr-add-task:hover { color: #FFFFFF; }
.re-pr-add-pipeline__icon,
.re-pr-add-task__icon { width: 18px; height: 18px; display: block; }
.re-pr-search__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    width: 360px;
    max-width: 92vw;
    background: rgba(34, 63, 76, 0.98);
    color: #FFFFFF;
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    padding: 10px;
    z-index: 9001;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.re-pr-search__form {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.re-pr-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    background: #0F1A22;
    color: #E6E9EC;
    font-size: 13px;
    box-sizing: border-box;
}
.re-pr-search__input:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.2);
}
.re-pr-search__go {
    flex: 0 0 auto;
    background: #4498D8;
    border: 1px solid #4498D8;
    color: #FFFFFF;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.re-pr-search__go:hover { background: #5aa9e3; border-color: #5aa9e3; }
.re-pr-search__results {
    margin-top: 8px;
    max-height: 360px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 6px;
}
.re-pr-search__empty {
    padding: 8px 4px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-style: italic;
}
.re-pr-search__row {
    display: grid;
    grid-template-columns: minmax(0, 90px) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: baseline;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: #E6E9EC;
}
.re-pr-search__row:last-child { border-bottom: none; }
.re-pr-search__row:hover { background: rgba(145, 202, 234, 0.10); }
.re-pr-search__type {
    grid-row: 1; grid-column: 1;
    font-size: 11px;
    color: #91CAEA;
    font-weight: 600;
}
.re-pr-search__name {
    grid-row: 1; grid-column: 2;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-pr-search__owner {
    grid-row: 1; grid-column: 3;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}
.re-pr-search__sub {
    grid-row: 2; grid-column: 2 / span 2;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-pr-search__footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.re-pr-search__mailbox-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: transparent;
    color: #91CAEA;
    border: 1px solid rgba(145, 202, 234, 0.45);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}
.re-pr-search__mailbox-btn:hover {
    background: rgba(145, 202, 234, 0.10);
    border-color: rgba(145, 202, 234, 0.70);
    color: #FFFFFF;
}

/* ── Mailbox-search adopt-contact modal ─────────────────────────────────── */
.re-mbs {
    position: fixed; inset: 0;
    display: none;
    z-index: 10000;
}
.re-mbs.is-open { display: block; }
.re-mbs__scrim {
    position: absolute; inset: 0;
    background: rgba(8, 14, 19, 0.75);
}
.re-mbs__dialog {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(720px, 100%);
    max-height: calc(100vh - 32px);
    background: #11202B;
    color: #E6E9EC;
    border: 1px solid #2A3A48;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.re-mbs__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #1A2530;
    gap: 8px;
}
.re-mbs__title {
    margin: 0;
    font-size: 16px;
    color: #4498D8;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-mbs__close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    min-width: 32px;
    min-height: 32px;
}
.re-mbs__close:hover { color: #FFFFFF; }
.re-mbs__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
    min-width: 0;
}
.re-mbs__loading,
.re-mbs__empty,
.re-mbs__error-state {
    padding: 24px 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.70);
    font-size: 14px;
}
.re-mbs__group {
    border: 1px solid #2A3A48;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
.re-mbs__group[data-disabled="1"] { opacity: 0.55; }
.re-mbs__group.is-selected { border-color: rgba(145, 202, 234, 0.55); }
/* Mute every group's message list until that sender's radio is picked,
   so it's obvious which sender's emails will actually be imported. The
   `is-selected` class is toggled on the picked group by onBodyChange()
   in re-mailbox-search.js. */
.re-mbs__group:not(.is-selected) .re-mbs__msgs {
    opacity: 0.4;
    pointer-events: none;
}
.re-mbs__group-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid #1A2530;
}
.re-mbs__group-pick {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1 1 200px;
    cursor: pointer;
    margin: 0;
}
.re-mbs__group-name {
    font-weight: 600;
    color: #FFFFFF;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-mbs__group-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-mbs__group-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
}
.re-mbs__group-badge {
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(230, 173, 35, 0.18);
    color: #E6AD23;
    border-radius: 4px;
    font-weight: 600;
}
.re-mbs__open-existing {
    font-size: 12px;
    color: #91CAEA;
    text-decoration: none;
}
.re-mbs__open-existing:hover { text-decoration: underline; }
.re-mbs__msgs {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.re-mbs__msg {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.re-mbs__msg:last-child { border-bottom: none; }
.re-mbs__msg-label {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 2px;
    padding: 8px 12px;
    cursor: pointer;
    margin: 0;
}
.re-mbs__msg-check {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: flex-start;
    min-width: 18px;
    min-height: 18px;
    margin-top: 4px;
}
.re-mbs__msg-meta {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
}
.re-mbs__msg-subject {
    font-weight: 500;
    color: #FFFFFF;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.re-mbs__msg-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
}
.re-mbs__msg-snippet {
    grid-row: 2;
    grid-column: 2;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-mbs__footer {
    border-top: 1px solid #1A2530;
    padding: 12px 16px;
    background: #0F1A22;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-mbs__contact-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
@media (min-width: 540px) {
    .re-mbs__contact-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .re-mbs__field--email { grid-column: 1 / span 2; }
}
.re-mbs__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.re-mbs__field-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}
.re-mbs__field-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    background: #0F1A22;
    color: #E6E9EC;
    font-size: 13px;
}
.re-mbs__field-input:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.2);
}
.re-mbs__error {
    color: #E6AD23;
    font-size: 12px;
}
.re-mbs__submit {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: #4498D8;
    border: 1px solid #4498D8;
    color: #FFFFFF;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.re-mbs__submit:hover:not(:disabled) {
    background: #5aa9e3;
    border-color: #5aa9e3;
}
.re-mbs__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Lazy email-body block in the activity timeline ───────────────────────── */
.re-activity__lazy-body {
    padding: 8px 0;
}
.re-activity__lazy-snippet {
    margin: 0 0 8px;
    color: rgba(34, 63, 76, 0.75);
    font-style: italic;
}
.re-activity__lazy-btn {
    background: transparent;
    border: 1px solid rgba(68, 152, 216, 0.55);
    color: #4498D8;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.re-activity__lazy-btn:hover:not(:disabled) {
    background: rgba(68, 152, 216, 0.08);
}
.re-activity__lazy-btn:disabled { opacity: 0.6; cursor: progress; }
.re-activity__lazy-error {
    margin: 8px 0 0;
    color: #C75A4C;
    font-size: 12px;
}

/* ── CRM file attachments (v1.66.0) ─────────────────────────────────────── */
.re-attach-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.re-attach-label { color: #4498D8; font-size: 13px; font-weight: 600; }
.re-attach-field input[type="file"],
.re-attach-field input[type="text"],
.re-attach-field textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0B1820;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    padding: 8px 10px;
    color: #E6E9EC;
    font-size: 14px;
    font-family: inherit;
}
.re-attach-field textarea { resize: vertical; min-height: 80px; }
.re-attach-label-hint {
    font-weight: 400;
    font-size: 11.5px;
    color: #93a5b3;
    margin-left: 6px;
}
.re-attach-tag-existing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.re-attach-tag-existing[hidden] { display: none; }
.re-attach-tag-existing-label {
    font-size: 11.5px;
    color: #93a5b3;
}
.re-attach-tag-existing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
}
.re-attach-tag-pill {
    background: #1a2530;
    color: #cfd9e2;
    border: 1px solid #2c3a47;
    border-radius: 12px;
    padding: 3px 9px;
    font-size: 11.5px;
    cursor: pointer;
    font-family: inherit;
}
.re-attach-tag-pill:hover { background: #2a3a47; color: #fff; }
.re-attach-siblings {
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 12px 14px 10px;
    margin: 0;
    min-width: 0;
}
.re-attach-siblings legend {
    padding: 0 6px;
    color: #4498D8;
    font-size: 13px;
    font-weight: 600;
}
.re-attach-chip-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    min-width: 0;
}
.re-attach-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border: 1px solid #2A3A48;
    border-radius: 999px;
    background: #0B1820;
    color: #E6E9EC;
    font-size: 13px;
    cursor: pointer;
    min-width: 0;
}
.re-attach-chip input[type="checkbox"] { margin: 0; }
.re-attach-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
}

/* File-type entry on the activity timeline. */
.re-activity__file-meta {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 4px 0 0;
    min-width: 0;
}
.re-activity__file-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(145, 202, 234, 0.15);
    border: 1px solid #91CAEA;
    color: #223F4C;
    font-size: 12px;
    font-weight: 500;
}
.re-activity--file .re-activity__file-chip {
    background: rgba(145, 202, 234, 0.12);
    color: #C5CDD3;
    border-color: #2A4658;
}
.re-activity__file-tags {
    margin: 6px 0 0;
    font-size: 13px;
    color: #C5CDD3;
}
.re-activity__file-tags strong { color: #4498D8; font-weight: 600; margin-right: 4px; }
.re-activity__file-tag {
    color: #91CAEA;
    text-decoration: underline;
}
.re-activity__file-tag:hover { color: #B7DBF1; }

/* AI draft guidance modal (Programmes - Generate AI Draft regenerate step).
   Chrome supplied by the .re-dialog base; only the buttons are feature-specific. */
.re-ai-draft-modal__cancel,
.re-ai-draft-modal__submit {
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.re-ai-draft-modal__cancel {
    background: transparent;
    color: #c9d4dd;
}
.re-ai-draft-modal__cancel:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e6edf3;
}
.re-ai-draft-modal__submit {
    background: #4498D8;
    border-color: #4498D8;
    color: #fff;
}
.re-ai-draft-modal__submit:hover { background: #61B0E0; border-color: #61B0E0; }

/* ==========================================================================
   Recipes - [re_recipes] list + detail editor (dark theme, mobile-first)
   ========================================================================== */

.re-recipes,
.re-recipe-editor {
    color: #e6edf3;
    max-width: 860px;
    padding: 8px 4px 32px;
}

.re-recipes__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.re-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #91CAEA;
}

.re-page-intro {
    margin: 0 0 16px;
    color: #c9d4dd;
    font-size: 14px;
    line-height: 1.5;
}

.re-back-link {
    display: inline-block;
    margin-bottom: 8px;
    color: #91CAEA;
    text-decoration: none;
    font-size: 13px;
}
.re-back-link:hover { color: #b3d6ee; }

.re-section-heading {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #e6edf3;
}

.re-section-hint {
    margin: 0 0 12px;
    color: #8aa0b2;
    font-size: 13px;
    line-height: 1.5;
}

.re-empty-state {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    color: #c9d4dd;
}

.re-banner--warn {
    background: rgba(230, 173, 35, 0.12);
    border: 1px solid rgba(230, 173, 35, 0.6);
    color: #f5d378;
}

/* Recipe list grid */
.re-recipes__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .re-recipes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.re-recipe-card {
    display: block;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 14px 16px;
    color: #e6edf3;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 0;
}
.re-recipe-card:hover {
    border-color: #4498D8;
    background: #14273f;
}
.re-recipe-card--archived { opacity: 0.6; }

.re-recipe-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.re-recipe-card__name { font-size: 15px; font-weight: 600; color: #e6edf3; min-width: 0; }
.re-recipe-card__desc { color: #c9d4dd; font-size: 13px; line-height: 1.45; margin-bottom: 8px; }
.re-recipe-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }

.re-chip {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #1e3a5f;
    color: #c9d4dd;
    line-height: 1.4;
}
.re-chip--blue {
    background: rgba(68, 152, 216, 0.16);
    border-color: rgba(68, 152, 216, 0.4);
    color: #91CAEA;
}
.re-chip--warn {
    background: rgba(230, 173, 35, 0.16);
    border-color: rgba(230, 173, 35, 0.4);
    color: #f5d378;
}
.re-chip--muted { color: #8aa0b2; }

/* Recipe editor form */
.re-recipe-form { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }

.re-recipe-form__section {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 16px 18px;
}

.re-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    min-width: 0;
}
.re-field:last-child { margin-bottom: 0; }
.re-field__label {
    font-size: 12px;
    color: #c9d4dd;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.re-recipe-form input[type="text"],
.re-recipe-form input[type="number"],
.re-recipe-form input[type="time"],
.re-recipe-form select,
.re-recipe-form textarea {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}
.re-recipe-form input:focus,
.re-recipe-form select:focus,
.re-recipe-form textarea:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}
.re-recipe-form select { min-height: 44px; }

.re-ingredients {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.re-ingredient-row {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px 12px;
    position: relative;
}

.re-ingredient-row__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

@media (min-width: 640px) {
    .re-ingredient-row__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .re-field--span2 { grid-column: span 3; }
}
@media (min-width: 900px) {
    .re-ingredient-row__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
        gap: 10px;
    }
    .re-field--span2 { grid-column: span 1; }
}

.re-ingredient-row__remove {
    margin-top: 8px;
    color: #ff8a73;
}

.re-btn--ghost {
    background: transparent;
    border: 1px solid #1e3a5f;
    color: #c9d4dd;
}
.re-btn--ghost:hover {
    border-color: #4498D8;
    color: #e6edf3;
}
.re-btn--sm { font-size: 12px; padding: 6px 10px; }
.re-btn--danger {
    background: rgba(255, 138, 115, 0.16);
    border-color: rgba(255, 138, 115, 0.4);
    color: #ff8a73;
}
.re-btn--danger:hover {
    background: rgba(255, 138, 115, 0.24);
    border-color: rgba(255, 138, 115, 0.6);
}

.re-recipe-form__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.re-recipe-editor__schedule {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #1e3a5f;
}
.re-recipe-editor__schedule-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-top: 4px;
}

.re-recipe-editor__danger {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #1e3a5f;
}
.re-recipe-editor__danger-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   My Day Cookbook table (renders beneath the calendar on [re_daily_view])
   ========================================================================== */

.re-md-cookbook {
    margin-top: 24px;
    padding: 18px 18px 18px 22px;
    background: linear-gradient(135deg, rgba(68, 152, 216, 0.10) 0%, rgba(13, 31, 51, 0) 55%), #0d1f33;
    border: 1px solid rgba(68, 152, 216, 0.42);
    border-left: 3px solid #4498D8;
    border-radius: 10px;
    color: #e6edf3;
    box-shadow: 0 2px 18px rgba(68, 152, 216, 0.12);
}

.re-md-cookbook__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 720px) {
    .re-md-cookbook__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

.re-md-cookbook__col { min-width: 0; }

.re-md-cookbook__col-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: #91CAEA;
}

.re-md-cookbook__recipe {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1e3a5f;
}
.re-md-cookbook__recipe:last-child { border-bottom: none; padding-bottom: 0; }

.re-md-cookbook__recipe-name {
    display: block;
    font-size: 13px;
    color: #c9d4dd;
    margin-bottom: 8px;
}

.re-md-cookbook__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 8px 0;
    min-width: 0;
}

.re-md-cookbook__row-text {
    font-size: 13px;
    color: #e6edf3;
    min-width: 0;
    overflow-wrap: anywhere;
}

.re-md-cookbook__row-outcome { color: #8aa0b2; }

.re-md-cookbook__row-count {
    font-size: 13px;
    font-weight: 600;
    color: #e6edf3;
    text-align: right;
}

.re-md-cookbook__row-bar {
    grid-column: 1 / -1;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}
.re-md-cookbook__row-bar-fill {
    height: 100%;
    background: #4498D8;
    transition: width 0.2s ease;
}

.re-md-cookbook__row--ahead    .re-md-cookbook__row-bar-fill { background: #2ec27a; }
.re-md-cookbook__row--on-track .re-md-cookbook__row-bar-fill { background: #4498D8; }
.re-md-cookbook__row--behind   .re-md-cookbook__row-bar-fill { background: #E6AD23; }

.re-md-cookbook__row--behind .re-md-cookbook__row-count { color: #f5d378; }
.re-md-cookbook__row--ahead  .re-md-cookbook__row-count { color: #6ed79b; }

/* Target block at the top of a recipe (the output the user is working
   towards). Sits above the Behaviours list so the recipe block reads
   top-down: target -> behaviours that play to it. */
.re-md-cookbook__target {
    margin: 4px 0 12px;
    padding: 10px 12px;
    background: rgba(68, 152, 216, 0.08);
    border: 1px solid rgba(68, 152, 216, 0.30);
    border-left: 3px solid #4498D8;
    border-radius: 6px;
}
.re-md-cookbook__target--hit      { border-left-color: #2ec27a; background: rgba(46, 194, 122, 0.08); }
.re-md-cookbook__target--behind   { border-left-color: #E6AD23; background: rgba(230, 173, 35, 0.08); }
.re-md-cookbook__target--on-track { border-left-color: #4498D8; }

.re-md-cookbook__target-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.re-md-cookbook__target-label {
    font-size: 13px;
    font-weight: 600;
    color: #e6edf3;
    min-width: 0;
    overflow-wrap: anywhere;
}
.re-md-cookbook__target-count {
    font-size: 14px;
    font-weight: 700;
    color: #e6edf3;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.re-md-cookbook__target--hit    .re-md-cookbook__target-count { color: #6ed79b; }
.re-md-cookbook__target--behind .re-md-cookbook__target-count { color: #f5d378; }

.re-md-cookbook__target-bar {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.re-md-cookbook__target-bar-fill {
    height: 100%;
    background: #4498D8;
    transition: width 0.25s ease;
}
.re-md-cookbook__target--hit      .re-md-cookbook__target-bar-fill { background: #2ec27a; }
.re-md-cookbook__target--on-track .re-md-cookbook__target-bar-fill { background: #4498D8; }
.re-md-cookbook__target--behind   .re-md-cookbook__target-bar-fill { background: #E6AD23; }

.re-md-cookbook__behaviours-heading {
    margin: 6px 0 4px;
    font-size: 11px;
    font-weight: 600;
    color: #8aa0b2;
    text-transform: none;
}

.re-md-cookbook__empty {
    color: #8aa0b2;
    font-size: 13px;
    margin: 4px 0;
}

.re-md-cookbook__hint {
    margin: 12px 0 0;
    color: #8aa0b2;
    font-size: 12px;
}

/* ==========================================================================
   My Cookbook analytics page ([re_cookbooks]) - dark theme, mobile-first
   ========================================================================== */

.re-cookbook {
    color: #e6edf3;
    max-width: 1080px;
    padding: 8px 4px 32px;
}

.re-cookbook__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.re-cookbook__user-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}
.re-cookbook__user-picker select {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 6px 10px;
}

.re-cookbook__controls {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
}

.re-cookbook__control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

@media (min-width: 720px) {
    .re-cookbook__control-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.re-cookbook__controls input[type="date"],
.re-cookbook__controls select {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}

.re-cookbook__period-label {
    margin: 12px 0 0;
    color: #c9d4dd;
    font-size: 14px;
}
.re-cookbook__period-range {
    color: #8aa0b2;
    margin-left: 8px;
}

.re-cookbook__section {
    margin-top: 24px;
    padding: 16px 18px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
}

.re-cookbook__recipe {
    margin-bottom: 18px;
}
.re-cookbook__recipe:last-child { margin-bottom: 0; }

.re-cookbook__recipe-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.re-cookbook__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #c9d4dd;
}
.re-cookbook__table th {
    text-align: left;
    font-weight: 600;
    color: #8aa0b2;
    border-bottom: 1px solid #1e3a5f;
    padding: 8px 10px 6px;
    font-size: 11px;
    text-transform: none;
}
.re-cookbook__table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(30, 58, 95, 0.5);
    vertical-align: middle;
}

.re-cookbook__row-outcome { color: #8aa0b2; font-size: 12px; }

.re-cookbook__table-row--ahead    td:first-child { border-left: 3px solid #2ec27a; padding-left: 8px; }
.re-cookbook__table-row--on-track td:first-child { border-left: 3px solid #4498D8; padding-left: 8px; }
.re-cookbook__table-row--behind   td:first-child { border-left: 3px solid #E6AD23; padding-left: 8px; }

.re-cookbook__sparkline { display: block; }

.re-cookbook__ratios {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
@media (min-width: 640px) {
    .re-cookbook__ratios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .re-cookbook__ratios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.re-cookbook__ratio-card {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 0;
}
.re-cookbook__ratio-label { font-size: 12px; color: #8aa0b2; margin-bottom: 4px; }
.re-cookbook__ratio-value { font-size: 22px; font-weight: 700; color: #e6edf3; }
.re-cookbook__ratio-delta { font-size: 12px; margin-top: 4px; }
.re-cookbook__ratio-delta--up { color: #6ed79b; }
.re-cookbook__ratio-delta--down { color: #f5d378; }

.re-cookbook__missed-list {
    margin: 0;
    padding-left: 18px;
    color: #c9d4dd;
    font-size: 13px;
}
.re-cookbook__missed-list li { margin-bottom: 6px; }

.re-cookbook__forecast {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}
@media (min-width: 640px) {
    .re-cookbook__forecast { grid-template-columns: auto minmax(0, 1fr); }
}

.re-cookbook__forecast-index {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #91CAEA;
}
.re-cookbook__forecast-num { font-size: 56px; font-weight: 700; }
.re-cookbook__forecast-out-of { font-size: 18px; color: #8aa0b2; }

.re-cookbook__forecast-breakdown {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #c9d4dd;
    font-size: 13px;
}
.re-cookbook__forecast-breakdown li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(30, 58, 95, 0.5);
}
.re-cookbook__forecast-breakdown li:last-child { border-bottom: none; }
.re-cookbook__forecast-breakdown strong { color: #e6edf3; }

.re-cookbook__review-form { margin-top: 8px; }
.re-cookbook__review-form textarea {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* ==========================================================================
   [re_targets] - dark-theme + mobile-first restyle (Phase 8)
   Targets the rebuilt template; the legacy .re-target-card / .re-period-group
   blocks above stay for any other page that might still reference them.
   ========================================================================== */

.re-targets { padding: 8px 4px 32px; }
.re-targets__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.re-add-form-panel {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 12px 0 18px;
}

.re-target-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
@media (min-width: 640px) {
    .re-target-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .re-target-form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.re-target-form input[type="text"],
.re-target-form input[type="number"],
.re-target-form select {
    background: #0a1929;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}
.re-target-form input:focus,
.re-target-form select:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}

.re-target-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.re-target-period { margin-top: 24px; }

.re-target-period__heading {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #c9d4dd;
    padding-left: 10px;
    border-left: 3px solid #4498D8;
    text-transform: none;
}

.re-target-period__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .re-target-period__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.re-target-period .re-target-card {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 0;
}

.re-target-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.re-target-card__head-left { min-width: 0; }
.re-target-card__head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.re-target-card__label {
    display: block;
    font-size: 15px;
    color: #e6edf3;
    overflow-wrap: anywhere;
}
.re-target-card__meta {
    font-size: 12px;
    color: #8aa0b2;
}
.re-target-card__value {
    font-size: 15px;
    font-weight: 700;
    color: #e6edf3;
    white-space: nowrap;
}

.re-target-card__remove {
    background: transparent;
    border: 1px solid transparent;
    color: #8aa0b2;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}
.re-target-card__remove:hover {
    color: #ff8a73;
    border-color: rgba(255, 138, 115, 0.4);
}

.re-target-card__bar {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}
.re-target-card__bar-fill {
    height: 100%;
    background: #4498D8;
    transition: width 0.2s ease;
}
.re-target-card__bar-fill.is-complete { background: #2ec27a; }

.re-target-card__pct {
    font-size: 11px;
    color: #8aa0b2;
}

/* ==========================================================================
   Behavioural-system modal + My Day CTAs (in-page setup, no nav hop)
   ========================================================================== */

/* CTAs that open the modal */
.re-bsys-cta {
    background: transparent;
    border: 1px solid #4498D8;
    color: #91CAEA;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.re-bsys-cta:hover {
    background: rgba(68, 152, 216, 0.18);
    color: #e6edf3;
}

.re-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: #91CAEA;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.re-link-btn:hover { color: #b3d6ee; }

.re-link {
    color: #91CAEA;
    text-decoration: none;
}
.re-link:hover { color: #b3d6ee; text-decoration: underline; }

/* Daily-view panel with corner action - keeps the heading block-level so
   the underline runs the full width of the panel, with a small icon-button
   anchored absolutely to the top-right corner. */
.re-daily-view__panel-with-action {
    position: relative;
}

.re-bsys-cta--icon {
    position: absolute;
    top: -4px;
    right: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.re-md-cookbook__head-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* When the icon button sits inside a head-actions row it's a normal flex
   item, not an absolutely-positioned corner button. Override the corner-
   anchor rules so it sits side-by-side with the "Open full cookbook" link. */
.re-md-cookbook__head-actions .re-bsys-cta--icon {
    position: static;
    top: auto;
    right: auto;
}

/* My Day Cookbook ingredient row: wrapper so the +Log button sits next to
   (not inside) the navigation <a> row, avoiding a nested-link/dead-zone.
   +Log is on the LEFT so the x/y count on the right side of the row stays
   visible (was being clipped when narrow rows had a button trailing them). */
.re-md-cookbook__row-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.re-md-cookbook__row-wrap--has-log {
    grid-template-columns: auto minmax(0, 1fr);
}
.re-md-cookbook__row-wrap > .re-md-cookbook__row {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.re-md-cookbook__log-btn {
    background: transparent;
    border: 1px solid rgba(68, 152, 216, 0.45);
    color: #91CAEA;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.re-md-cookbook__log-btn:hover {
    background: rgba(68, 152, 216, 0.18);
    border-color: #4498D8;
    color: #e6edf3;
}

/* Manual log details on the full Cookbook page (collapsible per ingredient) */
.re-cookbook__manual-logs {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(30, 58, 95, 0.5);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-cookbook__log-details {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 8px 12px;
}
.re-cookbook__log-details summary {
    cursor: pointer;
    color: #c9d4dd;
    font-size: 13px;
    line-height: 1.4;
}
.re-cookbook__log-details summary:hover { color: #e6edf3; }
.re-cookbook__log-details[open] summary { color: #91CAEA; margin-bottom: 8px; }

.re-cookbook__log-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.re-cookbook__log-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: #c9d4dd;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(30, 58, 95, 0.5);
}
.re-cookbook__log-item:last-child { border-bottom: none; }
.re-cookbook__log-date { color: #8aa0b2; min-width: 50px; }
.re-cookbook__log-count { font-weight: 600; color: #e6edf3; }
.re-cookbook__log-link {
    color: #91CAEA;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.re-cookbook__log-link:hover { color: #b3d6ee; text-decoration: underline; }
.re-cookbook__log-note { color: #c9d4dd; flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Cumulative-metrics section */
.re-cookbook__cumulative-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.re-cookbook__snap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .re-cookbook__snap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.re-cookbook__snap-card {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.re-cookbook__snap-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.re-cookbook__snap-label { font-size: 14px; color: #e6edf3; }
.re-cookbook__snap-meta  { font-size: 11px; color: #8aa0b2; }

.re-cookbook__snap-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.re-cookbook__snap-num   { font-size: 28px; font-weight: 700; color: #91CAEA; line-height: 1; }
.re-cookbook__snap-delta { font-size: 12px; color: #6ed79b; }

.re-cookbook__snap-bar {
    background: #050d18;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}
.re-cookbook__snap-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4498D8 0%, #61B0E0 100%);
    transition: width 0.2s ease;
}
.re-cookbook__snap-pct { font-size: 11px; color: #8aa0b2; }

.re-cookbook__snap-history { margin-top: 4px; }
.re-cookbook__snap-history summary {
    cursor: pointer;
    color: #8aa0b2;
    font-size: 12px;
}
.re-cookbook__snap-history summary:hover { color: #c9d4dd; }
.re-cookbook__snap-history[open] summary { color: #91CAEA; margin-bottom: 8px; }

/* Make daily target rows look clickable */
.re-target-row--link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    padding: 4px 6px;
    margin: 0 -6px 6px;
    transition: background 0.12s ease;
}
.re-target-row--link:hover { background: rgba(68, 152, 216, 0.08); }
.re-target-row--link:focus { outline: 2px solid #4498D8; outline-offset: 1px; }

/* Outstanding-target row + optional +Log button (manual ingredients). The
   +Log button sits to the LEFT of the row so the x/y count on the right
   stays visible at narrow widths. */
.re-target-row-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.re-target-row-wrap .re-target-row--link {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.re-target-row__desc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}
.re-target-row__count {
    flex-shrink: 0;
    color: #c9d4dd;
    font-variant-numeric: tabular-nums;
}
.re-target-row__log-btn {
    flex-shrink: 0;
    background: transparent;
    color: #91CAEA;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.re-target-row__log-btn:hover { background: rgba(68, 152, 216, 0.12); color: #c9d4dd; }
.re-target-row__log-btn:focus { outline: 2px solid #4498D8; outline-offset: 1px; }

/* Optional open-link icon on an outstanding target (recipe ingredient note_url),
   mirroring the commitment .re-obligation__link affordance. Sits to the right
   of the row as a flex sibling so it never nests inside the row's own <a>. */
.re-target-row__link-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(68, 152, 216, 0.4);
    border-radius: 6px;
    color: #4498D8;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.re-target-row__link-icon:hover,
.re-target-row__link-icon:focus {
    background: rgba(68, 152, 216, 0.15);
    border-color: #4498D8;
    color: #4498D8;
}
.re-target-row__link-icon:focus-visible {
    outline: 2px solid #4498D8;
    outline-offset: 2px;
}

.re-md-empty--win {
    color: #46b450;
    font-weight: 500;
}

/* My Day Cookbook - empty state (head actions positioning is defined alongside
   .re-daily-view__panel-with-action below). */
.re-md-cookbook__empty-state {
    padding: 20px 4px 4px;
    text-align: center;
}
.re-md-cookbook__empty-state p { margin: 4px 0 8px; color: #c9d4dd; }
.re-md-cookbook__empty-sub {
    color: #8aa0b2 !important;
    font-size: 13px;
    max-width: 540px;
    margin: 0 auto 16px !important;
    line-height: 1.5;
}
.re-md-cookbook__empty-state .re-btn { margin-top: 6px; }

.re-md-empty {
    color: #8aa0b2;
    font-size: 13px;
    margin: 4px 0;
}

/* Make Cookbook ingredient rows look clickable */
.re-md-cookbook__row {
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;
}
.re-md-cookbook__row:hover { background: rgba(68, 152, 216, 0.06); }

.re-md-cookbook__recipe-name {
    color: #91CAEA;
    text-decoration: none;
}
.re-md-cookbook__recipe-name:hover { color: #b3d6ee; text-decoration: underline; }

/* ── The modal itself ────────────────────────────────────────────────────── */

.re-bsys-modal__section {
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.re-bsys-modal__section-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #e6edf3;
}

.re-bsys-modal__hint {
    margin: 0 0 12px;
    color: #8aa0b2;
    font-size: 12px;
    line-height: 1.5;
}

.re-bsys-modal__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
@media (min-width: 640px) {
    .re-bsys-modal__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 900px) {
    .re-bsys-modal__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Ingredient rows inside the modal */
.re-bsys-ingredients {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.re-bsys-row {
    background: rgba(5, 13, 24, 0.6);
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 10px 12px 12px;
}

.re-bsys-row__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
@media (min-width: 640px) {
    .re-bsys-row__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .re-bsys-row__grid .re-field--span2 { grid-column: span 3; }
}
@media (min-width: 900px) {
    .re-bsys-row__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    }
    .re-bsys-row__grid .re-field--span2 { grid-column: span 1; }
}

[data-bsys-remove] {
    margin-top: 8px;
    color: #ff8a73;
}

.re-bsys-modal__status {
    flex: 1 1 auto;
    font-size: 12px;
    color: #8aa0b2;
    min-width: 0;
}

body.re-bsys-modal-open { overflow: hidden; }

/* ──────────────────────────────────────────────────────────────────────
 * Public booking ([re_public_booking])
 *
 * Dark theme, mobile-first per CLAUDE.md. The public-facing pages live at
 * /meet/{slug}/ and the host review page at /meet/review/{id}/; the same
 * root class covers both.
 * ────────────────────────────────────────────────────────────────────── */

.re-public-booking {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    color: #e6edf3;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.re-public-booking--empty {
    text-align: center;
    padding: 60px 16px;
}
.re-public-booking__header {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.re-public-booking__avatar {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex: 0 0 auto;
}
.re-public-booking__heading {
    flex: 1 1 auto;
    min-width: 0;
}
.re-public-booking h1 {
    margin: 0;
    color: #4498D8;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}
.re-public-booking__sub {
    margin: 8px 0 0;
    color: #b8c5d3;
    font-size: 14px;
    line-height: 1.5;
}
.re-public-booking__back {
    color: #4498D8;
    margin-left: 8px;
}
.re-public-booking__duration-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 480px) {
    .re-public-booking__duration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 720px) {
    .re-public-booking__duration-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.re-public-booking__duration-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 20px 16px;
    background: rgba(5, 13, 24, 0.6);
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    color: #e6edf3;
    transition: border-color 120ms ease, transform 120ms ease;
    min-height: 96px;
}
.re-public-booking__duration-card:hover,
.re-public-booking__duration-card:focus-visible {
    border-color: #4498D8;
    transform: translateY(-1px);
    outline: none;
}
.re-public-booking__duration-num {
    font-size: 28px;
    font-weight: 700;
    color: #4498D8;
    line-height: 1;
}
.re-public-booking__duration-unit {
    margin-top: 4px;
    font-size: 13px;
    color: #b8c5d3;
}
.re-public-booking__date-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.re-public-booking__date-form label {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #8aa0b2;
}
.re-public-booking__date-form input[type="date"] {
    background: #050d18;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.re-public-booking__date-form .re-btn {
    width: 100%;
}
@media (min-width: 480px) {
    .re-public-booking__date-form label {
        flex: 1 1 200px;
    }
    .re-public-booking__date-form .re-btn {
        width: auto;
    }
}
/* Offer mode: the suggested topic shown read-only above the optional notes. */
.re-public-booking__offered-topic {
    background: rgba(68, 152, 216, 0.10);
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 0;
}
.re-public-booking__offered-topic-label {
    display: block;
    margin-bottom: 4px;
    color: #4498D8;
    font-size: 13px;
    font-weight: 600;
}
.re-public-booking__offered-topic-text {
    margin: 0;
    color: #e6edf3;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.re-public-booking__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(5, 13, 24, 0.6);
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 20px 16px;
}
.re-public-booking__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #8aa0b2;
    min-width: 0;
}
.re-public-booking__form input[type="text"],
.re-public-booking__form input[type="email"],
.re-public-booking__form input[type="tel"],
.re-public-booking__form textarea {
    background: #050d18;
    color: #e6edf3;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.re-public-booking__form input:focus,
.re-public-booking__form textarea:focus {
    outline: none;
    border-color: #4498D8;
    box-shadow: 0 0 0 3px rgba(68, 152, 216, 0.18);
}
.re-public-booking__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.re-public-booking__form-actions {
    display: flex;
    justify-content: flex-end;
}
.re-public-booking__finepr {
    color: #8aa0b2;
    font-size: 12px;
    margin: 0;
    text-align: center;
}
.re-public-booking__review-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 16px;
    background: rgba(5, 13, 24, 0.6);
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 16px;
}
@media (min-width: 480px) {
    .re-public-booking__review-details {
        grid-template-columns: 120px minmax(0, 1fr);
    }
}
.re-public-booking__review-details dt {
    font-size: 12px;
    color: #8aa0b2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.re-public-booking__review-details dd {
    margin: 0;
    color: #e6edf3;
    font-size: 14px;
    word-break: break-word;
}
.re-public-booking__when-time {
    display: block;
    color: #4498D8;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.re-public-booking__when-meta {
    display: block;
    margin-top: 2px;
    color: #8aa0b2;
    font-size: 12px;
}
.re-public-booking__status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.re-public-booking__status--pending_review {
    background: rgba(230, 173, 35, 0.18);
    color: #E6AD23;
}
.re-public-booking__status--accepted {
    background: rgba(73, 175, 99, 0.18);
    color: #6fcf81;
}
.re-public-booking__status--rejected,
.re-public-booking__status--expired,
.re-public-booking__status--cancelled {
    background: rgba(255, 138, 115, 0.18);
    color: #ff8a73;
}
.re-public-booking__review-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.re-public-booking__review-notetaker {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: #e6edf3;
    font-size: 14px;
    line-height: 1.4;
}
.re-public-booking__review-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Review: "suggest an alternative" counter-offer section + day calendar */
.re-public-booking__alt {
    margin: 20px 0 0;
    padding: 16px;
    background: rgba(5, 13, 24, 0.6);
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}
.re-public-booking__alt h2 {
    margin: 0 0 6px;
    font-size: 16px;
    color: #4498D8;
}
.re-public-booking__alt-intro {
    margin: 0 0 14px;
    color: #8aa0b2;
    font-size: 13px;
    line-height: 1.5;
}
.re-public-booking__alt-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.re-public-booking__alt-staged {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 36px;
}
.re-public-booking__alt-staged-empty {
    margin: 0;
    color: #8aa0b2;
    font-size: 13px;
}
.re-pubook-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    background: rgba(68, 152, 216, 0.16);
    border: 1px solid #4498D8;
    color: #e6edf3;
    font-size: 13px;
}
.re-pubook-chip__remove {
    border: 0;
    background: transparent;
    color: #8aa0b2;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.re-pubook-chip__remove:hover {
    color: #ff8a73;
}
.re-public-booking__alt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.re-pubook-cal {
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 12px;
    background: rgba(5, 13, 24, 0.4);
    transition: opacity 0.15s ease;
}
.re-pubook-cal.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.re-pubook-cal__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}
.re-pubook-cal__step {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #1e3a5f;
    background: rgba(68, 152, 216, 0.08);
    color: #e6edf3;
    font-size: 16px;
    cursor: pointer;
}
.re-pubook-cal__step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.re-pubook-cal__date {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #1e3a5f;
    background: rgba(5, 13, 24, 0.6);
    color: #e6edf3;
    font-size: 14px;
}
.re-pubook-cal__day {
    margin: 12px 0 4px;
    color: #e6edf3;
    font-size: 14px;
    font-weight: 600;
}
.re-pubook-cal__requested-slot {
    padding: 4px 8px;
    border-left: 3px solid #4498D8;
    border-radius: 4px;
    background: rgba(68, 152, 216, 0.14);
    color: #4498D8 !important;
    font-weight: 600;
}
.re-pubook-cal__requested-slot .re-pubook-cal__busy-time {
    color: #4498D8;
}
.re-pubook-cal__busy,
.re-pubook-cal__slots {
    margin-top: 12px;
}
.re-pubook-cal__busy h4,
.re-pubook-cal__slots h4 {
    margin: 0 0 6px;
    font-size: 12px;
    color: #8aa0b2;
    letter-spacing: 0.04em;
}
.re-pubook-cal__none {
    margin: 0;
    color: #8aa0b2;
    font-size: 13px;
}
.re-pubook-cal__override {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #cdd9e3;
    font-size: 13px;
    cursor: pointer;
}
.re-pubook-cal__override input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}
.re-pubook-cal__busy ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.re-pubook-cal__busy li {
    color: #e6edf3;
    font-size: 13px;
}
.re-pubook-cal__busy-time {
    color: #8aa0b2;
    margin-right: 6px;
}
.re-pubook-cal__slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.re-pubook-slot {
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid #1e3a5f;
    background: rgba(68, 152, 216, 0.08);
    color: #e6edf3;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.re-pubook-slot:hover {
    border-color: #4498D8;
}
.re-pubook-slot.is-staged {
    background: #4498D8;
    border-color: #4498D8;
    color: #fff;
}

/* Review context: calendar + commitments, two columns from 640px */
.re-pubook-cal__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 12px;
}
@media (min-width: 640px) {
    .re-pubook-cal__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.re-pubook-cal__col {
    min-width: 0;
}
.re-pubook-cal__commits h4 {
    margin: 0 0 6px;
    font-size: 12px;
    color: #8aa0b2;
    letter-spacing: 0.04em;
}
.re-pubook-commits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.re-pubook-commit {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(5, 13, 24, 0.5);
    border: 1px solid #1e3a5f;
}
.re-pubook-commit__title {
    min-width: 0;
    color: #e6edf3;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-pubook-commit__due {
    flex: 0 0 auto;
    color: #8aa0b2;
    font-size: 12px;
}
.re-pubook-commits.is-clamped .re-pubook-commit:nth-child(n+9) { display: none; }
.re-pubook-cal__more {
    margin: 8px 0 0;
    color: #8aa0b2;
    font-size: 12px;
}
button.re-pubook-cal__more {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-align: left;
}
button.re-pubook-cal__more:hover { color: #4498D8; }

/* Booker counter-offer confirm page */
.re-public-booking__confirm-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
}
.re-public-booking__confirm-note {
    color: #8aa0b2;
    font-size: 13px;
    margin: 0;
}

/* Settings: Public booking section inside [re_user_settings] */
.re-pubook-settings__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.re-pubook-settings__url-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: rgba(5, 13, 24, 0.4);
    border: 1px dashed #1e3a5f;
    border-radius: 6px;
}
.re-pubook-settings__url-label {
    font-size: 12px;
    color: #8aa0b2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.re-pubook-settings__url {
    flex: 1 1 240px;
    min-width: 0;
    color: #4498D8;
    word-break: break-all;
}
.re-pubook-settings__group {
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-pubook-settings__group legend {
    font-size: 13px;
    color: #4498D8;
    padding: 0 4px;
}
.re-pubook-settings__durations {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.re-pubook-settings__durations label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;
    color: #e6edf3;
}
.re-pubook-settings__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .re-pubook-settings__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 900px) {
    .re-pubook-settings__row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.re-link-button {
    background: none;
    border: 0;
    padding: 0;
    color: #4498D8;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

/* Per-duration shareable links (settings page) */
.re-pubook-settings__direct-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.re-pubook-settings__direct-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(5, 13, 24, 0.4);
    border: 1px solid #1e3a5f;
    border-radius: 6px;
}
@media (min-width: 640px) {
    .re-pubook-settings__direct-item {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 12px;
    }
}
.re-pubook-settings__direct-label {
    font-size: 13px;
    font-weight: 600;
    color: #4498D8;
}
.re-pubook-settings__direct-url {
    color: #b8c5d3;
    word-break: break-all;
    font-size: 13px;
    min-width: 0;
}
.re-pubook-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
}
@media (min-width: 640px) {
    .re-pubook-copy {
        justify-self: end;
    }
}

/* -- [re_user_settings] -> Import data ----------------------------------- */

.re-import__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #E1E6E9;
    margin-bottom: 16px;
}
.re-import__tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 8px 14px;
    cursor: pointer;
    color: #576E7A;
    font-weight: 600;
    font-size: 13px;
}
.re-import__tab:hover { color: #1B5070; }
.re-import__tab.is-active {
    background: #fff;
    border-color: #E1E6E9;
    color: #1B5070;
    position: relative;
    top: 1px;
}

.re-import__panel { display: none; }
.re-import__panel.is-active { display: block; }

.re-import__file-pick {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.re-import__file-pick input[type=file] { display: none; }
.re-import__file-name {
    color: #576E7A;
    font-size: 13px;
    min-width: 0;
    word-break: break-all;
}

.re-import__panel textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    padding: 10px 12px;
    border: 1px solid #C9D6DE;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    resize: vertical;
}

.re-import__mode {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.re-import__mode-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #1B5070;
    font-weight: 500;
    font-size: 13px;
}

.re-import__notice {
    background: #FFF7E6;
    border: 1px solid #F4DBA6;
    color: #7A5A14;
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
}

.re-import__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.re-import__status {
    color: #576E7A;
    font-size: 13px;
    min-width: 0;
}
.re-import__status.is-error { color: #B91C1C; }

/* Dark-theme overlay used by both structured and paste flows.
   The [hidden] rules below are load-bearing: without them the overlay's
   own `display: flex` and the `.re-btn` `display: inline-flex` on the
   Import / Done buttons would override the browser's user-agent
   `[hidden] { display: none }` default, leaving the overlay visible on
   page load and the never-shown buttons rendering early. */
.re-import__overlay[hidden] { display: none !important; }
.re-import__overlay [hidden] { display: none !important; }
.re-import__overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
}
.re-import__overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 14, 22, 0.72);
}
.re-import__overlay-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    background: #11202B;
    color: #E9EEF3;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0,0,0,0.45);
    border-radius: 0;
    overflow: hidden;
}
@media (min-width: 720px) {
    .re-import__overlay { align-items: center; padding: 32px; }
    .re-import__overlay-panel { max-height: calc(100vh - 64px); border-radius: 14px; }
}

.re-import__overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #1F3344;
    background: #0D1924;
}
.re-import__overlay-head h2 { margin: 0; font-size: 16px; color: #FFFFFF; }
.re-import__overlay-close {
    background: transparent;
    border: 0;
    color: #C9D6DE;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.re-import__overlay-close:hover { color: #FFFFFF; }

.re-import__overlay-body {
    padding: 16px 20px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.re-import__overlay-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 20px 16px;
    border-top: 1px solid #1F3344;
    background: #0D1924;
}

.re-import__overlay-intro { margin: 0 0 12px; line-height: 1.5; color: #C9D6DE; }
.re-import__overlay-intro strong { color: #FFFFFF; }
.re-import__overlay-warning {
    background: #3A2A11;
    border: 1px solid #6E4A14;
    color: #F1D58A;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 0 0 12px;
    font-size: 13px;
}
.re-import__overlay-progress { color: #C9D6DE; text-align: center; padding: 32px 0; }
.re-import__overlay-error {
    background: #3A1414;
    border: 1px solid #6E2C2C;
    color: #F4B6B6;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 0;
}

.re-import__map-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #C9D6DE;
    table-layout: fixed;
}
.re-import__map-table th,
.re-import__map-table td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid #1F3344;
    vertical-align: top;
    word-break: break-word;
    min-width: 0;
}
.re-import__map-table th { color: #91CAEA; font-weight: 600; font-size: 12px; text-transform: none; }
.re-import__map-sample {
    color: #8FA5B5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}
.re-import__map-select {
    width: 100%;
    box-sizing: border-box;
    background: #0D1924;
    color: #FFFFFF;
    border: 1px solid #2A4258;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
}
.re-import__map-select option { background: #0D1924; color: #FFFFFF; }
.re-import__map-select.is-conflict {
    border-color: #B33A3A;
    box-shadow: 0 0 0 1px #B33A3A inset;
}

/* Conflict banner above the mapping table when the user has picked the
   same target for more than one column. Server-side behaviour is "first
   non-empty value wins" so the rest are not lost - they land in the
   contact's import note - but we surface the conflict here so the user
   can re-pick before submitting if that's not what they intended. */
.re-import__conflict-banner {
    background: #3A1414;
    border: 1px solid #6E2C2C;
    color: #F4B6B6;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
}

/* Existing-contact clashes block. Sits above the mapping table when the
   server returned duplicates. Bulk action buttons + a per-row Skip / Merge
   / Create-anyway picker. Dark theme to match the rest of the overlay. */
.re-import__clashes {
    background: #0D1924;
    border: 1px solid #1F3344;
    border-radius: 10px;
    padding: 12px;
    margin: 0 0 12px;
    min-width: 0;
}
.re-import__clashes-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 10px;
    color: #FFFFFF;
}
.re-import__clashes-hint {
    color: #8FA5B5;
    font-size: 12px;
    font-weight: 400;
}
.re-import__clashes-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px;
    background: #11202B;
    border: 1px solid #1F3344;
    border-radius: 8px;
}
.re-import__clashes-bulk-label {
    color: #C9D6DE;
    font-size: 12px;
}
.re-import__bulk-btn {
    background: #11202B;
    color: #FFFFFF;
    border: 1px solid #2A4258;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.re-import__bulk-btn:hover { background: #1B3146; border-color: #3A5874; }
.re-import__clash-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}
.re-import__clash {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px 10px;
    background: #11202B;
    border: 1px solid #1F3344;
    border-radius: 6px;
    min-width: 0;
}
@media (min-width: 640px) {
    .re-import__clash {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}
.re-import__clash-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: #FFFFFF;
}
.re-import__clash-meta {
    color: #8FA5B5;
    font-size: 12px;
    word-break: break-all;
}
.re-import__clash-diff {
    color: #91CAEA;
    font-size: 12px;
    word-break: break-word;
}
.re-import__clash-diff strong {
    color: #FFFFFF;
    font-weight: 600;
}
.re-import__clash-diff em {
    color: #8FA5B5;
    font-style: italic;
}
.re-import__clash.is-no-op {
    background: #0a1620;
    border-style: dashed;
}
.re-import__clash.is-no-op .re-import__clash-main strong {
    color: #C9D6DE;
}
.re-import__clash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.re-import__clash-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #0D1924;
    border: 1px solid #2A4258;
    border-radius: 6px;
    color: #C9D6DE;
    font-size: 12px;
    cursor: pointer;
}
.re-import__clash-radio input[type=radio] { margin: 0; }
.re-import__clash-radio:hover { border-color: #3A5874; }
.re-import__map-hint {
    display: inline-block;
    margin-top: 4px;
    color: #E6AD23;
    font-size: 11px;
}

.re-import__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 720px) {
    .re-import__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Single-card wrap used by the paste-flow stepper. */
.re-import__card-wrap {
    display: block;
    min-width: 0;
}

/* Prev / Counter / Next stepper above the structured mapping table and the
   paste contact card. Mobile-first: the counter and buttons all flex into
   one row at 390px; the (most complete) badge sits inline with the counter. */
.re-import__stepper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #0D1924;
    border: 1px solid #1F3344;
    border-radius: 8px;
    margin: 0 0 12px;
    min-width: 0;
}
.re-import__stepper-counter {
    flex: 1 1 auto;
    text-align: center;
    color: #C9D6DE;
    font-size: 13px;
    min-width: 0;
}
.re-import__stepper-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    background: #E6AD23;
    color: #1a1d24;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
.re-import__step {
    background: #11202B;
    color: #FFFFFF;
    border: 1px solid #2A4258;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    flex: 0 0 auto;
}
.re-import__step:hover:not([disabled]) {
    background: #1B3146;
    border-color: #3A5874;
}
.re-import__step[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.re-import__card {
    background: #0D1924;
    border: 1px solid #1F3344;
    border-radius: 10px;
    padding: 12px;
    min-width: 0;
}
.re-import__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: #91CAEA;
}
.re-import__card-remove {
    background: transparent;
    border: 0;
    color: #C9D6DE;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
}
.re-import__card-remove:hover { color: #F4B6B6; }
.re-import__card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
@media (min-width: 480px) {
    .re-import__card-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.re-import__card-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.re-import__card-field span {
    color: #8FA5B5;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
}
.re-import__card-field input,
.re-import__card-field textarea {
    width: 100%;
    box-sizing: border-box;
    background: #11202B;
    color: #FFFFFF;
    border: 1px solid #2A4258;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
}
.re-import__card-unmapped {
    margin-top: 8px;
    font-size: 12px;
    color: #8FA5B5;
}
.re-import__card-unmapped pre {
    white-space: pre-wrap;
    background: #061218;
    border: 1px solid #1F3344;
    border-radius: 6px;
    padding: 8px;
    color: #C9D6DE;
    margin: 4px 0 0;
    max-width: 100%;
    overflow-x: auto;
}

.re-import__result p { color: #C9D6DE; line-height: 1.5; }
.re-import__result strong { color: #FFFFFF; }
.re-import__result-list {
    margin: 4px 0 12px;
    padding-left: 20px;
    color: #C9D6DE;
    font-size: 13px;
}
.re-import__result-list li { margin-bottom: 4px; }
.re-import__result-list span { color: #8FA5B5; font-size: 12px; }

/* ─── [re_reports] - dark theme, mobile-first ────────────────────────────── */

.re-reports {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 16px;
    background: #0B1721;
    color: #C5CDD3;
    min-height: 100%;
}
.re-reports__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.re-reports__back {
    color: #8FA5B5;
    text-decoration: none;
    font-size: 13px;
}
.re-reports__back:hover { color: #4498D8; }
.re-reports__title {
    color: #4498D8;
    font-size: 22px;
    margin: 0;
    font-weight: 700;
}
.re-reports__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.re-reports__empty {
    color: #8FA5B5;
    text-align: center;
    padding: 24px;
}
.re-reports__section {
    background: #11202B;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 16px;
}
.re-reports__section-title {
    margin: 0 0 12px;
    font-size: 15px;
    color: #4498D8;
    font-weight: 600;
}
.re-reports__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.re-reports__list-item {
    border: 1px solid #1F3344;
    border-radius: 6px;
    padding: 12px;
    background: #0B1721;
}
.re-reports__list-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #C5CDD3;
    gap: 2px;
}
.re-reports__list-link:hover .re-reports__list-name { color: #4498D8; }
.re-reports__list-name { font-weight: 600; color: #FFFFFF; }
.re-reports__list-meta { color: #8FA5B5; font-size: 12px; }
.re-reports__list-desc { color: #8FA5B5; font-size: 13px; margin: 6px 0 0; }

.re-reports__starter {
    background: #11202B;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 16px;
}
.re-reports__starter-title { margin: 0 0 6px; color: #4498D8; font-size: 16px; }
.re-reports__starter-lead { margin: 0 0 12px; color: #8FA5B5; }
.re-reports__starter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.re-reports__starter-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    background: #0B1721;
    border: 1px solid #1F3344;
    border-radius: 6px;
    color: #C5CDD3;
    text-decoration: none;
}
.re-reports__starter-card:hover { border-color: #4498D8; }
.re-reports__starter-card strong { color: #FFFFFF; }
.re-reports__starter-eyebrow { color: #4498D8; font-size: 11px; text-transform: none; letter-spacing: 0.02em; }
.re-reports__starter-hint { color: #8FA5B5; font-size: 12px; }

.re-reports__schedules { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.re-reports__schedule { padding: 8px 12px; border: 1px solid #1F3344; border-radius: 6px; background: #0B1721; }
.re-reports__schedule-cadence { color: #FFFFFF; }
.re-reports__schedule-meta { display: block; color: #8FA5B5; font-size: 12px; }

/* ----- Builder ----- */
.re-report-builder__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.re-report-builder__panel,
.re-report-builder__preview {
    background: #11202B;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
}
.re-report-builder__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.re-report-builder__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #C5CDD3;
    font-size: 13px;
    min-width: 0;
}
.re-report-builder__input,
.re-report-builder__input select,
.re-report-builder select.re-report-builder__input {
    background: #0B1721;
    border: 1px solid #1F3344;
    border-radius: 6px;
    padding: 8px 10px;
    color: #FFFFFF;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}
.re-report-builder__input:focus { outline: none; border-color: #4498D8; }
.re-report-builder__group {
    border: 1px solid #1F3344;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    background: #0B1721;
}
.re-report-builder__group legend {
    color: #4498D8;
    font-size: 12px;
    padding: 0 6px;
    text-transform: none;
    letter-spacing: 0.02em;
}
.re-report-builder__add {
    background: none;
    border: 1px dashed #2A3A48;
    color: #8FA5B5;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    margin-top: 6px;
}
.re-report-builder__add:hover { border-color: #4498D8; color: #4498D8; }
.re-report-builder__chip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
    min-width: 0;
}
.re-report-builder__chip > * { flex: 1 1 120px; min-width: 0; }
.re-report-builder__chip-x {
    flex: 0 0 28px;
    background: none;
    color: #8FA5B5;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
}
.re-report-builder__chip-x:hover { color: #E6AD23; border-color: #E6AD23; }
.re-report-builder__multi {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    flex: 1 1 100%;
    min-width: 0;
}
.re-report-builder__check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #C5CDD3;
    font-size: 12px;
}
.re-report-builder__between {
    display: flex;
    gap: 6px;
    flex: 1 1 100%;
    min-width: 0;
}
.re-report-builder__hint { color: #8FA5B5; font-size: 12px; margin: 0 0 8px; }
.re-report-builder__chip-label {
    flex: 1 1 140px;
    color: #FFFFFF;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-report-builder__columns-add { margin-top: 6px; }
.re-report-builder__chip-remove {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 12px;
}
.re-report-builder__chip-remove:hover {
    color: #E6AD23;
    border-color: #E6AD23;
}
.re-report-builder__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.re-report-builder__status {
    margin: 8px 0 0;
    color: #8FA5B5;
    font-size: 12px;
    min-height: 1em;
}
.re-report-builder__status.is-error { color: #E6AD23; }

.re-report-builder__preview { min-height: 320px; }
.re-report-builder__preview-empty,
.re-report-builder__preview-loading {
    color: #8FA5B5;
    text-align: center;
    padding: 40px 0;
}
.re-report-builder__preview-error {
    color: #E6AD23;
    padding: 16px;
    border: 1px solid #E6AD23;
    border-radius: 6px;
    background: rgba(230, 173, 35, 0.05);
}

/* ----- Tables + KPI ----- */
.re-report-table-wrap {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #1F3344;
    border-radius: 6px;
}
.re-report-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 400px;
}
.re-report-table th,
.re-report-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #1F3344;
    font-size: 13px;
    color: #C5CDD3;
}
.re-report-table th {
    background: #0B1721;
    color: #4498D8;
    font-weight: 600;
    position: sticky;
    top: 0;
}
.re-report-table th[data-sortable] {
    cursor: pointer;
    user-select: none;
    padding-right: 22px;
    position: relative;
}
.re-report-table th[data-sortable]::after {
    content: '↕';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #57606A;
    font-size: 0.8em;
    opacity: 0;
    transition: opacity 80ms ease-out;
}
.re-report-table th[data-sortable]:hover::after,
.re-report-table th[data-sortable]:focus-visible::after { opacity: 1; }
.re-report-table th[data-sort-asc]::after,
.re-report-table th[data-sort-desc]::after {
    color: #4498D8;
    opacity: 1;
}
.re-report-table th[data-sort-asc]::after  { content: '▲'; }
.re-report-table th[data-sort-desc]::after { content: '▼'; }
.re-report-table th[data-sortable]:focus-visible { outline: 2px solid #4498D8; outline-offset: -2px; }
/* Don't make the checkbox header look sortable. */
.re-report-table th.re-report-table__check { cursor: default; }
.re-report-table th.re-report-table__check::after { display: none; }

/* Quick-filter row beneath the sort headers. Sticky just under the headers
   so it stays in view while scrolling the body. */
.re-report-table__filter-row th {
    background: #0D1E2A;
    padding: 4px 6px;
    border-bottom: 1px solid #1F3344;
    font-weight: normal;
    position: sticky;
    top: 32px;
    cursor: default;
}
.re-report-table__filter-row th::after { display: none; }
.re-report-table__filter {
    width: 100%;
    background: #0B1721;
    border: 1px solid #1F3344;
    border-radius: 4px;
    padding: 4px 6px;
    color: #C5CDD3;
    font-size: 12px;
    font-weight: normal;
    box-sizing: border-box;
}
.re-report-table__filter:focus { outline: none; border-color: #4498D8; }
.re-report-table__filter::placeholder { color: #57606A; }
.re-report-table__empty {
    text-align: center;
    color: #8FA5B5;
    padding: 24px;
    font-style: italic;
}

/* "Open in new tab" link column - last column on the right. */
.re-report-table th.re-report-table__link,
.re-report-table td.re-report-table__link {
    width: 36px;
    text-align: center;
    padding: 4px 6px;
    cursor: default;
}
.re-report-table th.re-report-table__link::after { display: none; }
.re-report-table td.re-report-table__link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8FA5B5;
    text-decoration: none;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    transition: color 80ms ease-out, background 80ms ease-out;
}
.re-report-table td.re-report-table__link a:hover,
.re-report-table td.re-report-table__link a:focus-visible {
    color: #FFFFFF;
    background: #4498D8;
    outline: none;
}
.re-report-table__note { color: #8FA5B5; font-size: 12px; margin: 8px 0 0; }
.re-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}
.re-kpi__label { color: #8FA5B5; font-size: 13px; }
.re-kpi__value { color: #4498D8; font-size: 36px; font-weight: 700; margin-top: 4px; }

/* ----- Report view + Dashboard ----- */
.re-report-view__desc { color: #8FA5B5; margin: 0 0 16px; }
.re-report-view__stage,
.re-dashboard__grid {
    background: #11202B;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
}
.re-report-view__loading,
.re-dashboard__loading { color: #8FA5B5; text-align: center; padding: 24px; }
.re-report-view__error { color: #E6AD23; padding: 16px; border: 1px solid #E6AD23; border-radius: 6px; }

.re-dashboard__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.re-dashboard__widget {
    background: #0B1721;
    border: 1px solid #1F3344;
    border-radius: 6px;
    padding: 12px;
    min-width: 0;
}
.re-dashboard__widget-head h3 { margin: 0 0 8px; color: #FFFFFF; font-size: 14px; }
.re-dashboard__widget-error { color: #E6AD23; }

.re-dashboard-edit__widgets {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: grid;
    gap: 8px;
}
.re-dashboard-edit__widget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #11202B;
    border: 1px solid #2A3A48;
    border-radius: 6px;
}
.re-dashboard-edit__widget-name { color: #FFFFFF; flex: 1 1 200px; min-width: 0; }
.re-dashboard-edit__widget-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.re-dashboard-edit__empty { color: #8FA5B5; padding: 16px; text-align: center; }

/* ----- Schedule modal ----- */
.re-reports-modal__title { color: #4498D8; margin: 0 0 4px; font-size: 18px; }
.re-report-builder__sub { color: #8FA5B5; font-size: 12px; font-weight: 400; }

/* Make the HTML `hidden` attribute actually hide day-row elements -
   their default `display: flex` would otherwise win over the UA stylesheet. */
.re-report-builder__label[hidden],
.re-bulk-edit-bar[hidden] { display: none !important; }

/* Bulk-edit action bar above the report table. */
.re-bulk-edit-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #11202B;
    border: 1px solid #4498D8;
    border-radius: 8px;
}
.re-bulk-edit-bar__count {
    color: #4498D8;
    font-weight: 600;
    flex: 1 1 auto;
}

/* Checkbox column on the report table. */
.re-report-table__check {
    width: 32px;
    text-align: center;
    padding: 6px 4px;
}
.re-report-table__check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4498D8;
    cursor: pointer;
}

/* Bulk-edit modal row layout. */
.re-bulk-edit__rows {
    display: grid;
    gap: 10px;
    margin-bottom: 8px;
}
.re-bulk-edit__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
    background: #0B1721;
    border: 1px solid #1F3344;
    border-radius: 6px;
}
@media (min-width: 640px) {
    .re-bulk-edit__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: end;
    }
}

/* Reuse / minor styles - reports-context-only btn fallback when the page
   has no other .re-btn rules loaded. */
.re-reports .re-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font: inherit;
    background: #1F3344;
    color: #FFFFFF;
    border: 1px solid #2A3A48;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.re-reports .re-btn:hover { border-color: #4498D8; }
.re-reports .re-btn--primary { background: #4498D8; border-color: #4498D8; }
.re-reports .re-btn--primary:hover { background: #5BA9E2; border-color: #5BA9E2; }
.re-reports .re-btn--ghost { background: transparent; }

@media (min-width: 720px) {
    .re-reports__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .re-reports__list,
    .re-reports__starter-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (min-width: 900px) {
    .re-report-builder__grid {
        grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    }
    .re-dashboard__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .re-dashboard__widget--small  { grid-column: span 4; }
    .re-dashboard__widget--medium { grid-column: span 6; }
    .re-dashboard__widget--large  { grid-column: span 12; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Social Media Planner ([re_social_planner])
   Dark theme, mobile-first (base works at 390px; enhance up with min-width).
   ───────────────────────────────────────────────────────────────────────── */
.re-social {
    max-width: 880px;
    color: #e6edf3;
}
.re-social__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.re-social__head h1 { margin: 0; color: #4498D8; }
.re-social__intro { color: #c9d4dd; margin: 8px 0 20px; }
.re-li-search { margin: 0 0 24px; }
.re-li-search h2 { margin: 0; color: #4498D8; font-size: 18px; }
.re-li-engage-open { margin: 6px 0 4px; }
.re-li-search__sub { margin-top: 18px; }
.re-li-search__loading { color: #8aa0b2; font-size: 13px; margin: 8px 0; }
.re-li-items { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.re-li-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.re-li-item__link { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.re-li-item__controls { display: inline-flex; gap: 4px; margin-left: auto; }
.re-li-item__btn {
    background: none; border: none; color: #8aa0b2; font-size: 13px;
    cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.re-li-item__btn:hover { color: #c9d4dd; background: rgba(255, 255, 255, 0.06); }
.re-li-item--editing { width: 100%; }
.re-li-edit { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.re-li-edit__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.re-li-search__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.re-eng-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 480px) { .re-eng-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.re-social__back {
    display: inline-block;
    margin-bottom: 12px;
    color: #8aa0b2;
    text-decoration: none;
}
.re-social__back:hover { color: #4498D8; }

.re-social-empty {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    color: #c9d4dd;
}
.re-social-empty p { margin: 0 0 14px; }

/* Plan list - one bordered, collapsible group per plan; posts listed by date */
.re-social-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 16px;
}
.re-social-filter__label { color: #8aa0b2; font-size: 13px; }
.re-social-filter__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c9d4dd;
    font-size: 13px;
    cursor: pointer;
}
.re-social-filter__cb { accent-color: #4498D8; }
.re-social-plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.re-social-plan[hidden],
.re-social-postrow[hidden] { display: none; }
.re-social-plan {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
}
.re-social-plan__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    min-width: 0;
}
.re-social-plan__bar::-webkit-details-marker { display: none; }
.re-social-plan__chev {
    flex: 0 0 auto;
    display: inline-flex;
    color: #8aa0b2;
    transition: transform .15s ease;
}
.re-social-plan[open] .re-social-plan__chev { transform: rotate(90deg); }
.re-social-plan__ident {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.re-social-plan__window { color: #c9d4dd; font-size: 13px; }
.re-social-plan__count { color: #8aa0b2; font-size: 13px; }
.re-social-plan__delete {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 2px 4px;
    color: #8aa0b2;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.re-social-plan__delete:hover { color: #e59a9a; }

.re-social-plan__body { padding: 0 16px 14px; }
.re-social-plan__platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.re-social-plan__empty { color: #8aa0b2; font-size: 13px; margin: 0; }
.re-social-plan__empty a { color: #4498D8; }

.re-social-plan__posts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-social-postrow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    background: #0a1929;
    color: #e6edf3;
    text-decoration: none;
    min-width: 0;
    transition: border-color .15s ease;
}
.re-social-postrow:hover { border-color: #4498D8; }
/* The whole row is a link; stop the theme underlining every line of text in it. */
.re-social-postrow,
.re-social-postrow * { text-decoration: none !important; }
.re-social-postrow__thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(68, 152, 216, 0.08);
    border: 1px solid #1e3a5f;
    display: flex;
    align-items: center;
    justify-content: center;
}
.re-social-postrow__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.re-social-postrow__thumb.is-empty::after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #35506e;
}
.re-social-postrow__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.re-social-postrow__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.re-social-postrow__date { font-size: 13px; font-weight: 600; }
.re-social-postrow__platform { color: #8aa0b2; font-size: 12px; }
.re-social-postrow__stats { color: #8aa0b2; font-size: 12px; }
.re-social-postrow__snippet {
    color: #c9d4dd;
    font-size: 13px;
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.re-social-postrow__pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.re-social-postrow__pill--draft     { background: rgba(138, 160, 178, 0.18); color: #c9d4dd; }
.re-social-postrow__pill--scheduled { background: rgba(68, 152, 216, 0.18); color: #4498D8; }
.re-social-postrow__pill--posted    { background: rgba(76, 175, 120, 0.18); color: #7fce9f; }

.re-social-delete-row { margin-top: 12px; }
.re-social-delete {
    background: none;
    border: 0;
    padding: 0;
    color: #8aa0b2;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}
.re-social-delete:hover { color: #e59a9a; }

.re-social-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.re-social-badge--draft  { background: rgba(138, 160, 178, 0.18); color: #c9d4dd; }
.re-social-badge--locked { background: rgba(68, 152, 216, 0.18); color: #4498D8; }

.re-social-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(68, 152, 216, 0.12);
    border: 1px solid #1e3a5f;
    color: #c9d4dd;
    font-size: 12px;
}

/* Create form */
.re-social-field { margin-bottom: 20px; }
.re-social-field > label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #e6edf3;
}
.re-social-hint { color: #8aa0b2; font-size: 13px; margin: 6px 0 0; }
.re-social-hint--inline { display: inline; font-weight: 400; }
.re-req { color: #E6AD23; }

.re-social-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.re-social-chip-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #1e3a5f;
    background: #0d1f33;
    cursor: pointer;
    font-size: 14px;
}
.re-social-chip-check input { accent-color: #4498D8; }

.re-social-addrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.re-social-addrow .re-input { flex: 1 1 auto; min-width: 0; }

.re-social-cadences {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.re-social-cadence {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 12px 14px;
}
@media (min-width: 640px) {
    .re-social-cadence {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
    }
}
.re-social-cadence__name { font-weight: 600; color: #4498D8; align-self: center; }
.re-social-cadence__field { display: block; min-width: 0; }
.re-social-cadence__field span { display: block; font-size: 12px; color: #8aa0b2; margin-bottom: 4px; }
.re-social-cadence__field select { width: 100%; box-sizing: border-box; }

.re-social-samples {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.re-social-sample { width: 100%; box-sizing: border-box; }

.re-social-field--toggles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.re-social-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #c9d4dd;
    font-size: 14px;
}
.re-social-check input { accent-color: #4498D8; margin-top: 2px; }

.re-social-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* Editor */
.re-social-editor__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.re-social-editor__head h1 { margin: 0; color: #4498D8; }

.re-social-shift {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.re-social-shift__field { display: block; min-width: 0; }
.re-social-shift__field span { display: block; font-size: 12px; color: #8aa0b2; margin-bottom: 4px; }
.re-social-shift__date { max-width: 220px; }
.re-social-shift__msg { font-size: 13px; color: #7fb98a; align-self: center; }
.re-social-shift__msg--error { color: #e59a9a; }
.re-social-shift .re-social-hint { flex-basis: 100%; margin: 2px 0 0; }

.re-social-copyplan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.re-social-copyplan .re-social-hint { flex-basis: 100%; margin: 2px 0 0; }

.re-social-imagery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.re-social-imagery__choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.re-social-imagery__q { color: #8aa0b2; font-size: 13px; }
.re-social-imagery__cancel { color: #8aa0b2; }
.re-social-imagery__status { font-size: 13px; color: #7fb98a; min-width: 0; }
.re-social-imagery__status--error { color: #e59a9a; }
.re-social-imagery__balance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
}
.re-social-imagery__count { font-size: 13px; color: #8aa0b2; min-width: 0; }
.re-social-imagery__count strong { color: #e6edf3; }
.re-social-imagery__resets { color: #6b7f90; }

.re-social-posts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.re-social-post {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 16px;
    min-width: 0;
}
.re-social-post__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.re-social-post__date { color: #c9d4dd; font-size: 13px; }
.re-social-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: -4px 0 12px;
}
.re-social-meta-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #1e3a5f;
    background: transparent;
    color: #8aa0b2;
    font-size: 11px;
}
.re-social-post__leadpain { font-size: 12px; color: #8aa0b2; }
.re-social-post__datefield span { display: block; font-size: 12px; color: #8aa0b2; margin-bottom: 4px; }
.re-social-post__label {
    display: block;
    font-size: 12px;
    color: #8aa0b2;
    margin: 10px 0 4px;
}
.re-social-post__body-input,
.re-social-post__image-input { width: 100%; box-sizing: border-box; }
.re-social-post__body { white-space: pre-wrap; color: #e6edf3; line-height: 1.5; }
.re-social-post__image { margin-top: 10px; color: #c9d4dd; font-size: 14px; }
.re-social-post__prompt-input { width: 100%; box-sizing: border-box; }

/* One labelled block (post text / image hint / image prompt) with a copy
   button on its label row. */
.re-social-post__field { margin-top: 14px; min-width: 0; }
.re-social-post__field:first-of-type { margin-top: 0; }
.re-social-post__labelrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
}
.re-social-post__labelrow .re-social-post__label { margin: 0; }
.re-social-post__copytext { white-space: pre-wrap; color: #e6edf3; line-height: 1.5; min-width: 0; }

.re-social-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-size: 12px;
    color: #c9d4dd;
    background: #12253c;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}
.re-social-copy:hover { border-color: #2c5380; color: #e6edf3; }
.re-social-copy svg { flex: none; }
.re-social-copy.is-copied { color: #4498D8; border-color: #2c5380; }

/* Generated image area */
.re-social-post__imagegen { margin-top: 14px; }
.re-social-post__genimg-wrap { margin-bottom: 10px; position: relative; }
.re-social-post__genimg {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #1e3a5f;
}
.re-social-genimg__copy {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(13, 31, 51, 0.85);
}
.re-social-post__genrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.re-social-genimg__msg { font-size: 13px; color: #c9d4dd; min-width: 0; }
.re-social-genimg__msg--error { color: #f0a3a3; }

/* Brand-guideline uploader - lives on the planner home (list) page */
.re-social-brand-panel {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 16px;
    margin: 0 0 24px;
}
.re-social-brand-panel__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}
.re-social-brand-panel__summary::-webkit-details-marker { display: none; }
.re-social-brand-panel__title { color: #4498D8; font-size: 18px; font-weight: 700; }
.re-social-brand-panel__title::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 8px;
    color: #8aa0b2;
    font-weight: 400;
    transition: transform 0.15s ease;
}
.re-social-brand-panel[open] .re-social-brand-panel__title::before { transform: rotate(90deg); }
.re-social-brand-panel__body { margin-top: 12px; }
.re-social-brand-panel__body > .re-social-hint:first-child { margin-top: 0; }

.re-social-brand__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.re-social-brand__file { font-size: 13px; color: #e6edf3; word-break: break-word; min-width: 0; }
.re-social-brand__badge {
    font-size: 12px;
    color: #8aa0b2;
    background: #12253c;
    border: 1px solid #1e3a5f;
    border-radius: 999px;
    padding: 2px 10px;
}
.re-social-brand__badge.is-ready { color: #4498D8; border-color: #2c5380; }
.re-social-brand__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.re-social-brand__input { flex: 1 1 200px; min-width: 0; color: #c9d4dd; font-size: 13px; }
.re-social-brand__msg--error { color: #f0a3a3; }
.re-social-voice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.re-social-brand__summary { margin-top: 12px; }
.re-social-brand__summary > summary {
    cursor: pointer;
    color: #4498D8;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
}
.re-social-brand__summary > summary::-webkit-details-marker { display: none; }
.re-social-brand__summary > summary::before { content: '\25B8'; display: inline-block; margin-right: 6px; transition: transform 0.15s ease; }
.re-social-brand__summary[open] > summary::before { transform: rotate(90deg); }
.re-social-brand__summary-body {
    white-space: pre-wrap;
    color: #c9d4dd;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
    padding: 12px;
    background: #12253c;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    min-width: 0;
}

.re-social-editor__footer {
    border-top: 1px solid #1e3a5f;
    padding-top: 16px;
}
.re-social-editor__footer .re-social-field--toggles { margin-bottom: 14px; }

/* Stats capture + weekly trends (mobile-first, dark theme) */
.re-social__head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.re-social-post__stats { margin-top: 12px; }
.re-banner--success {
    background: rgba(68, 152, 216, 0.12);
    border: 1px solid #2c5380;
    color: #c9d4dd;
}

.re-social-post--readonly { margin-bottom: 20px; }

.re-social-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (min-width: 480px) { .re-social-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .re-social-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.re-social-metric { display: block; min-width: 0; }
.re-social-metric span { display: block; font-size: 12px; color: #8aa0b2; margin-bottom: 4px; }
.re-social-metric input { width: 100%; box-sizing: border-box; }

.re-social-demos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.re-social-demo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px auto;
    gap: 8px;
    align-items: center;
}
.re-social-demo-row .re-input { width: 100%; box-sizing: border-box; min-width: 0; }

.re-social-weekly-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
@media (min-width: 640px) { .re-social-weekly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .re-social-weekly-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.re-social-weekly-field { display: block; min-width: 0; }
.re-social-weekly-field span { display: block; font-size: 12px; color: #8aa0b2; margin-bottom: 4px; }
.re-social-weekly-field .re-input { width: 100%; box-sizing: border-box; }

.re-social-charts { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.re-social-chart-card {
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 14px;
    padding: 16px 14px;
    min-width: 0;
}
.re-social-chart-card h2 { margin: 0 0 12px; color: #4498D8; font-size: 16px; }
.re-social-chart-wrap { position: relative; height: 280px; min-width: 0; }
.re-social-chart-wrap canvas { max-width: 100%; }

/* ============================================================================
   Video messages - record + send (mobile-first, dark theme)
   [re_video_message] page, the shared recorder modal, and the landing list.
   ========================================================================== */

/* Compose modal message tools row - icon buttons (Record video, Offer time,
   AI Generate) sitting above the editor, to the right of the "Message" label. */
.re-email-compose-message__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.re-email-compose-message__head label { margin: 0; }
.re-email-compose-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.re-email-compose-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #2a3947;
    background: #0f1820;
    color: #8aa0b2;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.re-email-compose-tool:hover {
    color: #e6edf3;
    border-color: #4498D8;
    background: #16242f;
}
.re-email-compose-tool svg { display: block; }
.re-email-compose-tool.re-email-compose-ai { color: #4498D8; }
.re-email-compose-tool.re-email-compose-ai:hover { color: #6fb6e6; }
/* display: inline-flex above is an author rule and would otherwise win over
   the UA [hidden] { display: none }, leaving the Offer time tool visible (and
   clickable before a contact is resolved). Restore the hidden semantics. */
.re-email-compose-tool[hidden] { display: none; }

/* Shared ghost button used across the video surfaces. */
.re-btn--ghost {
    background: transparent;
    border: 1px solid #4498D8;
    color: #4498D8;
}
.re-btn--ghost:hover,
.re-btn--ghost:focus { background: rgba(68, 152, 216, 0.12); color: #4498D8; }

/* ── Standalone page ──────────────────────────────────────────────────────── */
.re-vmsg { display: grid; gap: 16px; }
.re-vmsg__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.re-vmsg__head h1 { color: #4498D8; font-size: 22px; margin: 0; min-width: 0; }
.re-vmsg__intro { color: #b9c0cc; margin: 0; max-width: 640px; line-height: 1.5; }

.re-vmsg-notice {
    background: #1d212b;
    border: 1px solid #2a2f3b;
    border-radius: 10px;
    padding: 16px 18px;
    color: #cdd3dd;
}

.re-vmsg-result {
    background: #1d212b;
    border: 1px solid #2a2f3b;
    border-radius: 12px;
    padding: 20px;
    display: grid;
    gap: 12px;
}
/* The explicit display:grid above would otherwise beat the browser's
   [hidden]{display:none}, leaving an empty panel before a video is recorded. */
.re-vmsg-result[hidden] { display: none; }
.re-vmsg-result__heading { color: #4498D8; font-size: 17px; margin: 0; }
.re-vmsg-result__row { display: flex; min-width: 0; }
.re-vmsg-result__link,
.re-vmsg-card__link {
    width: 100%;
    box-sizing: border-box;
    background: #14161c;
    border: 1px solid #2a2f3b;
    border-radius: 6px;
    color: #eef1f6;
    padding: 9px 12px;
    font-size: 13px;
    min-width: 0;
}
.re-vmsg-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.re-vmsg-result__hint { color: #8b93a1; font-size: 13px; margin: 0; line-height: 1.5; }

/* ── Recent videos list ───────────────────────────────────────────────────── */
.re-vmsg-list-note { color: #8b93a1; font-size: 13px; margin: 0 0 4px; line-height: 1.5; }
.re-vmsg-list { display: grid; gap: 12px; }
.re-vmsg-card {
    background: #1d212b;
    border: 1px solid #2a2f3b;
    border-radius: 12px;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.re-vmsg-card__body { display: grid; gap: 10px; min-width: 0; }
.re-vmsg-card__thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #14161c;
    aspect-ratio: 16 / 9;
}
.re-vmsg-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.re-vmsg-card__dur {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(8, 9, 12, 0.82);
    color: #eef1f6;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
}
@media (min-width: 480px) {
    .re-vmsg-card--has-thumb {
        grid-template-columns: 200px minmax(0, 1fr);
        align-items: start;
    }
}
.re-vmsg-card__main {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.re-vmsg-card__title { font-weight: 600; color: #eef1f6; min-width: 0; margin-right: auto; }
.re-vmsg-card__title-edit {
    background: none;
    border: 0;
    padding: 2px 6px;
    font: inherit;
    font-size: 12px;
    color: #8b93a1;
    cursor: pointer;
    border-radius: 4px;
}
.re-vmsg-card__title-edit:hover { color: #4498D8; background: rgba(68, 152, 216, 0.08); }
.re-vmsg-title-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1 1 100%;
    min-width: 0;
}
.re-vmsg-title-edit__input {
    flex: 1 1 200px;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 10px;
    background: #14161c;
    border: 1px solid #2a2f3b;
    border-radius: 6px;
    color: #eef1f6;
    font: inherit;
    font-size: 14px;
}
.re-vmsg-title-edit__input:focus { outline: none; border-color: #4498D8; }
.re-vmsg-card__meta { display: flex; flex-wrap: wrap; gap: 14px; color: #8b93a1; font-size: 13px; }
.re-vmsg-card__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.re-vmsg-card__actions .re-btn.is-locked {
    border-color: rgba(230, 173, 35, 0.55);
    color: #E6AD23;
}
.re-vmsg-card__delete { margin-left: auto; }
.re-vmsg-card__delete:hover { border-color: rgba(220, 80, 80, 0.6); color: #e88; }

.re-vmsg-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #2a2f3b;
    color: #cdd3dd;
}
.re-vmsg-badge--ready { background: rgba(70, 180, 80, 0.18); color: #6fd17d; }
.re-vmsg-badge--processing { background: rgba(230, 173, 35, 0.16); color: #E6AD23; }
.re-vmsg-badge--expired,
.re-vmsg-badge--deleted { background: #2a2f3b; color: #8b93a1; }
.re-vmsg-badge--error { background: rgba(220, 50, 50, 0.16); color: #e88; }

/* ── Recorder modal ───────────────────────────────────────────────────────── */
.re-vr-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(8, 9, 12, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.re-vr-modal {
    background: #14161c;
    border: 1px solid #2a2f3b;
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 94vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    color: #eef1f6;
}
.re-vr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #2a2f3b;
}
.re-vr-heading { font-weight: 600; font-size: 16px; }
.re-vr-header-actions { display: flex; align-items: center; gap: 4px; }
.re-vr-popout {
    background: none;
    border: none;
    color: #8b93a1;
    cursor: pointer;
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
}
.re-vr-popout:hover { color: #eef1f6; }
.re-vr-popout svg { width: 18px; height: 18px; display: block; }
.re-vr-close {
    background: none;
    border: none;
    color: #8b93a1;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.re-vr-close:hover { color: #eef1f6; }

.re-vr-body { padding: 16px 18px; display: grid; gap: 14px; }

.re-vr-stage {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}
.re-vr-stage.re-vr-portrait { max-width: 300px; aspect-ratio: 9 / 16; }
.re-vr-stage.re-vr-landscape { max-width: 100%; aspect-ratio: 16 / 9; }
.re-vr-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100% !important;
}
/* Mirror the live self-view so it feels natural; review playback (the actual
   recorded file, which is not mirrored) drops this class so it matches what
   the recipient will see. */
.re-vr-video.re-vr-mirror { transform: scaleX(-1); }
.re-vr-fatal {
    padding: 28px 22px;
    color: #cdd3dd;
    text-align: center;
    line-height: 1.5;
}

/* Teleprompter overlay near the camera. */
.re-vr-tele {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42%;
    overflow: hidden;
    padding: 12px 14px 28px;
    /* Sits at the top so the speaker reads near the camera lens. */
    background: linear-gradient(to bottom, rgba(0,0,0,0.78), rgba(0,0,0,0));
    pointer-events: none;
}
.re-vr-tele-scroll {
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    white-space: pre-wrap;
    will-change: transform;
    /* Head-start buffer so the opening line sits lower and doesn't scroll away
       before the speaker starts talking. */
    padding-top: 24px;
}

.re-vr-rec-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.re-vr-rec-badge span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dc3232;
    display: inline-block;
    animation: re-vr-pulse 1.2s infinite;
}
@keyframes re-vr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.re-vr-remain {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 4;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.re-vr-remain.is-low {
    background: rgba(220, 50, 50, 0.92);
    color: #fff;
}

.re-vr-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 96px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.7);
    background: rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 3;
}
.re-vr-count.is-tick { animation: re-vr-count-pop 0.9s ease-out; }
@keyframes re-vr-count-pop {
    0% { transform: scale(1.6); opacity: 0; }
    30% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.85); opacity: 0.85; }
}

.re-vr-script { display: grid; gap: 6px; }
.re-vr-script-label { font-size: 13px; color: #b9c0cc; }
.re-vr-script-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    resize: vertical;
    background: #1d212b;
    border: 1px solid #2a2f3b;
    border-radius: 8px;
    color: #eef1f6;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
}

.re-vr-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 0 18px 8px;
}
.re-vr-orient {
    display: inline-flex;
    border: 1px solid #2a2f3b;
    border-radius: 999px;
    overflow: hidden;
}
.re-vr-orient-btn {
    background: transparent;
    border: none;
    color: #b9c0cc;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
}
.re-vr-orient-btn.is-active { background: #4498D8; color: #fff; }

.re-vr-record-btn {
    background: #4498D8;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.re-vr-record-btn:hover { background: #3a86c4; }
.re-vr-stop-btn {
    background: #dc3232;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.re-vr-secondary-btn {
    background: transparent;
    border: 1px solid #2a2f3b;
    color: #cdd3dd;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 14px;
    cursor: pointer;
}

.re-vr-speed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.re-vr-speed-label { font-size: 13px; color: #b9c0cc; }
.re-vr-speed-range {
    width: 120px;
    max-width: 40vw;
    accent-color: #4498D8;
    cursor: pointer;
}

.re-vr-status {
    padding: 0 18px 16px;
    text-align: center;
    color: #b9c0cc;
    font-size: 14px;
    min-height: 1px;
}
.re-vr-status.is-error { color: #e88; }

@media (min-width: 480px) {
    .re-vr-stage.re-vr-portrait { max-width: 340px; }
}

/* ===================================================================== */
/* [re_assessment] self-assessment suite (DISC + Emotional IQ + Sales IQ) */
/* Dark theme, mobile-first. Base works at 390px; enhanced upward.        */
/* ===================================================================== */
.re-assessment {
    max-width: 760px;
    margin: 0 auto;
    color: #e6edf3;
}
.re-assessment__header { margin-bottom: 16px; }
.re-assessment__header h1 { color: #4498D8; margin: 0 0 6px; }
.re-assessment__lede { color: #9fb2c0; margin: 0; }
.re-assessment-headline { color: #4498D8; font-weight: 600; margin: 0 0 12px; }

.re-assessment-card {
    background: #11202B;
    border: 1px solid #1d3344;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.re-assessment-card h2 { color: #4498D8; margin: 0 0 8px; }
.re-assessment-card h3 { color: #e6edf3; margin: 14px 0 6px; font-size: 16px; }
.re-assessment-card--accent { border-color: #4498D8; background: rgba(68, 152, 216, 0.08); }

.re-assessment-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.re-assessment-intro-card { background: #0d1c27; border: 1px solid #1d3344; border-radius: 10px; padding: 14px 16px; min-width: 0; }
.re-assessment-intro-card h3 { color: #E6AD23; margin: 0 0 6px; font-size: 15px; }
.re-assessment-intro-card p { color: #9fb2c0; margin: 0; font-size: 14px; }

.re-assessment-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.re-assessment-inline-form { display: inline; margin: 0; }
.re-assessment-progress-note { color: #E6AD23; font-weight: 600; }

.re-assessment-history { list-style: none; margin: 0; padding: 0; }
.re-assessment-history li { padding: 8px 0; border-bottom: 1px solid #1d3344; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.re-assessment-history li:last-child { border-bottom: none; }
.re-assessment-history a { color: #4498D8; text-decoration: none; }
.re-assessment-history a:hover { text-decoration: underline; }
.re-assessment-history__tag { font-size: 12px; color: #1a1a1a; background: #E6AD23; border-radius: 10px; padding: 1px 8px; }

/* ── Progress bar ──────────────────────────────────────────────────── */
.re-assessment-progress { background: #0d1c27; border-radius: 6px; height: 8px; overflow: hidden; }
.re-assessment-progress__bar { background: #4498D8; height: 8px; border-radius: 6px; transition: width 0.2s ease; }
.re-assessment-progress__label { color: #9fb2c0; font-size: 13px; margin: 6px 0 14px; }

/* ── Questionnaire form ────────────────────────────────────────────── */
.re-assessment-form fieldset { border: 1px solid #1d3344; border-radius: 10px; margin: 0 0 12px; padding: 12px 14px; background: #11202B; }
.re-assessment-form legend { padding: 0 4px; }

/* DISC most/least grid */
.re-disc-group__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.re-disc-group__spacer { flex: 1 1 auto; min-width: 0; }
.re-disc-col-label { width: 44px; text-align: center; font-size: 11px; color: #9fb2c0; }
.re-disc-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #16293a; }
.re-disc-row:first-of-type { border-top: none; }
.re-disc-word { flex: 1 1 auto; min-width: 0; font-size: 15px; }
.re-disc-pick { width: 44px; display: flex; justify-content: center; cursor: pointer; position: relative; }
.re-disc-pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.re-disc-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #3a5266; display: inline-block; }
.re-disc-pick--most input:checked ~ .re-disc-dot { border-color: #4498D8; background: #4498D8; }
.re-disc-pick--least input:checked ~ .re-disc-dot { border-color: #E6AD23; background: #E6AD23; }

/* Likert scale */
.re-likert__statement { font-size: 15px; color: #e6edf3; margin-bottom: 8px; }
.re-likert__scale { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.re-likert__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #1d3344; border-radius: 8px; cursor: pointer; min-width: 0; position: relative; }
.re-likert__option input { position: absolute; opacity: 0; }
.re-likert__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3a5266; flex: 0 0 auto; }
.re-likert__label { font-size: 14px; min-width: 0; }
.re-likert__option input:checked ~ .re-likert__dot { border-color: #4498D8; background: #4498D8; }
.re-likert__option input:checked ~ .re-likert__label { color: #4498D8; font-weight: 600; }

/* Sales scenarios */
.re-scenario__stem { font-size: 15px; color: #e6edf3; margin-bottom: 8px; font-weight: 600; }
.re-scenario__option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #1d3344; border-radius: 8px; cursor: pointer; margin-bottom: 6px; min-width: 0; position: relative; }
.re-scenario__option input { position: absolute; opacity: 0; }
.re-scenario__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3a5266; flex: 0 0 auto; margin-top: 2px; }
.re-scenario__text { font-size: 14px; min-width: 0; }
.re-scenario__option input:checked ~ .re-scenario__dot { border-color: #4498D8; background: #4498D8; }
.re-scenario__option input:checked ~ .re-scenario__text { color: #4498D8; }

.re-assessment-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }

/* ── Result page: bars + lists ─────────────────────────────────────── */
.re-bar-set { margin: 12px 0; }
.re-bar-row { margin: 8px 0; }
.re-bar-row__head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.re-bar-row__label { min-width: 0; }
.re-bar-row__value { color: #9fb2c0; white-space: nowrap; }
.re-bar-track { background: #0d1c27; border-radius: 6px; height: 12px; overflow: hidden; }
.re-bar-fill { height: 12px; border-radius: 6px; }
.re-bar-fill--blue    { background: #4498D8; }
.re-bar-fill--mustard { background: #E6AD23; }
.re-bar-fill--d { background: #C0504D; }
.re-bar-fill--i { background: #E6AD23; }
.re-bar-fill--s { background: #4E9A51; }
.re-bar-fill--c { background: #4498D8; }
.re-bar-fill--v { background: #4498D8; }
.re-bar-fill--a { background: #E6AD23; }
.re-bar-fill--k { background: #4E9A51; }
.re-bar-row--muted .re-bar-row__label { color: #9fb2c0; }
.re-bar-row--muted .re-bar-track { background: #0d1c27; opacity: 0.5; }
.re-bar-row--muted .re-bar-pill { color: #d6e3ec; background: #2a3b48; }
.re-bar-note { color: #9fb2c0; font-size: 13px; margin: 2px 0 10px; }
.re-assessment-confidence { margin: 4px 0 12px; }
.re-assessment-confidence .re-bar-pill { color: #fff; }
.re-scenario--binary .re-scenario__option { display: inline-flex; width: auto; margin-right: 8px; }
.re-bar-pill { font-size: 12px; color: #1a1a1a; background: #4498D8; border-radius: 10px; padding: 1px 8px; }
.re-bar-pill--lg { font-size: 13px; color: #fff; }

.re-assessment-twocol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; }
.re-assessment-list { margin: 4px 0 8px; padding-left: 18px; }
.re-assessment-list li { margin: 3px 0; }
.re-assessment-list--caution li::marker { color: #E6AD23; }

@media (min-width: 600px) {
    .re-assessment-intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .re-assessment-twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .re-likert__scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .re-likert__option { flex-direction: column; text-align: center; gap: 6px; }
    .re-likert__label { font-size: 12px; }
}

@media (min-width: 860px) {
    .re-assessment-intro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Role select fields ────────────────────────────────────────────── */
.re-role-field { border: 1px solid #1d3344; border-radius: 10px; margin: 0 0 12px; padding: 12px 14px; background: #11202B; }
.re-role-field__label { display: block; color: #e6edf3; font-weight: 600; margin-bottom: 8px; }
.re-role-field__optional { color: #9fb2c0; font-weight: 400; font-size: 13px; }
.re-role-field__hint { color: #9fb2c0; font-size: 13px; margin: 8px 0 0; }
.re-role-select { width: 100%; box-sizing: border-box; background: #0d1c27; color: #e6edf3; border: 1px solid #3a5266; border-radius: 8px; padding: 10px 12px; font-size: 15px; }
.re-role-select:focus { outline: none; border-color: #4498D8; }
.re-role-dev { color: #E6AD23; }

/* ── Role-fit bar colours ──────────────────────────────────────────── */
.re-bar-fill--good { background: #4E9A51; }
.re-bar-fill--ok   { background: #E6AD23; }
.re-bar-fill--low  { background: #C0504D; }

/* ── Team dashboard ────────────────────────────────────────────────── */
.re-team-statline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.re-team-stat { background: #0d1c27; border: 1px solid #1d3344; border-radius: 10px; padding: 14px 16px; text-align: center; min-width: 0; }
.re-team-stat__num { display: block; color: #4498D8; font-size: 26px; font-weight: 700; line-height: 1.1; }
.re-team-stat__label { display: block; color: #9fb2c0; font-size: 13px; margin-top: 4px; }
.re-team-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; }
.re-team-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.re-team-chip { background: rgba(68, 152, 216, 0.12); border: 1px solid #1d3344; border-radius: 10px; padding: 6px 12px; font-size: 13px; color: #e6edf3; min-width: 0; }
.re-team-chip strong { color: #4498D8; }

@media (min-width: 640px) {
    .re-team-statline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .re-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── [re_subprocessors] - privacy policy sub-processor list ─────────────────
   Content-page styling that inherits the host page's colours. Mobile-first:
   single-column cards at 390px, a two-up grid from 640px. */
.re-subprocessors {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 16px 0;
    /* Pin a sans-serif/Montserrat stack so the cards never inherit a monospace
       font from an ancestor (the Monaco-looking text); falls back to the page's
       own sans-serif when Montserrat isn't loaded. */
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.re-subprocessor {
    min-width: 0;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 16px 18px;
}
/* Some themes / plugins wrap shortcode text in <code> on the_content and then
   style code as monospace (Monaco). Neutralise that inside this component so the
   cards keep the brand font regardless of what injects the wrapper. The class +
   element specificity beats the theme's bare `code, kbd, tt, var` rule, so no
   !important is needed. */
.re-subprocessors :is(code, kbd, tt, var, samp, pre) {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    white-space: normal;
}
.re-subprocessor__name {
    margin: 0 0 10px;
    font-size: 1.1rem;
    line-height: 1.3;
}
.re-subprocessor__name a { text-decoration: underline; }
.re-subprocessor__fields {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 12px;
}
.re-subprocessor__fields dt {
    font-weight: 600;
    margin-top: 8px;
}
.re-subprocessor__fields dt:first-child { margin-top: 0; }
.re-subprocessor__fields dd {
    margin: 0;
    min-width: 0;
}
@media (min-width: 640px) {
    .re-subprocessors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .re-subprocessor__fields {
        grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
        align-items: baseline;
    }
    .re-subprocessor__fields dt { margin-top: 0; }
    .re-subprocessor__fields dd { margin-bottom: 4px; }
}

/* ── [re_security] - Security and Transparency tabbed docs ──────────────────
   Public content page. Dark-theme surface (matches the other public [re_*]
   pages, e.g. [re_subprocessors]); blue headings per brand. Mobile-first: the
   tab rail scrolls horizontally at 390px and wide markdown tables scroll inside
   their own container rather than widening the page. */
.re-security {
    min-width: 0;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}
/* This nav has 7 tabs - let them wrap onto a second row rather than inheriting
   the coaching-tabs single-row horizontal scroll, which pushes the last tab
   (Changelog) off-screen on desktop with no visible scroll affordance. */
.re-security-tabs {
    margin-bottom: 20px;
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 2px;
}
.re-security-content { min-width: 0; }
.re-security-content h1,
.re-security-content h2,
.re-security-content h3 {
    color: #4498D8;
    line-height: 1.3;
}
.re-security-content h1 { font-size: 1.6rem; margin: 0 0 16px; }
.re-security-content h2 { font-size: 1.25rem; margin: 28px 0 12px; }
.re-security-content h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.re-security-content p,
.re-security-content li { min-width: 0; }
.re-security-content ul,
.re-security-content ol { padding-left: 20px; }
.re-security-content li { margin: 4px 0; }
.re-security-content a { text-decoration: underline; }
/* Neutralise any theme `code` styling injected on shortcode output. */
.re-security-content :is(code, kbd, tt, var, samp, pre) {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    white-space: normal;
}
/* Wide tables scroll inside their own box instead of widening the page. */
.re-security-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 12px 0;
    -webkit-overflow-scrolling: touch;
}
.re-security-content th,
.re-security-content td {
    text-align: left;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    vertical-align: top;
}
.re-security-content th {
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   Signup [re_register] + membership paywall
   Dark theme, mobile-first (base works at 390px).
   ========================================================= */

.re-auth-wrap {
    max-width: 480px;
    margin: 0 auto;
}

/* Two-up Log in | Create account layout on the [re_register] form mode.
   Mobile-first: single column (Log in above Create account); side by side
   from 720px up, where the wrap widens to hold both cards. */
.re-auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

@media (min-width: 720px) {
    .re-auth-wrap--split {
        max-width: 860px;
    }

    .re-auth-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.re-auth-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 14px;
    padding: 24px;
}

.re-auth-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #4498D8;
    line-height: 1.2;
}

.re-auth-lead {
    margin: 0;
    color: #c9d4dd;
    line-height: 1.55;
}

.re-auth-lead a,
.re-auth-alt a {
    color: #4498D8;
}

.re-auth-alt {
    margin: 0;
    font-size: 14px;
}

/* Subscribe button + badge (shared by [re_subscribe] and the paywall). */
.re-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #4ba6e8 0%, #4498D8 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: filter .15s ease, transform .05s ease;
}

.re-subscribe-btn:hover { filter: brightness(1.05); color: #fff; }
.re-subscribe-btn:active { transform: translateY(1px); }
.re-subscribe-btn small { font-weight: 500; opacity: .85; }

.re-subscribed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8aa0b2;
    font-weight: 600;
    font-size: 14px;
}

/* Targeted paywall block. */
.re-upgrade-prompt {
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.re-upgrade-prompt__msg {
    margin: 0;
    color: #e6edf3;
    font-size: 16px;
    line-height: 1.55;
}

.re-upgrade-prompt__note {
    margin: 0;
    color: #8aa0b2;
    line-height: 1.55;
}

.re-plan-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.re-plan-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 14px;
    padding: 22px;
}

.re-plan-card__name {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #4498D8;
}

.re-plan-card__desc {
    margin: 0;
    color: #c9d4dd;
    line-height: 1.55;
}

.re-plan-card__action {
    margin-top: auto;
}

@media (min-width: 640px) {
    .re-plan-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ── Mine my network (LinkedIn connections -> blueprint match) v37.0.0 ──────────
   Sibling of Find Me Suspects on the CRM pipeline. Dark theme, mobile-first;
   base rules work at 390px, the list scrolls inside its own container. Classes
   are re-netmine-* to avoid colliding with the Social Planner's .re-linkedin-*. */
.re-kanban-wrap .re-kanban-mine-btn {
    margin-left: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #4498D8;
    background: transparent;
    color: #4498D8;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.re-kanban-wrap .re-kanban-mine-btn:hover { background: #4498D8; color: #ffffff; }
.re-kanban-wrap .re-kanban-mine-btn[hidden] { display: none; }

.re-netmine-modal { display: none; }
.re-netmine-modal.is-open {
    display: block;
    position: fixed; inset: 0;
    z-index: 100002;
}
.re-netmine-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 14, 19, 0.75);
}
.re-netmine-modal-dialog {
    position: relative;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    width: min(640px, calc(100% - 24px));
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #11202B;
    border: 1px solid #2A3A48;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    min-width: 0;
}
.re-netmine-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #1A2530;
}
.re-netmine-modal-head h2 { margin: 0; font-size: 18px; color: #4498D8; }
.re-netmine-modal-close {
    background: none; border: none; color: #8F9FA6;
    font-size: 24px; line-height: 1; cursor: pointer;
    flex: 0 0 auto;
}
.re-netmine-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}
.re-netmine-modal-foot {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #1A2530;
}
.re-netmine-modal-foot:empty { display: none; }

.re-netmine-lead { margin: 0 0 16px; color: #C5CDD3; font-size: 14px; line-height: 1.5; }
.re-netmine-note { margin: 0 0 10px; color: #8F9FA6; font-size: 13px; line-height: 1.45; }
.re-netmine-steps {
    background: #0B1820;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 16px;
    min-width: 0;
}
.re-netmine-steps-title { margin: 0 0 8px; color: #4498D8; font-size: 14px; font-weight: 600; }
.re-netmine-steps ol { margin: 0; padding-left: 20px; color: #C5CDD3; font-size: 13px; line-height: 1.55; }
.re-netmine-steps li { margin: 0 0 6px; }
.re-netmine-steps strong { color: #E6E9EC; }

.re-netmine-upload {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 0 4px;
    min-width: 0;
}
.re-netmine-upload-btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 20px;
    background: #4498D8;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.re-netmine-upload-btn:hover { background: #1B5070; }
.re-netmine-upload-name { color: #8F9FA6; font-size: 13px; min-width: 0; word-break: break-word; }

.re-netmine-error { margin: 12px 0 0; color: #ff8a73; font-size: 13px; line-height: 1.45; }

.re-netmine-progress { text-align: center; padding: 24px 8px; }
.re-netmine-progress p { margin: 14px 0 0; color: #C5CDD3; font-size: 14px; }
.re-netmine-spinner {
    width: 32px; height: 32px;
    margin: 0 auto;
    border: 3px solid #2A3A48;
    border-top-color: #4498D8;
    border-radius: 50%;
    animation: re-netmine-spin 0.8s linear infinite;
}
@keyframes re-netmine-spin { to { transform: rotate(360deg); } }

.re-netmine-toggle {
    display: flex; flex-wrap: wrap; gap: 0;
    margin: 0 0 12px;
    border: 1px solid #2A3A48;
    border-radius: 20px;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}
.re-netmine-toggle-btn {
    padding: 7px 16px;
    background: transparent;
    border: none;
    color: #8F9FA6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.re-netmine-toggle-btn.is-active { background: #4498D8; color: #ffffff; }

.re-netmine-count { color: #8F9FA6; font-size: 13px; margin: 0 0 8px; }

.re-netmine-list {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid #1A2530;
    border-radius: 8px;
}
.re-netmine-row { border-bottom: 1px solid #1A2530; }
.re-netmine-row:last-child { border-bottom: none; }
.re-netmine-pick {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    min-width: 0;
}
.re-netmine-pick input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: #4498D8;
}
.re-netmine-person { flex: 1 1 auto; min-width: 0; }
.re-netmine-name { display: block; color: #E6E9EC; font-size: 14px; font-weight: 600; }
.re-netmine-sub { display: block; color: #8F9FA6; font-size: 12px; line-height: 1.4; }
.re-netmine-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; flex: 0 0 auto; }
.re-netmine-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.re-netmine-badge--match { background: rgba(68, 152, 216, 0.18); color: #91CAEA; }
.re-netmine-badge--soft { background: rgba(143, 159, 166, 0.16); color: #C5CDD3; }
.re-netmine-badge--known { background: rgba(230, 173, 35, 0.18); color: #E6AD23; }
.re-netmine-badge--muted { background: transparent; color: #8F9FA6; border: 1px solid #2A3A48; }

.re-netmine-success { margin: 0 0 12px; color: #E6E9EC; font-size: 15px; line-height: 1.5; }
.re-netmine-success strong { color: #91CAEA; }
.re-netmine-offer {
    background: #0B1820;
    border: 1px solid #2A3A48;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 4px;
}
.re-netmine-offer p { margin: 0; color: #C5CDD3; font-size: 14px; line-height: 1.5; }

.re-netmine-btn {
    padding: 9px 18px;
    border-radius: 20px;
    border: 1px solid #4498D8;
    background: #4498D8;
    color: #ffffff;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.re-netmine-btn--primary:hover { background: #1B5070; border-color: #1B5070; }
.re-netmine-btn--primary[disabled] { opacity: 0.55; cursor: not-allowed; }
.re-netmine-btn--ghost { background: transparent; color: #4498D8; }
.re-netmine-btn--ghost:hover { background: rgba(68, 152, 216, 0.12); }

@media (min-width: 480px) {
    .re-netmine-pick { align-items: center; }
    .re-netmine-badges { align-items: center; }
}

/* ── Drip-enrol panel on the playbook editor (v38.1.0) ─────────────────────────
   Queue many contacts to start in waves. Dark theme, matches the editor. */
.re-pb-queue-panel {
    margin-top: 24px;
    padding: 16px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    min-width: 0;
}
.re-pb-queue-panel h3 { color: #4498D8; margin: 0 0 8px; font-size: 15px; }
.re-pb-queue-panel .re-pb-queue-pending h3 { margin-top: 16px; }

.re-pb-queue-cadence {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center;
    margin: 12px 0;
    color: #c9d4dd; font-size: 14px;
}
.re-pb-queue-cadence label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.re-pb-queue-cadence input { width: 72px; }
.re-pb-queue-cadence input[type="date"] { width: auto; }

.re-pb-queue-controls {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin: 0 0 10px;
}
.re-pb-queue-controls .re-pb-queue-filter { flex: 1 1 200px; min-width: 0; }
.re-pb-queue-controls .re-pb-queue-search { flex: 1 1 160px; min-width: 0; }
.re-pb-queue-selectall { color: #c9d4dd; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

.re-pb-queue-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    background: #06121f;
}
.re-pb-queue-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #122941;
    cursor: pointer;
    min-width: 0;
}
.re-pb-queue-row:last-child { border-bottom: none; }
.re-pb-queue-row input[type="checkbox"] { flex: 0 0 auto; accent-color: #4498D8; }
.re-pb-queue-name { color: #e6edf3; font-size: 14px; flex: 1 1 auto; min-width: 0; }
.re-pb-queue-rel {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 600;
    color: #91CAEA;
    background: rgba(68, 152, 216, 0.16);
    border-radius: 10px;
    padding: 2px 8px;
}
.re-pb-queue-nowhy { flex: 0 0 auto; font-size: 11px; color: #E6AD23; }

.re-pb-queue-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin: 12px 0 0;
}
.re-pb-queue-count { color: #8aa0b2; font-size: 13px; }
.re-pb-queue-result { margin-top: 12px; color: #c9d4dd; font-size: 14px; }
.re-pb-queue-result strong { color: #91CAEA; }
.re-pb-queue-error { margin-top: 12px; }

.re-pb-queue-pending-list { list-style: none; margin: 8px 0 0; padding: 0; }
.re-pb-queue-pending-list li {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #122941;
}
.re-pb-queue-pending-list li:last-child { border-bottom: none; }
.re-pb-queue-date { color: #8aa0b2; font-size: 13px; }

/* ── Getting-started hub ([re_hub]) ───────────────────────────────────────── */
/* Mobile-first: base rule works at 390px, enhanced upward with min-width. */
.re-hub {
    max-width: 760px;
    margin: 0 auto;
    color: #e8edf3;
}
.re-hub__header { margin-bottom: 24px; }
.re-hub__eyebrow {
    color: #4498D8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    margin: 0 0 6px;
}
.re-hub__greeting {
    color: #4498D8;
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 8px;
}
.re-hub__subtitle {
    color: #b9c4d0;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.re-hub__switch {
    display: inline-block;
    color: #4498D8;
    font-size: 14px;
    text-decoration: none;
}
.re-hub__switch:hover { color: #E6AD23; text-decoration: underline; }

.re-hub-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.re-hub-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.re-hub-card--done { border-color: rgba(70, 180, 80, 0.35); }
.re-hub-card--soon { opacity: 0.65; }

.re-hub-card__index {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(68, 152, 216, 0.14);
    border: 1px solid rgba(68, 152, 216, 0.4);
    color: #4498D8;
    font-weight: 600;
    font-size: 15px;
    min-width: 0;
}
.re-hub-card--done .re-hub-card__index {
    background: rgba(70, 180, 80, 0.16);
    border-color: rgba(70, 180, 80, 0.5);
    color: #46b450;
}
.re-hub-card__index svg { width: 18px; height: 18px; }

.re-hub-card__body { min-width: 0; }
.re-hub-card__title {
    color: #e8edf3;
    font-size: 17px;
    margin: 0 0 6px;
    line-height: 1.3;
}
.re-hub-card__blurb {
    color: #b9c4d0;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.re-hub-card__progress { margin: 0 0 12px; }
.re-hub-card__progress-bar {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 5px;
}
.re-hub-card__progress-bar span {
    display: block;
    height: 100%;
    background: #4498D8;
    transition: width .3s;
}
.re-hub-card__progress-label { color: #8aa0b2; font-size: 13px; }

.re-hub-card__cta {
    display: inline-block;
    background: #4498D8;
    color: #fff;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}
.re-hub-card__cta:hover { background: #3986c4; color: #fff; }
.re-hub-card__soon-note {
    color: #8aa0b2;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

/* Ask-once persona chooser */
.re-hub-choose__options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.re-hub-choose__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #e8edf3;
    cursor: pointer;
    /* Neutralise the theme's global button uppercasing (text-transform
       inherits into the label/blurb spans). */
    text-transform: none;
    letter-spacing: normal;
    transition: border-color .15s, background .15s;
}
.re-hub-choose__option:hover { border-color: rgba(68, 152, 216, 0.5); }
.re-hub-choose__option--selected {
    border-color: #E6AD23;
    background: rgba(230, 173, 35, 0.10);
}
.re-hub-choose__label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.re-hub-choose__blurb {
    display: block;
    color: #b9c4d0;
    font-size: 14px;
    line-height: 1.5;
}
.re-hub-choose__status {
    color: #8aa0b2;
    font-size: 14px;
    min-height: 20px;
}

@media (min-width: 640px) {
    .re-hub__greeting { font-size: 28px; }
    .re-hub-choose__options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── In-CRM softphone (Calling & SMS add-on) ─────────────────────────────────
   Sales Triage dark theme: dark panel, blue (#4498D8) names, mustard (#E6AD23)
   active-call accent; functional green answer / red end. A compact bottom-right
   pill when idle that grows into a card for an incoming / active call (or when a
   notice is showing). Mobile-first: the base rule is the small case. */
.re-softphone {
    /* Positioning is owned by the floating dock (re-floating-dock.css). */
    box-sizing: border-box;
    width: auto;                       /* content-sized pill when idle */
    max-width: calc(100vw - 32px);
    padding: 8px 14px;
    background: #16232C;
    color: #E7EDF1;
    border: 1px solid #2A3B47;
    border-radius: 999px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Grow into a card when a call is coming in / active, or a notice is showing. */
.re-softphone[data-state="incoming"],
.re-softphone[data-state="active"],
.re-softphone:has(.re-softphone__notice:not([hidden])),
.re-softphone:has(.re-softphone__dialpad:not([hidden])) {
    width: 300px;
    border-radius: 14px;
    padding: 12px 14px;
}
.re-softphone[data-state="active"] { border-color: #E6AD23; }
/* Respect the hidden attribute: the display rules below (flex on the root and
   the incoming/active panels) otherwise override the browser's [hidden] rule,
   so every state would show at once. */
.re-softphone[hidden],
.re-softphone__incoming[hidden],
.re-softphone__active[hidden],
.re-softphone__notice[hidden] { display: none !important; }
/* !important beats the theme's aggressive `button {border/background !important}`
   rule (my class selector is more specific than the bare `button`). Without it
   the pill picks up the theme's border + fill. */
.re-softphone__bar { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; appearance: none; border: 0 !important; background: transparent !important; color: inherit; padding: 0 !important; margin: 0 !important; font: inherit; text-align: left; text-transform: none; letter-spacing: normal; box-shadow: none !important; cursor: pointer; }
.re-softphone__bar:hover .re-softphone__status { color: #E7EDF1; }
/* No focus ring on mouse click (it traced a second border around the pill);
   keep a clear ring for keyboard users only. */
.re-softphone__bar:focus { outline: none; }
.re-softphone__bar:focus-visible { outline: 2px solid #4498D8; outline-offset: 2px; border-radius: 999px; }
.re-softphone__dot { width: 9px; height: 9px; border-radius: 50%; background: #5A6B76; flex: 0 0 auto; }
.re-softphone__dot[data-online="1"] { background: #37B24D; }
.re-softphone__dot[data-online="pending"] { background: #E6AD23; }
.re-softphone__dot[data-online="calling"] { background: #37B24D; animation: re-sp-pulse 1s ease-in-out infinite; }
@keyframes re-sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.re-softphone__status { font-size: 13px; color: #B7C4CD; min-width: 0; }
.re-softphone__num { margin-left: auto; font-size: 13px; font-weight: 600; color: #4498D8; }
.re-softphone__notice { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: #F4E3B8; background: rgba(230, 173, 35, 0.12); border: 1px solid rgba(230, 173, 35, 0.35); border-radius: 6px; padding: 8px 10px; }
.re-softphone__incoming,
.re-softphone__active { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.re-softphone__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.re-softphone__name { font-size: 15px; font-weight: 600; color: #4498D8; word-break: break-word; }
.re-softphone[data-state="active"] .re-softphone__name { color: #E6AD23; }
.re-softphone__sub { font-size: 12px; color: #B7C4CD; }
.re-softphone__open { font-size: 12px; color: #4498D8; text-decoration: underline; }
.re-softphone__timer { font-size: 13px; color: #E6AD23; font-variant-numeric: tabular-nums; }
.re-softphone__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
/* !important throughout so the theme's `button {...!important}` can't flatten
   the neutral fill or the green/red action colours. */
.re-softphone__btn {
    appearance: none;
    border: 1px solid #38505E !important;
    background: #22333E !important;
    color: #E7EDF1 !important;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.re-softphone__btn:hover { background: #2B3F4B !important; }
.re-softphone__btn--answer { background: #37B24D !important; border-color: #37B24D !important; color: #fff !important; }
.re-softphone__btn--answer:hover { background: #2F9E44 !important; }
.re-softphone__btn--end { background: #D9534F !important; border-color: #D9534F !important; color: #fff !important; }
.re-softphone__btn--end:hover { background: #C9302C !important; }
/* Click-to-call affordance on contact phone numbers. */
.re-detail-tel { display: inline-flex; align-items: center; gap: 6px; }
.re-detail-tel__glyph { flex: 0 0 auto; opacity: 0.7; }
.re-detail-tel:hover .re-detail-tel__glyph { opacity: 1; }

/* Dialpad: free-dial an arbitrary number from the status bar. */
.re-softphone__dialpad { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.re-softphone__dialpad[hidden] { display: none !important; }
.re-softphone__dialhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.re-softphone__dialtitle { font-size: 12px; color: #B7C4CD; }
.re-softphone__dialclose { appearance: none; border: 0 !important; background: transparent !important; color: #B7C4CD !important; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px !important; text-transform: none; }
.re-softphone__dialclose:hover { color: #E7EDF1 !important; }
.re-softphone__dialinput {
    width: 100%; box-sizing: border-box;
    background: #17252E !important; border: 1px solid #38505E !important; border-radius: 8px;
    color: #E7EDF1 !important; font-size: 18px; font-weight: 600; letter-spacing: 1px;
    text-align: center; padding: 10px 12px;
}
.re-softphone__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.re-softphone__key {
    appearance: none; border: 1px solid #38505E !important; background: #22333E !important; color: #E7EDF1 !important;
    border-radius: 8px; padding: 12px 0; font-size: 18px; font-weight: 600; cursor: pointer;
}
.re-softphone__key:hover { background: #2B3F4B !important; }
.re-softphone__dialactions { display: flex; align-items: center; gap: 8px; }
.re-softphone__dialback {
    appearance: none; border: 1px solid #38505E !important; background: #22333E !important; color: #E7EDF1 !important;
    border-radius: 8px; padding: 8px 14px; font-size: 16px; cursor: pointer; flex: 0 0 auto;
}
.re-softphone__dialback:hover { background: #2B3F4B !important; }
.re-softphone__dialcall { flex: 1 1 auto; }

/* Assign-this-call resolver on a My Day task (attach / new contact / dismiss). */
.re-callresolve { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; min-width: 0; }
.re-callresolve__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.re-callresolve__panel { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.re-callresolve__panel[hidden] { display: none; }
.re-callresolve__search,
.re-callresolve__create input {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px;
    border: 1px solid #38505E !important; background: #17252E !important; color: #E7EDF1 !important; font-size: 13px;
}
.re-callresolve__create { display: flex; flex-wrap: wrap; gap: 6px; }
.re-callresolve__create input { flex: 1 1 120px; min-width: 0; }
.re-callresolve__results { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.re-callresolve__result {
    text-align: left; padding: 8px 10px; border-radius: 6px; border: 1px solid #38505E !important;
    background: #22333E !important; color: #E7EDF1 !important; font-size: 13px; cursor: pointer;
}
.re-callresolve__result:hover { background: #2B3F4B !important; }
.re-callresolve__none,
.re-callresolve__err { font-size: 12.5px; color: #B7C4CD; margin: 2px 0; }
.re-callresolve__err { color: #F1B0B0; }

/* =========================================================
   SDR dashboard  [re_sdr_dashboard]
   Mobile-first (base works at 390px); dark theme.
   ========================================================= */

.re-sdr { max-width: 960px; }

.re-sdr__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.re-sdr__title { color: #4498D8; font-size: 22px; margin: 0; }

.re-sdr__orgswitch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.re-sdr__orgswitch label { color: #8aa0b2; font-size: 14px; }
.re-sdr__orgselect {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    color: #e8edf3;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 8px 10px;
}
.re-sdr__orgstatus { color: #E6AD23; font-size: 13px; min-width: 0; }

.re-sdr__banner {
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.re-sdr__banner strong { display: block; margin-bottom: 2px; }
.re-sdr__banner a { color: #4498D8; }
.re-sdr__banner--lock { background: rgba(230, 173, 35, 0.10); border-color: rgba(230, 173, 35, 0.35); }
.re-sdr__banner--go   { background: rgba(68, 152, 216, 0.10); border-color: rgba(68, 152, 216, 0.30); }

.re-sdr__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.re-sdr__card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.re-sdr__card-label { color: #8aa0b2; font-size: 13px; }
.re-sdr__card-value { color: #e8edf3; font-size: 26px; font-weight: 600; }
.re-sdr__card-sub   { color: #8aa0b2; font-size: 12px; }

.re-sdr__section { margin-bottom: 28px; }
.re-sdr__h2 { color: #e8edf3; font-size: 17px; margin: 0 0 12px; }
.re-sdr__empty { color: #8aa0b2; font-size: 14px; }

.re-sdr__tablewrap { overflow-x: auto; }
.re-sdr__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.re-sdr__table th {
    text-align: left;
    color: #8aa0b2;
    font-weight: 500;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
}
.re-sdr__table td {
    color: #cfd6e0;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.re-sdr__amt--neg { color: #e0736f; }
.re-sdr__amt--pos { color: #5bbf7b; }

.re-sdr__pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #cfd6e0;
}
.re-sdr__pill--honored { background: rgba(91, 191, 123, 0.18); color: #7fd39a; }
.re-sdr__pill--no_show { background: rgba(224, 115, 111, 0.18); color: #e0938f; }
.re-sdr__pill--booked  { background: rgba(68, 152, 216, 0.18); color: #7ab8e2; }

@media (min-width: 640px) {
    .re-sdr__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .re-sdr__head { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   Voice practice rooms - [re_practice_room]
   Dark theme (matches .re-meeting-plan / .re-meeting-room), mobile-first.
   ========================================================================== */

.re-practice-room {
    color: #e6edf3;
    max-width: 720px;
    margin: 0 auto;
}

.re-practice-room__title {
    color: #4498D8;
    margin: 12px 0 6px;
}

.re-practice-room__intro {
    color: #c9d4dd;
    margin: 0 0 20px;
}

.re-practice-room__section-title {
    color: #4498D8;
    font-size: 16px;
    margin: 24px 0 10px;
}

.re-practice-room__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 16px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    text-align: center;
}

.re-practice-room__status {
    color: #c9d4dd;
    min-height: 1.4em;
}

.re-practice-room__orb {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, #1e3a5f, #0d1f33);
    border: 1px solid #1e3a5f;
}

.re-practice-room__orb-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #8aa0b2;
    transition: transform 0.2s ease, background 0.2s ease;
}

.re-practice-room__orb.is-live .re-practice-room__orb-dot {
    background: #4498D8;
    animation: re-practice-pulse 1.4s ease-in-out infinite;
}

@keyframes re-practice-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(68, 152, 216, 0.5); }
    50% { transform: scale(1.25); box-shadow: 0 0 0 14px rgba(68, 152, 216, 0); }
}

.re-practice-room__timer {
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    color: #e6edf3;
}

.re-practice-room__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.re-practice-room__captions {
    margin-top: 8px;
}

.re-practice-room__caption-log {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 14px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
}

.re-practice-room__caption {
    margin: 0 0 8px;
    line-height: 1.5;
}

.re-practice-room__caption-who {
    font-weight: 600;
}

.re-practice-room__caption--user .re-practice-room__caption-who { color: #91CAEA; }
.re-practice-room__caption--assistant .re-practice-room__caption-who { color: #E6AD23; }

.re-practice-room__feedback {
    margin-top: 8px;
    padding: 16px 18px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
}

.re-practice-room__feedback-status {
    color: #c9d4dd;
}

.re-practice-room__feedback-body {
    color: #e6edf3;
    line-height: 1.6;
}

.re-practice-room__feedback-body p { margin: 0 0 12px; }

@media (min-width: 480px) {
    .re-practice-room__orb { width: 120px; height: 120px; }
}

/* ============================================================================
   Routes in and prospecting path
   - Opportunity panel (.re-detail-ppath): the ladder mapped onto the deal's
     contacts, routes-in groups, "Prospect the next person".
   - Playbooks-page editor (.re-ppath-editor): the per-account definition.
   Mobile-first: base works at 390px, columns only behind min-width queries.
   ========================================================================== */
.re-btn--xs { padding: 3px 9px; font-size: 11px; }

/* "Next up the ladder" banner */
.re-ppath-next {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    margin: 0 0 16px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-left: 3px solid #4498D8;
    border-radius: 8px;
}
.re-ppath-next__text { color: #c9d4dd; min-width: 0; }
.re-ppath-next__text strong { color: #e6edf3; }
.re-ppath-next__rung {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    font-size: 12px;
    color: #91CAEA;
    background: rgba(68, 152, 216, 0.12);
    border-radius: 999px;
}
.re-ppath-next .re-btn { align-self: flex-start; }

.re-ppath-subhead {
    color: #c9d4dd;
    font-size: 14px;
    margin: 18px 0 8px;
}

/* Routes-in group - a compact reference, not slots to fill. The personas are
   small muted suggestion pills; identified route-in contacts show as chips. */
.re-ppath-routes { margin: 0 0 6px; }
.re-ppath-routes__hint {
    color: #8aa0b2;
    font-size: 12px;
    margin: 0 0 8px;
}
.re-ppath-suggests {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.re-ppath-suggest {
    padding: 3px 10px;
    font-size: 12px;
    color: #c9d4dd;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #1e3a5f;
    border-radius: 999px;
    min-width: 0;
}
.re-ppath-routes__people { margin-top: 8px; }

/* The ordered ladder */
.re-ppath-rungs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-ppath-rung {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}
.re-ppath-rung.is-gap { border-style: dashed; }
.re-ppath-rung__order {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #91CAEA;
    background: rgba(68, 152, 216, 0.12);
    border-radius: 999px;
}
.re-ppath-rung__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.re-ppath-rung__label { color: #e6edf3; font-weight: 600; }
.re-ppath-rung__hint { color: #8aa0b2; font-size: 12px; }
/* Always-present per-rung action row (Find people), kept out of the sortable
   dropzone so dropped chips can't land after it and knock the row out of line. */
.re-ppath-rung__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Contact chips (shared by rungs, routes-in, unplaced) */
.re-ppath-people {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.re-ppath-chip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    min-width: 0;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    cursor: grab;
}
.re-ppath-chip:active { cursor: grabbing; }
/* Empty drop zones still need to be a droppable target with some height. */
.re-ppath-people[data-ppath-dropzone] { min-height: 34px; }
.re-ppath-chip.sortable-chosen { opacity: 0.9; }
.re-ppath-chip.sortable-ghost { opacity: 0.4; }
.re-ppath-chip__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.re-ppath-chip__name { color: #91CAEA; font-weight: 600; }
.re-ppath-chip__name:visited { color: #91CAEA; }
.re-ppath-chip__title { color: #8aa0b2; font-size: 12px; }
.re-ppath-chip__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
/* Shown in place of "Start playbook" when the contact is already in motion
   (on an active playbook, or moved past Suspect on this deal). */
.re-ppath-chip__stage {
    padding: 2px 9px;
    font-size: 11px;
    color: #91CAEA;
    background: rgba(68, 152, 216, 0.12);
    border-radius: 999px;
}

/* Gap marker - deliberately not the mustard token (that is selected/required
   only); a muted dashed circle reads as "nobody here yet". */
.re-ppath-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-weight: 700;
    color: #8aa0b2;
    border: 1px dashed #3a5573;
    border-radius: 999px;
}
.re-ppath-note { color: #8aa0b2; font-size: 13px; margin: 0 0 8px; }

/* Playbooks-page editor */
.re-ppath-editor {
    margin-top: 28px;
    padding: 16px;
    background: #0d1f33;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
}
.re-ppath-editor h2 { color: #4498D8; margin: 0 0 8px; }
.re-ppath-editor__intro { color: #c9d4dd; margin: 0 0 14px; }
.re-ppath-editor__rebuild {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
}
.re-ppath-editor__rebuild .re-btn { align-self: flex-start; }
.re-ppath-editor__hint { color: #8aa0b2; font-size: 12px; }
.re-ppath-editor__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.re-ppath-editor__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.re-ppath-editor__label { color: #c9d4dd; font-weight: 600; }
.re-ppath-editor__help { color: #8aa0b2; font-size: 12px; }
.re-ppath-editor__help code {
    color: #91CAEA;
    background: rgba(68, 152, 216, 0.10);
    padding: 1px 5px;
    border-radius: 4px;
}
.re-ppath-editor textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    color: #e6edf3;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
}
.re-ppath-editor__actions { display: flex; }

/* Structured-row editor: routes-in + rungs, each row a set of fields with a
   playbook dropdown. Rungs are drag-reorderable (top row = first prospected). */
.re-ppath-editor__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-ppath-editor__group-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.re-ppath-editor__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.re-ppath-editor__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
}
.re-ppath-editor__row.sortable-ghost { opacity: 0.4; }
.re-ppath-editor__row-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
@media (min-width: 720px) {
    .re-ppath-editor__row-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.re-ppath-editor__row-fields .re-input { width: 100%; box-sizing: border-box; }
/* The pain note spans the full row under the label / titles / playbook fields. */
.re-ppath-editor__pain { grid-column: 1 / -1; resize: vertical; font-family: inherit; }
.re-ppath-editor__drag {
    flex: 0 0 auto;
    cursor: grab;
    color: #8aa0b2;
    padding: 8px 2px;
    font-weight: 700;
    letter-spacing: -2px;
    user-select: none;
}
.re-ppath-editor__drag:active { cursor: grabbing; }

/* Add-route-contact modal: create-new / find-existing tabs + result picks */
.re-ppath-addroute-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.re-ppath-addroute-tab {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid #1e3a5f;
    background: #0a1929;
    color: #c9d4dd;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}
.re-ppath-addroute-tab.is-active {
    border-color: #4498D8;
    color: #91CAEA;
    background: rgba(68, 152, 216, 0.12);
}
.re-addc-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@media (min-width: 480px) {
    .re-addc-field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.re-addc-field__opt { color: #8aa0b2; font-weight: 400; font-size: 12px; }
.re-ppath-addroute-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
}
.re-ppath-addroute-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid #1e3a5f;
    background: #0a1929;
    color: #e6edf3;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}
.re-ppath-addroute-result.is-selected {
    border-color: #4498D8;
    background: rgba(68, 152, 216, 0.12);
}
.re-ppath-addroute-result__name { font-weight: 600; color: #91CAEA; }
.re-ppath-addroute-result__meta { color: #8aa0b2; font-size: 12px; }
.re-ppath-addroute-empty { color: #8aa0b2; font-size: 13px; margin: 6px 0 0; }

/* Ladder head row: subhead + "Fill the ladder" action */
.re-ppath-ladder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.re-ppath-ladder-head .re-ppath-subhead { margin-bottom: 0; }

/* Find-people modal: the query being run, then the candidate list */
.re-ppath-find-query {
    color: #c9d4dd;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: rgba(68, 152, 216, 0.10);
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    font-size: 13px;
}
.re-ppath-find-query strong { color: #e6edf3; }
.re-ppath-find-status { color: #c9d4dd; margin: 0 0 10px; }
.re-ppath-find-credits { color: #8aa0b2; font-size: 13px; margin: 10px 0 0; }
.re-ppath-find-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.re-ppath-find-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    cursor: pointer;
}
.re-ppath-find-row__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.re-ppath-find-row__name { color: #e6edf3; }
.re-ppath-find-row__title { color: #8aa0b2; font-size: 12px; }
.re-ppath-find-row__cost {
    flex: 0 0 auto;
    color: #91CAEA;
    font-size: 12px;
}
/* The shared modal foot has no bottom padding, leaving the buttons tight
   against the dialog edge - give this overlay some breathing room below them. */
.re-ppath-find-modal .re-dialog__foot { padding: 6px 20px 22px; }
/* Make a disabled Reveal button obviously non-clickable (e.g. not enough
   credits for the current selection) rather than looking active. */
.re-ppath-find-modal .re-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (min-width: 480px) {
    .re-ppath-next {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .re-ppath-chip { flex-direction: row; align-items: center; gap: 12px; }
    .re-ppath-chip__actions { flex-wrap: nowrap; }
}