/* Workstreams Hub — the co-learning surface.
 *
 * Deliberately NOT the case-studies card language. Case studies are an archive of
 * documents; workstreams are living spaces with people in them. The differentiation
 * is people (facepiles), warmth (the ochre already reserved for Workstreams on the
 * hub tile) and layout (a grid of spaces, not a list of rows) — same Poppins/Open
 * Sans, same radius/shadow tokens from cases-refresh.css, same green chrome.
 *
 * The detail page borrows its skeleton (hero / sticky tabs / panels) from
 * case-study.css. Everything below that touches those classes is scoped under
 * .ws-detail so study.html is untouched.
 */

:root {
    --ws-accent: #8C5A1A;
    --ws-accent-deep: #5F3D10;
    --ws-tint: #FFF3E9;
    --ws-tint-soft: #FFF6EC;
    --ws-line: #F0DCC6;
}

/* ============================================================ */
/* Page head                                                     */
/* ============================================================ */

.ws-page-head { margin-bottom: 22px; }
.ws-page-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--c-ink);
    margin: 0 0 4px;
}
.ws-page-sub {
    font-family: 'Open Sans', sans-serif;
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 62ch;
}

/* ============================================================ */
/* Index — grid of spaces                                        */
/* ============================================================ */

#workstreams {
    display: grid;
    /* 400px (not 360) pins this to a deliberate 2-up inside the 1140px shell:
       360px would let a wide desktop go 3-up, shrinking cards until the facepile
       and the footer chips start wrapping. Spaces deserve the room. */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 18px;
    padding: 4px 0;
}
/* Cards stretch to the tallest in the row so the next-call strip and the footer
   line up across the grid — .ws-card-body takes the slack. */
/* Full-width children (headings, empty/error states, alerts) span the grid. */
#workstreams > .ws-span { grid-column: 1 / -1; }

.ws-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-line-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ws-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ws-accent);
}
.ws-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--ws-line);
}
/* Whole card is clickable via a stretched link on the title — a real link, so it
   keeps its place in the tab order and reads correctly to a screen reader. */
.ws-card:focus-within {
    border-color: var(--ws-accent);
    box-shadow: 0 0 0 3px rgba(140, 90, 26, .22);
}

.ws-card-body {
    padding: 20px 22px 16px 26px;
    flex: 1;
}

.ws-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ws-accent);
    margin: 0 0 6px;
}

.ws-card-title {
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
}
.ws-card-title a {
    color: var(--c-ink);
    text-decoration: none;
}
.ws-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.ws-card-title a:hover { color: var(--ws-accent-deep); }
.ws-card-title a:focus-visible { outline: none; } /* the card shows the ring */

