/* EduOutreach deliberately shares the Edu.Harbour Team Portal's visual system. */
:root {
    --black: #141414;
    --white: #ffffff;
    --paper: #fafafa;
    --grey-1: #f0f0f0;
    --grey-2: #d9d9d9;
    --grey-3: #8a8a8a;
    --grey-4: #5c5c5c;
    --blue: hsl(211 100% 47%);
    --blue-dk: hsl(211 100% 38%);
    --green: #1f8a4c;
    --red: #c0392b;
    --amber: #8a6116;
    --sidebar-w: 250px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
    color: var(--black);
    background: var(--paper);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; letter-spacing: .02em; }
p { margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }
small, .muted, .hint { color: var(--grey-3); }
.hint { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* Layout */
.layout { display: flex; min-height: 100vh; }
.sidebar {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: var(--white);
    border-right: 1px dotted var(--black);
}
.main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-w);
}
.brand {
    display: block;
    padding: 26px 22px 20px;
    border-bottom: 1px dotted var(--grey-2);
    color: var(--black);
    text-align: center;
}
.brand:hover { text-decoration: none; }
.brand-logo { height: 46px; filter: invert(1); }
.brand-text {
    margin-top: 8px;
    color: var(--grey-4);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.nav { flex: 1; padding: 14px 0; overflow-y: auto; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    border-left: 3px solid transparent;
    color: var(--grey-4);
    font-size: 14px;
}
.nav-link i { width: 18px; text-align: center; font-size: 15px; }
.nav-link span { flex: 1; }
.nav-link:hover { background: var(--grey-1); color: var(--black); text-decoration: none; }
.nav-link.active { border-left-color: var(--black); color: var(--black); font-weight: 600; }
.nav-link-muted { color: var(--grey-3); }
.nav-sep { height: 1px; margin: 13px 22px; background: var(--grey-2); }
.sidebar-foot { padding: 16px 22px; border-top: 1px dotted var(--grey-2); }
.who-name { font-size: 14px; font-weight: 600; }
.who-role { margin-bottom: 12px; color: var(--grey-3); font-size: 12px; }
.logout-btn {
    display: block;
    padding: 9px;
    border: 1px solid var(--black);
    border-radius: 999px;
    color: var(--black);
    font-size: 13px;
    text-align: center;
    transition: background .2s, color .2s;
}
.logout-btn:hover { background: var(--black); color: var(--white); text-decoration: none; }
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 36px;
    background: var(--white);
    border-bottom: 1px dotted var(--black);
}
.page-title { font-size: 22px; font-weight: 600; }
.menu-toggle {
    display: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--black);
    font-size: 20px;
}
.content { width: 100%; max-width: 1100px; padding: 32px 36px; }
.page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.page-head:empty { display: none; }
.section-intro { margin-bottom: 24px; color: var(--grey-4); }

