/* pssc-live.css - the committee area's live layer and its finish.

   Everything here is additive and scoped to .pssc-crm, so it cannot reach a
   public page, and if this file never loads the committee area looks and
   works exactly as it did before. It covers three things:

     1. the card of what is waiting on this page, under its own tabs
     2. the small panel that says what has just happened, on every page
     3. the finish on the tab strip and the headings - colour carried
        through properly rather than hinted at

   Colours come from the family tint the page is already carrying on
   .m-shell.fam, so a tool page is never a different blue from its tabs.   */

.pssc-crm {
    --live-line: var(--line, #e4e9f2);
    --live-ink: var(--ink, #0f1b33);
    --live-muted: var(--muted, #5b6b86);
    --live-soft: var(--soft, #f6f8fc);
    --live-tint: var(--tint, var(--blue, #1049a9));
    --live-shadow: 0 1px 2px rgba(15, 27, 51, .06), 0 8px 24px -12px rgba(15, 27, 51, .18);
}

/* ---------- 1. what is waiting on this page ---------- */

.pssc-crm .qcard {
    margin: 18px 0 22px;
    border: 1px solid var(--live-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--live-shadow);
    overflow: hidden;
}
.pssc-crm .qcard::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--live-tint), color-mix(in srgb, var(--live-tint) 35%, #fff));
}
.pssc-crm .qcard-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px 3px;
}
.pssc-crm .qcard-h h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -.01em;
    color: var(--live-ink);
}
.pssc-crm .qcard-n {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--live-tint) 12%, #fff);
    color: var(--live-tint);
    font-size: .78rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
.pssc-crm .qcard .todo { padding: 4px 10px 12px; }

/* ---------- 2. what has just happened ---------- */

.pssc-crm .pulse {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    width: min(340px, calc(100vw - 36px));
    font-size: .86rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.pssc-crm .pulse-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--live-line);
    border-radius: 999px;
    background: #fff;
    color: var(--live-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--live-shadow);
}
.pssc-crm .pulse-tab:hover { border-color: color-mix(in srgb, var(--live-tint) 40%, var(--live-line)); }
.pssc-crm .pulse-tab:focus-visible { outline: 2px solid var(--live-tint); outline-offset: 2px; }

.pssc-crm .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .5);
}
.pssc-crm .pulse-dot.is-live { animation: pulse-ring 1.6s ease-out 2; }
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.pssc-crm .pulse-n {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.pssc-crm .pulse-body {
    width: 100%;
    border: 1px solid var(--live-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--live-shadow);
    overflow: hidden;
}
.pssc-crm .pulse[data-open="0"] .pulse-body { display: none; }

.pssc-crm .pulse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--live-line);
    background: var(--live-soft);
}
.pssc-crm .pulse-head b { font-size: .84rem; }
.pssc-crm .pulse-tools { display: flex; gap: 6px; }
.pssc-crm .pulse-btn {
    padding: 4px 9px;
    border: 1px solid var(--live-line);
    border-radius: 999px;
    background: #fff;
    color: var(--live-muted);
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
}
.pssc-crm .pulse-btn[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--live-tint) 45%, #fff);
    background: color-mix(in srgb, var(--live-tint) 10%, #fff);
    color: var(--live-tint);
    font-weight: 600;
}
.pssc-crm .pulse-btn:focus-visible { outline: 2px solid var(--live-tint); outline-offset: 1px; }

.pssc-crm .pulse-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 44vh;
    overflow-y: auto;
}
.pssc-crm .pulse-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--live-soft);
}
.pssc-crm .pulse-list li:last-child { border-bottom: 0; }
.pssc-crm .pulse-list li.is-new { background: color-mix(in srgb, var(--live-tint) 6%, #fff); }
.pssc-crm .pulse-list b { font-size: .82rem; }
.pssc-crm .pulse-note { grid-column: 2; text-align: right; color: var(--live-muted); font-size: .76rem; }
.pssc-crm .pulse-list small { grid-column: 1 / -1; color: var(--live-muted); font-size: .74rem; }
.pssc-crm .pulse-quiet { color: var(--live-muted); }
.pssc-crm .pulse-foot {
    margin: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--live-line);
    background: var(--live-soft);
    color: var(--live-muted);
    font-size: .74rem;
}

/* a number that has just changed says so, once, quietly */
.pssc-crm .pulse-bump { animation: pulse-bump .5s ease; }
@keyframes pulse-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* ---------- 3. the finish on the tabs and headings ---------- */

/* The section a page belongs to should be obvious before you read a word of
   it. The tab strip already carries the colour; this makes it carry weight. */
.pssc-crm nav.ctabs .ctabs-sec {
    border-color: color-mix(in srgb, var(--tint) 28%, #fff);
}
.pssc-crm nav.ctabs .ctabs-sec.on {
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--tint) 70%, transparent);
}
.pssc-crm nav.ctabs .ctab.on {
    box-shadow: inset 0 -2px 0 0 var(--tint);
}
.pssc-crm .m-shell.fam .m-head .tag {
    background: color-mix(in srgb, var(--tint) 10%, #fff);
    color: var(--tint);
}

@media (prefers-reduced-motion: reduce) {
    .pssc-crm .pulse-dot.is-live,
    .pssc-crm .pulse-bump { animation: none; }
}

/* On a phone the panel stays out of the way until it is asked for, and never
   sits on top of the thing somebody is reading. */
@media (max-width: 640px) {
    .pssc-crm .pulse { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
    .pssc-crm .pulse-lab { display: none; }
    .pssc-crm .pulse-tab { padding: 9px 12px; }
    .pssc-crm .pulse-list { max-height: 38vh; }
    .pssc-crm .qcard { margin: 14px 0 18px; border-radius: 12px; }
}

@media print {
    .pssc-crm .pulse { display: none; }
}
/* ---------- 4. correcting an address in place ---------- */

/* The donor list is typed up from paper, so a handful of addresses always
   need fixing. Doing that should not mean opening another screen: the field
   sits in the row, and saving it is one button next to it. */
.pssc-crm .donor-em {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.pssc-crm .donor-em input[type="email"] {
    flex: 1 1 190px;
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid var(--live-line);
    border-radius: 8px;
    font: inherit;
    font-size: .84rem;
    background: #fff;
    color: var(--live-ink);
}
.pssc-crm .donor-em input[type="email"]:focus-visible {
    outline: 2px solid var(--live-tint);
    outline-offset: 1px;
    border-color: var(--live-tint);
}
.pssc-crm .donor-em input[type="email"]:placeholder-shown {
    border-style: dashed;
    border-color: #b91c1c;
}
.pssc-crm .donor-em button { flex: 0 0 auto; }

@media (max-width: 640px) {
    .pssc-crm .donor-em { flex-direction: column; align-items: stretch; }
    .pssc-crm .donor-em input[type="email"] { flex: 1 1 auto; }
}