.ws-card-desc {
    font-family: 'Open Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--c-ink-soft);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Facepile: the signature element --- */
.ws-people {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ws-facepile {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ws-face {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--ws-accent);
    flex-shrink: 0;
    overflow: hidden;
}
.ws-face + .ws-face { margin-left: -8px; }
.ws-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ws-face--more {
    background: var(--ws-tint);
    color: var(--ws-accent-deep);
    font-size: 10.5px;
}
/* Fixed disc palette, picked by a name hash. Class names are whitelisted in JS —
   never interpolate a server value into a class or style attribute. */
.ws-av-0 { background: #163021; }
.ws-av-1 { background: #8C5A1A; }
.ws-av-2 { background: #3a6b9a; }
.ws-av-3 { background: #5a3a9a; }
.ws-av-4 { background: #2f7a52; }
.ws-av-5 { background: #9a5a3a; }

.ws-people-count {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    /* Also used in the detail hero, outside cases-refresh.css. */
    color: var(--c-muted, #6d6d6d);
}

/* --- Next-call strip --- */
.ws-next {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px 10px 26px;
    background: var(--ws-tint-soft);
    border-top: 1px solid var(--ws-line);
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--ws-accent-deep);
}
.ws-next i { font-size: 12px; color: var(--ws-accent); }
.ws-next--empty {
    background: transparent;
    border-top: 1px solid var(--c-line);
    color: var(--c-muted);
}
.ws-next--empty i { color: var(--c-muted); }

/* --- Footer row --- */
.ws-card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px 16px 26px;
}

.ws-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    /* Chips render in the detail hero too, where cases-refresh.css is absent. */
    background: var(--c-bg, #f8f9fa);
    color: var(--c-ink-soft, #4a4a4a);
    white-space: nowrap;
}
.ws-chip i { font-size: 10px; }

.ws-chip-cadence { background: var(--ws-tint); color: var(--ws-accent-deep); }
.ws-chip-open    { background: #e8f5f2; color: #163021; }
.ws-chip-request { background: #eef2fb; color: #3a6b9a; }
.ws-chip-invite  { background: #f3f0fa; color: #5a3a9a; }
.ws-chip-joined  { background: #e5f4ea; color: #1f6b3a; }
.ws-chip-archived { background: #ececec; color: #6d6d6d; }

/* Join-state badges on the index card — reuse .ws-badge (below) rather than the
   .ws-chip family: these report the viewer's own membership outcome, not the
   workstream's own attributes, so they get the People-tab badge's smaller,
   heavier treatment instead. Palette matches the .ws-chip-* siblings above:
   -in the joined green, -pending the request blue, -declined the cancelled red. */
.ws-badge--in       { background: #e5f4ea; color: #1f6b3a; }
.ws-badge--pending  { background: #eef2fb; color: #3a6b9a; }
.ws-badge--declined { background: #FDECEC; color: #96322F; }

/* The one interactive control inside the card — must sit above the stretched link. */
.ws-join-btn {
    position: relative;
    z-index: 2;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 15px;
    border: 1px solid var(--ws-accent);
    border-radius: 999px;
    background: var(--ws-accent);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.ws-join-btn:hover:not(:disabled) { background: var(--ws-accent-deep); border-color: var(--ws-accent-deep); }
.ws-join-btn:disabled { opacity: .6; cursor: default; }
.ws-join-btn:focus-visible {
    outline: 2px solid var(--ws-accent-deep);
    outline-offset: 2px;
}
.ws-card-foot .ws-chip-joined { margin-left: auto; }

/* ============================================================ */
/* Past workstreams — quiet, compact, no facepile               */
/* ============================================================ */

.ws-past-head {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--c-muted);
    margin: 26px 0 2px;
}
.ws-past-note {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--c-muted);
    margin: 0 0 10px;
}
.ws-past-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ws-past-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-card);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.ws-past-row:hover { border-color: #d8d8d8; background: #fcfcfc; }
/* An archived workstream a guest was never admitted to: the row still says it
   existed, but there is nothing behind it for them to open. */
.ws-past-row--locked { cursor: default; }
.ws-past-row--locked:hover { border-color: var(--c-line); background: var(--c-card); }
.ws-past-row:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: 2px;
}
.ws-past-name {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-ink-soft);
}
.ws-past-meta {
    font-family: 'Open Sans', sans-serif;
    font-size: 12.5px;
    color: var(--c-muted);
    white-space: nowrap;
}

/* ============================================================ */
/* Loading / empty / error                                       */
/* ============================================================ */

.ws-skeleton {
    background: var(--c-card);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 22px 18px 26px;
    position: relative;
    overflow: hidden;
}
.ws-skeleton::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ws-line);
}
.ws-sk-line {
    height: 11px;
    border-radius: 6px;
    background: #eee;
    margin-bottom: 12px;
}
.ws-sk-line.is-title { width: 55%; height: 15px; }
.ws-sk-line.is-text { width: 90%; }
.ws-sk-faces {
    display: flex;
}
.ws-sk-faces span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eee;
    border: 2px solid #fff;
}
.ws-sk-faces span + span { margin-left: -8px; }

.ws-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--c-card);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--radius);
}
.ws-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ws-tint);
    color: var(--ws-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.ws-state-icon--error { background: #fde8e8; color: #a23737; }
.ws-state h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--c-ink);
    margin: 0 0 6px;
}
.ws-state p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: var(--c-muted);
    margin: 0;
}

/* Reachable from BOTH pages, and workstream.html does not load cases-refresh.css —
   so every shared token below needs a literal fallback or the detail page renders
   it as `initial` (square corners, transparent backgrounds). Same rule applies to
   .ws-chip and .ws-people-count above. */
.ws-alert {
    background: var(--ws-tint);
    border: 1px solid var(--ws-line);
    color: var(--ws-accent-deep);
    border-radius: var(--radius-sm, 8px);
    padding: 10px 16px;
    margin: 0 0 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

@media (max-width: 800px) {
    #workstreams { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ws-page-title { font-size: 24px; }
    .ws-card-body { padding: 16px 16px 14px 20px; }
    .ws-next { padding: 10px 16px 10px 20px; }
    .ws-card-foot { padding: 12px 16px 14px 20px; }
    .ws-join-btn, .ws-card-foot .ws-chip-joined, .ws-card-foot .ws-badge { margin-left: 0; }
}

/* ============================================================ */
/* Detail page — layered on top of case-study.css, scoped        */
/* to .ws-detail so the study page is untouched.                 */
/* ============================================================ */

/* The shell gradient on workstream.html is green-tinted for case studies; warm it. */
body.ws-detail-page {
    background: linear-gradient(135deg, #f8f9fa 0%, var(--ws-tint-soft) 100%);
}

/* --- Header card: title block + status panel in ONE surface --------------- */
/* There is no separate action bar; the join/leave control lives in the panel. */

.ws-detail .ws-hero {
    background:
        linear-gradient(135deg, #ffffff 0%, var(--ws-tint-soft) 55%, #FFEFDD 100%);
    border-left-color: var(--ws-accent);
    border-radius: 18px;
    position: relative;
}
/* CSS-only texture: one soft ochre glow in the top-right corner. No images. */
.ws-detail .ws-hero::after {
    content: '';
    position: absolute;
    top: -140px;
    right: -110px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(140, 90, 26, .13) 0%, rgba(140, 90, 26, 0) 68%);
    pointer-events: none;
    z-index: 0;
}
.ws-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 2.25rem;
    padding: 2.5rem 2.75rem;
}
/* .study-hero-inner carries case-study padding + a 900px cap; the grid owns both here. */
.ws-detail .ws-hero-main {
    padding: 0;
    max-width: none;
    min-width: 0;
}
.ws-detail .ws-hero .ws-eyebrow { margin-bottom: 10px; }
.ws-detail .ws-hero .study-title {
    font-size: 2.6rem;
    line-height: 1.14;
    letter-spacing: -.015em;
    max-width: 20ch;
    margin-bottom: 0;
}
.ws-detail .ws-hero .hero-tags { margin: 1.1rem 0 0; }

.ws-hero-people {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.35rem;
}
.ws-hero-people .ws-face { width: 34px; height: 34px; font-size: 12px; }
.ws-hero-people .ws-people-count { font-size: 13.5px; color: var(--ws-accent-deep); }

/* --- Status panel --- */
.ws-status-panel {
    background: #fff;
    border: 1px solid var(--ws-line);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 6px 20px rgba(95, 61, 16, .09);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ws-status-state {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ws-status-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--ws-tint);
    color: var(--ws-accent);
}
.ws-status-label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ws-accent-deep);
}
/* Variant discs — class names are literals in workstream.js, never server values. */
.ws-status-state--in .ws-status-dot       { background: #e5f4ea; color: #1f6b3a; }
.ws-status-state--in .ws-status-label     { color: #1f6b3a; }
.ws-status-state--curator .ws-status-dot  { background: var(--ws-tint); color: var(--ws-accent); }
.ws-status-state--archived .ws-status-dot { background: #ececec; color: #6d6d6d; }
.ws-status-state--archived .ws-status-label { color: #5a5a5a; }
.ws-status-state--soon .ws-status-dot     { background: #eef2fb; color: #3a6b9a; }
.ws-status-state--soon .ws-status-label   { color: #2f5578; }
.ws-status-state--invite .ws-status-dot   { background: #f3f0fa; color: #5a3a9a; }
.ws-status-state--invite .ws-status-label  { color: #4a2f80; }
.ws-status-state--pending .ws-status-dot   { background: #eef2fb; color: #3a6b9a; }
.ws-status-state--pending .ws-status-label { color: #2f5578; }
.ws-status-state--declined .ws-status-dot   { background: #FDECEC; color: #96322F; }
.ws-status-state--declined .ws-status-label { color: #96322F; }

.ws-status-note {
    font-family: 'Open Sans', sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--c-muted, #6d6d6d);
    margin: 0;
}
.ws-status-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 12px;
    border-top: 1px solid var(--ws-line);
}
.ws-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12.5px;
    color: var(--c-ink-soft, #4a4a4a);
}
.ws-status-row i {
    font-size: 11.5px;
    color: var(--ws-accent);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* --- Tabs: ochre underline + more air --- */
.ws-detail .study-tabs-inner { padding: 0 1.75rem; }
.ws-detail .study-tab {
    padding: 16px 20px;
    letter-spacing: .015em;
    font-size: 14.5px;
}
.ws-detail .study-tab:hover { color: var(--ws-accent); }
.ws-detail .study-tab[aria-selected="true"] {
    color: var(--ws-accent-deep);
    border-bottom-color: var(--ws-accent);
}
.ws-detail .study-tab:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: -2px;
}
.ws-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ws-tint);
    color: var(--ws-accent-deep);
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: 1px;
}

.ws-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ws-btn:disabled { opacity: .6; cursor: default; }
.ws-btn:focus-visible {
    outline: 2px solid var(--ws-accent-deep);
    outline-offset: 2px;
}
.ws-btn-solid {
    background: var(--ws-accent);
    border-color: var(--ws-accent);
    color: #fff;
}
.ws-btn-solid:hover:not(:disabled) { background: var(--ws-accent-deep); border-color: var(--ws-accent-deep); }
.ws-btn-ghost {
    background: transparent;
    border-color: var(--ws-line);
    color: var(--ws-accent-deep);
}
.ws-btn-ghost:hover:not(:disabled) { background: var(--ws-tint); border-color: var(--ws-accent); }
.ws-btn-block { width: 100%; justify-content: center; }

/* --- About panel: editorial two-column spread ---------------------------- */
/* case-study.css centres every direct panel child in an 880px column, which
   leaves the workstream About panel looking like a ghost. Opt out here only. */
.ws-detail .study-panel > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.ws-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
}
.ws-about-main { min-width: 0; }
.ws-about-rail { min-width: 0; }
.ws-about-rail .key-facts-card {
    margin-bottom: 0;
    background: var(--ws-tint-soft);
    border-color: var(--ws-line);
    border-radius: 14px;
    box-shadow: none;
}
.ws-about-rail .key-facts-title { color: var(--ws-accent-deep); }
.ws-about-rail .key-facts-grid { grid-template-columns: 1fr; gap: .9rem; }

.ws-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 15.5px;
    line-height: 1.8;
    color: #1c2a24;
    white-space: pre-wrap;
    max-width: 62ch;
    margin: 0;
}

/* --- Designed empty states --- */
.ws-empty {
    max-width: 420px;
    margin: 1.5rem auto 1rem;
    text-align: center;
    padding: 1.5rem 1rem;
}
.ws-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ws-tint);
    color: var(--ws-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}
.ws-empty-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--c-ink, #212529);
    margin: 0 0 5px;
}
.ws-empty-sub {
    font-family: 'Open Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--c-muted, #6d6d6d);
    margin: 0;
}

/* --- People panel --- */
.ws-people-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 880px;
}
.ws-person-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ws-person-row:hover { border-color: var(--ws-line); box-shadow: 0 4px 12px rgba(0, 0, 0, .07); color: inherit; }
.ws-person-row:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: 2px;
}
.ws-person-row .ws-face { width: 36px; height: 36px; font-size: 12px; }
.ws-person-info { display: flex; flex-direction: column; min-width: 0; }
.ws-person-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
}
.ws-person-org {
    font-family: 'Open Sans', sans-serif;
    font-size: 12.5px;
    color: #6d6d6d;
}

.ws-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}
.ws-badge-curator { background: var(--ws-tint); color: var(--ws-accent-deep); }
.ws-badge-guest   { background: #eef2fb; color: #3a6b9a; }

/* --- Pending join requests (People tab, curator/admin only) --- */
.ws-pending {
    max-width: 880px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--ws-tint-soft);
    border: 1px solid var(--ws-line);
    border-radius: 12px;
}
.ws-pending h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ws-accent-deep);
    margin: 0 0 10px;
}
.ws-pending-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.ws-pending-row + .ws-pending-row { margin-top: 8px; }
.ws-pending-who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    flex: 1;
    min-width: 200px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}
.ws-pending-who .ws-badge { margin-left: 0; }
.ws-pending-org {
    font-family: 'Open Sans', sans-serif;
    font-size: 12.5px;
    color: #6d6d6d;
}
.ws-pending-note {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #4a4a4a;
    white-space: pre-wrap;
}
.ws-pending-actions { display: flex; gap: 8px; margin-left: auto; }
.ws-approve-btn, .ws-decline-btn {
    border-radius: 8px;
    padding: 5px 14px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid var(--ws-line);
    background: transparent;
}
.ws-approve-btn { color: #1f6b3a; border-color: #cfe8d8; }
.ws-approve-btn:hover:not(:disabled) { background: #e5f4ea; }
.ws-decline-btn { color: #96322F; border-color: #F3C6C4; }
.ws-decline-btn:hover:not(:disabled) { background: #FDECEC; }
.ws-approve-btn:disabled, .ws-decline-btn:disabled { opacity: .6; cursor: default; }

.ws-detail .ws-alert { margin: 0 2.5rem 12px; }

/* Hero chips reuse .hero-tags .tag from case-study.css; give them the warm palette. */
.ws-detail .hero-tags .ws-chip { font-size: 12px; }

/* Status panel and key-facts rail drop under their columns before the phone
   breakpoint — 300px of side rail stops earning its keep well before 768px. */
@media (max-width: 1024px) {
    .ws-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ws-status-panel { max-width: 420px; }
    .ws-detail .ws-hero .study-title { font-size: 2.15rem; max-width: 100%; }
    .ws-about {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .ws-about-rail { max-width: 480px; }
    .ws-description { max-width: 68ch; }
}

@media (max-width: 768px) {
    .ws-detail .ws-alert { margin: 0 1rem 12px; }
    .ws-hero-grid { padding: 1.75rem 1.5rem; }
    .ws-detail .ws-hero { border-radius: 14px; }
    .ws-detail .ws-hero .study-title { font-size: 1.6rem; }
    .ws-detail .study-tabs-inner { padding: 0 .5rem; }
    .ws-detail .study-tab { padding: 13px 15px; font-size: 13.5px; }
    .ws-status-panel { max-width: none; }
    .ws-about-rail { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-card,
    .ws-card-title a,
    .ws-join-btn,
    .ws-btn,
    .ws-past-row,
    .ws-person-row,
    .ws-detail .study-tab {
        transition: none;
    }
    .ws-card:hover { transform: none; }
}

/* ============================================================ */
/* Sessions tab — the rhythm of a workstream                     */
/* ============================================================ */

/* A session is an appointment, so the date leads: a calendar-block on the left
   the eye can scan down, the way a diary reads. */
.ws-sess-group { margin-bottom: 28px; }
.ws-sess-group-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ws-accent-deep);
    margin: 0 0 12px;
}

.ws-sess-card {
    background: #fff;
    border: 1px solid var(--ws-line);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.ws-sess-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }

.ws-sess-head { display: flex; align-items: flex-start; gap: 16px; }

.ws-sess-date {
    flex-shrink: 0;
    width: 54px;
    text-align: center;
    background: var(--ws-tint);
    border-radius: 10px;
    padding: 8px 0;
    line-height: 1.1;
}
.ws-sess-day {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--ws-accent-deep);
}
.ws-sess-month {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ws-accent);
}

.ws-sess-headline { flex: 1; min-width: 0; }
.ws-sess-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--c-ink);
    margin: 0 0 2px;
}
.ws-sess-when {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--c-muted);
    margin: 0;
}

.ws-sess-chip {
    display: inline-block;
    margin-top: 6px;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
}
.ws-sess-chip--cancelled { background: #FDECEC; color: #96322F; }
.ws-sess-chip--completed { background: #EAF3EE; color: #2c5842; }

.ws-sess-toggle {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--c-muted);
    padding: 4px 6px;
    cursor: pointer;
    transition: transform 0.18s ease;
}
.ws-sess-card[data-open="true"] .ws-sess-toggle { transform: rotate(180deg); }

.ws-sess-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* Collapsed by default; the toggle flips data-open on the card. */
.ws-sess-body { display: none; margin-top: 14px; }
.ws-sess-card[data-open="true"] .ws-sess-body { display: block; }

.ws-sess-block + .ws-sess-block { margin-top: 14px; }
.ws-sess-block-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin: 0 0 4px;
}
.ws-sess-rich {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-ink);
}
.ws-sess-rich p { margin: 0 0 8px; }
.ws-sess-rich ul, .ws-sess-rich ol { margin: 0 0 8px; padding-left: 20px; }
.ws-sess-rich a { color: var(--ws-accent-deep); }