/* Panels and grids */
.card {
    padding: 24px 26px;
    margin-bottom: 24px;
    border: 1px solid var(--grey-2);
    border-radius: 6px;
    background: var(--white);
}
.card h2 {
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px dotted var(--grey-2);
    color: var(--grey-4);
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.card h3 { margin: 14px 0 8px; font-size: 15px; }
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { border-top: 3px solid var(--black); }
.stat strong { display: block; font-size: 29px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { color: var(--grey-4); font-size: 13px; }

/* Campaign list and creation workspace */
.page-campaigns .content { max-width: 1500px; }
.campaigns-workspace { grid-template-columns: minmax(0, 1.7fr) minmax(360px, .8fr); align-items: start; }
.campaign-list-card, .campaign-create-card { min-width: 0; }
.campaign-list-card table { min-width: 0; }
.campaign-group { border: 1px solid var(--grey-2); border-radius: 5px; margin-bottom: 10px; }
.campaign-group:last-of-type { margin-bottom: 0; }
.campaign-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 15px; cursor: pointer; list-style: none; }
.campaign-group > summary::-webkit-details-marker { display: none; }
.campaign-group > summary:hover { background: var(--grey-1); }
.campaign-group[open] > summary { border-bottom: 1px dotted var(--grey-2); background: var(--grey-1); }
.campaign-group-meta { display: flex; align-items: center; color: var(--grey-3); font-size: 11px; white-space: nowrap; }
.campaign-group-meta i { margin-left: 9px; transition: transform .2s; }
.campaign-group[open] > summary .campaign-group-meta i { transform: rotate(180deg); }
.campaign-group table { margin: 0; }
.campaign-group table tr:last-child td { border-bottom: 0; }
.campaign-live-grid { display: grid; gap: 15px; }
.campaign-live-group + .campaign-live-group { padding-top: 13px; border-top: 1px dotted var(--grey-2); }
.campaign-live-group h3 { margin: 0 0 7px; color: var(--grey-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.campaign-live-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
.campaign-live-count { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.campaign-live-count strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.campaign-live-count span { color: var(--grey-4); font-size: 10px; text-align: right; }
.campaign-live-count.is-success strong { color: var(--green); }
.campaign-live-count.is-problem strong { color: var(--red); }
.campaign-live-updated { margin-top: 14px; color: var(--grey-3); font-size: 10px; }
.campaign-live-updated i { margin-right: 4px; }
.campaign-recipient-card { overflow-x: auto; }
.campaign-recipient-card table { min-width: 980px; }
.campaign-recipient-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; color: var(--grey-3); font-size: 11px; }
.campaign-recipient-legend i { margin-right: 5px; color: var(--green); font-size: 7px; animation: live-pulse 1.7s ease-in-out infinite; }
.campaign-recipient-row td { transition: background-color .25s ease; }
.campaign-recipient-row.is-delivered td { background: #f2faf5; }
.campaign-recipient-row.is-delivered td:first-child { box-shadow: inset 3px 0 0 #2f8a54; }
.campaign-recipient-row.is-problem td { background: #fff6f5; }
.campaign-recipient-row.is-problem td:first-child { box-shadow: inset 3px 0 0 var(--red); }
@keyframes live-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .campaign-recipient-legend i { animation: none; } }

/* Competition-led overview */
.overview-program-group + .overview-program-group { padding-top: 32px; margin-top: 38px; border-top: 2px solid var(--black); }
.overview-group-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.overview-group-heading h2 { font-size: 19px; }
.overview-group-heading p { margin: 2px 0 0; color: var(--grey-3); font-size: 12px; }
.overview-group-heading > span { color: var(--grey-3); font-size: 12px; }
.overview-group-heading .eyebrow i { width: 16px; margin-right: 4px; }
.closed-program-group .overview-group-heading { padding: 17px 20px; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--grey-1); }
.competition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 20px; }
.competition-card { margin-bottom: 0; padding: 0; overflow: hidden; }
.competition-card.is-closed { border-color: #c8c8c8; background: var(--grey-1); }
.competition-card.is-closed .competition-card-head, .competition-card.is-closed .campaign-checklist { opacity: .58; filter: grayscale(1); }
.competition-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 18px;
    border-bottom: 1px dotted var(--grey-2);
}
.competition-card-identity { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.competition-card-head h2 { margin: 2px 0 0; padding: 0; border: 0; color: var(--black); font-size: 17px; text-transform: none; }
.competition-card-head p { margin: 2px 0 0; color: var(--grey-3); font-size: 12px; }
.competition-abbr { color: var(--grey-3); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.competition-readiness { min-width: 112px; text-align: right; }
.competition-readiness strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.competition-readiness span, .competition-readiness small { display: block; color: var(--grey-3); font-size: 11px; }
.deadline-state { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; margin-top: 7px; border: 1px solid var(--grey-3); border-radius: 999px; color: var(--grey-4); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.campaign-check { display: grid; grid-template-columns: minmax(165px, 1.5fr) auto minmax(125px, 1fr) 22px; align-items: center; gap: 12px; min-height: 64px; padding: 12px 24px; border-bottom: 1px dotted var(--grey-2); }
.campaign-check:last-child { border-bottom: 0; }
.campaign-check-name { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.campaign-check-name i { width: 14px; color: var(--grey-3); text-align: center; }
.campaign-check-name .fa-circle-check { color: var(--green); }
.campaign-check-state { text-align: right; }
.campaign-send-progress { color: var(--grey-4); font-size: 11px; }
.mini-progress { height: 3px; margin-bottom: 4px; overflow: hidden; background: var(--grey-1); }
.mini-progress span { display: block; height: 100%; background: var(--black); }
.row-action { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--grey-3); }
.row-action:hover { color: var(--black); text-decoration: none; }

/* Portal-managed competition identities */
.program-symbol { flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--white); color: var(--grey-4); font-size: 10px; font-weight: 700; }
.program-symbol img { display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.program-symbol-large { width: 52px; height: 52px; }
.program-symbol-large img { padding: 5px; }
.program-symbol-medium { width: 42px; height: 42px; }
.program-symbol-fallback { background: var(--grey-1); }
.program-lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--black); }
.program-lockup-text, .program-lockup-text strong, .program-lockup-text small { display: block; }
.program-lockup-text strong { font-size: 12px; }
.program-lockup-text small { color: var(--grey-3); font-size: 10px; }

/* Search-first organization directory */
.search-panel { padding: 28px; }
.directory-search-form { display: block; }
.search-main { display: flex; align-items: flex-end; gap: 12px; width: 100%; }
.search-main .field { margin: 0; }
.search-input { min-height: 48px; padding: 11px 14px !important; border-color: var(--black) !important; font-size: 16px !important; }
.search-main button { min-width: 116px; min-height: 48px; }
.search-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: end; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px dotted var(--grey-2); }
.search-filters .field { min-width: 0; margin: 0; }
.new-organization-button { white-space: nowrap; text-align: center; }
.search-empty { padding: 70px 20px; color: var(--grey-3); text-align: center; }
.search-empty i { margin-bottom: 12px; font-size: 26px; }
.results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 30px 0 14px; }
.results-heading h2 { font-size: 17px; }
.results-heading span { color: var(--grey-3); font-size: 12px; }
.result-card .empty-hint, .empty-hint { padding: 20px 0; color: var(--grey-3); font-style: italic; }
.suppression-column { width: 34px; padding-right: 0; }
.suppression-cell { width: 34px; padding-right: 0; text-align: center; }
.suppression-mark { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; background: var(--red); color: var(--white); font-size: 14px; font-weight: 800; line-height: 1; }
.suppression-mark.large { width: 27px; height: 27px; font-size: 17px; }

/* Organization and contact profiles */
.profile-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 24px; margin-bottom: 24px; border: 1px solid var(--grey-2); border-radius: 6px; background: var(--white); }
.profile-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profile-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--black); color: var(--white); font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.organization-avatar { border-radius: 6px; background: var(--grey-1); color: var(--black); font-size: 19px; }
.profile-title-line { display: flex; align-items: center; gap: 10px; }
.profile-title-line h2 { font-size: 20px; }
.profile-identity p { margin: 2px 0 0; color: var(--grey-3); font-size: 13px; }
.profile-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.new-entity-layout { display: block; max-width: 880px; }
.entity-editor { width: 100%; }
.form-section + .form-section { margin-top: 24px; padding-top: 20px; border-top: 1px dotted var(--grey-2); }
.form-section h3 { margin: 0 0 14px; color: var(--grey-4); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.form-grid-clean { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid-clean .full { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.detail-heading h2 { padding: 0; border: 0; color: var(--black); font-size: 16px; text-transform: none; }
.contact-roster { padding: 0 0 18px; overflow: hidden; }
.contact-roster > .detail-heading { padding: 20px 20px 12px; margin: 0; border-bottom: 1px dotted var(--grey-2); }
.contact-roster > .button { margin: 16px 20px 0; }
.contact-list { max-height: 600px; overflow-y: auto; }
.contact-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px dotted var(--grey-2); color: var(--black); }
.contact-list-item:hover { background: var(--grey-1); text-decoration: none; }
/* The row is a container now that it carries a delete control: a form cannot sit inside the
   link, so the link covers the name and the control sits beside it. */
.contact-list-link { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; color: inherit; }
.contact-list-link:hover { text-decoration: none; }
.contact-list-body, .contact-list-body strong, .contact-list-body span, .contact-list-body small { display: block; min-width: 0; }
.contact-list-body strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.contact-list-body span { overflow: hidden; color: var(--grey-4); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.contact-list-body small { color: var(--grey-3); font-size: 10px; }
.contact-list-item > i { color: var(--grey-3); font-size: 10px; }
.organization-status-card, .organization-timeline-card { margin-top: 0; }
.organization-competition-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.organization-competition { min-width: 0; border: 1px solid var(--grey-2); border-radius: 5px; overflow: hidden; }
.organization-competition > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px dotted var(--grey-2); background: var(--grey-1); }
.organization-competition > header strong, .organization-competition > header span { display: block; }
.organization-competition > header strong { font-size: 13px; }
.organization-competition > header div > span { color: var(--grey-3); font-size: 10px; }
.organization-program-title { display: flex !important; align-items: center; gap: 10px; min-width: 0; }
.organization-competition-table { width: 100%; overflow-x: auto; }
.organization-competition table { min-width: 760px; font-size: 12px; }
.organization-competition th, .organization-competition td { padding: 8px 9px; }
.communication-subject { display: block; max-width: 180px; overflow: hidden; color: var(--grey-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.organization-timeline { max-width: 780px; }
.organization-timeline .timeline-item p { margin: 2px 0 0; color: var(--grey-3); font-size: 12px; }
.suppression-banner { display: flex; align-items: flex-start; gap: 13px; padding: 14px 18px; margin: -10px 0 24px; border: 1px solid #f3c6c0; border-radius: 5px; background: #fdecea; color: #8e2d24; }
.suppression-banner p { margin: 2px 0 0; font-size: 12px; }
.opportunity-record-title { display: flex; align-items: center; gap: 9px; }
.opportunity-record-title h3 { margin: 0; }
.opportunity-suppression-note { display: flex; flex-direction: column; gap: 1px; width: fit-content; max-width: 100%; margin-top: 9px; padding: 7px 10px; border: 1px solid #f3c6c0; border-radius: 4px; background: #fdecea; color: #8e2d24; font-size: 12px; line-height: 1.35; }
.opportunity-suppression-note strong { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.contact-status-card { padding: 0; overflow: hidden; }
.contact-status-card > .detail-heading { padding: 20px 20px 12px; margin: 0; border-bottom: 1px dotted var(--grey-2); }
.contact-status-row { display: grid; grid-template-columns: 118px minmax(145px, .8fr) minmax(120px, 1fr) auto; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px dotted var(--grey-2); }
.contact-status-row:last-child { border-bottom: 0; }
.contact-status-competition strong, .contact-status-competition span, .contact-status-last strong, .contact-status-last span { display: block; }
.contact-status-competition { display: flex; align-items: center; gap: 8px; }
.contact-status-competition strong { font-size: 12px; }
.contact-status-competition span { color: var(--grey-3); font-size: 10px; }
.contact-status-last { min-width: 0; }
.contact-status-last strong { font-size: 11px; }
.contact-status-last span { overflow: hidden; color: var(--grey-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.note-list { margin-bottom: 20px; }
.note-item { padding: 13px 0; border-bottom: 1px dotted var(--grey-2); }
.note-item:first-child { padding-top: 0; }
.note-body { font-size: 13px; white-space: normal; }
.note-full { margin: 8px 0 0; font-size: 12px; }
.note-full > summary { font-size: 11px; }
.note-full > div { max-height: 260px; padding: 10px; overflow: auto; border: 1px solid var(--grey-2); background: var(--paper); white-space: normal; }
.note-item footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--grey-3); font-size: 10px; }
.note-delete, .row-delete { width: 25px; height: 25px; padding: 0; border: 0; background: transparent; color: var(--red); }
.note-delete:hover, .row-delete:hover { background: #fdecea; color: var(--red); }
.note-composer { padding-top: 18px; border-top: 1px dotted var(--grey-2); }
.note-composer label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; }
.note-composer textarea { min-height: 95px; margin-bottom: 8px; }

/* Campaign and synchronized program metadata */
.page-templates .content { max-width: 1480px; }
.template-program { margin-bottom: 38px; }
.template-program-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 2px 12px; }
.template-program-head > div { display: flex; align-items: center; gap: 12px; }
.template-program-head h2 { padding: 0; margin: 0; border: 0; color: var(--black); font-size: 17px; text-transform: none; }
.template-program-head > span { color: var(--grey-3); font-size: 11px; }
.template-workspace { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
.template-workspace.has-focused-template { grid-template-columns: minmax(0, 1fr) 360px; }
.template-list { min-width: 0; padding: 20px 24px 24px; margin: 0; }
.template-editor-shell { margin-bottom: 12px; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--white); overflow: hidden; }
.template-editor-shell:last-child { margin-bottom: 0; }
.template-editor-shell > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; cursor: pointer; list-style: none; }
.template-editor-shell > summary::-webkit-details-marker { display: none; }
.template-editor-shell > summary:hover { background: var(--grey-1); }
.template-editor-shell > summary span:first-child strong, .template-editor-shell > summary span:first-child small { display: block; }
.template-editor-shell > summary span:first-child strong { font-size: 14px; }
.template-editor-shell > summary span:first-child small { color: var(--grey-3); font-size: 10px; }
.template-editor-shell > summary > span:last-child { color: var(--grey-3); font-size: 11px; white-space: nowrap; }
.template-editor-shell > summary i { margin-left: 7px; transition: transform .2s; }
.template-editor-shell[open] > summary { border-bottom: 1px dotted var(--grey-2); background: var(--grey-1); }
.template-editor-shell[open] > summary i { transform: rotate(180deg); }
.template-editor { padding: 20px; }
.template-html-source { min-height: 360px; }
.email-preview { margin: 22px 0 18px; border: 1px solid var(--grey-2); border-radius: 6px; background: var(--paper); overflow: hidden; }
.email-preview > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--grey-2); background: var(--white); }
.email-preview > header strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.email-preview > header > span { color: var(--grey-3); font-size: 10px; text-transform: uppercase; white-space: nowrap; }
.email-preview-envelope { display: grid; gap: 3px; padding: 10px 17px; border-bottom: 1px dotted var(--grey-2); color: var(--grey-4); font-size: 11px; }
.email-preview-envelope b { display: inline-block; width: 38px; color: var(--grey-3); font-weight: 600; text-transform: uppercase; }
.email-preview iframe { display: block; width: 100%; height: 480px; border: 0; background: var(--white); }
.template-translations { padding: 0 20px 20px; }
.template-translations h3 { margin: 0 0 8px; color: var(--grey-4); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.template-translations details { margin-top: 8px; border: 1px solid var(--grey-2); border-radius: 5px; }
.template-translations summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.template-translations summary strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.template-translations summary small { margin-left: auto; color: var(--grey-3); font-size: 11px; white-space: nowrap; }
.template-translations details > .card { margin: 0 12px 12px; }
.template-save-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.template-save-row span { color: var(--grey-3); font-size: 11px; }
.template-variable-sidebar { position: sticky; top: 20px; display: grid; min-width: 0; gap: 16px; animation: template-helper-in .18s ease-out; }
.template-variable-sidebar[hidden] { display: none; }
.template-variable-sidebar > .card { min-width: 0; padding: 20px; margin: 0; overflow: visible; }
.template-variable-sidebar h3 { margin: 0 0 4px; font-size: 14px; }
.template-facts-form textarea { min-height: 74px; }
.template-variable-reference { display: grid; gap: 0; }
.template-variable-reference > h3, .template-variable-reference > p { grid-column: 1 / -1; }
.merge-variable { display: grid; grid-template-columns: minmax(128px, .9fr) minmax(0, 1.1fr); column-gap: 10px; width: 100%; padding: 7px 0; border: 0; border-bottom: 1px dotted var(--grey-2); border-radius: 0; background: transparent; color: var(--black); text-align: left; }
.merge-variable:last-child { border-bottom: 0; }
.merge-variable:hover { background: var(--grey-1); color: var(--black); }
.merge-variable code, .merge-variable span, .merge-variable small { display: block; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.merge-variable code { grid-row: 1 / span 2; align-self: center; color: var(--blue-dk); font-size: 10px; font-weight: 600; line-height: 1.25; white-space: normal; }
.merge-variable span { color: var(--grey-4); font-size: 10px; line-height: 1.3; }
.merge-variable small { overflow: hidden; color: var(--grey-3); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.merge-variable.copied { background: #e8f5ec; box-shadow: inset 3px 0 var(--green); }
.template-contact-search { position: relative; margin-top: 12px; }
.template-contact-search > i { position: absolute; top: 50%; left: 11px; color: var(--grey-3); font-size: 11px; transform: translateY(-50%); pointer-events: none; }
.template-contact-search input { padding-left: 31px; }
.template-contact-results { max-height: 300px; margin-top: 7px; overflow-y: auto; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--white); box-shadow: 0 8px 24px rgb(0 0 0 / 9%); }
.template-contact-result { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px dotted var(--grey-2); border-radius: 0; background: var(--white); color: var(--black); text-align: left; }
.template-contact-result:last-child { border-bottom: 0; }
.template-contact-result:hover { background: var(--grey-1); color: var(--black); }
.template-contact-result strong, .template-contact-result span, .template-contact-result small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-contact-result strong { font-size: 12px; }
.template-contact-result span { color: var(--grey-4); font-size: 11px; }
.template-contact-result small { color: var(--grey-3); font-size: 10px; text-transform: capitalize; }
.template-contact-empty { padding: 12px; margin: 0; color: var(--grey-3); font-size: 11px; }
.template-selected-contact { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-top: 13px; margin-top: 13px; border-top: 1px dotted var(--grey-2); }
.template-selected-contact > div { min-width: 0; }
.template-selected-contact strong, .template-selected-contact span, .template-selected-contact small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-selected-contact strong { font-size: 12px; }
.template-selected-contact span { color: var(--grey-4); font-size: 11px; }
.template-selected-contact small { color: var(--grey-3); font-size: 10px; text-transform: capitalize; }
.template-selected-contact button { flex: 0 0 auto; padding-inline: 10px; }
@keyframes template-helper-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.campaign-program-preview, .campaign-detail-program { display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin: -7px 0 8px; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--paper); }
.campaign-program-preview strong, .campaign-program-preview span, .campaign-detail-program strong, .campaign-detail-program span { display: block; }
.campaign-program-preview strong, .campaign-detail-program strong { font-size: 13px; }
.campaign-program-preview span, .campaign-detail-program span { color: var(--grey-3); font-size: 11px; }
.campaign-detail-program { padding: 0; margin: 0 0 14px; border: 0; background: transparent; }
.settings-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.settings-intro .warning { flex: 1; margin: 0; }
.program-settings-head { display: flex; align-items: center; gap: 13px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px dotted var(--grey-2); }
.program-settings-head h2 { padding: 0; margin: 0; border: 0; color: var(--black); text-transform: none; }
.program-settings-head p { margin: 2px 0 0; color: var(--grey-4); font-size: 12px; }
.program-settings-head small { display: block; color: var(--grey-3); font-size: 10px; }
.synced-field > span { display: flex; align-items: center; gap: 7px; min-height: 42px; color: var(--grey-4); font-size: 13px; }

/* Guarded competition CSV imports */
.import-upload-card { max-width: 880px; }
.import-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 20px; border: 1px solid var(--grey-2); border-radius: 5px; }
.import-counts > div { padding: 14px 16px; border-right: 1px dotted var(--grey-2); }
.import-counts > div:last-child { border-right: 0; }
.import-counts strong, .import-counts span { display: block; }
.import-counts strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.import-counts span { color: var(--grey-3); font-size: 10px; line-height: 1.35; text-transform: uppercase; }
.import-rule { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 18px 0; border-left: 3px solid var(--black); background: var(--grey-1); }
.import-rule > i { margin-top: 4px; }
.import-rule p { margin: 0; font-size: 13px; }
.import-rule code { padding: 1px 4px; background: var(--white); font-size: 11px; }
.import-report { overflow-x: auto; }
.badge-ready { background: #e8f5ec; color: var(--green); }
.badge-invalid, .badge-ambiguous_organization { background: #fdecea; color: var(--red); }
.badge-duplicate_file { background: #fff3dc; color: var(--amber); }
.badge-existing_contact, .badge-existing_organization { background: var(--grey-1); color: var(--grey-4); }

/* Expandable competition and segment directory */
.competition-browser { padding: 0; overflow-x: auto; }
.competition-table > thead th { padding-top: 13px; padding-bottom: 13px; background: var(--grey-1); }
.competition-row { cursor: pointer; transition: background .18s; }
.competition-row:hover td, .competition-row.open td { background: var(--grey-1); }
.competition-row:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.competition-row td { height: 68px; }
.competition-row td:first-child strong, .competition-row td:first-child small, .count-main, .competition-row td small { display: block; }
.competition-row td:first-child strong { font-size: 14px; }
.competition-row td:first-child small, .competition-row td small { color: var(--grey-3); font-size: 11px; }
.count-main { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.competition-toggle { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--grey-3); }
.competition-toggle:hover { background: transparent; color: var(--black); }
.competition-toggle i { transition: transform .3s ease; }
.competition-row.open .competition-toggle i { transform: rotate(180deg); }
.competition-detail-row td { padding: 0; border-bottom: 0; background: var(--white) !important; }
.competition-detail { max-height: 0; padding: 0 18px; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: max-height .4s ease, padding .4s ease, opacity .22s ease, transform .3s ease; }
.competition-detail.open { max-height: 430px; padding: 16px 18px 22px; opacity: 1; transform: translateY(0); }
.segment-subtable { border: 1px solid var(--grey-2); border-radius: 5px; }
.segment-subtable td:first-child a { display: inline-flex; align-items: center; gap: 10px; color: var(--black); }
.segment-subtable td:first-child a:hover { color: var(--blue); text-decoration: none; }
.segment-dot { width: 8px; height: 8px; border: 1px solid var(--grey-3); border-radius: 50%; background: var(--white); }
.segment-reached, .segment-contacted { border-color: var(--blue); background: var(--blue); }
.segment-established, .segment-hosted { border-color: var(--green); background: var(--green); }
.segment-no_response { border-color: #d39a36; background: #d39a36; }
.segment-form-pending { border-color: var(--amber); background: var(--amber); }
.segment-form-submitted { border-color: var(--green); background: var(--green); }
.opportunity-competition-table { min-width: 860px; }
.competition-detail.opportunity-task-menu.open { max-height: 620px; padding: 22px 24px 24px; }
.opportunity-task-group + .opportunity-task-group { padding-top: 20px; margin-top: 20px; border-top: 1px dotted var(--grey-2); }
.opportunity-task-group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.opportunity-task-group-head strong { display: block; font-size: 14px; }
.opportunity-task-group-head small { color: var(--grey-3); font-size: 10px; }
.opportunity-task-card-grid { display: grid; gap: 10px; }
.opportunity-email-task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opportunity-form-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opportunity-task-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 12px; align-items: center; gap: 11px; min-height: 70px; padding: 12px 14px; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--white); color: var(--black); transition: border-color .18s, box-shadow .18s, transform .18s; }
.opportunity-task-card:hover { border-color: var(--grey-3); box-shadow: 0 5px 16px rgb(0 0 0 / 6%); text-decoration: none; transform: translateY(-1px); }
.opportunity-task-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grey-1); color: var(--grey-4); }
.task-card-contacted .opportunity-task-icon { background: #e8f2fc; color: var(--blue-dk); }
.task-card-hosted .opportunity-task-icon, .task-card-form-submitted .opportunity-task-icon { background: #e8f5ec; color: var(--green); }
.task-card-form-pending .opportunity-task-icon { background: #fff3dc; color: var(--amber); }
.opportunity-task-copy strong, .opportunity-task-copy small { display: block; }
.opportunity-task-copy strong { font-size: 12px; }
.opportunity-task-copy small { margin-top: 2px; color: var(--grey-3); font-size: 10px; }
.opportunity-task-count { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.opportunity-task-arrow { color: var(--grey-3); font-size: 10px; }
.opportunity-no-form-note { margin: 11px 2px 0; }
.opportunity-focus-header { padding: 0; overflow: hidden; animation: detailIn .28s ease both; }
.opportunity-focus-back { display: block; padding: 11px 18px; border-bottom: 1px solid var(--grey-2); background: var(--grey-1); color: var(--grey-4); font-size: 12px; }
.opportunity-focus-back:hover { color: var(--black); text-decoration: none; }
.opportunity-focus-back i { margin-right: 7px; }
.opportunity-focus-identity { display: flex; align-items: center; gap: 24px; padding: 18px 20px; }
.opportunity-focus-identity > div:last-child { padding-left: 24px; border-left: 1px dotted var(--grey-2); }
.opportunity-focus-identity > div:last-child span { display: block; color: var(--grey-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.opportunity-focus-identity h2 { margin: 2px 0 0; font-size: 18px; }
.opportunity-worklist, .opportunity-form-worklist { overflow: visible; }
.opportunity-list-search { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: 720px; padding: 5px 12px; margin: 0 0 18px; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--white); }
.opportunity-list-search > i { color: var(--grey-3); font-size: 12px; }
.opportunity-list-search input { padding: 7px 2px; border: 0; background: transparent; }
.opportunity-list-search input:focus { border: 0; }
.opportunity-list-search span { color: var(--grey-3); font-size: 10px; white-space: nowrap; }
.opportunity-record-list { display: grid; gap: 10px; }
.opportunity-record { display: grid; grid-template-columns: minmax(230px, 1.35fr) minmax(130px, .55fr) minmax(210px, .9fr) minmax(230px, 1fr); align-items: center; gap: 20px; padding: 17px 18px; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--white); transition: border-color .18s, box-shadow .18s; }
.opportunity-record:hover { border-color: var(--grey-3); box-shadow: 0 4px 14px rgb(0 0 0 / 5%); }
.opportunity-record-identity { min-width: 0; }
.opportunity-record-identity h3 { margin: 0 0 3px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.opportunity-record-identity > a, .opportunity-record-identity > small { display: block; overflow: hidden; color: var(--grey-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.opportunity-record-state { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 8px; }
.opportunity-record-state > span { color: var(--grey-3); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.opportunity-record-state .badge { justify-self: start; }
.opportunity-record-links { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; }
.opportunity-record-update { display: flex; align-items: flex-end; justify-content: flex-end; gap: 7px; }
.opportunity-record-update label { color: var(--grey-3); font-size: 10px; }
.opportunity-record-update select { min-width: 155px; margin-top: 4px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; }

/* Opportunity Pages directory */
.address-dump { width: 100%; min-height: 88px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; }
.address-dump-card .actions { margin-top: 10px; }
.address-dump-card .hint { margin-top: 10px; }
.address-dump-card .flash { margin-top: 12px; margin-bottom: 0; }
.page-opportunity_pages td { vertical-align: top; }
.platform-origin { display: block; margin-top: 3px; }
.platform-addresses { margin: 0; padding: 0; list-style: none; }
.platform-addresses li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.platform-addresses .suppression-mark { width: 16px; height: 16px; font-size: 11px; }
.page-opportunity_pages .opportunity-record-links { gap: 5px; }
.opportunity-form-record-list .opportunity-record { grid-template-columns: 32px minmax(220px, 1.15fr) minmax(270px, 1fr) minmax(145px, .65fr) auto; }
.opportunity-form-task.is-complete { border-color: #bfe2cb; background: #f2faf5; }
.task-check { color: var(--grey-3); font-size: 18px; }
.opportunity-form-task.is-complete .task-check { color: var(--green); }
.opportunity-contact-details summary { font-size: 11px; }
.opportunity-contact-details small { display: block; max-width: 280px; margin-top: 6px; color: var(--grey-3); line-height: 1.5; }
.opportunity-task-action { justify-self: end; }
.detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.detail-heading h2 { margin-bottom: 0; }
.detail-heading > span { color: var(--grey-3); font-size: 12px; }
.eyebrow { display: block; margin-bottom: 3px; color: var(--grey-3); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.segment-history-card { animation: detailIn .35s ease both; }
@keyframes detailIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.history-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 22px; border: 1px solid var(--grey-2); border-radius: 5px; }
.history-summary > div { padding: 14px 16px; border-right: 1px dotted var(--grey-2); }
.history-summary > div:last-child { border-right: 0; }
.history-summary strong, .history-summary span { display: block; }
.history-summary strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.history-summary span { color: var(--grey-3); font-size: 10px; line-height: 1.35; text-transform: uppercase; }
.history-summary .positive { color: var(--green); }
.history-summary .negative { color: var(--red); }
.segment-chart { padding: 14px 14px 8px; border: 1px solid var(--grey-2); background: var(--paper); }
.segment-chart svg { display: block; width: 100%; height: 150px; }
.chart-axis { stroke: var(--grey-2); stroke-width: 1; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-members { stroke: var(--black); }
.chart-organizations { stroke: var(--blue); }
.chart-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--grey-3); font-size: 10px; }
.chart-legend { display: flex; align-items: center; gap: 6px; }
.chart-legend i { display: inline-block; width: 13px; height: 2px; }
.legend-members { background: var(--black); }
.legend-organizations { margin-left: 5px; background: var(--blue); }
.history-baseline { margin-top: 10px; text-align: center; }
.inline-status { display: flex; align-items: center; gap: 7px; min-width: 230px; }
.inline-status select { min-width: 135px; }
.truncate-link { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 14px; }
th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--grey-2);
    color: var(--grey-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}
td { padding: 11px 12px; border-bottom: 1px dotted var(--grey-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fdfdfd; }

/* Forms */
.field { min-width: 170px; margin-bottom: 16px; }
.field.grow { flex: 1; }
.field > label:first-child {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
}
.field > label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url],
input[type=date], input[type=datetime-local], input[type=number], input[type=file],
select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--grey-2);
    border-radius: 5px;
    background: var(--white);
    color: var(--black);
    font: inherit;
    font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
/* A value we only mirror. Greyed out so the fields that are yours to set stand out. */
input:disabled, select:disabled, textarea:disabled { background: var(--grey-1); color: var(--grey-4); cursor: not-allowed; }
.field:has(input:disabled) > label, .field:has(select:disabled) > label { color: var(--grey-3); }
input[type=checkbox], input[type=radio] { width: auto; margin-top: 4px; accent-color: var(--black); }
textarea { min-height: 130px; resize: vertical; }
.rich { min-height: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.filters .field { margin-bottom: 0; }

/* Buttons */
.button, button {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid var(--black);
    border-radius: 999px;
    background: var(--black);
    color: var(--white);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.button:hover, button:hover { background: var(--white); color: var(--black); text-decoration: none; }
.button.secondary, button.secondary { background: var(--white); color: var(--black); }
.button.secondary:hover, button.secondary:hover { background: var(--black); color: var(--white); }
.button.danger, button.danger { border-color: var(--red); background: var(--red); }
.button.danger:hover, button.danger:hover { background: var(--white); color: var(--red); }
.button.success, button.success { border-color: var(--green); background: var(--green); }
.button.success:hover, button.success:hover { background: var(--white); color: var(--green); }
.button.small, button.small { padding: 5px 13px; font-size: 12px; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actions form { margin: 0; }

/* Status and supporting UI */
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 5px;
    font-size: 14px;
}
.flash-success, .flash.success { border: 1px solid #bfe2cb; background: #e8f5ec; color: var(--green); }
.flash-error, .flash.error { border: 1px solid #f3c6c0; background: #fdecea; color: var(--red); }
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--grey-1);
    color: var(--grey-4);
    font-size: 11px;
    letter-spacing: .05em;
    line-height: 1.6;
    text-transform: uppercase;
    white-space: nowrap;
}
.opportunity-deactivate label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.opportunity-deactivate input { min-width: 260px; }
.badge-language { background: var(--grey-1); color: var(--grey-4); }
.badge-established, .badge-hosted, .badge-delivered, .badge-completed, .badge-sent, .badge-active { background: #e8f5ec; color: var(--green); }
.badge-reached, .badge-click, .badge-open, .badge-running, .badge-in_progress, .badge-processed, .badge-processing { background: #e8f2fc; color: var(--blue-dk); }
.badge-no_response, .badge-contacted, .badge-deferred, .badge-paused { background: #fff3dc; color: var(--amber); }
.badge-suppressed, .badge-failed, .badge-cancelled, .badge-spam_report, .badge-unsubscribed, .badge-dropped, .badge-bounce, .badge-bounced, .badge-deactivated { background: #fdecea; color: var(--red); }
.timeline { margin-left: 7px; padding-left: 22px; border-left: 1px dotted var(--black); }
.timeline-item { position: relative; padding: 0 0 20px; }
.timeline-item::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -27px;
    width: 8px;
    height: 8px;
    border: 1px solid var(--black);
    border-radius: 50%;
    background: var(--white);
}
.timeline-item time { color: var(--grey-3); font-size: 12px; }
.warning { padding: 12px 16px; margin-bottom: 18px; border-left: 3px solid var(--black); background: var(--grey-1); }
.pill-row { display: flex; gap: 8px 18px; flex-wrap: wrap; }
hr { height: 0; margin: 18px 0; border: 0; border-top: 1px dotted var(--grey-2); }
pre { max-width: 100%; padding: 12px; overflow: auto; background: var(--grey-1); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
details { margin-bottom: 12px; }
details > summary { cursor: pointer; color: var(--blue); }
details[open] > summary { margin-bottom: 14px; }
details .card { margin: 0; background: var(--paper); }

/* Portal-style SSO screen */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--white);
}
.login-card {
    width: 100%;
    max-width: 380px;
    padding: 42px 38px;
    border: 1px solid var(--grey-2);
    background: var(--white);
    text-align: center;
}
.login-logo { height: 64px; filter: invert(1); animation: floatWaves 1.7s ease-in-out infinite; }
.login-card h1 { margin: 18px 0 4px; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }
.login-card .sub { margin-bottom: 26px; color: var(--grey-3); font-size: 13px; }
.login-card > .card { padding: 0; margin: 0; border: 0; }
.login-card .button, .login-card form button { width: 100%; margin-top: 6px; }
/* A recipient's page says a sentence where the sign-in card says a name, so it keeps the
   card and the type but not the small-caps treatment meant for a brand. */
.public-page h1 { font-size: 19px; letter-spacing: 0; text-transform: none; text-wrap: balance; }
.login-card .sub { text-transform: none; letter-spacing: 0; line-height: 1.5; }
@keyframes floatWaves {
    0% { transform: translateY(8px) translateX(0) rotate(0deg); }
    25% { transform: translateY(0) translateX(5px) rotate(5deg); }
    50% { transform: translateY(8px) translateX(0) rotate(0deg); }
    75% { transform: translateY(0) translateX(-5px) rotate(-5deg); }
    100% { transform: translateY(8px) translateX(0) rotate(0deg); }
}

@media (max-width: 1000px) {
    .stats, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .competition-grid { grid-template-columns: 1fr; }
    .organization-competition-list { grid-template-columns: 1fr; }
    .import-counts { grid-template-columns: repeat(3, 1fr); }
    .template-workspace.has-focused-template { grid-template-columns: minmax(0, 1fr) 300px; }
    .import-counts > div:nth-child(3) { border-right: 0; }
}
@media (max-width: 1300px) and (min-width: 881px) {
    .campaigns-workspace { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .8fr); }
    .opportunity-record { grid-template-columns: minmax(220px, 1fr) minmax(120px, .5fr) minmax(190px, .8fr); }
    .opportunity-record-update { grid-column: 1 / -1; justify-content: flex-start; padding-top: 10px; border-top: 1px dotted var(--grey-2); }
    .opportunity-form-record-list .opportunity-record { grid-template-columns: 32px minmax(210px, 1fr) minmax(250px, 1fr) auto; }
    .opportunity-form-record-list .opportunity-contact-details { grid-column: 2 / 4; }
}
@media (max-width: 880px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s; }
    .sidebar.open { transform: translateX(0); box-shadow: 8px 0 30px rgb(0 0 0 / 12%); }
    .main { margin-left: 0; }
    .menu-toggle { display: block; }
    .content { padding: 22px 18px; }
    .topbar { padding: 16px 18px; }
    .grid.cols-2 { grid-template-columns: 1fr; }
    .campaigns-workspace { grid-template-columns: 1fr; }
    .template-workspace, .template-workspace.has-focused-template { grid-template-columns: 1fr; }
    .template-variable-sidebar { position: static; }
    .competition-browser { overflow-x: auto; }
    .competition-table { min-width: 760px; }
    .opportunity-competition-table { min-width: 820px; }
    .history-summary { grid-template-columns: repeat(2, 1fr); }
    .history-summary > div:nth-child(2) { border-right: 0; }
    .history-summary > div:nth-child(-n+2) { border-bottom: 1px dotted var(--grey-2); }
    .search-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .grid.cols-3, .stats { grid-template-columns: 1fr; }
    .card { padding: 18px 16px; }
    .filters { align-items: stretch; }
    .filters .field { width: 100%; }
    .search-main { align-items: stretch; flex-direction: column; }
    .search-main .field { width: 100%; }
    .search-main button { width: 100%; }
    .search-filters { grid-template-columns: 1fr; }
    .new-organization-button { width: 100%; }
    .campaign-check { grid-template-columns: 1fr auto 20px; }
    .campaign-send-progress { grid-column: 1 / -1; grid-row: 2; }
    .history-summary { grid-template-columns: 1fr 1fr; }
    .detail-heading { align-items: stretch; flex-direction: column; }
    .profile-hero { align-items: flex-start; flex-direction: column; }
    .profile-actions { justify-content: flex-start; }
    .overview-group-heading { align-items: flex-start; flex-direction: column; }
    .form-grid-clean { grid-template-columns: 1fr; }
    .form-grid-clean .full { grid-column: auto; }
    .contact-status-row { grid-template-columns: 118px 1fr auto; }
    .contact-status-last { grid-column: 1 / -1; grid-row: 2; padding-left: 128px; }
    .settings-intro { flex-direction: column; }
    .template-program-head, .template-save-row, .email-preview > header { align-items: flex-start; flex-direction: column; }
    .template-list, .template-variable-sidebar, .template-editor { padding: 16px; }
    .opportunity-record, .opportunity-form-record-list .opportunity-record { grid-template-columns: 1fr; gap: 13px; }
    .opportunity-record-update, .opportunity-task-action { justify-self: stretch; justify-content: flex-start; padding-top: 12px; border-top: 1px dotted var(--grey-2); }
    .opportunity-record-update label { flex: 1; }
    .opportunity-task-action button { width: 100%; }
    .opportunity-task-group-head { align-items: flex-start; flex-direction: column; }
    .opportunity-email-task-grid, .opportunity-form-task-grid { grid-template-columns: 1fr; }
    .competition-detail.opportunity-task-menu.open { max-height: 820px; }
    .email-preview iframe { height: 390px; }
    .import-counts { grid-template-columns: 1fr 1fr; }
    .import-counts > div { border-bottom: 1px dotted var(--grey-2); }
    .import-counts > div:nth-child(even) { border-right: 0; }
    table { display: block; overflow-x: auto; }
    .login-card { padding: 36px 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-logo { animation: none; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Outreach status on the institution page: a row of mutually exclusive choices,
   so the current state reads at a glance rather than hiding inside a select. */
.school-status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.school-status-option {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border: 1px solid var(--grey-2); border-radius: 999px;
    font-size: 13px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s;
}
.school-status-option:hover { border-color: var(--green); }
.school-status-option.is-current { border-color: var(--green); background: rgba(31, 138, 76, .07); font-weight: 600; }
.school-status-option input { margin: 0; }

/* Do-not-contact: quiet while the institution is still contactable, unmistakable once
   it is blocked, since that state silently removes it from every future campaign. */
.do-not-contact .field { max-width: 420px; }
.do-not-contact.is-blocked { border-color: var(--red); }
.do-not-contact.is-blocked .warning { border-left-color: var(--red); }

/* People list: the priority contact is what campaigns actually use, so it reads as the
   selected row rather than one entry among many. */
.people-table td { vertical-align: middle; }
.people-table tr.is-priority { background: rgba(31, 138, 76, .07); }
.people-table tr.is-priority td { font-weight: 600; }
.people-table form { margin: 0; }
.people-add { margin-top: 18px; padding-top: 16px; border-top: 1px dotted var(--grey-2); }
.people-add h3 { margin-top: 0; }

/* School contacts reuse the organization contact roster so both read the same. The only
   addition is the primary marker, since campaigns write to that person. */
.contact-list-item.is-primary { background: rgba(31, 138, 76, .06); }
.contact-list-item.is-primary .contact-list-suppression { color: var(--green); }
/* The roster card has no horizontal padding of its own — its rows supply theirs — so
   anything else placed directly in it has to bring its own gutter. */
.contact-roster > .hint, .contact-roster > .empty-hint { padding: 12px 20px 0; margin: 0; }
.contact-roster > .people-add { margin: 0; padding: 16px 20px 0; }
/* Only the inline row controls lose their margin; the add/edit form keeps its spacing. */
.contact-list-item form { margin: 0; }

/* A scraped person has no row of ours to delete, so their slot is held open rather than
   left to collapse and shift the row's name out of line with the others. */
.row-delete-placeholder { display: block; width: 25px; height: 25px; }
/* One slot for a row's controls, so a roster with two of them (star, delete) and one with
   a single delete both keep their names on the same line. */
.contact-list-actions { display: flex; align-items: center; gap: 2px; }
.contact-list-actions form { margin: 0; }
.row-star { width: 25px; height: 25px; padding: 0; border: 0; background: transparent; color: var(--grey-3); }
.row-star:hover { background: var(--grey-1); color: var(--black); }
.row-star.is-set { color: var(--green); }
.row-star.is-set:hover { background: rgba(31, 138, 76, .12); color: var(--green); }
/* Why a recipient is in the audience preview at all, next to the validation message. */
.primary-note { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 11px; font-weight: 600; }

@media (min-width: 881px) { .opportunity-form-record-list.forms-only .opportunity-record { grid-template-columns: 32px minmax(220px, 1.15fr) minmax(270px, 1fr) auto; } }
.opportunity-sheet-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.opportunity-sheet-cta .button { font-size: 14px; padding: 9px 18px; font-weight: 600; }
.opportunity-sheet-cta .button i { margin-right: 7px; }

/* SweetAlert confirmations wear the portal's own card and pill buttons, so a destructive
   question does not arrive looking like it came from a different application. */
.swal2-popup.eo-confirm {
    padding: 26px 26px 20px;
    border: 1px solid var(--grey-2);
    border-radius: 6px;
    background: var(--white);
    color: var(--black);
    font-family: inherit;
    font-size: 15px;
}
.eo-confirm .swal2-title { color: var(--black); font-size: 19px; font-weight: 600; letter-spacing: .02em; }
.eo-confirm .swal2-html-container { margin-top: 10px; color: var(--grey-4); font-size: 14px; line-height: 1.6; }
.eo-confirm .swal2-icon { width: 56px; height: 56px; margin: 4px auto 14px; border-width: 3px; }
.eo-confirm .swal2-icon .swal2-icon-content { font-size: 2.4em; }
.eo-confirm .swal2-actions { gap: 8px; margin-top: 22px; }
.eo-confirm .swal2-styled {
    margin: 0;
    padding: 9px 20px;
    border: 1px solid var(--black);
    border-radius: 999px;
    box-shadow: none;
    background: var(--black);
    color: var(--white);
    font: inherit;
    font-size: 13px;
    transition: background .2s, color .2s;
}
.eo-confirm .swal2-styled:focus { box-shadow: none; outline: 2px solid var(--blue); outline-offset: 2px; }
.eo-confirm .swal2-cancel { background: var(--white); color: var(--black); }
.eo-confirm .swal2-cancel:hover { background: var(--black); color: var(--white); }
.eo-confirm .swal2-confirm:hover { background: var(--white); color: var(--black); }
.eo-confirm.is-danger .swal2-confirm { border-color: var(--red); background: var(--red); color: var(--white); }
.eo-confirm.is-danger .swal2-confirm:hover { background: var(--white); color: var(--red); }
.eo-confirm.is-danger .swal2-icon.swal2-warning { border-color: var(--red); color: var(--red); }

/* Timeline message viewer */
.timeline-view { display: inline-flex; align-items: center; gap: 5px; padding: 1px 0; border: 0; border-radius: 0; background: none; color: var(--blue); font-size: 11px; font-weight: 600; cursor: pointer; vertical-align: middle; }
.timeline-view:hover { background: none; color: var(--black); text-decoration: underline; }
.eo-confirm.eo-message { max-width: none; text-align: left; }
.eo-message .swal2-title { padding: 0 36px 0 0; text-align: left; font-size: 16px; }
.eo-message .swal2-html-container { margin: 6px 0 0; text-align: left; }
.eo-message-meta { margin: 0 0 12px; color: var(--grey-3); font-size: 12px; }
.eo-message-frame { display: block; width: 100%; height: min(72vh, 820px); border: 1px solid var(--grey-2); border-radius: 4px; background: #fff; }

/* Campaign recipients: long validation reasons wrap instead of squeezing the other columns;
   the message preview opens as a full-width row under its recipient. */
.validation-cell { max-width: 260px; overflow-wrap: anywhere; }
.recipient-preview-row td { background: var(--grey-1); }

/* Frozen campaign workflow: launch (schedule + button) on its own row, the way back below it. */
.workflow-launch { flex-basis: 100%; display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.workflow-launch .field { margin: 0; flex: 1 1 200px; }
.workflow-secondary { flex-basis: 100%; padding-top: 10px; border-top: 1px solid var(--grey-2); }
.pacing-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 13px; }
.pacing-form label { flex-basis: 100%; margin: 0; }
.pacing-form input { width: 90px; }

/* Overview: steps closed by hand */
.step-toggle { display: inline; }
.step-toggle button { padding: 0; margin-left: 6px; border: 0; background: none; color: var(--blue); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; cursor: pointer; }
.step-toggle button:hover { text-decoration: underline; background: none; }

/* School and university outreach (EduReach campaigns) */
.page-dashboard .content:has(.school-head) { max-width: 1240px; }
.back-link { margin-bottom: 14px; font-size: 13px; }
.school-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.school-head .campaign-detail-program strong { font-size: 17px; }
.school-head-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.school-head-state .step-toggle button { font-size: 13px; }
.school-switch { margin-bottom: 18px; }
.school-switch .badge { text-decoration: none; }
.school-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
.school-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--grey-2); border-radius: 5px; }
.school-counts > div { padding: 14px 16px; border-right: 1px dotted var(--grey-2); }
.school-counts > div:last-child { border-right: 0; }
.school-counts strong, .school-tiles strong { display: block; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.school-counts span, .school-tiles span { color: var(--grey-4); font-size: 12px; }
.school-engine { margin: 16px 0 14px; color: var(--grey-4); font-size: 13px; }
.school-engine i { margin-right: 4px; }
.school-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.school-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.school-inline label { margin: 0; font-weight: 400; }
.school-inline input[type=number] { width: 90px; }
.school-create .grid { align-items: start; }
.school-facts { padding: 16px 18px; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--paper); }
.school-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin-top: 8px; font-size: 13px; }
.school-facts dt { color: var(--grey-3); }
.warning-text { color: var(--amber); }
.school-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin-bottom: 12px; border: 1px solid var(--grey-2); border-radius: 5px; }
.school-tiles > div { padding: 14px 16px; border-right: 1px dotted var(--grey-2); }
.school-tiles > div:last-child { border-right: 0; }
.school-tiles small { display: block; margin-top: 2px; color: var(--grey-3); font-size: 11px; }
.school-results h3 { margin-top: 18px; }
.school-results code { font-size: 12px; }
.stats-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.school-bar { width: 28%; }
.school-bar .mini-progress { height: 6px; margin: 0; border-radius: 3px; }
.school-bar .mini-progress span { border-radius: 3px; }
.school-messages { overflow-x: auto; }
.school-messages table { min-width: 860px; }
@media (max-width: 1000px) { .school-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 650px) { .school-counts { grid-template-columns: minmax(0, 1fr); } .school-counts > div { border-right: 0; border-bottom: 1px dotted var(--grey-2); } }

/* School campaign templates */
.tpl-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tpl-tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.tpl-tabs a { flex: none; white-space: nowrap; }
.tpl-tabs a { padding: 5px 11px; border: 1px solid var(--grey-2); border-radius: 999px; color: var(--black); font-size: 13px; }
.tpl-tabs a:hover { border-color: var(--black); text-decoration: none; }
.tpl-tabs a span { margin-left: 3px; color: var(--grey-3); font-variant-numeric: tabular-nums; }
.tpl-example-meta { margin-bottom: 8px; }
.tpl-example-parts .badge { margin: 0 4px 4px 0; text-transform: none; letter-spacing: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tpl-example-frame { width: 100%; height: 640px; margin: 8px 0 16px; border: 1px solid var(--grey-2); border-radius: 5px; background: var(--white); }
.tpl-footer-frame { width: 100%; height: 230px; border: 1px dotted var(--grey-2); background: var(--white); }
.tpl-variant { padding: 16px 0; border-bottom: 1px dotted var(--grey-2); scroll-margin-top: 80px; }
.tpl-variant:last-child { border-bottom: 0; }
.tpl-variant:target { margin: 0 -14px; padding: 16px 14px; background: #f3f8fe; }
.tpl-variant header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-variant header code { font-size: 13px; font-weight: 600; }
.tpl-tier select { padding: 3px 8px; font-size: 12px; min-width: 0; width: auto; }
.tpl-text { max-width: 820px; font-size: 14px; line-height: 1.6; }
.tpl-variant.is-off .tpl-text { color: var(--grey-3); }
.tpl-var { padding: 0 3px; border-radius: 3px; background: #e8f2fc; color: var(--blue-dk); font-size: 13px; }
.tpl-method { padding: 0 3px; border-radius: 3px; background: #fff3dc; color: var(--amber); font-size: 13px; }
.tpl-meta { margin: 8px 0 0; color: var(--grey-3); font-size: 12px; }
.tpl-meta span[title] { border-bottom: 1px dotted var(--grey-3); cursor: help; }
.tpl-edit { margin: 8px 0 0; }
.tpl-edit > summary { font-size: 12px; }
.tpl-edit textarea { width: 100%; max-width: 820px; margin-top: 8px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tpl-off { margin: 12px 0 0; }
.tpl-off > summary { margin-bottom: 4px; }
.tpl-rule-ids code { font-size: 11px; }
.tpl-rule-ids a { text-decoration: none; }
.template-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; color: var(--black); }
.template-link:hover { background: var(--grey-1); text-decoration: none; }
.template-link > span:first-child strong, .template-link > span:first-child small { display: block; }
.template-link > span:first-child strong { font-size: 14px; color: var(--blue); }
.template-link > span:first-child small { color: var(--grey-3); font-size: 10px; }
.template-link > span:last-child { color: var(--grey-3); font-size: 11px; white-space: nowrap; }
.template-link > span:last-child i { margin-left: 7px; }
.tpl-facts td:first-child { color: var(--grey-3); white-space: nowrap; }
.tpl-facts tr.is-stale td { background: #fffaf0; }
.tpl-stale { margin-left: 4px; color: var(--amber) !important; }
.tpl-setup { margin-top: 20px; align-items: start; }
.tpl-staff .hint { margin-top: 4px; }
.tpl-staff .field { min-width: 0; }
.tpl-staff input { width: 100%; min-width: 0; }
.tpl-setup .tpl-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpl-setup .tpl-staff .field:empty { display: none; }