/* ============================================================================
   MDS EVENTS MANAGEMENT SYSTEM — SHARED COMPONENT LIBRARY
   ----------------------------------------------------------------------------
   Single source of truth for the prototype UI. Derived from the MDS Brand &
   Design System Reference (movementdisorders.org / ReFlex.MDS2021 theme).

   Brand tokens: Lato typeface · Red #AF2626 (primary) · Blue #136294 (secondary)
   Do NOT hard-code hex values in prototype pages — use these classes/vars.

   Sections:
     1.  Design tokens (:root)
     2.  Reset & base
     3.  Typography helpers
     4.  Brand chrome (utility bar, brand header, footer)
     5.  App shell (sidebar + topbar + main)
     6.  Buttons
     7.  Forms & inputs
     8.  Tables
     9.  Cards & panels
     10. Status pills & badges
     11. Tabs
     12. Breadcrumbs & page header
     13. Modals & drawers
     14. Toasts & inline alerts
     15. Misc (empty state, dividers, avatars, tooltips)
     16. Utilities (layout, spacing, text)
     17. Responsive
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================= */
:root {
    /* Brand */
    --mds-red:           #AF2626;
    --mds-red-dark:      #7D0D0D;
    --mds-blue:          #136294;
    --mds-blue-dark:     #0e4d75;

    /* Text */
    --mds-text-dark:     #444444;
    --mds-text-med:      #666666;
    --mds-text-light:    #8a8a8a;
    --mds-white:         #FFFFFF;

    /* Neutrals / surfaces */
    --mds-light:         #EFEFEB;   /* page-level stripe / panel bg */
    --mds-med-light:     #DEDED7;   /* card bg, input borders */
    --mds-light-med:     #C7C8C3;   /* footer bg */
    --mds-medium:        #70705A;   /* olive-gray accents */
    --mds-dark:          #555555;
    --mds-canvas:        #f4f4f1;   /* app working canvas */
    --mds-surface:       #ffffff;

    /* Regional accents (available if needed) */
    --mds-region-panam:  #0F8484;
    --mds-region-euro:   #377852;
    --mds-region-africa: #8C4975;
    --mds-region-asia:   #256BA4;

    /* Status palette (events domain) */
    --status-accepted:   #377852;  /* green */
    --status-accepted-bg:#e9f1ec;
    --status-invited:    #136294;  /* blue */
    --status-invited-bg: #e7eff5;
    --status-declined:   #AF2626;  /* red */
    --status-declined-bg:#f7e9e9;
    --status-withdraw:   #b8860b;  /* amber */
    --status-withdraw-bg:#fbf3df;
    --status-tba:        #70705A;  /* olive-gray */
    --status-tba-bg:     #ecece6;
    --status-backup:     #555555;  /* neutral */
    --status-backup-bg:  #ededed;

    /* Typography */
    --font-base: 'Lato', Arial, Helvetica, sans-serif;
    --fs-xs:  11px;
    --fs-sm:  13px;
    --fs-base:14px;
    --fs-md:  16px;
    --fs-lg:  18px;
    --fs-xl:  22px;
    --fs-2xl: 26px;
    --fs-3xl: 32px;
    --fw-regular: 400;
    --fw-medium:  700;
    --fw-bold:    900;

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.10);
    --shadow-md: 0 3px 6px rgba(0,0,0,.16);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.20);

    /* Layout */
    --sidebar-w: 248px;
    --topbar-h:  64px;
    --content-max: 1280px;

    --transition: .15s ease;
}

/* 2. RESET & BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: 1.45;
    color: var(--mds-text-dark);
    background: var(--mds-canvas);
}

a { color: var(--mds-red); text-decoration: none; transition: color var(--transition); }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--mds-blue); outline-offset: 2px; }

/* 3. TYPOGRAPHY HELPERS ==================================================== */
.h1, .h2, .h3, .h4 { font-family: var(--font-base); font-weight: var(--fw-bold); color: var(--mds-text-dark); line-height: 1.3; }
.h1 { font-size: var(--fs-3xl); }
.h2 { font-size: var(--fs-2xl); }
.h3 { font-size: var(--fs-xl); }
.h4 { font-size: var(--fs-lg); }

.section-heading {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--mds-text-dark);
    border-bottom: 3px solid var(--mds-red);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.text-muted   { color: var(--mds-text-med); }
.text-faint   { color: var(--mds-text-light); }
.text-sm      { font-size: var(--fs-sm); }
.text-xs      { font-size: var(--fs-xs); }
.text-bold    { font-weight: var(--fw-bold); }
.text-medium  { font-weight: var(--fw-medium); }
.eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mds-text-med);
}

/* 4. BRAND CHROME ========================================================== */
.mds-utility-bar {
    background: var(--mds-red);
    color: #fff;
    font-size: var(--fs-sm);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-5);
    padding: var(--sp-2) var(--sp-5);
}
.mds-utility-bar a { color: #fff; }
.mds-utility-bar a:hover { text-decoration: underline; }

.mds-footer {
    background: var(--mds-light-med);
    border-top: 3px solid var(--mds-red);
    color: var(--mds-text-dark);
    font-size: var(--fs-sm);
    padding: var(--sp-5);
    text-align: center;
}

/* 5. APP SHELL ============================================================= */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 100vh;
    overflow: hidden;
}

/* Sidebar */
.app-sidebar {
    background: #2b2b2b;
    color: #cfcfca;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-sidebar__logo {
    background: var(--mds-red);
    color: #fff;
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    flex: none;
}
.app-sidebar__title { font-size: var(--fs-sm); line-height: 1.2; color: #fff; }
.app-sidebar__title small { display: block; color: #9a9a93; font-weight: 400; }

.app-nav { padding: var(--sp-3) 0; flex: 1; }
.app-nav__group-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7f7f78;
    padding: var(--sp-3) var(--sp-5) var(--sp-2);
}
.app-nav__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    color: #cfcfca;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.app-nav__item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.app-nav__item.is-active {
    background: rgba(175,38,38,.18);
    border-left-color: var(--mds-red);
    color: #fff;
}
.app-nav__icon { width: 18px; text-align: center; flex: none; opacity: .9; }

.app-sidebar__footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: var(--fs-xs);
    color: #8a8a83;
}

/* Main column */
.app-main { display: flex; flex-direction: column; overflow: hidden; }

.app-topbar {
    height: var(--topbar-h);
    flex: none;
    background: #fff;
    border-bottom: 3px solid var(--mds-red);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 var(--sp-6);
}
.app-topbar__search { flex: 1; max-width: 420px; }
.app-topbar__spacer { flex: 1; }
.app-topbar__actions { display: flex; align-items: center; gap: var(--sp-4); }

.app-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-6);
}
.app-content__inner { max-width: var(--content-max); margin: 0 auto; }

