/* pssc-theme.css - the finish on the committee area.
   This file changes how the committee tools look and nothing else. It adds no
   markup, moves no layout, and touches no behaviour: every rule here is
   colour, spacing, corner, shadow, type or focus. Delete the one line that
   loads it and the committee area goes back exactly as it was.
   The thinking behind it, so the next person does not have to guess:
     one ground, one surface   the app sits on a quiet grey; everything that
                               holds content is white and lifts off it
     hairlines, not borders    a 1px line at 8% black reads as an edge without
                               drawing a box around everything
     light, not lines          depth comes from two soft shadows, near and far,
                               rather than from heavier strokes
     colour means something    grey is the furniture; colour is either the
                               family this page belongs to, or money, or a
                               warning. Nothing is coloured to be pretty
     numbers line up           every figure is tabular, so a column of money
                               reads as a column and not as ransom notes
     one motion                200ms, one curve, and none of it for anybody
                               who has asked their machine to stop moving
   Scoped to .pssc-crm throughout, so a public page cannot pick any of it up.
*/
.pssc-crm {

    /* the ground and the things that sit on it */
    --pt-ground: #f4f4f6;
    --pt-surface: #ffffff;
    --pt-raised: #fbfbfd;
    --pt-hair: rgba(0, 0, 0, .09);
    --pt-hair-soft: rgba(0, 0, 0, .055);

    /* ink */
    --pt-ink: #1c1c1e;
    --pt-ink-2: #48484a;
    --pt-ink-3: #797980;

    /* the family colour this page belongs to, with club blue as the fallback */
    --pt-accent: var(--tint, var(--blue, #1049a9));

    /* money and warnings, the only other colours allowed */
    --pt-good: #15803d;
    --pt-bad: #b91c1c;
    --pt-warn: #b45309;
    --pt-r-lg: 16px;
    --pt-r-md: 12px;
    --pt-r-sm: 9px;
    --pt-lift: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -14px rgba(16, 24, 40, .28);
    --pt-lift-2: 0 1px 2px rgba(16, 24, 40, .06), 0 18px 40px -18px rgba(16, 24, 40, .32);
    --pt-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --tint is set on .m-shell.fam, which is below .pssc-crm, so the accent has
   to be picked up again there - otherwise every page falls back to club blue
   and the family colour never reaches a button or a focus ring. */
.pssc-crm .m-shell.fam { --pt-accent: var(--tint); }

/* ---------- the page ---------- */
.pssc-crm body,
body.pssc-crm { background: var(--pt-ground); }
.pssc-crm .m-shell {
    background: var(--pt-ground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pssc-crm .m-wrap { color: var(--pt-ink); }
.pssc-crm .m-h1 {
    letter-spacing: -.022em;
    font-weight: 700;
}

.pssc-crm h2 { letter-spacing: -.014em; }
.pssc-crm .lede { color: var(--pt-ink-2); }
.pssc-crm .muted, .pssc-crm .small { color: var(--pt-ink-3); }

/* figures line up: a column of money should read as a column */
.pssc-crm .stat .v,
.pssc-crm .lg-tile .v,
.pssc-crm .lg-in, .pssc-crm .lg-out,
.pssc-crm .mtable td,
.pssc-crm .qcard-n, .pssc-crm .ctab-n, .pssc-crm .todo-n {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- the side ---------- */
.pssc-crm .m-side {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid var(--pt-hair-soft);
}

.pssc-crm .m-side-lbl {
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-ink-3);
}

.pssc-crm .m-side-nav a,
.pssc-crm .m-side-link {
    border-radius: var(--pt-r-sm);
    color: var(--pt-ink-2);
    transition: background-color .18s var(--pt-ease), color .18s var(--pt-ease);
}

.pssc-crm .m-side-nav a:hover,
.pssc-crm .m-side-link:hover { background: rgba(0, 0, 0, .045); color: var(--pt-ink); }
.pssc-crm .m-side-nav a.on {
    background: var(--blue, #1049a9);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(16, 73, 169, .8);
}

.pssc-crm .m-side-nav a .n {
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
}

/* ---------- the bar across the top ---------- */
.pssc-crm .m-topbar {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--pt-hair-soft);
}

.pssc-crm .m-head .tag {
    border-radius: 999px;
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* ---------- the tabs ---------- */
.pssc-crm nav.ctabs {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--pt-hair-soft);
    border-radius: var(--pt-r-lg);
    box-shadow: var(--pt-lift);
}

.pssc-crm nav.ctabs a {
    border-radius: 999px;
    transition: background-color .18s var(--pt-ease), color .18s var(--pt-ease),
                box-shadow .18s var(--pt-ease), transform .18s var(--pt-ease);
}

.pssc-crm nav.ctabs a:hover { transform: translateY(-1px); }
.pssc-crm nav.ctabs .ctabs-sec.on {
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tint) 85%, transparent);
}

.pssc-crm nav.ctabs .ctab.on {
    background: color-mix(in srgb, var(--tint) 12%, #fff);
    color: color-mix(in srgb, var(--tint) 78%, #000);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 34%, transparent);
}

.pssc-crm .ctab-n {
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}

.pssc-crm .ctabs-note { color: var(--pt-ink-2); }

/* ---------- anything that holds content ---------- */
.pssc-crm .m-card,
.pssc-crm .rail-card,
.pssc-crm .form-card,
.pssc-crm .don-card,
.pssc-crm .panel-in,
.pssc-crm .qcard,
.pssc-crm .cta-box {
    background: var(--pt-surface);
    border: 1px solid var(--pt-hair-soft);
    border-radius: var(--pt-r-lg);
    box-shadow: var(--pt-lift);
}

.pssc-crm .m-card:hover,
.pssc-crm .rail-card:hover { box-shadow: var(--pt-lift-2); }
.pssc-crm .m-card, .pssc-crm .rail-card { transition: box-shadow .22s var(--pt-ease); }

/* ---------- the numbers across the top ---------- */
.pssc-crm .stat,
.pssc-crm .lg-tile {
    background: var(--pt-surface);
    border: 1px solid var(--pt-hair-soft);
    border-radius: var(--pt-r-md);
    box-shadow: var(--pt-lift);
    overflow: hidden;
}

.pssc-crm .stat .k,
.pssc-crm .lg-tile .k {
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-ink-3);
}

.pssc-crm .stat .v,
.pssc-crm .lg-tile .v {
    letter-spacing: -.02em;
    font-weight: 700;
    color: var(--pt-ink);
}

.pssc-crm .stat.green .v { color: var(--pt-good); }
.pssc-crm .stat.red .v   { color: var(--pt-bad); }
.pssc-crm .stat.amber .v { color: var(--pt-warn); }
.pssc-crm .lg-in  { color: var(--pt-good); }
.pssc-crm .lg-out { color: var(--pt-bad); }

/* ---------- what needs doing ---------- */
.pssc-crm .todo-row {
    border-radius: var(--pt-r-md);
    transition: background-color .18s var(--pt-ease), transform .18s var(--pt-ease),
                box-shadow .18s var(--pt-ease);
}

.pssc-crm .todo-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--pt-lift);
}

.pssc-crm .todo-n {
    border-radius: var(--pt-r-sm);
    font-weight: 700;
}

.pssc-crm .todo-go { font-weight: 600; }
.pssc-crm .todo-clear {
    background: var(--pt-raised);
    border: 1px solid var(--pt-hair-soft);
    border-radius: var(--pt-r-md);
}

/* ---------- buttons ---------- */
.pssc-crm .cta,
.pssc-crm .linkbtn,
.pssc-crm .mini-btn,
.pssc-crm button[type="submit"] {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: transform .16s var(--pt-ease), box-shadow .16s var(--pt-ease),
                background-color .16s var(--pt-ease), border-color .16s var(--pt-ease);
}

.pssc-crm .cta {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 8px 18px -10px rgba(16, 24, 40, .5);
}

.pssc-crm .cta:hover { transform: translateY(-1px); box-shadow: var(--pt-lift-2); }
.pssc-crm .cta:active { transform: translateY(0); }
.pssc-crm .cta.ghost {
    background: var(--pt-surface);
    border: 1px solid var(--pt-hair);
    color: var(--pt-ink-2);
    box-shadow: none;
}

.pssc-crm .cta.ghost:hover { border-color: var(--pt-accent); color: var(--pt-accent); }

/* every control says where the keyboard is, in the family colour */
.pssc-crm a:focus-visible,
.pssc-crm button:focus-visible,
.pssc-crm input:focus-visible,
.pssc-crm select:focus-visible,
.pssc-crm textarea:focus-visible,
.pssc-crm summary:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 2px;
    border-radius: var(--pt-r-sm);
}

/* ---------- pills and chips ---------- */
.pssc-crm .pill,
.pssc-crm .chip,
.pssc-crm .ev-badge {
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.pssc-crm .pill.ok {
    background: color-mix(in srgb, var(--pt-good) 12%, #fff);
    color: var(--pt-good);
}

/* ---------- forms ---------- */
.pssc-crm input[type="text"],
.pssc-crm input[type="email"],
.pssc-crm input[type="number"],
.pssc-crm input[type="date"],
.pssc-crm input[type="search"],
.pssc-crm input[type="tel"],
.pssc-crm select,
.pssc-crm textarea {
    border-radius: var(--pt-r-sm);
    border: 1px solid var(--pt-hair);
    background: var(--pt-surface);
    color: var(--pt-ink);
    transition: border-color .16s var(--pt-ease), box-shadow .16s var(--pt-ease);
}

.pssc-crm input:focus,
.pssc-crm select:focus,
.pssc-crm textarea:focus {
    border-color: var(--pt-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pt-accent) 16%, transparent);
}

.pssc-crm label { color: var(--pt-ink-2); }
.pssc-crm .field .hint { color: var(--pt-ink-3); }

/* ---------- tables ---------- */
.pssc-crm .table-scroll {
    border-radius: var(--pt-r-md);
    border: 1px solid var(--pt-hair-soft);
    background: var(--pt-surface);
}

.pssc-crm .mtable,
.pssc-crm .lg-table { border-collapse: separate; border-spacing: 0; }
.pssc-crm .mtable thead th,
.pssc-crm .lg-table thead th {
    background: var(--pt-raised);
    border-bottom: 1px solid var(--pt-hair);
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-ink-3);
    font-weight: 600;
}

.pssc-crm .mtable tbody tr,
.pssc-crm .lg-table tbody tr { transition: background-color .14s var(--pt-ease); }
.pssc-crm .mtable tbody tr:hover,
.pssc-crm .lg-table tbody tr:hover { background: rgba(0, 0, 0, .022); }
.pssc-crm .mtable tbody td,
.pssc-crm .lg-table tbody td { border-bottom: 1px solid var(--pt-hair-soft); }

/* ---------- the folds on Committee tools ---------- */
.pssc-crm .grp-fold {
    background: var(--pt-surface);
    border: 1px solid var(--pt-hair-soft);
    border-radius: var(--pt-r-lg);
    box-shadow: var(--pt-lift);
    overflow: hidden;
    transition: box-shadow .22s var(--pt-ease);
}

.pssc-crm .grp-fold[open] { box-shadow: var(--pt-lift-2); }
.pssc-crm .grp-fold summary { cursor: pointer; }
.pssc-crm .grp-fold summary::-webkit-details-marker { display: none; }
.pssc-crm .fold-chev { transition: transform .22s var(--pt-ease); }
.pssc-crm .grp-fold[open] .fold-chev { transform: rotate(180deg); }

/* ---------- the thing the page just told you ---------- */
.pssc-crm .notice,
.pssc-crm .ok,
.pssc-crm .bad {
    border-radius: var(--pt-r-md);
}

/* ---------- paging and filtering, from crm.js ---------- */
.pssc-crm .crm-pager { gap: 8px; }
.pssc-crm .crm-filter {
    border-radius: 999px;
    border: 1px solid var(--pt-hair);
    padding-left: 14px;
}

.pssc-crm .crm-pg,
.pssc-crm .pg {
    border-radius: 999px;
    border: 1px solid var(--pt-hair);
    background: var(--pt-surface);
    transition: border-color .16s var(--pt-ease), background-color .16s var(--pt-ease);
}

.pssc-crm .crm-pg:hover:not(:disabled),
.pssc-crm .pg:hover { border-color: var(--pt-accent); color: var(--pt-accent); }
.pssc-crm .crm-pg:disabled { opacity: .4; }
.pssc-crm .crm-count { color: var(--pt-ink-3); font-variant-numeric: tabular-nums; }

/* ---------- the live panel keeps the same language ---------- */
.pssc-crm .pulse-tab,
.pssc-crm .pulse-body {
    border-color: var(--pt-hair-soft);
    border-radius: var(--pt-r-lg);
    box-shadow: var(--pt-lift-2);
}

.pssc-crm .pulse-head,
.pssc-crm .pulse-foot { background: var(--pt-raised); border-color: var(--pt-hair-soft); }

/* ---------- one motion, and none at all if they asked ---------- */
@media (prefers-reduced-motion: reduce) {
    .pssc-crm *,
    .pssc-crm *::before,
    .pssc-crm *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .pssc-crm nav.ctabs a:hover,
    .pssc-crm .todo-row:hover,
    .pssc-crm .cta:hover { transform: none; }
}

/* ---------- a phone is not a small desktop ---------- */
@media (max-width: 640px) {
    .pssc-crm .m-card,
    .pssc-crm .rail-card,
    .pssc-crm .qcard,
    .pssc-crm nav.ctabs,
    .pssc-crm .grp-fold { border-radius: var(--pt-r-md); }
    .pssc-crm .cta,
    .pssc-crm button[type="submit"] { min-height: 44px; }
    .pssc-crm .m-side-nav a { min-height: 44px; display: flex; align-items: center; }
}

@media print {
    .pssc-crm .m-side, .pssc-crm .m-topbar, .pssc-crm nav.ctabs, .pssc-crm .pulse { display: none !important; }
    .pssc-crm .m-card, .pssc-crm .table-scroll { box-shadow: none; border-color: #ccc; }
}

/* ---------- actions inside a table are not the page's main event ----------
   A solid button is a promise that this is the thing to do next. Twenty-six
   of them down one column is just noise, and the eye stops seeing any of
   them. Inside a table the same button keeps the family colour but wears it
   lightly, and only fills in when it is actually under the pointer.         */

/* the family rule in pssc-crm.css is .m-shell.fam .cta:not(.alt) - four
   classes deep - so these have to reach the same depth to be heard */
.pssc-crm .m-shell .mtable .cta:not(.alt),
.pssc-crm .m-shell.fam .mtable .cta:not(.alt),
.pssc-crm .m-shell.fam .table-scroll .cta:not(.alt),
.pssc-crm .m-shell.fam .lg-table .cta:not(.alt),
.pssc-crm .mtable .cta,
.pssc-crm .lg-table .cta,
.pssc-crm .table-scroll .cta {
    background: color-mix(in srgb, var(--pt-accent) 11%, #fff);
    color: color-mix(in srgb, var(--pt-accent) 80%, #000);
    border: 1px solid color-mix(in srgb, var(--pt-accent) 22%, transparent);
    box-shadow: none;
    padding-block: 6px;
    white-space: nowrap;
}

.pssc-crm .m-shell .mtable .cta:not(.alt):hover,
.pssc-crm .m-shell.fam .mtable .cta:not(.alt):hover,
.pssc-crm .m-shell.fam .table-scroll .cta:not(.alt):hover,
.pssc-crm .m-shell.fam .lg-table .cta:not(.alt):hover,
.pssc-crm .mtable .cta:hover,
.pssc-crm .lg-table .cta:hover,
.pssc-crm .table-scroll .cta:hover {
    background: var(--pt-accent);
    border-color: var(--pt-accent);
    color: #fff;
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--pt-accent) 80%, transparent);
}

.pssc-crm .m-shell.fam .mtable .cta.ghost,
.pssc-crm .m-shell.fam .table-scroll .cta.ghost,
.pssc-crm .mtable .cta.ghost,
.pssc-crm .table-scroll .cta.ghost {
    background: var(--pt-surface);
    color: var(--pt-ink-3);
    border-color: var(--pt-hair);
}

/* the address and its Save button belong on one line until there is genuinely
   no room, rather than stacking and doubling the height of every row */
.pssc-crm .donor-em input[type="email"] { flex: 1 1 130px; }
.pssc-crm .donor-em .cta { padding-inline: 12px; }

/* a row that needs a human to look at it says so quietly, on the row itself */
.pssc-crm .mtable tbody tr:has(input:placeholder-shown) { background: color-mix(in srgb, var(--pt-bad) 3%, transparent); }

/* ---------- the small actions that live inside a row ----------
   Send again, Give 2 more days, File away. These were underlined text, which
   reads as "this will take you somewhere" when in fact each one does
   something. They stay quiet - they are not the point of the page - but they
   now look like the controls they are, and they line up instead of trailing
   off to the right edge.                                                   */
.pssc-crm .m-shell .linkbtn,
.pssc-crm .m-shell.fam .linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--pt-hair);
    border-radius: 999px;
    background: var(--pt-surface);
    color: var(--pt-ink-2);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s var(--pt-ease), color .16s var(--pt-ease),
                background-color .16s var(--pt-ease);
}

