@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* CliniContact Bridge — design tokens + shared components.
   Re-tokened to match the CliniContact / Horizon redesign: Fraunces display
   + Hanken Grotesk body, a brighter blue that pops into teal. Only the CLIENT
   surfaces load bridge.css, so the participant Beacon pages keep their own
   look. Component classes below read these vars, so re-tokening propagates. */
:root {
    --cc-navy: #0b1a2e;
    --cc-royal: #2563eb;
    --cc-royal-ink: #1d4ed8;
    --cc-sky: #4ba0f8;
    --cc-cyan: #22c8b6;      /* teal pop, matching Horizon's Bridge hue */
    --cc-mint: #e7f0ff;
    --cc-ink: #0f172a;
    --cc-muted: #64748b;
    --cc-line: rgba(15, 23, 42, 0.10);
    --cc-grad: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --cc-grad-bright: linear-gradient(100deg, #2f6bff 0%, #4ba0f8 46%, #22c8b6 100%);
    --cc-glow: 0 12px 28px rgba(37, 99, 235, 0.24);
    --cc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --cc-font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Brand type. Hanken on body, Fraunces on headings. Scoped to the surfaces
   that load bridge.css (client / partner / share), never the Beacon pages. */
body { font-family: var(--cc-font-ui); }
h1, h2, h3, .font-display {
    font-family: var(--cc-font-display);
    letter-spacing: -0.015em;
}

.text-cc-royal { color: var(--cc-royal); }
.text-cc-navy  { color: var(--cc-navy); }
.text-cc-ink   { color: var(--cc-ink); }
.text-cc-muted { color: var(--cc-muted); }
.bg-cc-mint    { background-color: var(--cc-mint); }
.bg-cc-navy    { background-color: var(--cc-navy); }
.bg-cc-royal   { background-color: var(--cc-royal); }
.bg-cc-ink     { background-color: var(--cc-ink); }

.surface-card {
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(19, 38, 86, 0.04), 0 8px 24px rgba(19, 38, 86, 0.04);
}

.glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid var(--cc-line);
    border-radius: 28px;
}

.cc-input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #0f172a;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cc-input:focus {
    outline: none;
    border-color: var(--cc-royal);
    box-shadow: 0 0 0 4px rgba(37, 80, 230, 0.15);
    background-color: #fff;
}

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: box-shadow 0.15s, transform 0.1s, background-color 0.15s;
}
.cc-btn-primary {
    background: var(--cc-grad);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: var(--cc-glow);
}
.cc-btn-primary:hover { box-shadow: 0 16px 34px rgba(37, 99, 235, 0.34); transform: translateY(-1px); }
.cc-btn-primary:active { transform: translateY(1px); }
.cc-btn-ghost {
    background-color: #f1f5f9;
    color: #0f172a;
}
.cc-btn-ghost:hover { background-color: #e2e8f0; }

.cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--cc-mint);
    color: var(--cc-navy);
}
.cc-chip.muted { background: #eef2f7; color: var(--cc-muted); }
.cc-chip.warn  { background: #fef3c7; color: #92400e; }
.cc-chip.ok    { background: #dcfce7; color: #065f46; }

.cc-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cc-muted);
    margin-bottom: 0.5rem;
}

.portal-shell {
    background:
        radial-gradient(circle at top left, rgba(94, 190, 255, 0.18), transparent 24rem),
        linear-gradient(180deg, #eef7ff 0%, #f7fbff 45%, #f8fafc 100%);
    border: 1px solid rgba(94, 190, 255, 0.2);
    border-radius: 30px;
    box-shadow: 0 24px 60px rgba(37, 80, 230, 0.08);
}

.portal-hero {
    background:
        radial-gradient(circle at 90% -10%, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(115deg, #17368f 0%, #2563eb 44%, #12a594 100%);
    color: #fff;
    border-radius: 28px;
    overflow: hidden;
}

.portal-panel {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.portal-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 0.125rem;
    margin-right: 1.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cc-muted);
}

.portal-tab.active {
    color: var(--cc-royal);
}

.portal-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px;
    background: var(--cc-royal);
}

.metric-card {
    border: 1px solid rgba(19, 38, 86, 0.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(19, 38, 86, 0.05);
}

.metric-card-soft {
    border: 1px solid rgba(19, 38, 86, 0.08);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.95));
}

.series-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.series-bar {
    height: 0.7rem;
    border-radius: 999px;
    background: #e9eef7;
    overflow: hidden;
}

.series-bar-fill {
    height: 100%;
    border-radius: inherit;
}

.trend-stack {
    display: flex;
    align-items: end;
    gap: 0.45rem;
    height: 210px;
    /* Safety: clip any segments that exceed the container despite the
       widthratio scaling on the template side. Prevents the chart from
       visually leaking into adjacent cards if the math is ever off. */
    overflow: hidden;
}

.trend-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 0.2rem;
}

