/* Campaign board (page-campaign.php) — "Navy Glass Duotone": dark navy
   surround (header, sidebar, board backdrop) matching the App's own glass
   language, with light/white working surfaces (tiles, lists, cards, modal)
   for legibility — Trello's structure, the App's own accent blue
   (#6C93E0 → #3A5BA0, already used on /app/'s Add Event button and
   today-ring) instead of Trello's stock blue. Loaded only on the campaign
   page (see functions.php), never alongside site.css's dark tokens. */

/* body.restoremat-app-shell (shared with /app/, set in header-app.php via
   body_class()) centers a single narrow, self-widthed .app-shell box with
   dark padding around it — built entirely around /app/'s "phone
   simulation" box, and wrong in every particular for a full-width board.
   This stylesheet only ever loads on the campaign page (see
   functions.php), so overriding the bare class here is safe — it can't
   leak onto /app/, which never loads campaign.css. */
body.restoremat-app-shell {
    display: block;
    padding: 0;
    background: #050a16;
}

/* site.css's own mobile rule for this same shared class (@media max-width:
   500px) additionally locks body to overflow:hidden plus a fixed 100dvh
   height — correct for /app/, which is deliberately pinned to exactly one
   screen with only .app-shell-content scrolling inside it, but never
   overridden above since this page has no equivalent inner-scroll
   container. Left alone, it silently clips anything here taller than one
   screen — an expanded election's boards — with no way to scroll down to
   see it. Restoring ordinary page-level scrolling on mobile is what this
   page actually needs. */
@media (max-width: 500px) {
    body.restoremat-app-shell {
        overflow: visible;
        height: auto;
    }
}