/* 6. BUTTONS =============================================================== */
.btn {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    padding: 8px 18px;
    border: 2px solid var(--mds-red);
    border-radius: var(--radius-sm);
    background: var(--mds-red);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { background: #fff; color: var(--mds-red); text-decoration: none; }

.btn--outline { background: #fff; color: var(--mds-red); }
.btn--outline:hover { background: var(--mds-red); color: #fff; }

.btn--secondary { background: var(--mds-blue); border-color: var(--mds-blue); color: #fff; }
.btn--secondary:hover { background: #fff; color: var(--mds-blue); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--mds-text-dark); }
.btn--ghost:hover { background: var(--mds-light); color: var(--mds-text-dark); }

.btn--danger { background: var(--mds-red-dark); border-color: var(--mds-red-dark); }
.btn--danger:hover { background: #fff; color: var(--mds-red-dark); }

.btn--sm { font-size: var(--fs-sm); padding: 5px 12px; }
.btn--lg { font-size: var(--fs-md); padding: 10px 24px; }
.btn--icon { padding: 7px 9px; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* 7. FORMS & INPUTS ======================================================== */
.field { margin-bottom: var(--sp-4); }
.field__label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--mds-text-dark);
    margin-bottom: var(--sp-1);
}
.field__label .req { color: var(--mds-red); margin-left: 2px; }
.field__hint { font-size: var(--fs-xs); color: var(--mds-text-med); margin-top: var(--sp-1); }

.input, .select, .textarea {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    color: var(--mds-text-dark);
    background: #fff;
    border: 1px solid var(--mds-med-light);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    width: 100%;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--mds-red);
    box-shadow: 0 0 0 3px rgba(175,38,38,.12);
}
.textarea { min-height: 96px; resize: vertical; }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Pill search (brand pattern) */
.search {
    position: relative;
    display: flex;
    align-items: center;
}
.search .input {
    border-radius: var(--radius-pill);
    padding-left: 38px;
}
.search__icon {
    position: absolute;
    left: 14px;
    color: var(--mds-text-med);
    pointer-events: none;
}

.checkbox, .radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    cursor: pointer;
}
.checkbox input, .radio input { width: 16px; height: 16px; accent-color: var(--mds-red); }

.field-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 180px; }

/* 8. TABLES ================================================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); background: #fff; }
.data-table thead th {
    background: var(--mds-red);
    color: #fff;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 14px;
    white-space: nowrap;
}
.data-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--mds-med-light);
    vertical-align: middle;
    color: var(--mds-text-dark);
}
.data-table tbody tr:nth-child(even) td { background: #f8f8f6; }
.data-table tbody tr:hover td { background: #fbf2f2; }
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table .col-actions { text-align: right; white-space: nowrap; }
.data-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }

.table-wrap {
    border: 1px solid var(--mds-med-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.table-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: #fff;
    border-bottom: 1px solid var(--mds-med-light);
    flex-wrap: wrap;
}
.table-toolbar__spacer { flex: 1; }

/* 9. CARDS & PANELS ======================================================== */
.card {
    background: #fff;
    border: 1px solid var(--mds-med-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.card__body { padding: var(--sp-5); }
.card__header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--mds-med-light);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.card__header .app-topbar__spacer,
.card__header-actions { margin-left: auto; display: flex; gap: var(--sp-2); }

.card--accent { border-top: 10px solid var(--mds-red); }
.card--flush .card__body { padding: 0; }

.panel { background: var(--mds-light); border-radius: var(--radius-md); padding: var(--sp-5); }

/* Stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.stat {
    background: #fff;
    border: 1px solid var(--mds-med-light);
    border-left: 4px solid var(--mds-red);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--shadow-sm);
}
.stat__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--mds-text-dark); line-height: 1.1; }
.stat__label { font-size: var(--fs-sm); color: var(--mds-text-med); margin-top: var(--sp-1); }
.stat--blue   { border-left-color: var(--mds-blue); }
.stat--green  { border-left-color: var(--status-accepted); }
.stat--amber  { border-left-color: var(--status-withdraw); }

/* 10. STATUS PILLS & BADGES =============================================== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--mds-light);
    color: var(--mds-text-dark);
    white-space: nowrap;
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.pill--accepted { background: var(--status-accepted-bg); color: var(--status-accepted); }
.pill--invited  { background: var(--status-invited-bg);  color: var(--status-invited); }
.pill--declined { background: var(--status-declined-bg); color: var(--status-declined); }
.pill--withdraw { background: var(--status-withdraw-bg); color: var(--status-withdraw); }
.pill--tba      { background: var(--status-tba-bg);      color: var(--status-tba); }
.pill--backup   { background: var(--status-backup-bg);   color: var(--status-backup); }

/* plain badge (no dot) */
.badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--mds-medium);
    color: #fff;
}
.badge--soft { background: var(--mds-light); color: var(--mds-text-med); }
.badge--role { background: var(--mds-blue); }

/* 11. TABS ================================================================= */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--mds-med-light); margin-bottom: var(--sp-5); }
.tab {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--mds-text-med);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    background: none;
    border-top: none; border-left: none; border-right: none;
    transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--mds-text-dark); }
.tab.is-active { color: var(--mds-red); border-bottom-color: var(--mds-red); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* 12. BREADCRUMBS & PAGE HEADER =========================================== */
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--mds-text-med); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--mds-text-med); font-weight: var(--fw-medium); }
.breadcrumb a:hover { color: var(--mds-red); }
.breadcrumb__sep { color: var(--mds-light-med); }

.page-header { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.page-header__titles { flex: 1; }
.page-header__title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.2; }
.page-header__subtitle { color: var(--mds-text-med); margin-top: var(--sp-1); }
.page-header__actions { display: flex; gap: var(--sp-2); flex: none; }

/* 13. MODALS & DRAWERS ==================================================== */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    z-index: 1000;
}
.modal-overlay.is-open { display: flex; }
.modal {
    background: #fff;
    border-radius: var(--radius-md);
    border-top: 6px solid var(--mds-red);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.modal--wide { max-width: 820px; }
.modal__header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--mds-med-light); display: flex; align-items: center; }
.modal__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.modal__close { margin-left: auto; background: none; border: none; font-size: 22px; line-height: 1; color: var(--mds-text-med); cursor: pointer; }
.modal__close:hover { color: var(--mds-red); }
.modal__body { padding: var(--sp-5); overflow-y: auto; }
.modal__footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--mds-med-light); display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* Right-side drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.40); display: none; z-index: 1000; }
.drawer-overlay.is-open { display: block; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 480px; max-width: 92vw;
    background: #fff;
    box-shadow: var(--shadow-lg);
    border-left: 6px solid var(--mds-red);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
    z-index: 1001;
}
.drawer.is-open { transform: translateX(0); }
.drawer__header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--mds-med-light); display: flex; align-items: center; }
.drawer__body { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.drawer__footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--mds-med-light); display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* 14. TOASTS & ALERTS ===================================================== */
.alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--mds-blue);
    background: var(--status-invited-bg);
    color: var(--mds-text-dark);
    font-size: var(--fs-base);
    margin-bottom: var(--sp-4);
}
.alert--success { border-left-color: var(--status-accepted); background: var(--status-accepted-bg); }
.alert--warning { border-left-color: var(--status-withdraw); background: var(--status-withdraw-bg); }
.alert--danger  { border-left-color: var(--mds-red); background: var(--status-declined-bg); }