.trend-segment {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.usa-map {
    position: relative;
    min-height: 356px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(94, 190, 255, 0.22), transparent 22%),
        linear-gradient(180deg, rgba(37, 80, 230, 0.03), rgba(94, 190, 255, 0.08));
    border: 1px solid rgba(19, 38, 86, 0.08);
    overflow: hidden;
}

.usa-map-mainland,
.usa-map-alaska,
.usa-map-hawaii {
    position: absolute;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 237, 252, 0.96));
    border: 1px solid rgba(19, 38, 86, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.usa-map-mainland {
    left: 8%;
    top: 11%;
    width: 78%;
    height: 66%;
    clip-path: polygon(4% 12%, 10% 4%, 18% 5%, 23% 2%, 35% 4%, 42% 10%, 54% 8%, 63% 13%, 74% 10%, 83% 16%, 92% 18%, 98% 29%, 95% 41%, 98% 51%, 92% 62%, 86% 63%, 84% 72%, 77% 77%, 72% 91%, 61% 92%, 56% 87%, 48% 88%, 43% 83%, 36% 82%, 30% 73%, 22% 68%, 16% 62%, 10% 54%, 6% 44%, 3% 32%);
}

.usa-map-alaska {
    left: 8%;
    bottom: 10%;
    width: 18%;
    height: 12%;
    clip-path: polygon(4% 48%, 15% 28%, 34% 24%, 45% 30%, 64% 22%, 86% 32%, 95% 46%, 84% 58%, 70% 62%, 54% 74%, 28% 72%, 10% 62%);
}

.usa-map-hawaii {
    left: 29%;
    bottom: 12%;
    width: 10%;
    height: 6%;
    clip-path: polygon(5% 52%, 20% 34%, 42% 40%, 60% 22%, 84% 36%, 92% 58%, 74% 72%, 38% 70%, 18% 66%);
}

.usa-map-point {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: calc(12px + (var(--point-alpha) * 14px));
    height: calc(12px + (var(--point-alpha) * 14px));
    border-radius: 999px;
    border: 1px solid rgba(37, 80, 230, 0.18);
    background: linear-gradient(
        180deg,
        rgba(94, 190, 255, calc(0.26 + (var(--point-alpha) * 0.34))),
        rgba(37, 80, 230, calc(0.48 + (var(--point-alpha) * 0.24)))
    );
    box-shadow: 0 10px 22px rgba(37, 80, 230, 0.18);
    opacity: 0.92;
}

.timeline-track {
    height: 0.75rem;
    border-radius: 999px;
    overflow: hidden;
    background: #e6edf8;
}

.timeline-track-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cc-sky), var(--cc-royal));
}

.assistant-bubble {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(94, 190, 255, 0.16), rgba(37, 80, 230, 0.06));
    border: 1px solid rgba(37, 80, 230, 0.08);
}

.pie-card {
    width: 168px;
    height: 168px;
    margin: 0 auto;
    border-radius: 999px;
    background: conic-gradient(var(--pie-stops));
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(19, 38, 86, 0.05);
}

.pie-card::after {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(19, 38, 86, 0.04);
}

.pie-card-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pie-card-center span {
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--cc-ink);
    line-height: 1;
}

.pie-card-center small {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-muted);
}

.lead-table-card {
    overflow: hidden;
}

.lead-table-shell {
    overflow-x: auto;
    max-width: 100%;
}

.lead-table {
    width: 100%;
    border-collapse: collapse;
}

.lead-table th,
.lead-table td {
    vertical-align: top;
}

.row-open-cell {
    cursor: pointer;
}

.lead-row {
    cursor: pointer;
}

.lead-row:hover td {
    background-color: rgba(37, 80, 230, 0.025);
}

/* Action dropdown — native <details> menu, click-toggle, click-outside-to-close via JS */
.lead-actions-menu {
    position: relative;
}