.pssc-crm .m-shell .linkbtn:hover,
.pssc-crm .m-shell.fam .linkbtn:hover {
    border-color: var(--pt-accent);
    color: var(--pt-accent);
    background: color-mix(in srgb, var(--pt-accent) 7%, #fff);
    text-decoration: none;
}

.pssc-crm .su-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* ---------- the active tool tab wears its own family ----------
   Each .ctab carries a --tint of its own, left over from an earlier design,
   and it is green on every page. So the tools row said "Money" in purple and
   then lit the open tab green, which quietly undid the whole point of giving
   each section a colour.
   The row itself is told the family once, on .ctabs-tools, by m_cttee_bar.
   Taking a copy there fixes the value at the row and lets it inherit down,
   so a tab can no longer overrule the section it lives in.                 */
.pssc-crm nav.ctabs .ctabs-tools { --pt-fam: var(--tint); }
.pssc-crm nav.ctabs .ctabs-tools .ctab.on,
.pssc-crm nav.ctabs .ctabs-tools .ctab[aria-current] {
    background: color-mix(in srgb, var(--pt-fam) 13%, #fff);
    color: color-mix(in srgb, var(--pt-fam) 82%, #000);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pt-fam) 36%, transparent);
}

.pssc-crm nav.ctabs .ctabs-tools .ctab .ctab-n {
    background: color-mix(in srgb, var(--pt-fam) 16%, #fff);
    color: color-mix(in srgb, var(--pt-fam) 80%, #000);
}

/* ---------- the tabs need air on the left ----------
   The first pill sat 14px from the edge of its own card, tighter than
   anything below it, which made the row look shoved against the side. */
.pssc-crm nav.ctabs { padding-left: 22px; padding-right: 18px; }
.pssc-crm nav.ctabs.is-stuck { padding-left: 22px; }
@media (max-width: 640px) {
    .pssc-crm nav.ctabs,
    .pssc-crm nav.ctabs.is-stuck { padding-left: 14px; padding-right: 12px; }
}

/* ---------- a name in a list is a way in ----------
   Linked names should read as names, not as a page full of blue. The link
   only shows itself on hover and to the keyboard. */
.pssc-crm .su-person,
.pssc-crm .mtable a:not(.cta):not(.pill):not(.linkbtn) {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .16s var(--pt-ease), border-color .16s var(--pt-ease);
}

.pssc-crm .su-person:hover,
.pssc-crm .mtable a:not(.cta):not(.pill):not(.linkbtn):hover {
    color: var(--pt-accent);
    border-bottom-color: color-mix(in srgb, var(--pt-accent) 45%, transparent);
}

/* ---------- four across, everywhere ----------
   The tile grids were each doing their own auto-fit sum, so the same screen
   showed three numbers on one page and five tools on the next, and the fourth
   tile dropped to a row of its own looking like an afterthought. They are all
   four across now, and they step down together rather than one at a time.   */
.pssc-crm .stat-grid,
.pssc-crm .qa-grid,
.pssc-crm .lg-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.pssc-crm .stat-grid > *,
.pssc-crm .qa-grid > *,
.pssc-crm .lg-tiles > * { min-width: 0; }
@media (max-width: 1100px) {
    .pssc-crm .stat-grid,
    .pssc-crm .qa-grid,
    .pssc-crm .lg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .pssc-crm .stat-grid,
    .pssc-crm .qa-grid,
    .pssc-crm .lg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .pssc-crm .stat-grid,
    .pssc-crm .qa-grid,
    .pssc-crm .lg-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- find a tool ---------- */
.pssc-crm .hub-find { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.pssc-crm .hub-find .crm-filter { flex: 1 1 auto; max-width: 380px; }
.pssc-crm .hub-find-n { color: var(--pt-ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pssc-crm .hub-find .crm-filter { max-width: none; } }

/* ---------- the tools, as a settings list ----------
   The tiles were already white cards with a pale tinted icon. What makes a
   list like this read as a settings screen rather than a page of buttons is
   three things, and they are all here:
     the icon is a solid rounded square in the section's own colour with a
     white glyph on it, not a pale wash with a coloured glyph - so a row is
     identifiable by its colour chip from across the screen;
     every row ends in a chevron, because every row goes somewhere, and a row
     that goes somewhere should say so without being hovered;
     the type does the hierarchy - the name in semibold, the sentence under it
     in grey at a size that is comfortably readable and clearly secondary -
     rather than borders and boxes doing it.
   The description is clamped to two lines so every card in a row is the same
   height, which is what stops a grid of them looking like a broken wall.     */
.pssc-crm .qa-grid .qa {
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border: 1px solid var(--pt-hair-soft);
    border-radius: 14px;
    background: var(--pt-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .18s var(--pt-ease), box-shadow .18s var(--pt-ease),
                transform .18s var(--pt-ease);
}

.pssc-crm .qa-grid .qa:hover {
    border-color: color-mix(in srgb, var(--sec, var(--pt-accent)) 40%, var(--pt-hair));
    box-shadow: var(--pt-lift);
    transform: translateY(-1px);
}

/* the chip */
.pssc-crm .qa-grid .qa .ic {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sec, var(--pt-accent));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
                0 2px 6px -2px color-mix(in srgb, var(--sec, var(--pt-accent)) 70%, transparent);
    transition: transform .18s var(--pt-ease);
}

.pssc-crm .qa-grid .qa .ic svg { width: 21px; height: 21px; stroke: #fff; }
.pssc-crm .qa-grid .qa:hover .ic { transform: scale(1.04); }

/* the words */
.pssc-crm .qa-grid .qa > span:not(.ic):not(.n) { flex: 1 1 auto; min-width: 0; }
.pssc-crm .qa-grid .qa b {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pt-ink);
}

.pssc-crm .qa-grid .qa small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.38;
    color: var(--pt-ink-3);
}

/* the count, then the chevron */
.pssc-crm .qa-grid .qa .n {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sec, var(--pt-accent)) 14%, #fff);
    color: color-mix(in srgb, var(--sec, var(--pt-accent)) 78%, #000);
    font-size: .74rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.pssc-crm .qa-grid .qa::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid var(--pt-ink-3);
    border-bottom: 2px solid var(--pt-ink-3);
    border-radius: 1px;
    transform: rotate(-45deg);
    opacity: .55;
    transition: transform .18s var(--pt-ease), opacity .18s var(--pt-ease);
}

.pssc-crm .qa-grid .qa:hover::after { opacity: 1; transform: rotate(-45deg) translate(2px, 2px); }

/* a jump down this same page is not a journey, so it points down instead */
.pssc-crm .qa-grid .qa.qa-jump::after { transform: rotate(45deg); }
.pssc-crm .qa-grid .qa.qa-jump:hover::after { transform: rotate(45deg) translate(2px, 2px); }
@media (prefers-reduced-motion: reduce) {
    .pssc-crm .qa-grid .qa:hover { transform: none; }
    .pssc-crm .qa-grid .qa:hover .ic { transform: none; }
    .pssc-crm .qa-grid .qa:hover::after { transform: rotate(-45deg); }
    .pssc-crm .qa-grid .qa.qa-jump:hover::after { transform: rotate(45deg); }
}

@media (max-width: 560px) {
    .pssc-crm .qa-grid .qa { padding: 12px; gap: 11px; }
    .pssc-crm .qa-grid .qa .ic { width: 38px; height: 38px; border-radius: 11px; }
}

/* ==========================================================================
   the member dashboard
   The tools side of the house was rebuilt on one ground, one surface,
   hairlines and a single family colour per thing. The member side still
   wore the old clothes: a coloured bar sitting on top of every card, a pale
   tinted chip with a coloured glyph inside it, and seven identical blue
   buttons that gave no clue which one mattered.
   Nothing below changes a word of the page. The chip becomes solid in the
   card own colour with a white glyph, the bar on top goes, the description
   is clamped so a row of cards is one height, and the action reads as the
   card colour rather than as another blue button.
   ========================================================================== */

/* the greeting panel: flat graphite, not a purple gradient */
.pssc-crm .px-hero {
    border-radius: var(--pt-r-lg);
    padding: 26px 28px 22px;
    background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 100%);
    box-shadow: var(--pt-lift-2);
}

.pssc-crm .px-hero::after {
    background: radial-gradient(620px 220px at 86% -40%, rgba(255,255,255,.10), transparent 70%);
}

.pssc-crm .px-hero h1 { font-weight: 600; letter-spacing: -.022em; }
.pssc-crm .px-hero .px-e { font-weight: 600; letter-spacing: .09em; color: rgba(255,255,255,.6); }
.pssc-crm .px-hero .px-lede { color: rgba(255,255,255,.72); }
.pssc-crm .px-chips .pill {
    background: rgba(255,255,255,.11);
    border-color: rgba(255,255,255,.16);
    font-weight: 600;
}

.pssc-crm .px-chips .pill.num { background: #fff; color: #1c1c1e; border-color: #fff; }
.pssc-crm .px-quick a { border-radius: 999px; font-weight: 600; }

/* four across, the same grid the tools use */
.pssc-crm .px-deck {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

@media (max-width: 1180px) { .pssc-crm .px-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pssc-crm .px-deck { grid-template-columns: minmax(0, 1fr); } }
.pssc-crm .px-card {
    border: 1px solid var(--pt-hair-soft);
    border-radius: 14px;
    padding: 15px 15px 13px;
    background: var(--pt-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .18s var(--pt-ease), box-shadow .18s var(--pt-ease),
                transform .18s var(--pt-ease);
}

.pssc-crm .px-card:hover {
    border-color: color-mix(in srgb, var(--sec, var(--pt-accent)) 40%, var(--pt-hair));
    box-shadow: var(--pt-lift);
    transform: translateY(-1px);
}

/* the bar on top was the old idiom. The colour now lives in the chip. */
.pssc-crm .px-card::before { display: none; }
.pssc-crm .px-card .px-i,
.pssc-crm .px-card.good .px-i,
.pssc-crm .px-card.warn .px-i,
.pssc-crm .px-card.bad .px-i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    margin-bottom: 11px;
    background: var(--sec, var(--pt-accent));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
                0 2px 6px -2px color-mix(in srgb, var(--sec, var(--pt-accent)) 70%, transparent);
    transition: transform .18s var(--pt-ease);
}

.pssc-crm .px-card .px-i svg { width: 19px; height: 19px; stroke: #fff; }
.pssc-crm .px-card:hover .px-i { transform: scale(1.04); }
.pssc-crm .px-card .px-e {
    font-size: .68rem;
    letter-spacing: .07em;
    font-weight: 600;
    color: var(--pt-ink-3);
    margin-bottom: 3px;
}

.pssc-crm .px-card .px-v {
    font-size: 1.5rem;
    line-height: 1.14;
    letter-spacing: -.022em;
    color: var(--pt-ink);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.pssc-crm .px-card .px-v b { font-weight: 600; }
.pssc-crm .px-card.good .px-v b { color: var(--pt-good); }
.pssc-crm .px-card.warn .px-v b { color: var(--pt-warn); }
.pssc-crm .px-card.bad  .px-v b { color: var(--pt-bad); }

/* two lines, so a row of cards is one height and not a broken wall */
.pssc-crm .px-card .px-s {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--pt-ink-2);
    margin-bottom: 12px;
}

.pssc-crm .px-card .px-s b { font-weight: 600; color: var(--pt-ink); }

/* one way in, in the card own colour */
.pssc-crm .px-card .px-a { gap: 6px; }
.pssc-crm .px-card .px-a a {
    font-size: .82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    transition: background .16s var(--pt-ease), color .16s var(--pt-ease);
}

.pssc-crm .px-card .px-a a.go {
    background: color-mix(in srgb, var(--sec, var(--pt-accent)) 11%, #fff);
    color: var(--sec, var(--pt-accent));
}

.pssc-crm .px-card .px-a a.go:hover {
    background: var(--sec, var(--pt-accent));
    color: #fff;
}

.pssc-crm .px-card .px-a a.alt {
    background: transparent;
    color: var(--pt-ink-3);
    padding-left: 8px;
    padding-right: 8px;
}

.pssc-crm .px-card .px-a a.alt:hover { background: rgba(0,0,0,.045); color: var(--pt-ink); }

/* the committee summary that sits above the deck */
.pssc-crm .px-ops {
    border-radius: var(--pt-r-lg);
    border: 1px solid var(--pt-hair-soft);
    background: var(--pt-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.pssc-crm .px-ops h2 { font-weight: 600; letter-spacing: -.018em; }
.pssc-crm .px-ops .px-e { font-weight: 600; letter-spacing: .07em; color: var(--pt-ink-3); }
@media (prefers-reduced-motion: reduce) {
    .pssc-crm .px-card:hover { transform: none; }
    .pssc-crm .px-card:hover .px-i { transform: none; }
}

/* On the dashboard the queue is a summary, not the work itself. A row that
   lists four refunds in full pushes the rest of the page off the screen, so
   here the detail is clamped and the row opens the tool that carries it.
   Committee tools keeps the full text, because that is where it is used. */
.pssc-crm .px-ops .todo-row .todo-t small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The second way in sits under the first, not beside it. Two links side by
   side wrapped on a narrow card, which pushed that card's button up a line
   and left a row of buttons at four different heights. A fixed block at the
   foot of every card keeps the main button on one line across the row. */
.pssc-crm .px-card .px-a {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    min-height: 68px;
    margin-bottom: 0;
}

.pssc-crm .px-card .px-a a.alt { padding: 4px 8px; font-weight: 500; }

/* ==========================================================================
   the navigator, made smaller

   Every committee page opened with 279 pixels of furniture before a word of
   content: a navy strip carrying nothing but the page name, then a bordered
   box holding sixteen pills in two rows, each with a coloured dot, two
   different ideas of what "this one is open" looks like, and a note.

   What it is now: a quiet page strip, one scrolling row of sections, one row
   of underlined tabs beneath it, and the note as a caption. The colour is
   spent where it says something - the open section and the open tab - and
   nowhere else. Same links, same order, same behaviour, about a hundred
   fewer pixels of it.
   ========================================================================== */

/* the strip: a page header, not a band of colour */
@media (min-width: 1001px) {
    body.pssc-crm .m-col > .m-topbar {
        margin: -26px 0 14px !important;
        padding: 9px 16px !important;
        background: rgba(255, 255, 255, .82) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--pt-hair-soft);
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    body.pssc-crm .m-col > .m-topbar .m-topbar-t {
        color: var(--pt-ink) !important;
        font-weight: 600 !important;
        font-size: 1.02rem !important;
    }
    body.pssc-crm .m-col > nav.ctabs,
    body.pssc-crm .m-col > nav.ctabs.is-stuck {
        background: transparent !important;
    }
}

/* the navigator itself: no box, just the two rows and a rule under them */
.pssc-crm nav.ctabs {
    margin: -2px 0 16px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--pt-hair-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* row one: the sections, on one line that scrolls rather than four that wrap */
.pssc-crm nav.ctabs .ctabs-secs {
    /* On a wide screen they wrap, because a section that has scrolled out of
       sight is a section nobody clicks. On a phone there is no width to wrap
       into, so there the row scrolls instead. */
    flex-wrap: wrap;
    gap: 1px;
    padding: 0 0 7px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

@media (max-width: 860px) {
    .pssc-crm nav.ctabs .ctabs-secs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
}
.pssc-crm nav.ctabs .ctabs-secs::-webkit-scrollbar { display: none; }

.pssc-crm nav.ctabs .ctabs-home {
    flex: 0 0 auto;
    margin-right: 6px;
    padding: 5px 10px;
    line-height: 1.3;
    background: var(--pt-surface);
    color: var(--pt-ink-2);
    border: 1px solid var(--pt-hair);
    font-size: .8rem;
    font-weight: 500;
}
.pssc-crm nav.ctabs .ctabs-home:hover,
.pssc-crm nav.ctabs .ctabs-home:focus {
    background: var(--pt-raised);
    color: var(--pt-ink);
    border-color: var(--pt-ink-3);
}

.pssc-crm nav.ctabs .ctabs-sec {
    flex: 0 0 auto;
    padding: 5px 8px;
    line-height: 1.3;
    border: 0;
    background: transparent;
    color: var(--pt-ink-2);
    font-size: .82rem;
    font-weight: 500;
}
/* nine coloured dots on nine pills is confetti, not wayfinding */
.pssc-crm nav.ctabs .ctabs-sec::before { display: none; }
.pssc-crm nav.ctabs .ctabs-sec:hover,
.pssc-crm nav.ctabs .ctabs-sec:focus {
    background: rgba(0, 0, 0, .05);
    color: var(--pt-ink);
}
.pssc-crm nav.ctabs .ctabs-sec.on,
.pssc-crm nav.ctabs .ctabs-sec.on:hover,
.pssc-crm nav.ctabs .ctabs-sec.on:focus {
    background: var(--tint);
    border-color: var(--tint);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

/* row two: tabs, underlined in the family colour */
.pssc-crm nav.ctabs .ctabs-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid var(--pt-hair-soft);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pssc-crm nav.ctabs .ctabs-tools::-webkit-scrollbar { display: none; }

.pssc-crm nav.ctabs .ctabs-tools .ctab {
    flex: 0 0 auto;
    padding: 8px 10px 7px;
    line-height: 1.3;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--pt-ink-2);
    font-size: .85rem;
    font-weight: 500;
}
.pssc-crm nav.ctabs .ctabs-tools .ctab::before { display: none; }
.pssc-crm nav.ctabs .ctabs-tools .ctab:hover,
.pssc-crm nav.ctabs .ctabs-tools .ctab:focus {
    background: rgba(0, 0, 0, .035);
    color: var(--pt-ink);
    border-bottom-color: var(--pt-hair);
}
.pssc-crm nav.ctabs .ctabs-tools .ctab.on,
.pssc-crm nav.ctabs .ctabs-tools .ctab[aria-current],
.pssc-crm nav.ctabs .ctabs-tools .ctab.on:hover,
.pssc-crm nav.ctabs .ctabs-tools .ctab[aria-current]:hover {
    background: transparent;
    color: var(--pt-fam, var(--tint));
    font-weight: 600;
    border-bottom-color: var(--pt-fam, var(--tint));
    box-shadow: none;
}

/* nothing in a navigation row should move under the pointer */
.pssc-crm nav.ctabs a:hover { transform: none; }

.pssc-crm nav.ctabs .ctab-n {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: .68rem;
    font-weight: 600;
}

/* the note explains the open tab, so it reads as a caption under it */
.pssc-crm nav.ctabs .ctabs-note {
    margin: 0;
    padding: 8px 2px 9px;
    border-left: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--pt-ink-3);
}

@media (max-width: 1000px) {
    .pssc-crm nav.ctabs { margin-bottom: 12px; }
    .pssc-crm nav.ctabs .ctabs-note { padding-bottom: 8px; }
}

/* The club inbox, the toolbox and the events page open with the same banner
   the dashboard used to wear. It is the same graphite as the dashboard now,
   so a member moving between the two sides of the site does not walk into a
   different palette halfway through. */
.pssc-crm .dash-hero {
    border-radius: var(--pt-r-lg);
    background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 100%);
    box-shadow: var(--pt-lift-2);
}
.pssc-crm .dash-hero::after {
    background: radial-gradient(620px 220px at 86% -40%, rgba(255,255,255,.10), transparent 70%);
}
.pssc-crm .dash-hero h1,
.pssc-crm .dash-hero h2 { font-weight: 600; letter-spacing: -.022em; }
.pssc-crm .dash-hero .px-e,
.pssc-crm .dash-hero .eyebrow { font-weight: 600; letter-spacing: .09em; color: rgba(255,255,255,.6); }

/* On a phone the navigator still sticks to the top as you scroll, so there it
   keeps a surface of its own - a transparent one would let the page run
   underneath it. */
@media (max-width: 1000px) {
    .pssc-crm nav.ctabs {
        padding: 8px 0 0;
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
    }
}

/* ==========================================================================
   a certificate you can see

   Your certificates listed a reference number, a date and a button. Nobody
   recognises a certificate by its reference number, so each card now shows
   the certificate itself, small, and opening it is a click on the paper.
   ========================================================================== */
.pssc-crm .cert-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    height: 292px;
    margin: -4px 0 14px;
    border: 1px solid var(--pt-hair-soft);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: border-color .18s var(--pt-ease), box-shadow .18s var(--pt-ease),
                transform .18s var(--pt-ease);
}
.pssc-crm .cert-thumb:hover,
.pssc-crm .cert-thumb:focus-visible {
    border-color: var(--pt-accent);
    box-shadow: var(--pt-lift);
    transform: translateY(-1px);
}
.pssc-crm .cert-thumb-in {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 880px;
    transform: translateX(-50%) scale(.315);
    transform-origin: top center;
    pointer-events: none;
}
.pssc-crm .cert-thumb .cert-sheet { margin: 0; box-shadow: none; }
/* a soft bottom edge, so a paper longer than the box reads as cropped on purpose */
.pssc-crm .cert-thumb::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

/* Printing a single certificate blanks the rest of its page on purpose. This
   page holds several of them in miniature, so there the thumbnails step out
   of the way and the page prints as the list it is. */
@media print {
    body:has(.cert-thumb) .cert-thumb { display: none !important; }
    body:has(.cert-thumb) * { visibility: visible !important; }
}

/* ==========================================================================
   the toolbox, laid out as a board

   It was nine full-width bars, all folded shut: a title, a grey line, a
   chevron, repeated nine times down a thousand-pixel column with forty tools
   hidden behind them. It read as a filing cabinet, and a tool you cannot see
   is a tool nobody opens.

   Two columns of cards now, every tool on the page, the section colour on a
   single dot rather than a stripe and a rule. The finder still narrows it.
   ========================================================================== */
.pssc-crm .hub-board {
    columns: 2;
    column-gap: 16px;
    margin-top: 4px;
}
@media (max-width: 900px) { .pssc-crm .hub-board { columns: 1; } }

.pssc-crm .hub-sec {
    display: inline-block;
    width: 100%;
    margin: 0 0 16px;
    padding: 14px 14px 10px;
    border: 1px solid var(--pt-hair-soft);
    border-radius: var(--pt-r-lg);
    background: var(--pt-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.pssc-crm .hub-sec[hidden] { display: none !important; }

.pssc-crm .hub-sec-h {
    margin: 0 0 8px;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--pt-hair-soft);
}
.pssc-crm .hub-sec-h h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 3px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--pt-ink);
}
.pssc-crm .hub-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 16%, transparent);
}
.pssc-crm .hub-sec-h p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--pt-ink-3);
}
.pssc-crm .hub-sec .grp-n {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--tint);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Inside a card the tools are rows. A bordered tile inside a bordered card
   is a box inside a box, and the eye has to unpick both to read one name. */
.pssc-crm .hub-sec .qa-grid { display: block; }
.pssc-crm .hub-sec .qa {
    display: flex;
    margin: 0 -6px;
    padding: 7px 6px;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}
.pssc-crm .hub-sec .qa[hidden] { display: none !important; }
.pssc-crm .hub-sec .qa:hover,
.pssc-crm .hub-sec .qa:focus-visible {
    background: color-mix(in srgb, var(--sec, var(--pt-accent)) 7%, #f7f7f9);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}
.pssc-crm .hub-sec .qa .ic { width: 32px; height: 32px; border-radius: 10px; }
.pssc-crm .hub-sec .qa .ic svg { width: 17px; height: 17px; }
.pssc-crm .hub-sec .qa b { font-size: .9rem; }
.pssc-crm .hub-sec .qa small { -webkit-line-clamp: 1; font-size: .78rem; }
.pssc-crm .hub-sec .qa::after { right: 8px; }

/* while the finder is narrowing, the board reads better as one column of
   whatever is left than as two columns with a hole in them */
.pssc-crm .hub-board.is-finding { columns: 1; }

/* A jump to an anchor on this same page carried the words "on this page" in
   the very pseudo-element the arrow is drawn in, so the words and the arrow
   were fighting over one box and the words came out turned on their side.
   The arrow wins: it already points down, which is what the words said. */
.pssc-crm .m-shell .qa-grid .qa.qa-jump::after {
    content: "";
    position: static;
    width: 7px;
    height: 7px;
    font-size: 0;
    letter-spacing: 0;
    color: transparent;
    border-right: 2px solid var(--pt-ink-3);
    border-bottom: 2px solid var(--pt-ink-3);
    border-radius: 1px;
    transform: rotate(45deg);
}
.pssc-crm .m-shell .qa-grid .qa.qa-jump:hover::after {
    color: transparent;
    border-color: var(--sec, var(--pt-accent));
    transform: rotate(45deg) translate(2px, 2px);
}

/* ==========================================================================
   the queue, as a list

   Five floating cards, each one tinted pink or amber end to end, each with a
   coloured stripe down its left edge and a pale square holding a number. A
   whole pink card to say "four things" is shouting, and the stripe is the
   idiom the toolbox has just stopped using.

   One card holding rows now, hairlines between them. The urgency lives on the
   number, which is the thing it is about.
   ========================================================================== */
.pssc-crm .m-shell .todo { display: block; margin: 0 0 22px; }

/* on Committee tools the list stands on its own, so it is the card. Inside a
   Q card or the dashboard panel it is already in one, and must not be a
   second. */
.pssc-crm .m-col > .todo {
    border: 1px solid var(--pt-hair-soft);
    border-radius: var(--pt-r-lg);
    background: var(--pt-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

.pssc-crm .m-shell .todo-row,
.pssc-crm .m-shell .todo-row.hot,
.pssc-crm .m-shell .todo-row.warm,
.pssc-crm .m-shell .todo-row.cool {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.pssc-crm .m-shell .todo-row + .todo-row { border-top: 1px solid var(--pt-hair-soft); }
.pssc-crm .m-shell .todo-row:hover,
.pssc-crm .m-shell .todo-row:focus-visible {
    background: var(--pt-raised);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.pssc-crm .m-shell .todo-n,
.pssc-crm .m-shell .todo-row.hot .todo-n,
.pssc-crm .m-shell .todo-row.warm .todo-n,
.pssc-crm .m-shell .todo-row.cool .todo-n {
    flex: none;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 9px;
    font-size: .86rem;
    font-weight: 600;
    background: #eceef2;
    color: var(--pt-ink-2);
}
.pssc-crm .m-shell .todo-row.hot  .todo-n { background: var(--pt-bad);  color: #fff; }
.pssc-crm .m-shell .todo-row.warm .todo-n { background: var(--pt-warn); color: #fff; }
.pssc-crm .m-shell .todo-row.cool .todo-n { background: #1049a9;        color: #fff; }

.pssc-crm .m-shell .todo-t b {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.008em;
    color: var(--pt-ink);
}
/* a paragraph set across a thousand pixels is a wall. Hold it to a measure. */
.pssc-crm .m-shell .todo-t small {
    max-width: 74ch;
    margin-top: 3px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--pt-ink-2);
}

.pssc-crm .m-shell .todo-go {
    align-self: flex-start;
    padding-top: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--pt-ink-3);
}
.pssc-crm .m-shell .todo-row:hover .todo-go {
    color: var(--pt-ink);
    text-decoration: none;
}

/* the headings over them: a name and a note, not a name and a rule running
   off to the right edge */
.pssc-crm .m-shell .grp {
    margin: 26px 0 10px;
    gap: 10px;
}
.pssc-crm .m-shell .grp h2 {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--pt-ink);
}
.pssc-crm .m-shell .grp p { font-size: .82rem; color: var(--pt-ink-3); }
.pssc-crm .m-shell .grp .line { display: none; }

/* The Q card on a tool page still wore a coloured bar across its top - the
   same idiom the dashboard tiles and the toolbox have both stopped using.
   Hairline, and the colour on the count. */
.pssc-crm .qcard {
    border: 1px solid var(--pt-hair-soft);
    border-radius: var(--pt-r-lg);
    background: var(--pt-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.pssc-crm .qcard::before { display: none; }
.pssc-crm .qcard-h {
    padding: 12px 14px 2px;
    border-bottom: 0;
}
.pssc-crm .qcard-h h2 {
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--pt-ink);
}
.pssc-crm .qcard-n {
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--live-tint, var(--pt-accent));
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}
.pssc-crm .qcard .todo { padding: 2px 4px 6px; }

/* When a save holds your place on the page, the confirmation printed at the
   top is off screen and nobody ever sees it. It comes to the eye instead, and
   goes again on its own. */
.pssc-crm .flash.flash-float {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 200;
    margin: 0;
    width: max-content;
    max-width: min(560px, calc(100vw - 32px));
    transform: translateX(-50%);
    box-shadow: var(--pt-lift-2);
    transition: opacity .35s var(--pt-ease), transform .35s var(--pt-ease);
}
.pssc-crm .flash.flash-float.is-gone {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
    .pssc-crm .flash.flash-float { transition: none; }
}

/* Sign out is a button in a form now rather than a link, because it changes
   something. It is still the same line in the menu. */
.pssc-crm .m-out-f { margin: 0; display: contents; }
/* Only what a button needs to stop looking like one. Deliberately no
   font-size here: the shorthand would beat .m-side-link's own size and the
   sign-out line would come out bigger than the lines above it. */
.pssc-crm .m-side-link.out,
.pssc-crm .m-topbar-out {
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}
.pssc-crm button.m-side-link.out {
    width: 100%;
    border: 0;
    text-align: left;
}
.pssc-crm button.m-topbar-out { border: 0; }