.toast-stack { position: fixed; bottom: var(--sp-5); right: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 1100; }
.toast {
    background: #2b2b2b;
    color: #fff;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--status-accepted);
    font-size: var(--fs-base);
    min-width: 260px;
}

/* 15. MISC ================================================================ */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--mds-text-med); }
.empty-state__icon { font-size: 40px; opacity: .35; margin-bottom: var(--sp-3); }
.empty-state__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--mds-text-dark); margin-bottom: var(--sp-1); }

.divider { height: 1px; background: var(--mds-med-light); border: none; margin: var(--sp-5) 0; }

.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--mds-blue); color: #fff;
    display: grid; place-items: center;
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    flex: none;
}
.avatar--sm { width: 26px; height: 26px; font-size: var(--fs-xs); }

.person { display: flex; align-items: center; gap: var(--sp-3); }
.person__name { font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.person__meta { font-size: var(--fs-xs); color: var(--mds-text-med); }

/* 16. UTILITIES =========================================================== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

.mt-0{margin-top:0}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.p-0{padding:0}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.p-5{padding:var(--sp-5)}

.w-full { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* 17. RESPONSIVE ========================================================== */
@media (max-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .app-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0;
        width: var(--sidebar-w); z-index: 1200;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .app-sidebar.is-open { transform: translateX(0); }
    .app-content { padding: var(--sp-4); }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; }
    .drawer { width: 100%; }
}

/* ============================================================================
   18. MEMBER-FACING CHROME & COMPONENTS  (Faculty / Attendee Hub — Prototype 2)
   ----------------------------------------------------------------------------
   The faculty hub is MEMBER-facing and should feel like MyMDS — NOT the dark
   admin app-shell. It uses the lighter brand chrome: utility bar + white brand
   header (3px red bottom border) + centered content frame + footer.
   ========================================================================== */

/* --- Page layout for member pages --- */
.member-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mds-canvas);
}
.member-main { flex: 1; }
.member-frame { max-width: 1080px; margin: 0 auto; padding: var(--sp-6) var(--sp-5); }
.member-frame--narrow { max-width: 760px; }

/* --- Utility bar (extends .mds-utility-bar with a left side) --- */
.mds-utility-bar__inner {
    max-width: 1080px; width: 100%; margin: 0 auto;
    display: flex; align-items: center; gap: var(--sp-5);
}
.mds-utility-bar__inner .spacer { flex: 1; }
.mds-utility-bar .util-link { color: #fff; opacity: .92; }
.mds-utility-bar .util-link:hover { opacity: 1; text-decoration: underline; }
.mds-utility-bar .util-sep { opacity: .5; }

/* --- White brand header --- */
.mds-header {
    background: #fff;
    border-bottom: 3px solid var(--mds-red);
    box-shadow: var(--shadow-sm);
}
.mds-header__inner {
    max-width: 1080px; margin: 0 auto;
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
}
.mds-header__logo {
    background: var(--mds-red); color: #fff;
    font-weight: var(--fw-bold); font-size: var(--fs-lg);
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    display: grid; place-items: center; flex: none;
}
.mds-header__titles { line-height: 1.2; }
.mds-header__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.mds-header__sub { font-size: var(--fs-xs); color: var(--mds-text-med); }
.mds-header__spacer { flex: 1; }
.mds-header__user { display: flex; align-items: center; gap: var(--sp-3); }
.mds-header__user-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--mds-text-dark); text-align: right; line-height: 1.2; }
.mds-header__user-name small { display: block; font-weight: 400; color: var(--mds-text-med); }