.lead-actions-menu summary {
    list-style: none;
    user-select: none;
}

.lead-actions-menu summary::-webkit-details-marker {
    display: none;
}

.lead-actions-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 12rem;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(19, 38, 86, 0.12);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.lead-actions-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-size: 0.8125rem;
    border-radius: 10px;
    color: var(--cc-ink);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.lead-actions-item:hover {
    background: rgba(37, 80, 230, 0.08);
    color: var(--cc-royal);
}

/* Email type tags — Direct vs Generic discrimination on lead tables */
.email-tag {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.email-tag-direct {
    background: #dcfce7;
    color: #065f46;
}
.email-tag-generic {
    background: #fef3c7;
    color: #92400e;
}

@media (max-width: 768px) {
    .usa-map {
        min-height: 308px;
    }

    .usa-map-point {
        width: calc(10px + (var(--point-alpha) * 11px));
        height: calc(10px + (var(--point-alpha) * 11px));
    }
}

/* ── Partner network additions ────────────────────────────────────────
   Added with the /partners/ portal. All build on tokens defined above —
   no new colors, just compositions used by registration cards, value
   props, glyph badges, etc. See design_handoff_partner_network.       */

.cc-chip.royal {
    background: rgba(37, 80, 230, 0.12);
    color: var(--cc-royal);
}

.cc-btn-navy {
    background-color: var(--cc-navy);
    color: #fff;
}
.cc-btn-navy:hover { background-color: #0a1638; }
.cc-btn-navy:active { transform: translateY(1px); }

.type-card {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--cc-line);
    border-radius: 16px;
    background: #fff;
    padding: 1rem 1.125rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    cursor: pointer;
}
.type-card:hover { border-color: rgba(37, 80, 230, 0.4); }
.type-card.selected {
    border-color: var(--cc-royal);
    background: rgba(37, 80, 230, 0.04);
    box-shadow: 0 0 0 3px rgba(37, 80, 230, 0.12);
}

.glyph-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: rgba(37, 80, 230, 0.12);
    color: var(--cc-royal);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.divider-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--cc-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 1.5rem 0;
}
.divider-or::before,
.divider-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cc-line);
}