.ws-sess-plain, .ws-sess-locked {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: var(--c-muted);
    margin: 0;
}
.ws-sess-locked { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

.ws-sess-toolbar:empty { display: none; }
.ws-sess-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }

@media (max-width: 560px) {
    .ws-sess-head { gap: 12px; }
    .ws-sess-date { width: 46px; }
}

/* ============================================================ */
/* Session editor — offcanvas (curator only)                     */
/* ============================================================ */

.ws-sess-manage {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--ws-line);
}
.ws-sess-manage-btn {
    background: transparent;
    border: 1px solid var(--ws-line);
    border-radius: 8px;
    padding: 4px 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--ws-accent-deep);
    cursor: pointer;
}
.ws-sess-manage-btn:hover { background: var(--ws-tint-soft); }
.ws-sess-manage-btn--danger { color: #96322F; }
.ws-sess-manage-btn.is-armed { background: #FDECEC; border-color: #F3C6C4; }

.ws-edt-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 25, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1040;
}
.ws-edt-backdrop[data-open] { opacity: 1; pointer-events: auto; }

.ws-edt-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(520px, 100vw);
    background: #fff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}
.ws-edt-offcanvas[data-open] { transform: translateX(0); }

.ws-edt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ws-line);
}
.ws-edt-header h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    margin: 0;
    color: var(--c-ink);
}
.ws-edt-close {
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--c-muted);
    cursor: pointer;
}