/* --- Member sub-navigation (tabs across the hub) --- */
.member-nav {
    background: #fff;
    border-bottom: 1px solid var(--mds-med-light);
}
.member-nav__inner {
    max-width: 1080px; margin: 0 auto;
    display: flex; gap: var(--sp-2); padding: 0 var(--sp-5);
    overflow-x: auto;
}
.member-nav__item {
    padding: var(--sp-3) var(--sp-3);
    font-size: var(--fs-base); font-weight: var(--fw-bold);
    color: var(--mds-text-med);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.member-nav__item:hover { color: var(--mds-text-dark); text-decoration: none; }
.member-nav__item.is-active { color: var(--mds-red); border-bottom-color: var(--mds-red); }
.member-nav__item .pip {
    background: var(--mds-red); color: #fff;
    font-size: 10px; font-weight: var(--fw-bold);
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: var(--radius-pill);
    display: inline-grid; place-items: center;
}

/* --- "Viewing as" banner: cross-link between staff <-> faculty prototypes --- */
.view-as-bar {
    background: #2b2b2b; color: #e6e6e1;
    font-size: var(--fs-sm);
}
.view-as-bar__inner {
    max-width: 1080px; margin: 0 auto;
    padding: var(--sp-2) var(--sp-5);
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.view-as-bar strong { color: #fff; }
.view-as-bar a { color: #fff; text-decoration: underline; font-weight: var(--fw-bold); }
.view-as-bar .spacer { flex: 1; }
.view-as-bar .tag {
    background: rgba(255,255,255,.14); color: #fff;
    border-radius: var(--radius-pill); padding: 2px 10px;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
}

/* --- Hub hero (welcome block) --- */
.hub-hero {
    background: linear-gradient(180deg, #fff, var(--mds-light));
    border: 1px solid var(--mds-med-light);
    border-top: 6px solid var(--mds-red);
    border-radius: var(--radius-md);
    padding: var(--sp-5) var(--sp-5) var(--sp-5);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-5);
}
.hub-hero__greeting { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.hub-hero__roles { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* --- Progress meter (action-item completion, FR-FM-4) --- */
.progress { margin-top: var(--sp-4); }
.progress__bar {
    height: 10px; border-radius: var(--radius-pill);
    background: var(--mds-med-light); overflow: hidden;
}
.progress__fill {
    height: 100%; border-radius: var(--radius-pill);
    background: var(--status-accepted);
    transition: width .4s ease;
}
.progress__label { font-size: var(--fs-sm); color: var(--mds-text-med); margin-top: var(--sp-2); }
.progress__label strong { color: var(--mds-text-dark); }

/* --- Action-item checklist (completed vs. open) --- */
.checklist { list-style: none; }
.check-item {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--mds-med-light);
}
.check-item:last-child { border-bottom: none; }
.check-item__icon {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    border: 2px solid var(--mds-med-light);
    color: var(--mds-text-light); background: #fff;
}
.check-item.is-complete .check-item__icon {
    background: var(--status-accepted); border-color: var(--status-accepted); color: #fff;
}
.check-item__body { flex: 1; min-width: 0; }
.check-item__title { font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.check-item.is-complete .check-item__title { color: var(--mds-text-med); }
.check-item__desc { font-size: var(--fs-sm); color: var(--mds-text-med); margin-top: 2px; }
.check-item__meta { font-size: var(--fs-xs); color: var(--mds-text-light); margin-top: var(--sp-1); }
.check-item__action { flex: none; align-self: center; }

/* --- Info / snapshot rows (registration, housing, stipend) --- */
.info-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.info-row { display: flex; align-items: baseline; gap: var(--sp-3); }
.info-row__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--mds-text-med); font-weight: var(--fw-bold); width: 116px; flex: none; }
.info-row__value { color: var(--mds-text-dark); }
.info-row__value strong { font-weight: var(--fw-bold); }
.code-chip {
    font-family: 'Lato', monospace; font-weight: var(--fw-bold);
    background: var(--status-invited-bg); color: var(--mds-blue);
    padding: 2px 10px; border-radius: var(--radius-sm); letter-spacing: .03em;
}

/* --- Commitment / session card (used on hub + schedule) --- */
.commit {
    display: flex; gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--mds-med-light);
    border-left: 4px solid var(--mds-blue);
    border-radius: var(--radius-md);
    background: #fff;
}
.commit--faculty { border-left-color: var(--mds-red); }
.commit--committee { border-left-color: var(--mds-region-panam); }
.commit__time {
    flex: none; width: 92px; text-align: right;
    font-variant-numeric: tabular-nums;
}
.commit__time .t { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.commit__time .d { font-size: var(--fs-xs); color: var(--mds-text-med); }
.commit__body { flex: 1; min-width: 0; }
.commit__title { font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.commit__meta { font-size: var(--fs-sm); color: var(--mds-text-med); margin-top: 2px; }
.commit__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

/* --- Agenda timeline (personal onsite schedule) --- */
.agenda-day {
    font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--mds-text-dark);
    padding-bottom: var(--sp-2); margin: var(--sp-6) 0 var(--sp-4);
    border-bottom: 2px solid var(--mds-red);
}
.agenda-day:first-child { margin-top: 0; }
.agenda-list { display: flex; flex-direction: column; gap: var(--sp-3); }

/* conflict highlight on overlapping commitments */
.commit.is-conflict { border-color: var(--status-withdraw); box-shadow: 0 0 0 2px var(--status-withdraw-bg); }
.conflict-flag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    color: var(--status-withdraw); background: var(--status-withdraw-bg);
    padding: 2px 9px; border-radius: var(--radius-pill);
}
.no-conflict-flag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--status-accepted); background: var(--status-accepted-bg);
    padding: 4px 12px; border-radius: var(--radius-pill);
}

/* --- Invitation landing (decision card) --- */
.invite-card { max-width: 620px; margin: 0 auto; }
.invite-card__role {
    display: inline-block; font-size: var(--fs-sm); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .05em;
    color: #fff; background: var(--mds-blue);
    padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: var(--sp-3);
}
.invite-decision { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.invite-decision .btn { flex: 1; justify-content: center; }

/* --- Sign / acknowledge form pattern (speaker agreement) --- */
.sign-doc {
    border: 1px solid var(--mds-med-light); border-radius: var(--radius-md);
    background: #fbfbf9; padding: var(--sp-5);
    max-height: 260px; overflow-y: auto;
    font-size: var(--fs-sm); color: var(--mds-text-med); line-height: 1.6;
}
.sign-doc h4 { color: var(--mds-text-dark); margin-bottom: var(--sp-2); }
.sign-doc p { margin-bottom: var(--sp-3); }
.sign-pad {
    margin-top: var(--sp-4); padding: var(--sp-4);
    border: 1px dashed var(--mds-light-med); border-radius: var(--radius-md);
    background: var(--mds-light);
}
.sign-pad__name {
    font-family: 'Lato', cursive; font-size: var(--fs-2xl); font-weight: 300;
    font-style: italic; color: var(--mds-text-dark);
    border-bottom: 2px solid var(--mds-text-med);
    padding-bottom: var(--sp-1); min-height: 38px;
}

/* --- Upload dropzone (headshot) --- */
.dropzone {
    border: 2px dashed var(--mds-light-med); border-radius: var(--radius-md);
    background: var(--mds-light);
    padding: var(--sp-6) var(--sp-5); text-align: center;
    color: var(--mds-text-med); cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.dropzone:hover { border-color: var(--mds-red); background: #fff; }
.dropzone__icon { font-size: 32px; opacity: .5; }
.dropzone.has-file { border-color: var(--status-accepted); border-style: solid; background: var(--status-accepted-bg); color: var(--mds-text-dark); }

/* --- Form section navigation (left rail on forms page) --- */
.form-rail { list-style: none; position: sticky; top: var(--sp-4); }
.form-rail__item {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
    border-left: 3px solid transparent;
    color: var(--mds-text-med); font-weight: var(--fw-bold); font-size: var(--fs-sm);
    cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.form-rail__item:hover { background: var(--mds-light); color: var(--mds-text-dark); text-decoration: none; }
.form-rail__item.is-active { border-left-color: var(--mds-red); color: var(--mds-red); background: var(--status-declined-bg); }
.form-rail__item .tick { margin-left: auto; color: var(--status-accepted); font-weight: var(--fw-bold); }
.form-rail__item.is-locked { opacity: .55; }

/* --- Two-column hub / forms layout --- */
.col-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); align-items: start; }
.col-layout--forms { grid-template-columns: 240px 1fr; }

@media (max-width: 860px) {
    .col-layout, .col-layout--forms { grid-template-columns: 1fr; }
    .form-rail { position: static; display: flex; gap: var(--sp-1); overflow-x: auto; border-bottom: 1px solid var(--mds-med-light); }
    .form-rail__item { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .form-rail__item.is-active { border-left: none; border-bottom-color: var(--mds-red); background: none; }
}
@media (max-width: 560px) {
    .invite-decision { flex-direction: column; }
    .commit { flex-direction: column; gap: var(--sp-2); }
    .commit__time { width: auto; text-align: left; display: flex; gap: var(--sp-2); align-items: baseline; }
    .member-frame { padding: var(--sp-4); }
}

/* ============================================================================
   19. VISUAL SCHEDULE BUILDER  (staff-facing — Prototype 3)
   ----------------------------------------------------------------------------
   A days × time × rooms grid with draggable session blocks, a committee lane,
   an unscheduled tray, a day switcher, a person-highlight filter, and live
   conflict markers. Staff-facing → lives inside the dark admin app-shell.
   All colors come from existing tokens (no new brand hex).
   ========================================================================== */
:root {
    --sb-row-h: 38px;          /* one 30-min slot — must match JS rowH */
    --sb-time-col: 64px;
    --sb-tray-w: 280px;
}

/* --- Toolbar --- */
.sb-toolbar .card__body { padding: var(--sp-3) var(--sp-4); }
.sb-toolbar__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sb-toolbar__spacer { flex: 1; }
.sb-filter { display: flex; align-items: center; }

.sb-dayswitch { display: inline-flex; gap: var(--sp-1); background: var(--mds-light); border-radius: var(--radius-md); padding: 3px; }
.sb-day {
    border: none; background: none; cursor: pointer;
    font-family: var(--font-base); text-align: left;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
    color: var(--mds-text-med); line-height: 1.2;
}
.sb-day:hover { color: var(--mds-text-dark); }
.sb-day[aria-selected="true"] { background: #fff; box-shadow: var(--shadow-sm); color: var(--mds-red); }
.sb-day__label { display: block; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.sb-day__date { display: block; font-size: var(--fs-xs); color: var(--mds-text-med); }

.sb-conflict-btn--active { border-color: var(--status-withdraw); color: var(--status-withdraw); background: var(--status-withdraw-bg); }
.sb-conflict-btn--active:hover { background: var(--status-withdraw); color: #fff; border-color: var(--status-withdraw); }
.sb-conflict-btn--clear { border-color: var(--status-accepted); color: var(--status-accepted); background: var(--status-accepted-bg); }
.sb-conflict-btn--clear:hover { background: var(--status-accepted); color: #fff; border-color: var(--status-accepted); }

/* --- Legend --- */
.sb-legend { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--mds-med-light); }
.sb-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--mds-text-med); }
.sb-swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.sb-swatch--session   { background: var(--status-invited-bg); border: 2px solid var(--mds-blue); }
.sb-swatch--committee { background: #e7f3f3; border: 2px solid var(--mds-region-panam); }
.sb-swatch--conflict  { background: var(--status-withdraw-bg); border: 2px solid var(--status-withdraw); }
.sb-swatch--highlight { background: #fff; border: 2px solid var(--mds-red); box-shadow: 0 0 0 2px rgba(175,38,38,.25); }
.sb-legend__hint { margin-left: auto; }

/* --- Workspace: tray + grid --- */
.sb-workspace { display: grid; grid-template-columns: var(--sb-tray-w) 1fr; gap: var(--sp-4); align-items: start; }

/* --- Unscheduled tray --- */
.sb-tray {
    background: #fff; border: 1px solid var(--mds-med-light);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    position: sticky; top: var(--sp-3);
    max-height: calc(100vh - 140px); overflow-y: auto;
}
.sb-tray__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.sb-tray__list { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }
.sb-tray__empty { padding: var(--sp-5) var(--sp-4); }

/* --- Grid --- */
.sb-grid-wrap { overflow-x: auto; }
.sb-grid {
    display: grid;
    /* template-columns set inline by JS (time col + N room cols) */
    position: relative;
    min-width: 720px;
}
.sb-grid__corner {
    position: sticky; left: 0; top: 0; z-index: 3;
    background: var(--mds-red); color: #fff;
    font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em;
    display: grid; place-items: center;
    border-right: 1px solid rgba(255,255,255,.2);
}
.sb-room-head {
    position: sticky; top: 0; z-index: 2;
    background: var(--mds-red); color: #fff;
    padding: var(--sp-2) var(--sp-3);
    border-left: 1px solid rgba(255,255,255,.18);
    text-align: center;
}
.sb-room-head--committee { background: var(--mds-region-panam); }
.sb-room-head__name { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.sb-room-head__note { font-size: 10px; opacity: .85; }

.sb-time {
    height: var(--sb-row-h);
    position: sticky; left: 0; z-index: 1;
    background: var(--mds-canvas);
    font-size: var(--fs-xs); color: var(--mds-text-med);
    text-align: right; padding: 2px var(--sp-2) 0;
    border-top: 1px solid transparent;
}
.sb-time--hour { border-top: 1px solid var(--mds-med-light); color: var(--mds-text-dark); font-weight: var(--fw-bold); }

.sb-cell {
    height: var(--sb-row-h);
    border-left: 1px solid var(--mds-med-light);
    border-top: 1px solid #f0f0ec;
    position: relative;
    background: #fff;
}
.sb-cell--hour { border-top: 1px solid var(--mds-med-light); }
.sb-cell[data-kind="committee"] { background: #fafdfd; }
.sb-cell[data-kind="session"]:hover { background: #fbf7f7; }
.sb-cell.is-dragover { background: var(--status-invited-bg); box-shadow: inset 0 0 0 2px var(--mds-blue); }

/* while arming (click-to-place) make session cells look like drop targets */
.sb-arming .sb-cell[data-kind="session"] { cursor: copy; }
.sb-arming .sb-cell[data-kind="session"]:hover { background: var(--status-invited-bg); box-shadow: inset 0 0 0 2px var(--mds-blue); }

/* --- Blocks --- */
.sb-block {
    border-radius: var(--radius-sm);
    padding: 4px 7px;
    font-size: var(--fs-xs);
    cursor: grab;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}
.sb-block:active { cursor: grabbing; }
.sb-block__num { font-weight: var(--fw-bold); font-size: var(--fs-xs); }
.sb-block__name { font-weight: var(--fw-medium); line-height: 1.2; margin-top: 1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-block__meta { font-size: 10px; opacity: .8; margin-top: 2px; }
.sb-block__warn { float: right; color: var(--status-withdraw); font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-left: 4px; }

/* tray variant */
.sb-block--tray {
    border: 1px solid var(--mds-med-light);
    border-left: 4px solid var(--mds-blue);
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: var(--mds-text-dark);
}
.sb-block--tray:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sb-block--tray.is-selected { border-color: var(--mds-red); border-left-color: var(--mds-red); box-shadow: 0 0 0 2px rgba(175,38,38,.25); }

/* grid variant: absolutely positioned over the start cell */
.sb-block--grid {
    position: absolute; top: 2px; left: 2px; right: 2px; z-index: 4;
}
.sb-block--session {
    background: var(--status-invited-bg);
    border: 1px solid var(--mds-blue);
    border-left: 4px solid var(--mds-blue);
    color: var(--mds-blue-dark);
}
.sb-block--committee {
    background: #e7f3f3;
    border: 1px solid var(--mds-region-panam);
    border-left: 4px solid var(--mds-region-panam);
    color: #0c5f5f;
    cursor: pointer;
}
.sb-block--grid:hover { box-shadow: var(--shadow-md); z-index: 6; }
.sb-block.is-dragging { opacity: .4; }

/* conflict marker */
.sb-block.is-conflict {
    background: var(--status-withdraw-bg);
    border-color: var(--status-withdraw);
    border-left-color: var(--status-withdraw);
    color: #7a5a02;
    box-shadow: 0 0 0 2px var(--status-withdraw-bg), var(--shadow-sm);
}

/* person highlight */
.sb-block.is-highlight { box-shadow: 0 0 0 2px var(--mds-red), var(--shadow-md); z-index: 5; }
.sb-block.is-dim { opacity: .35; }

/* flash when jumped-to from the conflict panel */
@keyframes sbFlash {
    0%, 100% { box-shadow: 0 0 0 2px var(--status-withdraw), var(--shadow-md); }
    50% { box-shadow: 0 0 0 5px var(--status-withdraw), var(--shadow-lg); }
}
.sb-block.is-flash { animation: sbFlash .5s ease 3; z-index: 7; }

/* --- Conflict panel rows (in the drawer) --- */
.sb-conflict {
    border: 1px solid var(--mds-med-light);
    border-left: 4px solid var(--status-withdraw);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    cursor: pointer;
    transition: box-shadow var(--transition), background var(--transition);
}
.sb-conflict:hover { background: var(--status-withdraw-bg); box-shadow: var(--shadow-sm); }
.sb-conflict__who { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.sb-conflict__line { font-size: var(--fs-sm); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.sb-conflict__overlap { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--status-withdraw); margin-top: var(--sp-2); }
.sb-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sb-dot--sess { background: var(--mds-blue); }
.sb-dot--cm { background: var(--mds-region-panam); }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sb-workspace { grid-template-columns: 1fr; }
    .sb-tray { position: static; max-height: none; }
    .sb-tray__list { flex-direction: row; flex-wrap: wrap; }
    .sb-tray__list .sb-block--tray { flex: 1 1 200px; }
    .sb-legend__hint { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 768px) {
    .sb-toolbar__row { gap: var(--sp-2); }
    .sb-filter { width: 100%; }
}

/* ============================================================================
   20. REPORTING + REPORT BUILDER  (staff-facing — Prototype 4)
   ----------------------------------------------------------------------------
   The SSRS replacement: a report library (pre-canned + saved custom), a
   two-pane self-service builder (source → field-picker → filters → sort →
   live preview), and a results view. Staff-facing → dark admin app-shell.
   All colors come from existing tokens (no new brand hex).
   ========================================================================== */

/* --- Report library: standard + saved report rows --- */
.rpt-list { display: flex; flex-direction: column; }
.rpt-row {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--mds-med-light);
    transition: background var(--transition);
}
.rpt-row:last-child { border-bottom: none; }
.rpt-row:hover { background: #fbf2f2; }
.rpt-row__icon {
    width: 40px; height: 40px; border-radius: var(--radius-md); flex: none;
    display: grid; place-items: center;
    font-size: var(--fs-lg);
    background: var(--status-invited-bg); color: var(--mds-blue);
}
.rpt-row__icon--custom { background: var(--status-accepted-bg); color: var(--status-accepted); }
.rpt-row__body { flex: 1; min-width: 0; }
.rpt-row__name { font-weight: var(--fw-bold); color: var(--mds-text-dark); font-size: var(--fs-md); }
.rpt-row__desc { font-size: var(--fs-sm); color: var(--mds-text-med); margin-top: 2px; }
.rpt-row__meta { font-size: var(--fs-xs); color: var(--mds-text-light); margin-top: 4px; }
.rpt-row__actions { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 768px) {
    .rpt-row { flex-wrap: wrap; }
    .rpt-row__actions { width: 100%; }
}

/* --- Source selector (pick a data subject in the builder) --- */
.src-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.src-card {
    text-align: left;
    border: 2px solid var(--mds-med-light);
    border-radius: var(--radius-md);
    background: #fff;
    padding: var(--sp-4);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    display: flex; gap: var(--sp-3); align-items: flex-start;
    font-family: inherit;
}
.src-card:hover { border-color: var(--mds-blue); box-shadow: var(--shadow-sm); }
.src-card.is-active { border-color: var(--mds-red); background: #fff; box-shadow: var(--shadow-sm); }
.src-card__icon {
    width: 36px; height: 36px; border-radius: var(--radius-sm); flex: none;
    display: grid; place-items: center; font-size: var(--fs-lg);
    background: var(--mds-light); color: var(--mds-text-med);
}
.src-card.is-active .src-card__icon { background: var(--status-declined-bg); color: var(--mds-red); }
.src-card__name { font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.src-card__desc { font-size: var(--fs-xs); color: var(--mds-text-med); margin-top: 3px; line-height: 1.4; }
.src-card__tag {
    display: inline-block; margin-top: var(--sp-2);
    font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em;
    background: var(--mds-region-asia); color: #fff;
    padding: 1px 7px; border-radius: var(--radius-pill);
}

/* --- Two-pane builder layout: controls (left) + live preview (right) --- */
.builder {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--sp-5);
    align-items: start;
}
.builder__controls { display: flex; flex-direction: column; gap: var(--sp-4); }
.builder__preview { min-width: 0; }
.builder__preview .table-wrap { overflow-x: auto; }
@media (max-width: 1024px) {
    .builder { grid-template-columns: 1fr; }
}

/* --- Builder control block (a titled card section in the left pane) --- */
.bld-block { border: 1px solid var(--mds-med-light); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.bld-block__head {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--mds-med-light);
}
.bld-block__step {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    background: var(--mds-red); color: #fff;
}
.bld-block__title { font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--mds-text-dark); }
.bld-block__count { margin-left: auto; }
.bld-block__body { padding: var(--sp-4); }

/* --- Field picker (checklist of available columns) --- */
.field-picker { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.field-pick {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 6px var(--sp-2); border-radius: var(--radius-sm);
    cursor: pointer; font-size: var(--fs-sm);
    transition: background var(--transition);
}
.field-pick:hover { background: var(--mds-light); }
.field-pick input { width: 16px; height: 16px; accent-color: var(--mds-red); flex: none; }
.field-pick__label { flex: 1; color: var(--mds-text-dark); }
.field-pick__type { font-size: 10px; color: var(--mds-text-light); text-transform: uppercase; letter-spacing: .03em; }

/* --- Selected-column chips (ordered, removable) --- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--status-invited-bg); color: var(--mds-blue);
    border: 1px solid #cfe0eb;
    border-radius: var(--radius-pill);
    padding: 3px 6px 3px 12px;
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.chip__x {
    border: none; background: rgba(19,98,148,.14); color: var(--mds-blue);
    width: 18px; height: 18px; border-radius: 50%;
    cursor: pointer; font-size: 14px; line-height: 1;
    display: grid; place-items: center;
}
.chip__x:hover { background: var(--mds-blue); color: #fff; }
.chip--empty { background: var(--mds-light); color: var(--mds-text-med); border-color: var(--mds-med-light); font-weight: var(--fw-regular); padding: 3px 12px; }

/* --- Filter rows --- */
.filter-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.filter-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-2); align-items: center;
    background: var(--mds-light); border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
}
.filter-row__expr { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.filter-row__expr .select, .filter-row__expr .input { padding: 4px 8px; font-size: var(--fs-sm); width: auto; }
.filter-row__expr .select { padding-right: 26px; }
.filter-row__field { font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.filter-row__rm {
    border: none; background: none; color: var(--mds-text-light);
    cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px;
}
.filter-row__rm:hover { color: var(--mds-red); }

/* active filters shown as chips on the results view */
.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--status-withdraw-bg); color: var(--status-withdraw);
    border-radius: var(--radius-pill);
    padding: 3px 12px; font-size: var(--fs-xs); font-weight: var(--fw-bold);
}

/* --- Preview header (row count + export bar) --- */
.preview-head {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: #fff; border-bottom: 1px solid var(--mds-med-light);
}
.preview-head__count { font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.preview-head__count strong { color: var(--mds-red); font-size: var(--fs-md); }
.preview-head__spacer { flex: 1; }

/* boolean cell glyphs in result tables */
.bool-yes { color: var(--status-accepted); font-weight: var(--fw-bold); }
.bool-no { color: var(--mds-text-light); }

/* sortable header affordance */
.data-table thead th.is-sortable { cursor: pointer; }
.data-table thead th .sort-caret { opacity: .8; margin-left: 4px; font-size: 10px; }

/* zero-result state inside a preview table */
.preview-empty { padding: var(--sp-7) var(--sp-5); }

/* ============================================================================
   21. MEMBER DIRECTORY + CROSS-YEAR HISTORY  (staff-facing — Prototype 5)
   ----------------------------------------------------------------------------
   The synced member pool (bulk iMIS sync, FR-FR-1 / §6.1) that the rest of the
   system draws people from, plus the per-person cross-year speaker history view
   (FR-HX). Staff-facing → dark admin app-shell. New components: a sync note,
   the directory filter bar, membership/role-flag tag groups, the year-chip /
   sparkline history timeline, the profile header, and an identity snapshot.
   All colors come from existing tokens (no new brand hex).
   ========================================================================== */

/* --- "Synced from iMIS" note (the assign-anyone-not-just-SSO point) --- */
.sync-note {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--status-invited-bg);
    border-left: 4px solid var(--mds-blue);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm); color: var(--mds-text-dark);
}
.sync-note__icon { flex: none; font-size: var(--fs-md); line-height: 1.2; }
.sync-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 9px; border-radius: var(--radius-pill);
    background: var(--status-invited-bg); color: var(--mds-blue);
    white-space: nowrap;
}
.sync-badge::before { content: '⟳'; font-size: 12px; }

/* --- Directory filter bar (extends .table-toolbar usage) --- */
.dir-filters { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.dir-filters .select, .dir-filters .search { flex: none; }

/* --- Membership / role-flag tag groups --- */
.tag-group { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    padding: 2px 8px; border-radius: var(--radius-sm);
    background: var(--mds-light); color: var(--mds-text-dark);
    border: 1px solid var(--mds-med-light);
    white-space: nowrap;
}
.tag--committee { background: #eef3ee; border-color: #d6e2d6; color: var(--mds-region-euro); }
.tag--sig       { background: var(--status-invited-bg); border-color: #cfe0ec; color: var(--mds-blue); }
.tag--study     { background: #f1eef5; border-color: #e0d6ea; color: var(--mds-region-africa); }
.tag--working   { background: #eef4f4; border-color: #d3e6e6; color: var(--mds-region-panam); }
/* role-flag chips (Chair / Group Leader / Staff Liaison) */
.flag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .03em;
    padding: 2px 8px; border-radius: var(--radius-pill);
    background: var(--mds-medium); color: #fff; white-space: nowrap;
}
.flag--chair    { background: var(--mds-blue); }
.flag--leader   { background: var(--mds-region-euro); }
.flag--liaison  { background: var(--mds-medium); }

/* --- Over-booking risk badge (the guard MDS uses, pain point #4) --- */
.risk-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .03em;
    padding: 2px 9px; border-radius: var(--radius-pill);
    background: var(--status-withdraw-bg); color: var(--status-withdraw);
    white-space: nowrap;
}
.risk-badge::before { content: '⚠'; }

/* --- Year-chips / sparkline history timeline (the FR-HX star) --- */
.year-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.year-chip {
    display: inline-grid; place-items: center;
    min-width: 46px; padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    background: var(--mds-light); color: var(--mds-text-light);
    border: 1px solid var(--mds-med-light);
}
.year-chip.is-spoke { background: var(--status-accepted-bg); color: var(--status-accepted); border-color: #bcd6c4; }

/* compact sparkline (for table cells): 5 cells, filled = spoke that year */
.sparkline { display: inline-flex; gap: 2px; vertical-align: middle; }
.sparkline__bar {
    width: 8px; height: 16px; border-radius: 2px;
    background: var(--mds-med-light);
}
.sparkline__bar.is-on { background: var(--status-accepted); }
.sparkline__bar.is-risk { background: var(--status-withdraw); }

/* --- Frequency meter (spoke N of 5) --- */
.freq { display: flex; align-items: center; gap: var(--sp-3); }
.freq__count { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--mds-text-dark); line-height: 1; }
.freq__count small { font-size: var(--fs-md); color: var(--mds-text-light); font-weight: var(--fw-medium); }

/* --- Member profile header --- */
.profile-head {
    display: flex; align-items: flex-start; gap: var(--sp-5);
    background: #fff; border: 1px solid var(--mds-med-light);
    border-top: 6px solid var(--mds-red);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    padding: var(--sp-5); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.profile-head__avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--mds-blue); color: #fff;
    display: grid; place-items: center;
    font-size: var(--fs-2xl); font-weight: var(--fw-bold); flex: none;
}
.profile-head__main { flex: 1; min-width: 240px; }
.profile-head__name { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--mds-text-dark); line-height: 1.2; }
.profile-head__meta { color: var(--mds-text-med); font-size: var(--fs-sm); margin-top: 2px; }
.profile-head__flags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); align-items: center; }
.profile-head__actions { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; flex: none; }

/* --- Identity / contact snapshot rows (read-only from AMS) --- */
.snapshot { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-2) var(--sp-4); }
.snapshot__key { font-size: var(--fs-sm); color: var(--mds-text-med); font-weight: var(--fw-medium); }
.snapshot__val { font-size: var(--fs-sm); color: var(--mds-text-dark); }
.snapshot__val a { color: var(--mds-blue); }

/* --- Profile two-column layout --- */
.profile-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); align-items: start; }
.profile-grid > * { min-width: 0; }

/* --- Current-involvement commitment rows --- */
.invovle-row {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--mds-med-light);
}
.invovle-row:last-child { border-bottom: none; }
.invovle-row__main { flex: 1; min-width: 180px; }
.invovle-row__title { font-weight: var(--fw-bold); color: var(--mds-text-dark); font-size: var(--fs-sm); }
.invovle-row__meta { font-size: var(--fs-xs); color: var(--mds-text-med); }

/* --- Past-events history list (per-person, FR-HX-1) --- */
.hist-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.hist-item {
    display: flex; align-items: baseline; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--mds-light); border-radius: var(--radius-sm);
}
.hist-item__year {
    font-weight: var(--fw-bold); color: var(--status-accepted);
    font-variant-numeric: tabular-nums; flex: none; min-width: 42px;
}
.hist-item__topic { font-size: var(--fs-sm); color: var(--mds-text-dark); }

/* --- Responsive --- */
@media (max-width: 860px) {
    .profile-grid { grid-template-columns: 1fr; }
    .profile-head__actions { align-items: stretch; width: 100%; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
    .snapshot { grid-template-columns: 1fr; gap: 2px var(--sp-4); }
    .snapshot__key { margin-top: var(--sp-2); }
}

/* ============================================================================
   22. CREATE A NEW EVENT (Prototype 6)
   ----------------------------------------------------------------------------
   Single full-page form: event basics + clone-OR-blank choice + a clone
   "what carries over" checklist + light self-service customize (managed
   lookups / custom fields) + a create footer. New components only; everything
   uses existing tokens — no brand hex inlined.
   ========================================================================== */

/* --- Equal-choice option cards (clone vs blank radio-cards, FR-EV-2) --- */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
.choice-card {
    position: relative;
    display: flex; gap: var(--sp-3); align-items: flex-start;
    text-align: left;
    border: 2px solid var(--mds-med-light);
    border-radius: var(--radius-md);
    background: #fff;
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    font-family: inherit;
}
.choice-card:hover { border-color: var(--mds-blue); box-shadow: var(--shadow-sm); }
.choice-card:focus-within { border-color: var(--mds-red); box-shadow: 0 0 0 3px rgba(175,38,38,.12); }
.choice-card.is-active { border-color: var(--mds-red); background: var(--status-declined-bg); }
.choice-card__radio {
    width: 18px; height: 18px; flex: none; margin-top: 2px;
    accent-color: var(--mds-red);
}
.choice-card__icon {
    width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none;
    display: grid; place-items: center; font-size: var(--fs-xl);
    background: var(--mds-light); color: var(--mds-text-med);
}
.choice-card.is-active .choice-card__icon { background: #fff; color: var(--mds-red); }
.choice-card__name { font-weight: var(--fw-bold); color: var(--mds-text-dark); font-size: var(--fs-md); }
.choice-card__desc { font-size: var(--fs-sm); color: var(--mds-text-med); margin-top: 3px; line-height: 1.45; }

/* --- "What carries over" checklist (per-item toggle + count, FR-EV-2) --- */
.carry-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.carry-item {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    border: 1px solid var(--mds-med-light); border-radius: var(--radius-md);
    background: #fff; padding: var(--sp-3) var(--sp-4);
    transition: border-color var(--transition), background var(--transition);
}
.carry-item.is-on { border-color: var(--status-accepted); background: var(--status-accepted-bg); }
.carry-item__check { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--status-accepted); }
.carry-item__body { flex: 1; min-width: 0; }
.carry-item__name { font-weight: var(--fw-bold); color: var(--mds-text-dark); display: flex; align-items: center; gap: var(--sp-2); }
.carry-item__count {
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    background: var(--status-accepted); color: #fff;
    padding: 1px 8px; border-radius: var(--radius-pill);
}
.carry-item:not(.is-on) .carry-item__count { background: var(--mds-light-med); color: var(--mds-text-med); }
.carry-item__hint { font-size: var(--fs-xs); color: var(--mds-text-med); margin-top: 2px; line-height: 1.4; }

/* --- Source picker row (re-skins the reports .src-card into a list row) --- */
.source-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.source-row {
    display: flex; gap: var(--sp-3); align-items: center;
    text-align: left; width: 100%;
    border: 2px solid var(--mds-med-light); border-radius: var(--radius-md);
    background: #fff; padding: var(--sp-3) var(--sp-4);
    cursor: pointer; font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.source-row:hover { border-color: var(--mds-blue); box-shadow: var(--shadow-sm); }
.source-row.is-active { border-color: var(--mds-red); background: var(--status-declined-bg); }
.source-row__radio { width: 18px; height: 18px; flex: none; accent-color: var(--mds-red); }
.source-row__body { flex: 1; min-width: 0; }
.source-row__name { font-weight: var(--fw-bold); color: var(--mds-text-dark); }
.source-row__meta { font-size: var(--fs-xs); color: var(--mds-text-med); margin-top: 2px; }
.source-row__counts {
    font-size: var(--fs-xs); color: var(--mds-text-med); text-align: right; flex: none;
    font-variant-numeric: tabular-nums;
}

/* --- Customize: managed-lookup editor + custom-field rows (FR-CF) --- */
.cf-fieldlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.cf-field-row {
    display: flex; align-items: center; gap: var(--sp-3);
    border: 1px solid var(--mds-med-light); border-radius: var(--radius-sm);
    background: #fff; padding: var(--sp-2) var(--sp-3);
}
.cf-field-row.is-cloned { background: var(--mds-light); }
.cf-field-row__name { font-weight: var(--fw-bold); color: var(--mds-text-dark); flex: 1; min-width: 0; }
.cf-field-row__type {
    font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .03em;
    background: var(--status-invited-bg); color: var(--mds-blue);
    padding: 2px 8px; border-radius: var(--radius-pill); flex: none;
}
.cf-field-row__origin { font-size: 10px; color: var(--mds-text-light); text-transform: uppercase; letter-spacing: .03em; flex: none; }
.cf-field-row__rm {
    border: none; background: rgba(175,38,38,.10); color: var(--mds-red);
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.cf-field-row__rm:hover { background: var(--mds-red); color: #fff; }

/* The chip variant used for an ADDED (not cloned) value, to distinguish origin */
.chip--added { background: var(--status-accepted-bg); color: var(--status-accepted); border-color: #bcd6c5; }
.chip--added .chip__x { background: rgba(55,120,82,.14); color: var(--status-accepted); }
.chip--added .chip__x:hover { background: var(--status-accepted); color: #fff; }

/* --- Create footer summary --- */
.create-summary {
    background: var(--mds-light); border: 1px solid var(--mds-med-light);
    border-radius: var(--radius-md); padding: var(--sp-4);
    font-size: var(--fs-base); color: var(--mds-text-dark); line-height: 1.55;
}
.create-bar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.create-bar__spacer { flex: 1; }

/* Field flagged by validation */
.input.is-invalid, .select.is-invalid { border-color: var(--mds-red); box-shadow: 0 0 0 3px rgba(175,38,38,.12); }

/* --- Responsive --- */
@media (max-width: 700px) {
    .choice-grid { grid-template-columns: 1fr; }
    .source-row { flex-wrap: wrap; }
    .source-row__counts { text-align: left; width: 100%; padding-left: 30px; }
    .create-bar { flex-direction: column; align-items: stretch; }
    .create-bar__spacer { display: none; }
}