.cc-shell {
    width: 100%;
    min-height: 100vh;
    background: radial-gradient(ellipse at top left, #16234a 0%, #050a16 70%);
    font-family: "Lato", sans-serif;
    color: #F3F5FA;
}

/* Custom login / access-restricted screen — same dark shell and Calistoga
   wordmark as the header (.cc-brand), sized down to a single centered
   card since there's nothing else on the page yet. */
.cc-login-shell {
    width: 100%;
    min-height: 100vh;
    background: radial-gradient(ellipse at top left, #16234a 0%, #050a16 70%);
    font-family: "Lato", sans-serif;
    color: #F3F5FA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.cc-login-card {
    width: 100%;
    max-width: 340px;
    background: rgba(1,8,17,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    text-align: center;
}

.cc-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Calistoga", serif;
    font-size: 1.3rem;
    color: #F3F5FA;
}

.cc-login-brand svg { width: 26px; height: 26px; color: #6C93E0; }

.cc-login-sub {
    margin: 0.5rem 0 1.4rem;
    font-size: 0.85rem;
    color: rgba(243,245,250,0.55);
}

.cc-login-error {
    background: rgba(176,70,50,0.12);
    border: 1px solid rgba(176,70,50,0.35);
    color: #F5B7B1;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1.1rem;
    text-align: left;
}

.cc-login-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    text-align: left;
}

.cc-login-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(243,245,250,0.5);
}

.cc-login-form input {
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #F3F5FA;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
}

.cc-login-form input:focus {
    outline: none;
    border-color: #6C93E0;
    background: rgba(255,255,255,0.09);
}

.cc-login-submit { width: 100%; margin-top: 0.3rem; font-size: 0.9rem; padding: 0.7rem 1rem; }

/* site.css's global `a { text-decoration: none; }` only covers unvisited
   links — "Log out" is always a :visited link the moment you're on this
   screen (wp_logout_url() was just followed to reach it, or the browser's
   otherwise seen it before), so without an explicit :visited rule here it
   falls back to the browser's own default blue-underline instead. */
.cc-login-forgot, .cc-login-forgot:visited {
    display: inline-block;
    margin-top: 1.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(243,245,250,0.5);
    text-decoration: none;
}

.cc-login-forgot:hover { color: #A9C2EE; text-decoration: none; }

.cc-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(1,8,17,0.75);
    backdrop-filter: blur(12px);
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Every custom <a>-based element on this page needs its own :hover color
   and text-decoration, not just a base rule — the original public site's
   bare `a:hover { color: red; text-decoration: underline; }` (site.css,
   still loaded everywhere) otherwise wins on hover for exactly those two
   properties, since nothing here would be declaring them for that state
   otherwise (CSS cascades per property, not per rule). */
.cc-brand, .cc-brand:hover {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Calistoga", serif;
    font-size: 1.1rem;
    color: #F3F5FA;
    text-decoration: none;
}

.cc-brand svg { width: 22px; height: 22px; color: #6C93E0; }
.cc-brand { flex-shrink: 0; }

/* The one thing in this row with genuinely unpredictable length (a ward
   name, not a fixed label) — everything else here (brand, icon buttons)
   keeps its natural size (flex-shrink:0 below) and this truncates instead,
   the standard way to keep a header from forcing the whole page wider than
   the phone showing it. */
.cc-header-board-title {
    font-weight: 900;
    font-size: 0.95rem;
    color: rgba(243,245,250,0.7);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Picker page only (see page-campaign.php) — sits between the brand and
   .cc-header-actions the same way .cc-header-board-title does on a board
   page, so the two never both need room at once. */
.cc-header-search {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 340px;
}

.cc-header-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: #A9C2EE;
    pointer-events: none;
}

.cc-header-search-input {
    width: 100%;
    font-family: inherit;
    font-size: 0.82rem;
    color: #F3F5FA;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(108,147,224,0.32);
    border-radius: 999px;
    padding: 0.5rem 0.9rem 0.5rem 2.1rem;
}

.cc-header-search-input::placeholder { color: rgba(243,245,250,0.4); }
.cc-header-search-input:focus { outline: none; border-color: #6C93E0; background: rgba(255,255,255,0.1); }

.cc-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    background: #12182a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.4rem;
    box-shadow: 0 16px 32px rgba(0,0,0,0.5);
    z-index: 30;
}

.cc-search-results[hidden] { display: none; }

.cc-search-group-label {
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #787c88;
    padding: 0.45rem 0.5rem 0.25rem;
}

.cc-search-result {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 0.5rem 0.55rem;
    margin-bottom: 0.15rem;
    font-family: inherit;
    font-size: 0.8rem;
    color: #F3F5FA;
    cursor: pointer;
}

.cc-search-result:hover, .cc-search-result:focus { background: rgba(255,255,255,0.07); outline: none; }
.cc-search-result mark { background: rgba(153,47,61,0.3); color: #e59aa6; border-radius: 2px; padding: 0 1px; }
.cc-search-result .cc-search-result-meta { display: block; font-size: 0.66rem; color: #787c88; font-weight: 700; margin-top: 0.15rem; }

.cc-search-empty { font-size: 0.76rem; color: #787c88; padding: 0.6rem 0.5rem; }

/* Brief confirmation a search result actually landed you somewhere — the
   everyday blue, not the reserved red, since this is just "here it is",
   not something that needs ongoing attention. */
@keyframes cc-search-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(108,147,224,0); }
    15% { box-shadow: 0 0 0 3px rgba(108,147,224,0.9); }
}
.cc-search-flash { animation: cc-search-flash 1.6s ease; }

.cc-header-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(243,245,250,0.6);
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
}

.cc-header-link:hover { background: rgba(255,255,255,0.08); color: #F3F5FA; text-decoration: none; }

.cc-header-icon-btn, .cc-header-icon-btn:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(243,245,250,0.6);
    text-decoration: none;
}

.cc-header-icon-btn:hover { background: rgba(255,255,255,0.08); color: #F3F5FA; }
.cc-header-icon-btn svg { width: 16px; height: 16px; }

/* Both real <button>s, not <a>s like every other plain user of
   .cc-header-icon-btn above — browsers give buttons their own default
   background/border that class never resets (it didn't need to, until
   now), which is exactly the solid white circle this fixes: without
   this, mobile Safari was showing its native button chrome instead of
   the transparent icon look every other header button already has. */
.cc-mobile-search-toggle,
.cc-mobile-search-toggle:hover,
.cc-activity-toggle,
.cc-activity-toggle:hover {
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.cc-activity-toggle.on { background: rgba(108,147,224,0.22); color: #A9C2EE; }

/* The calendar toggle carries its own weight (a gradient fill, not just a
   hover state) so it reads as a feature button, not another plain icon
   link next to it — and .on (panel open) keeps that same fill so it's
   obvious the button is "pressed" while the panel is showing. */
.cc-cal-toggle, .cc-cal-toggle:hover {
    border: none;
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

.cc-cal-toggle:hover { filter: brightness(1.08); }
.cc-cal-toggle.on { box-shadow: 0 0 0 2px rgba(108,147,224,0.5); }

/* ---------------------------- board picker ---------------------------- */

.cc-picker-layout {
    display: flex;
    align-items: flex-start;
    max-width: 1280px;
    margin: 0 auto;
    min-height: calc(100vh - 57px);
}

.cc-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 1.5rem 0.9rem;
    min-height: calc(100vh - 57px);
}

.cc-sidebar-label {
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(243,245,250,0.35);
    padding: 0 0.6rem;
    margin-bottom: 0.5rem;
}

.cc-branch-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(243,245,250,0.72);
    margin-bottom: 0.15rem;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.cc-branch-item:hover { background: rgba(255,255,255,0.06); }
.cc-branch-item.on { background: rgba(108,147,224,0.18); color: #A9C2EE; }

.cc-branch-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.cc-picker-main { flex: 1; min-width: 0; padding: 1.5rem 2rem; }

.cc-picker-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cc-picker-heading { font-family: "Calistoga", serif; font-weight: 400; font-size: 1.15rem; color: #fff; margin: 0; }

.cc-picker-heading-group { display: flex; align-items: center; gap: 1rem; }

/* "+ Add Election Campaign" doesn't shrink (button text can't wrap
   mid-word) — past a certain point that forces the whole picker column,
   and everything inside it, wider than the phone showing it. Wrapping the
   button onto its own line under the heading is what actually stops that
   push, not anything smaller — a flex item with unshrinkable content
   ignores its parent's min-width:0 the same way either way. */
@media (max-width: 480px) {
    .cc-picker-heading-group { flex-wrap: wrap; }
}

.cc-picker-loading { color: rgba(243,245,250,0.5); font-size: 0.9rem; padding: 2rem 0; text-align: center; }

/* A branch's elections stack vertically — each a collapsed accordion row,
   opening to show its own boards fully expanded underneath. */
.cc-picker-grid {
    display: block;
}

.cc-ac-board {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 0.9rem 0.9rem 1rem;
    margin-bottom: 0.9rem;
    position: relative;
}

.cc-ac-board:last-child { margin-bottom: 0; }

/* Rounded on the left to match the board's own corners, rather than
   relying on overflow:hidden on .cc-ac-board to clip a square-cornered
   stripe — overflow:hidden there was also clipping the lists row itself
   whenever it's wider than the (max-width-capped) page, cutting off
   "+ Add another list" instead of letting it scroll into view. */
.cc-ac-board::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
    background: var(--stripe, #6C93E0);
}

.cc-ac-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cc-ac-board-title-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    font-weight: 900;
    font-size: 0.9rem;
    font-family: inherit;
    color: #F3F5FA;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
}

.cc-ac-board-title-input:hover, .cc-ac-board-title-input:focus { background: rgba(255,255,255,0.07); outline: none; }
.cc-ac-board-title-input[readonly] { cursor: default; }
.cc-ac-board-title-input[readonly]:hover, .cc-ac-board-title-input[readonly]:focus { background: transparent; }

.cc-ac-board-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* This button also carries the plain .cc-add-list class it shares with the
   trailing "column" button inside the lists row (same create-a-board
   action, wired up once for both) — which comes with width:272px and
   flex-shrink:0, sized to match a list column. In the header here it's a
   small text link next to the board title, not a column, so both need
   overriding back to a size that fits its content (the compound selector,
   not just .cc-ac-board-add-list alone, is what beats .cc-add-list's own
   same-specificity rule regardless of source order). Desktop had enough
   spare width in the header for a stray 272px flex-shrink:0 item to go
   unnoticed; a narrow phone doesn't — it was squeezing the title input
   down to a sliver. */
.cc-add-list.cc-ac-board-add-list {
    width: auto;
    flex-shrink: 1;
}

.cc-ac-board-add-list {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(243,245,250,0.4);
    background: transparent;
    border: none;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}

.cc-ac-board-add-list:hover { background: rgba(255,255,255,0.07); color: #A9C2EE; }

/* Boards (272px each) wrap after 3 per row instead of scrolling forever —
   840px = three boards + two gaps, which also happens to match "Ideas To
   Submit" (272px) + the FOI Library panel (556px) on the FOI Tracker row,
   so that row still reads as one line at the same cap. */
.cc-ac-lists {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 840px;
    padding-bottom: 0.25rem;
}

/* Inline board sections sit stacked on a homescreen with several other
   boards, not alone taking up the whole viewport like the (now-unlinked)
   single-board page does — cap list height tighter so one long list can't
   push the rest of the page miles down. */
.cc-ac-lists .cc-list { max-height: 420px; }

/* Below the width a single 272px board plus its neighbour's gap no longer
   fits (272px content + the page's own side padding), there's no room left
   to wrap a second one in — the "rows of 3" layout only works down to
   roughly tablet width. One board (or the 556px FOI Library) per row,
   full-width, is the mobile fallback: a plain vertical stack instead of a
   grid, same as every other narrow-screen board tool. */
@media (max-width: 620px) {
    .cc-ac-lists { max-width: 100%; }
    .cc-ac-lists .cc-list,
    .cc-ac-lists .cc-add-list,
    .cc-ac-lists .cc-foi-library { width: 100%; }
}

/* Compact cards (used everywhere now: the homescreen's inline sections and
   the real board page alike) do the two things it otherwise took opening a
   whole board — or a whole separate page — to do: mark a card done and
   mark it priority, both right on the row, no navigation. */
.cc-card-compact {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: default;
}

.cc-card-compact:hover { box-shadow: 0 1px 0 rgba(9,30,66,0.25); }

.cc-card-compact .cc-card-body { flex: 1; min-width: 0; cursor: pointer; }

.cc-card-compact.done .cc-card-title { color: #8891A6; text-decoration: line-through; }
.cc-card-compact.done { background: #F7F8FA; }

.cc-card-done-toggle {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.1rem;
    border-radius: 50%;
    border: 2px solid #C7CEDC;
    background: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.cc-card-done-toggle svg { width: 11px; height: 11px; }
.cc-card-done-toggle:hover { border-color: #6C93E0; }
.cc-card-done-toggle.on { background: #3FAE6B; border-color: #3FAE6B; color: #fff; }

.cc-card-priority-toggle {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.1rem;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #C7CEDC;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.cc-card-priority-toggle svg { width: 13px; height: 13px; }
.cc-card-priority-toggle:hover { color: #992F3D; }
.cc-card-priority-toggle.on { color: #992F3D; }

/* Base rules for the mobile search sheet's controls — declared here,
   BEFORE the @media block below that turns them on, not after it: equal-
   specificity rules resolve by source order, so an "always off" rule
   placed later in the file would silently beat the media query's "on"
   regardless of viewport width. Mirrors how cc-chat-backdrop instead
   just has no rule at all outside its own mobile block; these need an
   explicit default because .cc-mobile-search-toggle also carries
   .cc-header-icon-btn, which does set its own display. */
.cc-mobile-search-toggle,
.cc-search-clear,
.cc-search-minimize {
    display: none;
}

@media (max-width: 720px) {
    .cc-picker-layout { flex-direction: column; }

    /* Branches and the calendar's next-event snapshot form a second row
       pinned directly under the main header (57px is its real rendered
       height — see the matching min-height comment already on
       .cc-sidebar for the desktop layout) and stay stuck there through
       the whole scroll of the election list beneath, instead of scrolling
       away with everything else the way the "Active Elections" banner
       above them still does. */
    .cc-sidebar {
        position: sticky;
        top: 57px;
        z-index: 15;
        width: 100%;
        min-height: 0;
        display: block;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background: rgba(5,10,22,0.94);
        backdrop-filter: blur(14px);
        padding: 0.75rem 0.9rem 0.85rem;
    }
    .cc-sidebar-label { display: none; }

    /* Branches -> a segmented control (equal-width tabs, one filled with
       the accent gradient for whichever is active) instead of a chip
       cloud that wraps across two or three lines — there's no room to
       spare for that once this whole row has to stay pinned on screen
       through every scroll. Scrolls sideways instead of wrapping if there
       are more branches than fit. */
    #cc-sidebar-branches {
        display: flex;
        gap: 2px;
        background: rgba(255,255,255,0.05);
        border-radius: 11px;
        padding: 3px;
        margin-bottom: 0.65rem;
        overflow-x: auto;
    }
    .cc-branch-item {
        flex: 1 0 auto;
        justify-content: center;
        width: auto;
        margin-bottom: 0;
        font-size: 0.68rem;
        padding: 0.5rem 0.4rem;
        white-space: nowrap;
        border-radius: 8px;
    }
    .cc-branch-item .cc-branch-dot { display: none; }
    .cc-branch-item.on {
        background: linear-gradient(135deg, #6C93E0, #3A5BA0);
        color: #fff;
        box-shadow: 0 3px 10px rgba(58,91,160,0.4);
    }

    /* The mobile-only calendar snapshot styling (hiding the month grid,
       compacting .cc-cal-main into a tappable date-tile row) lives further
       down, right after the .cc-cal-docked .cc-cal-expand-btn { display:
       flex } rule it needs to outrank — same selector, same specificity,
       so source order is what decides the tie and it has to come after. */

    /* flex:1 (set for the row layout, to fill whatever space the sidebar
       doesn't use) governs a different axis once the layout above switches
       to flex-direction:column — width here comes from cross-axis stretch
       instead, which only fills the container down to what its own content
       needs to NOT wrap. Anything inside that can't shrink (a button's
       text, a fixed-width board) was quietly widening this whole column,
       and everything in it, out past the screen edge. An explicit
       width:100% is what actually pins it to the viewport. */
    .cc-picker-main { width: 100%; }
    /* Redundant with the board's own name right below it in
       .cc-board-topbar, and truncates to almost nothing at this width
       anyway once it's squeezed between the brand and the icon row —
       simpler to just not show it twice. */
    .cc-header-board-title { display: none; }
    /* Still useful in the field, not just at a desk — but the always-on
       inline bar that works at a desk has nowhere to fit here without
       squeezing Campaign and Chat for room, so below this breakpoint it
       becomes a dedicated trigger icon (cc-mobile-search-toggle, hidden
       above it) that opens the real bar as a bottom sheet instead — same
       structure as Team Chat's own sheet, and the same reason: a
       position:fixed element anchored from the top is what iOS mishandles
       once a focused input's keyboard opens, and this input auto-focuses
       on open. cc-header-search itself supplies that sheet's content
       (bar, results) via the .mobile-open state below; nothing here
       duplicates that markup. */
    .cc-mobile-search-toggle { display: flex; }

    /* This is the actual fix for the sheet appearing to do nothing (or
       vanish) on a real phone: .cc-header-search and .cc-search-backdrop
       both live INSIDE <header>, and .cc-header up there carries its own
       backdrop-filter for the frosted-glass scroll effect. Per spec,
       backdrop-filter (like transform/filter/perspective) on an ancestor
       makes THAT ancestor the containing block for any descendant that's
       position:fixed — not the viewport. So the sheet was never actually
       positioned against the screen at all; it was positioned against
       cc-header's own 57px box, which is why nothing about it read as
       "on screen" (this didn't show up in browser-automation testing,
       which doesn't reproduce backdrop-filter's real-device containing-
       block behaviour here). Dropping the blur specifically at this
       breakpoint — the header's still readably opaque without it — is
       far simpler than restructuring the DOM so the sheet lives outside
       <header> the way Team Chat's own panel already does. */
    .cc-header { backdrop-filter: none; }

    .cc-search-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(1,8,17,0.55);
    }
    .cc-search-backdrop[hidden] { display: none; }

    .cc-header-search:not(.mobile-open) { display: none; }

    .cc-header-search.mobile-open {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        height: 78vh;
        max-height: 78vh;
        border-radius: 18px 18px 0 0;
        background: #0d1426;
        box-shadow: 0 -16px 40px rgba(0,0,0,0.45);
        display: flex;
        flex-direction: column;
        z-index: 40;
    }

    /* Grab handle — same purely-visual cue as the chat sheet's, not a
       functional drag target (cc-search-minimize already handles
       dismissing it). */
    .cc-header-search.mobile-open::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,0.22);
    }

    .cc-search-input-row {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 1.35rem 1rem 0.8rem;
    }

    /* Reinstates a local positioning context for cc-header-search-icon
       (position:absolute, unchanged from the desktop rule above) — on
       mobile it now sits one level further from cc-header-search (inside
       this bar, inside the input row) than it does on desktop, and
       without this it would anchor to the whole fixed sheet instead of
       just the input pill. Desktop never sets this, so its own anchor
       (cc-header-search itself) is untouched. */
    .cc-header-search-bar { position: relative; flex: 1; min-width: 0; }

    .cc-header-search.mobile-open .cc-header-search-input {
        width: 100%;
        padding: 0.6rem 2.1rem 0.6rem 2.2rem;
        border: 1px solid #6C93E0;
        border-radius: 999px;
        font-size: 0.84rem;
        background: rgba(255,255,255,0.08);
    }

    .cc-search-clear {
        display: flex;
        position: absolute;
        right: 0.35rem;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.14);
        color: rgba(243,245,250,0.75);
        align-items: center;
        justify-content: center;
    }
    .cc-search-clear[hidden] { display: none; }
    .cc-search-clear svg { width: 10px; height: 10px; }

    .cc-search-minimize {
        display: flex;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: none;
        background: rgba(255,255,255,0.08);
        color: #F3F5FA;
        align-items: center;
        justify-content: center;
    }
    .cc-search-minimize svg { width: 16px; height: 16px; }

    .cc-header-search.mobile-open .cc-search-results {
        display: block;
        position: static;
        flex: 1;
        overflow-y: auto;
        max-height: none;
        margin: 0;
        padding: 0.4rem 0.7rem;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .cc-header-search.mobile-open .cc-search-results[hidden] { display: none; }
}

/* ------------------------------- board -------------------------------- */

/* The board's own colour used to wash the entire background — now it's
   just the small dot beside the editable title (set inline from
   board_color in page-campaign.php), while the backdrop stays the same
   dark navy surround as the picker, so lists/cards read exactly as
   legibly here as everywhere else in the duotone. */
.cc-board {
    min-height: calc(100vh - 57px);
    padding: 1rem 1.25rem 2rem;
    background: radial-gradient(ellipse at top left, #16234a 0%, #050a16 70%);
}

.cc-board-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cc-back-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(243,245,250,0.85);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}

.cc-back-link svg { width: 14px; height: 14px; }
.cc-back-link:hover { background: rgba(255,255,255,0.13); color: #fff; text-decoration: none; }

.cc-board-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 10px currentColor;
}

.cc-board-name-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: "Calistoga", serif;
    font-size: 1.2rem;
    font-weight: 400;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    max-width: 420px;
}

.cc-board-name-input:hover, .cc-board-name-input:focus {
    background: rgba(255,255,255,0.08);
    outline: none;
}

.cc-board-name-input[readonly] { cursor: default; }
.cc-board-name-input[readonly]:hover, .cc-board-name-input[readonly]:focus { background: transparent; }

/* The one permanent way to add the first election on a board — the
   shelf's own inline "+ Add election" tile only exists once the shelf
   already has something in it, so without this there'd be no way to
   create the very first one. */
/* Reserved red, not the general accent — elections are one of the few
   things this colour is used for at all (see the comment block above
   .cc-election-pill below for the fuller reasoning). */
.cc-topbar-election-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: linear-gradient(135deg, #992F3D, #6B1F29);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(107,31,41,0.4);
    flex-shrink: 0;
}

.cc-topbar-election-btn svg { width: 14px; height: 14px; }
.cc-topbar-election-btn:hover { filter: brightness(1.08); }

/* Election campaigns — each a collapsed accordion row (ward name + a
   couple of live counts) until clicked, then its own FOI Tracker, Live
   Campaigns, and Action Day Planning boards render underneath. */
.cc-election-acc {
    background: rgba(153,47,61,0.07);
    border: 1px solid rgba(153,47,61,0.3);
    border-radius: 12px;
    margin-bottom: 0.7rem;
    overflow: hidden;
}

.cc-election-acc:last-child { margin-bottom: 0; }

.cc-election-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
}

.cc-election-chev { width: 14px; height: 14px; color: #FF9A87; flex-shrink: 0; transition: transform 0.15s ease; }
.cc-election-acc.open .cc-election-chev { transform: rotate(90deg); }

/* The name itself is plain text (readonly input, no box) — only the
   pencil is clickable to start editing. The pencil's reveal is still
   driven by hovering this whole group (so it fades in as soon as you're
   near the name, not only once you're pixel-precise on it), but the
   :focus-within highlight only lights up once you've actually clicked
   the pencil and are typing.

   Padding here is deliberately generous (well beyond what the text/icon
   themselves need) and offset with a matching negative margin so the
   bigger area doesn't visually push the count chips or delete icon
   further along the row — the row looks the same either way. A
   plain-text input's own box also doesn't track its value's length (it
   sits at the browser's default ~20-character width regardless of a
   short name like "Risca"), which used to leave the pencil sitting well
   past the visible end of the name with dead space in between;
   sizeWardInput() in the script sets an explicit ch-based width so the
   input — and the pencil right after it — hugs the actual text. */
.cc-election-name-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.7rem;
    margin: -0.5rem -0.7rem;
    border-radius: 6px;
}

.cc-election-ward-input {
    font-family: inherit;
    font-weight: 900;
    font-size: 0.92rem;
    color: #fff;
    background: transparent;
    border: none;
    padding: 0.1rem 0;
    min-width: 0;
    max-width: 200px;
    cursor: default;
}

.cc-election-ward-input:focus { outline: none; cursor: text; }

/* A larger invisible hit box than the 11px glyph itself — the visible
   icon stays small, but there's real room around it to land a click. */
.cc-election-pencil {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    color: transparent;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.12s ease;
}

.cc-election-pencil svg { width: 11px; height: 11px; }

.cc-election-name-group:hover .cc-election-pencil,
.cc-election-name-group:focus-within .cc-election-pencil { color: #A9C2EE; }

/* Renaming a ward is desktop-only — the pencil is the one and only way
   in (see wireElectionAccordionEvents() in page-campaign.php: the input
   starts readonly and only the pencil's own click lifts that), and it's
   a hover-revealed affordance to begin with, which doesn't exist as a
   concept on a touchscreen. Hiding it here is enough on its own to block
   editing too, with no JS needed — there's no other path in. Same
   breakpoint as the rest of the page's mobile layout switch
   (.cc-picker-layout above), not the narrower one the chat sheet uses. */
@media (max-width: 720px) {
    .cc-election-pencil { display: none; }
    .cc-election-ward-input { cursor: default; }
}

.cc-election-snapshot { margin-left: auto; display: flex; gap: 0.4rem; flex-shrink: 0; }

.cc-snap-chip {
    font-size: 0.64rem;
    font-weight: 900;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55);
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    white-space: nowrap;
}

.cc-snap-chip.priority { background: rgba(153,47,61,0.18); color: #C2586A; }

.cc-election-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: rgba(255,154,135,0.5);
    cursor: pointer;
}

.cc-election-delete svg { width: 13px; height: 13px; }
.cc-election-delete:hover { background: rgba(176,70,50,0.2); color: #fff; }

.cc-election-body:not(:empty) { padding: 0 1rem 1rem; }

.cc-ac-boards { display: flex; flex-direction: column; gap: 0.9rem; }

.cc-election-empty {
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 2.4rem 1.5rem;
    text-align: center;
    color: rgba(243,245,250,0.4);
    font-size: 0.85rem;
}

.cc-election-empty strong {
    display: block;
    font-family: "Calistoga", serif;
    font-weight: 400;
    font-size: 1.05rem;
    color: rgba(243,245,250,0.75);
    margin-bottom: 0.4rem;
}

/* Homescreen banner — every active election across every board, so one
   never sits invisible inside a board nobody happened to open. */
.cc-elections-banner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 2rem 0;
}

.cc-elections-banner-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #FF9A87;
    margin-bottom: 0.7rem;
}

.cc-elections-banner-label svg { width: 13px; height: 13px; }

.cc-elections-banner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* A <button> now, not an <a> — clicking one jumps straight to that
   election in place (jumpToElection) rather than navigating anywhere, so
   there's no page to link to any more. */
.cc-election-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: linear-gradient(135deg, rgba(153,47,61,0.22), rgba(107,31,41,0.14));
    border: 1px solid rgba(153,47,61,0.4);
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
}

.cc-election-pill:hover { background: rgba(153,47,61,0.3); }
.cc-election-pill strong { color: #fff; font-size: 0.85rem; }
.cc-election-pill span { color: rgba(255,255,255,0.6); font-size: 0.7rem; font-weight: 700; }

/* Same "rows of 3" wrap as .cc-ac-lists — see its comment for the 840px
   derivation (three 272px boards + two gaps). */
.cc-lists {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 840px;
    padding-bottom: 1rem;
}

/* Same narrow-screen fallback as .cc-ac-lists — see its comment. */
@media (max-width: 620px) {
    .cc-lists { max-width: 100%; }
    .cc-lists .cc-list,
    .cc-lists .cc-add-list,
    .cc-lists .cc-foi-library { width: 100%; }
}

.cc-list {
    width: 272px;
    flex-shrink: 0;
    background: #EEEFF3;
    border-radius: 10px;
    padding: 0.55rem;
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.cc-list-head {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.cc-list-title-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    font-weight: 900;
    font-size: 0.85rem;
    color: #172B4D;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
}

.cc-list-title-input:hover, .cc-list-title-input:focus { background: rgba(9,30,66,0.08); outline: none; }
.cc-list-title-input[readonly] { cursor: default; }
.cc-list-title-input[readonly]:hover, .cc-list-title-input[readonly]:focus { background: transparent; }

.cc-list-delete {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B778C;
    flex-shrink: 0;
    cursor: pointer;
}

.cc-list-delete:hover { background: rgba(9,30,66,0.08); color: #B04632; }
.cc-list-delete svg { width: 13px; height: 13px; }

.cc-cards {
    overflow-y: auto;
    min-height: 6px;
}

.cc-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(9,30,66,0.25);
    padding: 0.55rem 0.6rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #172B4D;
}

.cc-card:hover { box-shadow: 0 0 0 2px #6C93E0; }
.cc-card.dragging { opacity: 0.4; }

.cc-card-label {
    display: block;
    width: 36px;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 0.4rem;
}

.cc-card-title { line-height: 1.35; }

.cc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.cc-card-due {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6B778C;
    background: #EEEFF3;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
}

.cc-card-due svg { width: 11px; height: 11px; }

.cc-card-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-add-card {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #42526E;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.45rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.cc-add-card:hover { background: rgba(9,30,66,0.08); }

.cc-add-list {
    width: 272px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    text-align: left;
    color: rgba(243,245,250,0.75);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.cc-add-list:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* -------------------------------- modal -------------------------------- */

.cc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1,8,17,0.68);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1.5rem;
    z-index: 100;
    overflow-y: auto;
}

.cc-modal-overlay[hidden] { display: none; }

.cc-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 520px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.cc-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B778C;
    cursor: pointer;
}

.cc-modal-close:hover { background: #EEEFF3; }
.cc-modal-close svg { width: 15px; height: 15px; }

.cc-modal-label-row { min-height: 4px; margin-bottom: 0.5rem; }

.cc-modal-title-input {
    width: 100%;
    font-family: "Calistoga", serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: #172B4D;
    border: none;
    padding: 0.4rem 0.5rem;
    margin: 0 0 1rem -0.5rem;
    border-radius: 4px;
}

.cc-modal-title-input:hover, .cc-modal-title-input:focus { background: #EEEFF3; outline: none; }

.cc-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cc-modal-grid label, .cc-modal-desc-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6B778C;
}

.cc-modal-grid input, .cc-modal-desc-label input, .cc-modal-desc-label textarea, .cc-modal-desc-label select {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    background: #FAFBFC;
    border: 1px solid #DFE1E6;
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: #172B4D;
}

.cc-modal-grid input:focus, .cc-modal-desc-label input:focus, .cc-modal-desc-label textarea:focus, .cc-modal-desc-label select:focus {
    outline: none;
    border-color: #6C93E0;
    box-shadow: 0 0 0 3px rgba(108,147,224,0.2);
}

.cc-modal-desc-label { margin-bottom: 1rem; }
.cc-modal-desc-label textarea { min-height: 80px; resize: vertical; }

/* The New Event form's "what" and "where" grouped into one card, set apart
   from the logistics fields (date/time/branch) below — the title is the
   biggest, most prominent thing here (this app's own display serif, not a
   plain input), location a quieter second line underneath it. */
.cc-event-group {
    background: linear-gradient(180deg, #F0F4FC, #F7F9FD);
    border: 1px solid #E1E9FA;
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1.1rem;
}

.cc-event-group-label {
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6C93E0;
    margin-bottom: 0.5rem;
}

.cc-event-title-input {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    font-family: "Calistoga", serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: #172B4D;
    padding: 0;
    margin-bottom: 0.7rem;
}

.cc-event-title-input::placeholder { color: #B7C3DC; }
.cc-event-title-input:focus { outline: none; }

.cc-event-loc-row {
    display: flex;
    align-items: center;
    gap: 7px;
    border-top: 1px solid rgba(124,151,222,0.25);
    padding-top: 0.7rem;
}

/* Direct child only — the icon button below also holds an svg, and this
   must not also resize/recolour that one. */
.cc-event-loc-row > svg { width: 13px; height: 13px; color: #6C93E0; flex-shrink: 0; }

.cc-event-loc-row input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.82rem;
    color: #172B4D;
    padding: 0;
}

.cc-event-loc-row input::placeholder { color: #A8B4CC; }
.cc-event-loc-row input:focus { outline: none; }

/* Small round button right at the end of the location row — lets you test
   a location straight from the form before saving, same link the calendar
   cards themselves use once the event exists. Only appears once there's
   something to test (see updateDirectionsLink() in the script below). */
.cc-event-directions-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: #6C93E0;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
}

.cc-event-directions-icon-btn:hover { background: #4C77CC; }
.cc-event-directions-icon-btn svg { width: 12px; height: 12px; }

/* Same [hidden]-vs-author-display specificity trap as everywhere else on
   this page — an explicit override is the only reliable fix. */
.cc-event-directions-icon-btn[hidden] { display: none; }

.cc-modal-labels-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.cc-label-swatch {
    width: 40px;
    height: 26px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    position: relative;
}

.cc-label-swatch.on { box-shadow: 0 0 0 2px #172B4D; }

.cc-label-swatch.cc-label-none {
    width: auto;
    background: #EEEFF3;
    color: #42526E;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 0.6rem;
}

.cc-modal-actions { display: flex; gap: 0.6rem; }

.cc-btn {
    font-family: inherit;
    font-weight: 900;
    font-size: 0.85rem;
    border: none;
    border-radius: 6px;
    padding: 0.55rem 1rem;
    cursor: pointer;
}

.cc-btn-primary {
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    color: #fff;
    box-shadow: 0 4px 12px rgba(58,91,160,0.4);
}

.cc-btn-primary:hover { filter: brightness(1.08); }

.cc-btn-danger { background: #FAFBFC; color: #B04632; border: 1px solid #DFE1E6; }
.cc-btn-danger:hover { background: #FFEBE6; }

/* ============================================================
   Calendar popup — "Spotlight": pick a day on the left, it fills the
   right side (huge date, full cards for that day, a peek at what's
   coming right after). Pinned just under the sticky header so it stays
   put while the page underneath scrolls. */
.cc-cal-panel {
    position: sticky;
    top: 57px;
    z-index: 19;
    display: flex;
    background: #0d1426;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}

.cc-cal-panel[hidden] { display: none; }

.cc-cal-nav {
    width: 260px;
    flex-shrink: 0;
    padding: 1.4rem 1.4rem 1.6rem;
    border-right: 1px solid rgba(255,255,255,0.07);
}

.cc-cal-main {
    flex: 1;
    max-width: 620px;
    padding: 1.5rem 1.8rem 1.7rem;
    display: flex;
    flex-direction: column;
}

.cc-cal-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cc-cal-nav-month { font-weight: 900; font-size: 0.82rem; color: rgba(243,245,250,0.7); }

.cc-cal-nav-arrows { display: flex; gap: 0.5rem; color: rgba(243,245,250,0.35); }
.cc-cal-nav-arrows svg { width: 12px; height: 12px; cursor: pointer; }
.cc-cal-nav-arrows svg:hover { color: #F3F5FA; }

.cc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-top: 0.9rem;
}

.cc-cal-dow {
    font-size: 0.56rem;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(243,245,250,0.24);
    text-align: center;
    padding-bottom: 0.4rem;
}

.cc-cal-d {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 700;
    color: rgba(243,245,250,0.5);
    border-radius: 6px;
    position: relative;
    cursor: pointer;
}

.cc-cal-d.muted { color: rgba(243,245,250,0.14); cursor: default; }
.cc-cal-d.today { box-shadow: inset 0 0 0 1.5px rgba(243,245,250,0.3); }
.cc-cal-d.selected { background: linear-gradient(135deg, #6C93E0, #3A5BA0); color: #fff; font-weight: 900; }
.cc-cal-d.has-event::after { content: ''; position: absolute; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: #6C93E0; }
.cc-cal-d.selected.has-event::after { background: #fff; }

/* Sits in the panel's own top-right corner (not tucked at the bottom of
   the nav column) and carries real visual weight — a filled pill, not
   quiet text — so closing the expanded calendar is as easy to spot as
   opening it was. .cc-cal-panel is always a positioned ancestor (sticky
   on the board-page popup, relative in the half-screen overlay), so this
   works unchanged in both places without needing to move it in the HTML. */
.cc-cal-minimise {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #F3F5FA;
    cursor: pointer;
    padding: 0.45rem 0.85rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.cc-cal-minimise svg { width: 11px; height: 11px; }
.cc-cal-minimise:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.32); }

/* Replaces the old huge-date-numeral hero — the date itself is already
   picked on the month grid right beside it, so naming the day relative
   to "now" (Today / Tomorrow / Coming up) is the useful thing to show
   here, not repeating the date a second time. */
.cc-cal-day-label {
    font-family: "Calistoga", serif;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 0.2rem;
}

/* Wraps the headline together with "Back to today" (shown only once a
   grid click has browsed away from the real next event — see
   manualSelection in the script) so the link sits right beside the
   thing it resets, at any panel size. */
.cc-cal-day-label-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cc-cal-back-today {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: #A9C2EE;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.cc-cal-back-today:hover { background: rgba(255,255,255,0.16); color: #fff; }
.cc-cal-back-today[hidden] { display: none; }

/* Only shown for Tomorrow/Coming up — the actual date those refer to,
   since the month grid's own highlight tracks grid clicks, not this
   headline, so there's nothing else on screen naming the day. */
.cc-cal-day-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #A9C2EE;
    margin-bottom: 0.9rem;
}

.cc-cal-day-sub svg { width: 12px; height: 12px; flex-shrink: 0; }
.cc-cal-day-sub[hidden] { display: none; }

/* .cc-cal-headline-row/.cc-cal-tile exist for the mobile sticky-header
   snapshot only (see the big @media block near .cc-sidebar) — on every
   other layout (desktop docked sidebar, the board-page popup, the
   half-screen expand) they're either absent from the markup or stay
   hidden/unstyled, so day-label and day-sub read exactly as before. */
.cc-cal-tile[hidden] { display: none; }

.cc-cal-cards { display: flex; flex-direction: column; gap: 0.55rem; }

.cc-cal-card {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.cc-cal-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--s, #6C93E0); }
.cc-cal-card:hover { background: rgba(255,255,255,0.08); }
.cc-cal-card-t { font-weight: 900; font-size: 0.82rem; color: #F3F5FA; }
.cc-cal-card-m { font-size: 0.66rem; color: rgba(243,245,250,0.4); font-weight: 700; margin-top: 0.25rem; }

/* The address line doubles as the "get directions" trigger — same row
   shows where it is and takes you there, no separate icon-only control to
   learn. A top border sets it apart from the time/branch line above it. */
.cc-cal-card-addr {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    color: #A9C2EE;
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}

.cc-cal-card-addr:hover { color: #fff; text-decoration: none; }
.cc-cal-card-addr svg { width: 11px; height: 11px; flex-shrink: 0; }
.cc-cal-card-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cc-cal-empty { font-size: 0.76rem; color: rgba(243,245,250,0.3); padding: 0.4rem 0.1rem; }

.cc-cal-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 1.2rem 0 0.9rem; }

.cc-cal-next-label { font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(243,245,250,0.3); margin-bottom: 0.6rem; }

.cc-cal-next-rail { display: flex; gap: 0.6rem; }

.cc-cal-next-item {
    flex: 1;
    background: rgba(255,255,255,0.035);
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    min-width: 0;
}

.cc-cal-next-item:hover { background: rgba(255,255,255,0.06); }
.cc-cal-next-d { font-size: 0.62rem; font-weight: 900; color: rgba(243,245,250,0.4); }
.cc-cal-next-t { font-size: 0.72rem; font-weight: 700; color: rgba(243,245,250,0.75); margin-top: 0.2rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cc-cal-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    /* A fixed gap, not margin-top:auto — auto only pushes content apart
       when the flex column has leftover height to distribute, which it
       usually doesn't here (the panel's height is set by its content, not
       the other way round), so it was landing with zero space above it
       and reading as glued onto the bottom of "Coming up after". */
    margin-top: 1.1rem;
    background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.2);
    color: rgba(243,245,250,0.55);
    font-weight: 800;
    font-size: 0.76rem;
    font-family: inherit;
    border-radius: 9px;
    padding: 0.65rem 0.7rem;
    cursor: pointer;
}

.cc-cal-add:hover { border-color: rgba(255,255,255,0.35); color: #F3F5FA; }
.cc-cal-add svg { width: 12px; height: 12px; }

@media (max-width: 720px) {
    .cc-cal-panel:not(.cc-cal-docked) { flex-direction: column; }
    .cc-cal-panel:not(.cc-cal-docked) .cc-cal-nav { width: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .cc-cal-panel:not(.cc-cal-docked) .cc-cal-main { max-width: none; }
    /* .cc-cal-minimise floats at the whole panel's top-right corner (see
       its own comment) — harmless on desktop, where the nav column it
       visually sits above is only 340px of a much wider two-column panel,
       but nav and main stack full-width here, so that same top-right
       corner now lands right on top of the month nav's own prev/next
       arrows. Reserving room on the nav head keeps the arrows clear of it
       instead of moving the button itself, which would either bury it at
       the bottom of the grid (its own comment already ruled that out) or
       need a second, mobile-only position to maintain. */
    .cc-cal-panel:not(.cc-cal-docked) .cc-cal-nav-head { padding-right: 7.3rem; }
}

/* ---- "Docked in the Sidebar" — the picker page's own calendar mount,
   permanently visible underneath the branch list instead of a popup (see
   .cc-cal-docked in the JS module). Stacked, not side-by-side — the
   220px-wide sidebar has no room for the popup's two-column layout. Always
   compact (just the grid + today's cards); "See full calendar" hands the
   very same panel off to .cc-cal-expand-overlay below, which drops this
   class so every override here falls away — see that block for why. ---- */
.cc-cal-panel.cc-cal-docked {
    position: static;
    flex-direction: column;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Only makes sense as a "Calendar" section label while docked in the
   sidebar — once the panel moves into the expanded overlay it should read
   exactly like the original popup, which never had this row. */
.cc-cal-dock-head { display: none; }
.cc-cal-docked .cc-cal-dock-head {
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    margin-bottom: 0.7rem;
}

.cc-cal-docked .cc-cal-nav {
    width: auto;
    padding: 0 0.6rem;
    border-right: none;
}

.cc-cal-docked .cc-cal-main {
    max-width: none;
    padding: 1rem 0.6rem 0;
}

.cc-cal-docked .cc-cal-day-label { font-size: 1.05rem; margin-bottom: 0.15rem; }
.cc-cal-docked .cc-cal-day-sub { font-size: 0.68rem; margin-bottom: 0.7rem; }
.cc-cal-docked .cc-cal-day-sub svg { width: 10px; height: 10px; }
.cc-cal-docked .cc-cal-card { padding: 0.6rem 0.7rem; }

/* The "Minimise" button only makes sense once the panel has somewhere to
   minimise back to (i.e. once it's expanded) — hidden while already
   compact in the sidebar. */
.cc-cal-docked .cc-cal-minimise { display: none; }

/* Compact by default — the agenda peek and its divider, and the "coming up
   after" rail, stay reserved for the full expanded view; there's no room
   for them in the 220px-wide sidebar. */
.cc-cal-docked .cc-cal-divider,
.cc-cal-docked .cc-cal-next-label,
.cc-cal-docked .cc-cal-next-rail {
    display: none;
}

/* "See full calendar" — the explicit, plain-English trigger (chosen over
   an icon-only button so it doesn't need discovering). Only shows while
   docked; the expanded view has its own "Minimise" to reverse it. */
.cc-cal-expand-btn, .cc-cal-expand-btn:hover {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 0.9rem;
    background: rgba(255,255,255,0.06);
    border: 1.5px dashed rgba(255,255,255,0.22);
    color: #DCE4F7;
    font-weight: 800;
    font-size: 0.72rem;
    font-family: inherit;
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
}

.cc-cal-docked .cc-cal-expand-btn { display: flex; }
.cc-cal-expand-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.35); color: #fff; }
.cc-cal-expand-btn svg { width: 12px; height: 12px; }

/* Calendar -> a compact tappable snapshot (date tile + "Coming up" + the
   next event) instead of the full month grid, for the mobile sticky
   header row (see .cc-sidebar's own mobile block near the top of this
   file, which handles the branches half of that same row) — tapping it
   opens the exact same half-screen "See full calendar" overlay the (now
   hidden here) expand button always has, see expandToHalfScreen() / the
   headlineRow click listener in the script. Placed here, after the
   .cc-cal-docked .cc-cal-expand-btn rule above, deliberately — same
   selector, same specificity, so source order is what breaks the tie and
   this has to win it. */
@media (max-width: 720px) {
    .cc-cal-panel.cc-cal-docked { margin-top: 0; padding-top: 0; border-top: none; }
    .cc-cal-docked .cc-cal-dock-head { display: none; }
    .cc-cal-docked .cc-cal-nav { display: none; }
    .cc-cal-docked .cc-cal-main { padding: 0; }

    .cc-cal-headline-row {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.09);
        border-radius: 12px;
        padding: 0.6rem 0.8rem;
        cursor: pointer;
    }
    /* Beats the [hidden] attribute (and the plain .cc-cal-tile[hidden]
       rule that keeps it off everywhere else) only inside this docked
       mobile context — see the note on .cc-cal-tile[hidden] itself. */
    .cc-cal-docked .cc-cal-tile[hidden] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(124,151,222,0.16);
        flex-shrink: 0;
    }
    .cc-cal-tile-num { font-family: "Calistoga", serif; font-size: 0.95rem; color: #fff; line-height: 1; }
    .cc-cal-tile-mon { font-size: 0.5rem; font-weight: 900; text-transform: uppercase; color: #A9C2EE; margin-top: 1px; }
    .cc-cal-headline-text { flex: 1; min-width: 0; }
    .cc-cal-docked .cc-cal-day-label { font-size: 0.85rem; margin-bottom: 0; }
    .cc-cal-docked .cc-cal-day-sub { font-size: 0.66rem; margin-bottom: 0; }
    /* The agenda list, "coming up after" rail and the two footer buttons
       all still exist and work exactly as before — they just live in the
       expanded overlay now instead of also being crammed into this
       pinned strip. */
    .cc-cal-docked .cc-cal-cards,
    .cc-cal-docked .cc-cal-expand-btn,
    .cc-cal-docked .cc-cal-add {
        display: none;
    }
}

/* ---- Half-screen expand — "See full calendar" reparents the docked
   panel in here and drops .cc-cal-docked, so what's left is the exact
   nav+main layout the calendar used before the sidebar dock existed: same
   260px nav, same up-to-620px main, same dark popup surface. This overlay
   only supplies the dimmed backdrop and the anchoring around it. ---- */
.cc-cal-expand-overlay {
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: flex-start;
}

.cc-cal-expand-overlay[hidden] { display: none; }

.cc-cal-expand-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4,8,17,0.6);
    cursor: pointer;
}

.cc-cal-expand-overlay .cc-cal-panel {
    position: relative;
    top: auto;
    z-index: 1;
    /* Originally this panel filled the full page width as a normal block,
       which gave .cc-cal-main's flex:1 room to grow up to its own
       max-width cap. As a flex item of the overlay it would otherwise
       just shrink-to-fit its content instead — an explicit width
       reinstates that same growing room, scaled up bigger than the
       original popup ever was (see the sizing below) since this is now
       a "settle in and look properly" view, not a quick glance. */
    width: 1180px;
    max-width: calc(100vw - 2rem);
    max-height: 100%;
    overflow-y: auto;
}

/* Bigger throughout, not just wider — larger grid cells and type scale so
   the extra width actually reads as "easier to see", not just padding. */
.cc-cal-expand-overlay .cc-cal-nav { width: 340px; padding: 1.9rem 1.9rem 2.1rem; }
.cc-cal-expand-overlay .cc-cal-main { max-width: 840px; padding: 2rem 2.4rem 2.2rem; }

.cc-cal-expand-overlay .cc-cal-nav-month { font-size: 1rem; }
.cc-cal-expand-overlay .cc-cal-nav-arrows svg { width: 15px; height: 15px; }
.cc-cal-expand-overlay .cc-cal-grid { margin-top: 1.2rem; gap: 3px; }
.cc-cal-expand-overlay .cc-cal-dow { font-size: 0.66rem; padding-bottom: 0.55rem; }
.cc-cal-expand-overlay .cc-cal-d { font-size: 0.86rem; border-radius: 8px; }
.cc-cal-expand-overlay .cc-cal-d.has-event::after { width: 4px; height: 4px; bottom: 5px; }

.cc-cal-expand-overlay .cc-cal-day-label { font-size: 1.7rem; margin-bottom: 0.25rem; }
.cc-cal-expand-overlay .cc-cal-day-sub { font-size: 0.95rem; margin-bottom: 1.3rem; }
.cc-cal-expand-overlay .cc-cal-day-sub svg { width: 14px; height: 14px; }

.cc-cal-expand-overlay .cc-cal-cards { gap: 0.75rem; }
.cc-cal-expand-overlay .cc-cal-card { padding: 1rem 1.15rem; border-radius: 12px; }
.cc-cal-expand-overlay .cc-cal-card-t { font-size: 1rem; }
.cc-cal-expand-overlay .cc-cal-card-m { font-size: 0.78rem; }
.cc-cal-expand-overlay .cc-cal-card-addr { font-size: 0.82rem; }

.cc-cal-expand-overlay .cc-cal-divider { margin: 1.6rem 0 1.2rem; }
.cc-cal-expand-overlay .cc-cal-next-label { font-size: 0.68rem; margin-bottom: 0.8rem; }
.cc-cal-expand-overlay .cc-cal-next-item { padding: 0.75rem 0.9rem; }
.cc-cal-expand-overlay .cc-cal-next-d { font-size: 0.7rem; }
.cc-cal-expand-overlay .cc-cal-next-t { font-size: 0.84rem; }

.cc-cal-expand-overlay .cc-cal-add { padding: 0.85rem 0.9rem; font-size: 0.85rem; margin-top: 1.4rem; }
.cc-cal-expand-overlay .cc-cal-add svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
    .cc-header-link { display: none; }
    .cc-modal-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Team chat — header icon + a compact panel docked to the right,
   same instinct as the calendar (icon opens a panel; an "Expand"
   button widens it) but its own component, since it has no
   sidebar to live docked in and needs to show up on every page
   state, not just the picker. ============================================================ */

/* "Filled Pill, Always On" — unlike the calendar icon (plain outline,
   only fills in once its panel is open), chat carries the app's accent
   colour permanently, with its own text label, so it never reads as just
   another outline icon in the row. Overrides .cc-header-icon-btn's
   circular/icon-only sizing entirely rather than layering on top of it —
   this is a real <button>, so a fresh background/border was already
   needed regardless (browsers give buttons their own by default, which
   .cc-header-icon-btn never resets since every other user of that class
   is an <a>). */
.cc-chat-toggle, .cc-chat-toggle:hover {
    position: relative;
    width: auto;
    height: auto;
    border-radius: 999px;
    background: linear-gradient(135deg, #992F3D, #6B1F29);
    border: none;
    font-family: inherit;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.42rem 0.85rem 0.42rem 0.6rem;
    cursor: pointer;
}

.cc-chat-toggle:hover { filter: brightness(1.08); }
.cc-chat-toggle svg { width: 15px; height: 15px; }
.cc-chat-toggle-label { font-size: 0.78rem; font-weight: 900; line-height: 1; }

/* Still open/closed feedback layered on top of the constant fill — same
   convention the calendar toggle uses for its own .on state. */
.cc-chat-toggle.on { box-shadow: 0 0 0 2px rgba(153,47,61,0.5); }

.cc-chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #C2586A;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #050a16;
}

.cc-chat-badge[hidden] { display: none; }

.cc-chat-panel {
    position: fixed;
    top: 57px;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 340px;
    max-width: calc(100vw - 1.5rem);
    display: flex;
    flex-direction: column;
    background: #0d1426;
    border-left: 1px solid rgba(255,255,255,0.09);
    box-shadow: -12px 0 32px rgba(0,0,0,0.35);
    transition: width 0.18s ease;
}

.cc-chat-panel[hidden] { display: none; }
.cc-chat-panel.expanded { width: 620px; }

.cc-chat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.cc-chat-panel-title { font-family: "Calistoga", serif; font-size: 1rem; color: #fff; }

.cc-chat-panel-actions { display: flex; align-items: center; gap: 0.5rem; }

.cc-chat-expand-btn, .cc-chat-expand-btn:hover,
.cc-chat-close, .cc-chat-close:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: rgba(243,245,250,0.6);
    cursor: pointer;
}

.cc-chat-expand-btn:hover, .cc-chat-close:hover { background: rgba(255,255,255,0.16); color: #F3F5FA; }
.cc-chat-expand-btn svg, .cc-chat-close svg { width: 11px; height: 11px; }

.cc-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.2rem;
}

.cc-chat-empty { font-size: 0.8rem; color: rgba(243,245,250,0.3); padding: 0.4rem 0.1rem; }

.cc-chat-msg { display: flex; gap: 0.6rem; margin-bottom: 1rem; }

.cc-chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 900;
    color: #fff;
}

.cc-chat-msg-body { min-width: 0; }

.cc-chat-msg-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.cc-chat-msg-name { font-size: 0.76rem; font-weight: 900; color: #F3F5FA; }
.cc-chat-msg-time { font-size: 0.64rem; font-weight: 700; color: rgba(243,245,250,0.35); }

/* Admin-only (see canDelete on the chat payload) — stays invisible until
   you're hovering the message it belongs to, same fade-in-on-hover
   treatment used for the election rename pencil elsewhere on this page,
   so a chat full of messages doesn't read as a wall of trash icons. */
.cc-chat-msg-delete {
    margin-left: auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.12s ease;
}

.cc-chat-msg-delete svg { width: 11px; height: 11px; }
.cc-chat-msg:hover .cc-chat-msg-delete { color: rgba(243,245,250,0.45); }
.cc-chat-msg-delete:hover { color: #EB5A46; }

.cc-chat-msg-text {
    display: inline-block;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #DCE4F7;
    word-break: break-word;
}

.cc-chat-panel.expanded .cc-chat-msg-text { font-size: 0.88rem; }

.cc-chat-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.cc-chat-input-row input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 0.6rem 0.95rem;
    font-family: inherit;
    font-size: 0.82rem;
    color: #F3F5FA;
}

.cc-chat-input-row input::placeholder { color: rgba(243,245,250,0.35); }
.cc-chat-input-row input:focus { outline: none; border-color: #6C93E0; }

.cc-chat-send, .cc-chat-send:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    color: #fff;
    cursor: pointer;
}

.cc-chat-send:hover { filter: brightness(1.08); }
.cc-chat-send svg { width: 14px; height: 14px; }

/* Below 600px the right-hand drawer becomes a bottom sheet instead —
   anchored from the bottom edge (top:auto) rather than pinned below the
   header (top:57px, the desktop rule above). A `position:fixed` element
   anchored from the top is exactly what iOS Safari mishandles once the
   on-screen keyboard opens (the chat input auto-focuses on open, so this
   was happening on every single mobile open, not an edge case): the header
   would end up pushed off-screen instead of staying put. Anchoring from
   the bottom is the standard, reliable pattern for a mobile message
   composer — the sheet rides up above the keyboard instead of trying to
   track where "57px from the top" now means. A dimmed backdrop
   (.cc-chat-backdrop below) and a sliver of the app header left showing
   above the sheet keep it feeling like a layer over the board rather than
   a full disorienting takeover. */
@media (max-width: 600px) {
    .cc-chat-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(1,8,17,0.55);
    }
    .cc-chat-backdrop[hidden] { display: none; }

    .cc-chat-panel, .cc-chat-panel.expanded {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        height: 78vh;
        max-height: 78vh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -16px 40px rgba(0,0,0,0.45);
    }
    .cc-chat-panel.expanded { height: 92vh; max-height: 92vh; }

    /* Set on <body> only while the sheet is open (see the chat module's
       open/closePanel()) — keeps the dimmed board behind the backdrop
       from scrolling underneath it, and as a side effect stops iOS's
       "scroll the focused input into view" from fighting the sheet's own
       fixed positioning when the input is later tapped. Toggled, not
       permanent, so it can't reintroduce the election-accordion clipping
       bug this same overflow:hidden property caused when it was
       permanently inherited from the shared /app/ shell rule. */
    body.cc-chat-sheet-open { overflow: hidden; }

    /* Grab handle — purely a visual cue that this is a sheet you can
       dismiss, not a functional drag target (the existing close button
       already handles that). */
    .cc-chat-panel::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,0.22);
    }
    .cc-chat-panel-head { padding-top: 1.35rem; }
}

/* ============================================================
   Activity log — admin-only, deliberately the same panel shape as Team
   Chat above (.cc-chat-panel-head, .cc-chat-close are reused directly)
   rather than a new visual language. No input row: nothing is typed
   here, only read.
   ============================================================ */
.cc-activity-panel {
    position: fixed;
    top: 57px;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 340px;
    max-width: calc(100vw - 1.5rem);
    display: flex;
    flex-direction: column;
    background: #0d1426;
    border-left: 1px solid rgba(255,255,255,0.09);
    box-shadow: -12px 0 32px rgba(0,0,0,0.35);
}

.cc-activity-panel[hidden] { display: none; }

.cc-activity-list {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.2rem;
}

.cc-activity-empty { font-size: 0.8rem; color: rgba(243,245,250,0.3); padding: 0.4rem 0.1rem; }

.cc-activity-entry { display: flex; gap: 0.6rem; margin-bottom: 1rem; }

.cc-activity-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 900;
    color: #fff;
    background: #6C93E0;
}

/* Deletions are the one thing here worth a second look — everything
   else (created, done) stays the everyday navy. */
.cc-activity-avatar.danger { background: #992F3D; }
.cc-activity-avatar svg { width: 12px; height: 12px; }

.cc-activity-body { min-width: 0; font-size: 0.78rem; line-height: 1.5; color: #DCE4F7; }
.cc-activity-body strong { color: #F3F5FA; }
.cc-activity-meta { display: block; font-size: 0.66rem; color: rgba(243,245,250,0.35); font-weight: 700; margin-top: 0.1rem; }

@media (max-width: 600px) {
    .cc-activity-panel { width: 100vw; max-width: 100vw; }
}

/* ============================================================
   FOI Library — sits alongside "Idea To Submit" in the FOI Tracker
   board's own lists row, filling the width the old "Positive
   Response"/"Negative Response" lists used to (2 lists + the gap
   between them: 272px * 2 + 12px). Same light card surface as a normal
   .cc-list so it reads as part of the same row, not a foreign component
   dropped in next to it.
   ============================================================ */
.cc-foi-library {
    width: 556px;
    flex-shrink: 0;
    background: #EEEFF3;
    border-radius: 10px;
    padding: 0.65rem 0.7rem 0.7rem;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.cc-foi-library-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.15rem 0.1rem;
    margin-bottom: 0.5rem;
}

.cc-foi-library-title { font-weight: 900; font-size: 0.85rem; color: #172B4D; }

/* Pushes itself (and Upload after it) to the right — Favourites sits
   directly beside Upload rather than in the scrollable chip row below,
   which otherwise has to fit All, every category, and Other. */
.cc-foi-fav-slot { margin-left: auto; }

/* Title + Favourites + Upload in one row runs out of room well before a
   phone-width .cc-list does — wrap rather than let Upload get clipped off
   the edge; margin-left:auto on the Favourites slot still reads fine
   whichever line it ends up sharing. */
@media (max-width: 620px) {
    .cc-foi-library-head { flex-wrap: wrap; row-gap: 0.4rem; }

    /* The chips themselves were sized to fit comfortably in a 272–556px
       desktop panel; a full-width phone .cc-foi-library actually has more
       room to spare, not less, so there's no reason to keep them this
       tight here — bigger text and padding read as considered rather than
       cramped, and are easier to actually tap. Still scrolls sideways
       (see .cc-foi-filters' mask-image fade), just with fewer, comfier
       chips visible per screen instead of six crammed ones. */
    /* The fade at the scroll edge (18px on the base rule) was sized for
       the smaller desktop chips — against these bigger mobile ones it
       barely covers part of a single letter before hard-stopping, which
       reads as a clipped-off chip rather than a deliberate "more here"
       fade. Widening it, and giving the row a little breathing room past
       the last chip, is what actually fixes that read. */
    .cc-foi-filters {
        gap: 0.5rem;
        padding-right: 1.4rem;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
    }
    .cc-foi-filter, .cc-foi-filter-fav {
        font-size: 0.74rem;
        padding: 0.5rem 0.9rem;
    }
    .cc-foi-filter-fav svg { width: 12px; height: 12px; }
}

.cc-foi-upload-btn, .cc-foi-upload-btn:hover {
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    color: #fff;
    font-weight: 800;
    font-size: 0.72rem;
    font-family: inherit;
    border: none;
    border-radius: 7px;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
}

.cc-foi-upload-btn:hover { filter: brightness(1.06); }
.cc-foi-upload-btn svg { width: 12px; height: 12px; }

/* Scrolls sideways instead of wrapping — with Favourites + All always
   present plus one chip per category, wrapping meant a lone chip (often
   "Other") orphaning onto its own second row once there were more than
   four or five. A fixed-height scrollable strip stays tidy regardless of
   how many types accumulate; the mask fades the trailing edge so a
   partly-cut-off chip reads as "more here", not as a rendering glitch. */
.cc-foi-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
    padding: 0 0.15rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}

.cc-foi-filters::-webkit-scrollbar { height: 4px; }
.cc-foi-filters::-webkit-scrollbar-thumb { background: rgba(23,43,77,0.15); border-radius: 999px; }

.cc-foi-filter, .cc-foi-filter:hover {
    flex-shrink: 0;
    font-family: inherit;
    border: none;
    background: rgba(23,43,77,0.06);
    color: #6B778C;
    font-weight: 800;
    font-size: 0.66rem;
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
    cursor: pointer;
}

.cc-foi-filter:hover { background: rgba(23,43,77,0.11); }
.cc-foi-filter.on, .cc-foi-filter.on:hover { background: #172B4D; color: #fff; }

/* Same star used on each document row (STAR_ICON) so the tie between
   this chip and the per-document toggle is visible, not just implied by
   the word "Favourites". */
.cc-foi-filter-fav, .cc-foi-filter-fav:hover {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #966B1F;
    background: #FFF4DE;
}

.cc-foi-filter-fav svg { width: 10px; height: 10px; }
.cc-foi-filter-fav:hover { background: #FBE9C7; }
.cc-foi-filter-fav.on, .cc-foi-filter-fav.on:hover { background: #992F3D; color: #fff; }

.cc-foi-doc-list {
    flex: 1;
    overflow-y: auto;
}

/* Rows within one group, or the flat cross-category list Favourites
   shows — same row spacing either way, just a different container. */
.cc-foi-doc-flat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cc-foi-group { margin-bottom: 0.9rem; }
.cc-foi-group:last-child { margin-bottom: 0; }

.cc-foi-group-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding-left: 0.15rem;
}

.cc-foi-group-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cc-foi-group-name { font-size: 0.68rem; font-weight: 900; color: #172B4D; text-transform: uppercase; letter-spacing: 0.03em; }
.cc-foi-group-count { font-size: 0.64rem; color: #A9B1C4; font-weight: 700; }

.cc-foi-empty { font-size: 0.78rem; color: #8891A6; padding: 0.5rem 0.3rem; }

.cc-foi-doc-row, .cc-foi-doc-row:hover {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(23,43,77,0.08);
}

.cc-foi-doc-row:hover { background: #F7F9FC; text-decoration: none; }

.cc-foi-doc-icon { width: 26px; height: 26px; border-radius: 6px; background: #EAF0FC; color: #3A5BA0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-foi-doc-icon svg { width: 12px; height: 12px; }

.cc-foi-doc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cc-foi-doc-title { font-weight: 800; font-size: 0.76rem; color: #172B4D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-foi-doc-cat { font-size: 0.64rem; color: #8891A6; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cc-foi-doc-star {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #C7CEDC;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.cc-foi-doc-star svg { width: 13px; height: 13px; }
.cc-foi-doc-star:hover { color: #992F3D; }
.cc-foi-doc-star.on { color: #992F3D; }

.cc-foi-doc-delete {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #C7CEDC;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.cc-foi-doc-delete svg { width: 13px; height: 13px; }
.cc-foi-doc-delete:hover { color: #EB5A46; }

/* -------- FOI upload modal -------- */
.cc-foi-upload-error {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid #EEEFF3;
    font-size: 0.78rem;
    font-weight: 700;
    color: #C0503A;
}

.cc-foi-upload-error[hidden] { display: none; }