.ws-edt-body { flex: 1; overflow-y: auto; padding: 18px 20px; }

.ws-edt-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--c-ink);
    margin-bottom: 16px;
}
.ws-edt-req {
    font-weight: 400;
    font-size: 11px;
    color: var(--ws-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* The counterpart to .ws-edt-req, for the join panel's two questions: both are
   optional, and saying so removes the "must I?" hesitation before a request
   that a curator would rather receive half-answered than not at all. */
.ws-edt-optional {
    font-weight: 400;
    font-size: 11px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ws-edt-input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid var(--ws-line);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--c-ink);
}
.ws-edt-input:focus {
    outline: none;
    border-color: var(--ws-accent);
    box-shadow: 0 0 0 3px var(--ws-tint);
}
.ws-edt-hint {
    display: block;
    margin-top: 4px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--c-muted);
}
.ws-edt-quill {
    margin-top: 6px;
    min-height: 120px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.ws-edt-fallback {
    width: 100%;
    border: 1px solid var(--ws-line);
    border-radius: 8px;
    padding: 9px 11px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}
.ws-edt-error {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #96322F;
    background: #FDECEC;
    border-radius: 8px;
    padding: 8px 11px;
}

.ws-edt-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--ws-line);
}

/* ============================================================ */
/* Admin & curator management (workstream-admin.js)              */
/* ============================================================ */