.placeholder-tile {
    border: 1px dashed rgba(19, 38, 86, 0.24);
    background:
        repeating-linear-gradient(
            45deg,
            rgba(19, 38, 86, 0.04) 0 10px,
            transparent 10px 20px
        );
    border-radius: 18px;
    padding: 1.25rem;
    color: var(--cc-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

/* ── Intake / agent shared components ─────────────────────────────────
   Promoted from the new intake flow so the same look is reused across the
   whole app: the numbered stepper, stat tiles, the "drafted · awaiting
   approval" review card, and the sequential heat ramp for the site grid.
   All built on the tokens above — one design system, no new colors.      */

.cc-stepper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cc-muted);
    margin-bottom: 1.5rem;
}
.cc-step { display: inline-flex; align-items: center; gap: 0.4rem; }
.cc-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; border-radius: 999px;
    background: #eef2f7; color: var(--cc-muted); font-weight: 800;
}
.cc-step.active { color: var(--cc-royal); }
.cc-step.active .cc-step-num { background: var(--cc-royal); color: #fff; }
.cc-step.done .cc-step-num { background: #059669; color: #fff; }
.cc-step-line { width: 2rem; height: 1px; background: var(--cc-line); }

/* Stat tile — the small "big number + label" cards (replaces ad-hoc
   bg-white rounded-xl tiles). Use .ok for the success/enrolled accent. */
.cc-stat {
    border: 1px solid var(--cc-line);
    border-radius: 16px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(19, 38, 86, 0.04);
    /* Grid/flex children default to min-width:auto, which refuses to shrink
       below their content — a 7-digit catchment population then spilled
       outside the card in the 4-across layout. */
    min-width: 0;
    /* Lets the number below size itself against this box (cqi). */
    container-type: inline-size;
}
/* Scales with the CARD, not the viewport. These sit 4-across inside a
   half-width panel, so the cell stays ~135px however wide the window gets —
   a viewport unit (vw) reads "plenty of room" and leaves a 7-digit
   population spilling out. cqi measures the stat box itself, so the number
   shrinks exactly when its own column is tight. Plain rem first as the
   fallback for anything without container-query units. */
.cc-stat b {
    display: block;
    font-size: 1.5rem;
    font-size: clamp(0.95rem, 12cqi, 1.5rem);
    font-weight: 800;
    color: var(--cc-ink);
    line-height: 1.1;
    overflow-wrap: anywhere;   /* last-resort: wrap rather than escape the card */
}
.cc-stat span { display: block; font-size: 0.72rem; color: var(--cc-muted); overflow-wrap: anywhere; }
.cc-stat.ok { border-color: #a7f3d0; }
.cc-stat.ok b { color: #065f46; }
.cc-stat.ok span { color: #059669; }

/* Review card — surface-card with a status accent, for "drafted · awaiting
   approval" and Needs-You queue items. */
.cc-review-card { position: relative; }
.cc-review-card.pending { border-color: rgba(217, 119, 6, 0.35); }

/* Sequential single-hue (emerald) heat ramp for the Sites × Studies matrix —
   enrolled magnitude, light→dark. Shared so the grid + legend agree. */
.cc-heat {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; padding: 5px 8px; border-radius: 8px;
    font-size: 12px; font-weight: 700; line-height: 1;
}
.cc-heat-0 { background: #f1f5f9; color: #94a3b8; }
.cc-heat-1 { background: #ecfdf5; color: #065f46; }
.cc-heat-2 { background: #d1fae5; color: #065f46; }
.cc-heat-3 { background: #a7f3d0; color: #065f46; }
.cc-heat-4 { background: #34d399; color: #053b2c; }
.cc-heat-5 { background: #059669; color: #ffffff; }

/* Respect prefers-reduced-motion: collapse the small transitions on
   type-card / cc-btn so users with motion sensitivity don't get the
   hover/press bounce. */
@media (prefers-reduced-motion: reduce) {
    .type-card,
    .cc-btn,
    .cc-btn-primary,
    .cc-btn-ghost,
    .cc-btn-navy,
    .cc-input {
        transition: none !important;
    }
    .cc-btn-primary:active,
    .cc-btn-navy:active {
        transform: none !important;
    }
}

/* ── /bridge promo banner ── */
.bridge-promo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 20px;
    border-radius: 16px;
    color: #fff;
    text-align: center;
    background: linear-gradient(100deg, #2f6bff, #4ba0f8 46%, #22c8b6);
    box-shadow: 0 14px 32px -20px rgba(37, 99, 235, 0.7);
}
.bridge-promo .bp-msg { font-size: 14px; line-height: 1.4; margin: 0; max-width: 68ch; }
.bridge-promo .bp-amt { background: rgba(255, 255, 255, 0.18); border-radius: 7px; padding: 1px 8px; font-weight: 800; }
.bridge-promo .bp-tag {
    display: inline-block; margin-left: 8px; vertical-align: middle;
    font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 3px 10px;
}
.bridge-promo .bp-actions { display: flex; align-items: center; gap: 8px; }
.bridge-promo .bp-cta {
    background: #fff; color: var(--cc-navy); font-weight: 800; font-size: 13px;
    padding: 9px 18px; border-radius: 999px; white-space: nowrap; text-decoration: none;
}
.bridge-promo .bp-x {
    background: rgba(255, 255, 255, 0.16); color: #fff; border: 0; cursor: pointer;
    width: 30px; height: 30px; border-radius: 999px; font-size: 12px; line-height: 1;
}
.bridge-promo .bp-x:hover { background: rgba(255, 255, 255, 0.3); }

/* ── /bridge form modal ── */
.form-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; }
.form-modal.open { display: flex; }
.form-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 26, 46, 0.55); backdrop-filter: blur(3px); }
.form-modal-card {
    position: relative; width: 100%; max-width: 680px; height: min(88vh, 900px);
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(11, 26, 46, 0.7); animation: formPop 0.18s ease-out;
}
@keyframes formPop { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.form-modal-x {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0;
    border-radius: 999px; background: rgba(15, 23, 42, 0.06); color: var(--cc-ink); cursor: pointer;
    font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.form-modal-x:hover { background: rgba(15, 23, 42, 0.12); }
.form-modal-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cc-muted); font-weight: 600; }
.form-modal-card.loaded .form-modal-loading { display: none; }
.form-modal-card iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; background: transparent; }
@media (max-width: 640px) { .form-modal-card { height: 92vh; max-width: 100%; } }