/* Reuses the .ws-edt-* offcanvas shell from the session editor — one editing
   idiom across the hub. Only the controls unique to management live here. */

.ws-admin-bar { display: flex; justify-content: flex-end; margin: 0 0 16px; }
.ws-page-head .ws-admin-bar { margin-top: 14px; }

.ws-hero-admin:empty { display: none; }
.ws-hero-admin { margin-top: 14px; }
.ws-admin-edit { font-size: 13px; padding: 6px 14px; }

/* Person rows carry a Remove control for managers, so the row is a flex
   wrapper and the profile link takes the slack. */
.ws-person-item { display: flex; align-items: center; gap: 8px; }
.ws-person-item .ws-person-row { flex: 1; min-width: 0; }

.ws-person-remove {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--ws-line);
    border-radius: 8px;
    padding: 4px 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #96322F;
    cursor: pointer;
}
.ws-person-remove:hover:not(:disabled) { background: #FDECEC; }
.ws-person-remove.is-armed { background: #FDECEC; border-color: #F3C6C4; font-weight: 600; }
.ws-person-remove:disabled { opacity: .6; cursor: default; }

/* Member type-ahead */
.ws-typeahead {
    list-style: none;
    margin: 6px 0 0;
    padding: 4px;
    border: 1px solid var(--ws-line);
    border-radius: 10px;
    background: #fff;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.ws-typeahead-hit {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 7px;
    padding: 7px 10px;
    cursor: pointer;
}
.ws-typeahead-hit:hover { background: var(--ws-tint-soft); }
.ws-typeahead-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--c-ink);
}
.ws-typeahead-meta {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: var(--c-muted);
}
.ws-typeahead-empty {
    padding: 8px 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--c-muted);
}

/* The chosen person, shown once picked so the selection is never ambiguous. */
.ws-chosen {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--ws-tint);
    border-radius: 10px;
}
.ws-chosen-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ws-accent-deep);
}
.ws-chosen-org {
    flex: 1;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--c-muted);
}
.ws-chosen-clear {
    margin-left: auto;
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--ws-accent);
    cursor: pointer;
}

/* Checkbox rows read as a statement, not a bare input. */
.ws-edt-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--c-ink);
    cursor: pointer;
}
.ws-edt-check input { width: 16px; height: 16px; }
.ws-edt-check .ws-edt-hint { grid-column: 2; margin-top: 0; }

textarea.ws-edt-input { resize: vertical; min-height: 84px; }