/* ── VARIABLES ─────────────────────────────────────────────────────────── */
:root {
    --purple:        #723063;
    --purple-dark:   #4e1f44;
    --purple-deeper: #2e1029;
    --purple-light:  #9b4a87;
    --purple-pale:   #f5eef3;
    --pink-light:    #e8b4d8;
    --white:         #ffffff;
    --gray-50:       #faf9fa;
    --gray-100:      #f2eff2;
    --gray-200:      #e4dfe4;
    --gray-300:      #cfc8d0;
    --gray-400:      #b0a8b8;
    --gray-500:      #8a8096;
    --gray-600:      #6b6578;
    --gray-700:      #4e4858;
    --gray-800:      #342e3c;
    --gray-900:      #1f1a26;
    --text:          #1a1020;
    --radius:        12px;
    --transition:    0.22s ease;
    --shadow-sm:     0 2px 8px rgba(114,48,99,0.08);
    --shadow-md:     0 6px 24px rgba(114,48,99,0.14);
    --shadow-lg:     0 16px 48px rgba(114,48,99,0.20);
    --nav-height:    62px;
}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* prevents horizontal scroll at viewport root */
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: clip;   /* clip without creating a scroll container so that
                           position:sticky nav always spans the full viewport;
                           individual overflow-x:auto wrappers still work */
}

img { max-width: 100%; display: block; }
a { color: var(--purple); }


/* ── NAVIGATION ─────────────────────────────────────────────────────────── */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--nav-height);
    background: rgba(46, 16, 41, 0.97);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-logo img {
    height: 40px;
    width: auto;
    border-radius: 6px;
}
.nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.nav-logo-text .nav-logo-name {
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.nav-logo-text .nav-logo-tagline {
    color: var(--pink-light);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

/* Desktop links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
}
.nav-links a {
    color: rgba(255,255,255,0.80);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.nav-links a:hover,
.nav-links li.active a {
    background: rgba(255,255,255,0.12);
    color: var(--white);
}
.nav-links li.nav-cta a {
    background: var(--purple-light);
    color: var(--white);
    font-weight: 600;
    margin-left: 0.4rem;
}
.nav-links li.nav-cta a:hover {
    background: var(--purple);
}

/* Hamburger button (mobile) */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background var(--transition);
}
.nav-hamburger:hover { background: rgba(255,255,255,0.1); }
.nav-hamburger span {
    display: block;
    /* Explicit width (button is 36px minus 4px padding each side). Don't rely on
       flex stretch: WebKit on iPadOS 16 doesn't stretch a <button>'s flex items,
       so the bars collapsed to 0 wide and the button was invisible. */
    width: 28px;
    flex: 0 0 auto;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav right group (links only — auth badge is now in nav-userbar) */
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Account menu — inline pill trigger + dropdown */
.nav-account {
    position: relative;
    display: inline-flex;
}

.nav-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 20px;
    padding: 0.18rem 0.65rem 0.18rem 0.18rem;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    color: var(--white);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition);
    line-height: 1;
}
.nav-account-toggle:hover,
#nav-account.open .nav-account-toggle {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.28);
}
/* Small avatar chip inside the pill — mirrors the dropdown header avatar */
.nav-account-toggle-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--purple-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-account-toggle-avatar svg { width: 0.82rem; height: 0.82rem; color: var(--white); }
.nav-account-name { color: var(--white); }
.nav-account-caret {
    width: 0.75rem;
    height: 0.75rem;
    color: rgba(255,255,255,0.6);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
#nav-account.open .nav-account-caret { transform: rotate(180deg); }

/* Dropdown panel */
.nav-account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 230px;
    background: rgba(35, 10, 31, 0.97);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
    z-index: 300;
}
#nav-account.open .nav-account-menu { display: block; }

/* Identity header */
.nav-account-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px 11px;
}
.nav-account-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--purple-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-account-avatar svg { width: 1rem; height: 1rem; color: var(--white); }
.nav-account-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-account-head-name { color: var(--white); font-size: 0.875rem; font-weight: 700; line-height: 1.2; }
.nav-account-level { color: var(--pink-light); font-size: 0.72rem; font-weight: 400; }

/* Divider */
.nav-account-divider { height: 1px; background: rgba(255,255,255,0.12); }

/* Menu items */
.nav-account-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    text-decoration: none;
    transition: background var(--transition);
}
.nav-account-item:hover { background: rgba(255,255,255,0.08); }
.nav-account-item svg { width: 1.05rem; height: 1.05rem; color: var(--pink-light); flex-shrink: 0; }
.nav-account-item-label { display: block; color: rgba(255,255,255,0.92); font-size: 0.8rem; font-weight: 500; }
.nav-account-item-sub { display: block; color: rgba(255,255,255,0.48); font-size: 0.7rem; margin-top: 1px; }
.nav-account-item:hover .nav-account-item-label { color: var(--white); }
.nav-account-signout svg { color: rgba(255,255,255,0.55); }
.nav-account-signout .nav-account-item-label { color: rgba(255,255,255,0.75); }
.nav-account-signout:hover .nav-account-item-label { color: var(--white); }
.nav-account-signout:hover svg { color: rgba(255,255,255,0.85); }

/* Sign-in link in nav (shown when signed out) — subtle, inline with the menu. */
.nav-signin-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    transition: color var(--transition), background var(--transition);
    font-family: 'Inter', sans-serif;
    line-height: 1;
}
.nav-signin-link:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.nav-signin-link svg { width: 0.85rem; height: 0.85rem; }

/* Mobile dropdown menu */
.nav-mobile {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(35, 10, 31, 0.98);
    backdrop-filter: blur(12px);
    padding: 1rem 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 199;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
}
.nav-mobile.open { display: block; }
.nav-mobile ul { list-style: none; }
.nav-mobile ul li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-mobile ul li:last-child { border-bottom: none; }
.nav-mobile ul a {
    display: block;
    padding: 0.85rem 0.25rem;
    color: rgba(255,255,255,0.80);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color var(--transition);
}
.nav-mobile ul a:hover,
.nav-mobile ul li.active a { color: var(--white); }
.nav-mobile ul li.nav-cta a {
    color: var(--pink-light);
    font-weight: 700;
}
.nav-mobile ul li.nav-cta .nav-mobile-subnav a {
    color: rgba(255,255,255,0.70);
    font-weight: 400;
}
.nav-mobile-divider {
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 0.25rem 0;
    border: none;
}
.nav-mobile-user {
    padding: 0.6rem 0.25rem 0.3rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
}
.nav-mobile ul li.nav-signout a {
    color: rgba(255,255,255,0.60);
    font-size: 0.875rem;
}
.nav-mobile ul li.nav-signout a:hover { color: var(--white); }
.nav-mobile ul li.nav-signin a { color: var(--white); font-size: 0.9375rem; font-weight: 600; }

/* Mobile subnav — expandable section rows and nested sub-links */
/* The whole row is a <button> — tapping anywhere on it toggles the subnav */
.nav-mobile-item-row {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.85rem 0.25rem;
    color: rgba(255,255,255,0.80);
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    transition: color var(--transition);
}
.nav-mobile-item-row:hover,
.nav-mobile ul li.active .nav-mobile-item-row { color: var(--white); }
.nav-mobile-item-label { flex: 1; }
.nav-subnav-arrow {
    display: inline-block;
    font-size: 0.55rem;
    opacity: 0.55;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}
.nav-mobile-item-row.open .nav-subnav-arrow { transform: rotate(180deg); }
.nav-mobile-subnav {
    display: none;
    list-style: none;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-left: 3px solid rgba(255,255,255,0.20);
    margin-left: 1.25rem;
}
.nav-mobile-subnav.open { display: block; }
.nav-mobile-subnav li { border-bottom: 1px solid rgba(255,255,255,0.04); }
.nav-mobile-subnav li:last-child { border-bottom: none; }
.nav-mobile-subnav a {
    display: block;
    padding: 0.7rem 0.25rem 0.7rem 1rem;
    color: rgba(255,255,255,0.70);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    transition: color var(--transition);
}
.nav-mobile-subnav a::before {
    content: '›';
    margin-right: 0.45rem;
    opacity: 0.55;
}
.nav-mobile-subnav a:hover,
.nav-mobile-subnav li.active a { color: var(--white); }
/* Group li manages its own borders via the toggle button; suppress the default li border */
.nav-mobile-subnav li.nav-mobile-subnav-group { border-bottom: none; }
/* Sub-list links get their own › via nav-mobile-subnav-sub a::before; suppress the inherited one */
.nav-mobile-subnav-sub a::before { content: none; }

/* Mobile subnav nested group (sub-dropdown within a section's subnav) */
/* Group toggles: no › prefix, same size as flat links, ▼ on the right signals expandability */
.nav-subnav-sub-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    padding: 0.7rem 0.25rem 0.7rem 1rem;
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    transition: color var(--transition), background var(--transition);
}
.nav-subnav-sub-toggle:hover,
.nav-subnav-sub-toggle.open { color: var(--white); background: rgba(255,255,255,0.08); }
.nav-subnav-sub-toggle .nav-mobile-item-label { flex: 1; }
.nav-subnav-sub-toggle .nav-subnav-arrow { font-size: 0.55rem; opacity: 0.55; margin-left: 0.5rem; }
.nav-subnav-sub-toggle.open .nav-subnav-arrow { transform: rotate(180deg); }
/* Flat links keep their › prefix; group toggles do not get one */
.nav-mobile-subnav-sub {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,0.2);
}
.nav-mobile-subnav-sub.open { display: block; }
.nav-mobile-subnav-sub li { border-bottom: 1px solid rgba(255,255,255,0.03); }
.nav-mobile-subnav-sub li:last-child { border-bottom: none; }
.nav-mobile-subnav-sub a {
    display: block;
    padding: 0.65rem 0.25rem 0.65rem 1.75rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    transition: color var(--transition);
}
.nav-mobile-subnav-sub a::before {
    content: '›';
    margin-right: 0.45rem;
    opacity: 0.55;
}
.nav-mobile-subnav-sub a:hover { color: var(--white); }

/* ── EMERGENCY BANNER ──────────────────────────────────────────────────── */
.emergency-banner {
    background: #7a1c1c;
    color: #fff;
    text-align: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.emergency-banner strong { color: #ffcaca; }


/* ── BUTTONS ─────────────────────────────────────────────────────────────  */
.btn {
    display: inline-block;
    padding: 0.8rem 1.9rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.975rem;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    line-height: 1;
}
.btn:hover { transform: translateY(-2px); }

.btn-white {
    background: var(--white);
    color: var(--purple-dark);
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.btn-white:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.28); color: var(--purple-dark); }

.btn-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.55);
    color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); color: var(--white); }

.btn-purple {
    background: var(--purple);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}
.btn-purple:hover { background: var(--purple-dark); color: var(--white); box-shadow: var(--shadow-md); }

.btn-outline-purple {
    background: transparent;
    border: 2px solid var(--purple);
    color: var(--purple);
}
.btn-outline-purple:hover { background: var(--purple); color: var(--white); }

/* ── SECTION LAYOUT ─────────────────────────────────────────────────────── */
.section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
/* Report tables: allow horizontal scrolling on narrow viewports */
.section-inner:has(.report-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
section { padding: 3rem 0; }
.page-subnav + section { padding-top: 2rem; }

.section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--purple);
    margin-bottom: 0.5rem;
}
.section-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 1rem;
}
.section-title span { color: var(--purple); }
.section-title.on-dark { color: var(--white); }
.section-title.on-dark span { color: var(--pink-light); }
.section-eyebrow.on-dark { color: var(--pink-light); }

/* ── PAGE SUBNAV ─────────────────────────────────────────────────────────── */
.page-subnav {
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: var(--nav-height);
    z-index: 90;
}
.page-subnav-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.page-subnav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.page-subnav-link:hover { color: var(--purple); }
.page-subnav-link.active {
    color: var(--purple);
    border-bottom-color: var(--purple);
    font-weight: 600;
}
@media (max-width: 600px) {
    .page-subnav-inner { padding: 0 0.75rem; }
    .page-subnav-link  { padding: 0.6rem 0.75rem; font-size: 0.8rem; }
}

/* ── PAGE SUBNAV GROUP DROPDOWN ─────────────────────────────────────────── */
.page-subnav-group {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}
.page-subnav-group-toggle {
    background: none;
    /* Keep the 2px bottom border and the inherited line-height that the plain
       <a> links have, or the button's label sits a pixel lower than theirs. */
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.page-subnav-caret {
    font-size: 0.6em;
    display: inline-block;
    transition: transform 0.15s;
    line-height: 1;
}
.page-subnav-group-toggle.open .page-subnav-caret { transform: rotate(180deg); }
.page-subnav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 100;
}
.page-subnav-dropdown.open { display: block; }
.page-subnav-dropdown-link {
    display: block;
    padding: 0.65rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid var(--gray-100);
    transition: color 0.15s, background-color 0.15s;
}
.page-subnav-dropdown-link:last-child { border-bottom: none; }
.page-subnav-dropdown-link:hover { color: var(--purple); background: var(--gray-50); }
.page-subnav-dropdown-link.active { color: var(--purple); font-weight: 600; }

/* ── PAGE HEADER (inner pages) ──────────────────────────────────────────── */
.page-header {
    background: linear-gradient(135deg, var(--purple-deeper) 0%, var(--purple-dark) 55%, var(--purple) 100%);
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.13);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(155,74,135,0.2) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 18px,
        rgba(255,255,255,0.05) 18px,
        rgba(255,255,255,0.05) 19px
    );
    pointer-events: none;
    z-index: 1;
}
.page-header .section-inner {
    position: relative;
    z-index: 2;
}
.page-header .breadcrumb {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.40);
    margin-bottom: 0.65rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    position: relative;
}
.page-header .breadcrumb a { color: rgba(255,255,255,0.40); text-decoration: none; }
.page-header .breadcrumb a:hover { color: rgba(255,255,255,0.7); }
.page-header h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    line-height: 1.15;
    position: relative;
}
.page-header h1 span { color: var(--pink-light); }
.page-header .page-sub {
    color: rgba(255,255,255,0.6);
    margin-top: 0.5rem;
    font-size: 1rem;
    position: relative;
}
.access-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.30);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    margin-top: 0.6rem;
}
.restricted-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
    border-radius: 20px;
    padding: 0.2rem 0.85rem;
    font-size: 0.73rem;
    font-weight: 600;
    position: relative;
}

/* ── STATS BAR ───────────────────────────────────────────────────────────── */
.stats-bar {
    background: var(--purple-dark);
    display: flex;
    justify-content: center;
}
.stat-item {
    flex: 1;
    max-width: 300px;
    text-align: center;
    padding: 1.5rem 1rem;
    border-right: 1px solid rgba(255,255,255,0.1);
    color: var(--white);
}
.stat-item:last-child { border-right: none; }
.stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--pink-light);
    line-height: 1;
}
.stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    margin-top: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.stat-sub {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.38);
    margin-top: 0.2rem;
}

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}
.card-head {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
}
.card-head h3 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-600);
}
.card-body { padding: 1.25rem; }

/* ── LINK CARDS (quick nav) ─────────────────────────────────────────────── */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.link-card {
    background: var(--purple-pale);
    border-radius: var(--radius);
    padding: 1.5rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--purple-dark);
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid transparent;
    transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.link-card:hover {
    border-color: var(--purple);
    background: var(--white);
    color: var(--purple);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(114,48,99,0.14);
}
.link-card .link-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.45rem;
}

/* ── VIDEO EMBED ─────────────────────────────────────────────────────────── */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── TESTIMONIAL ─────────────────────────────────────────────────────────── */
.testimonial-section {
    background: linear-gradient(135deg, var(--purple-deeper), var(--purple-dark));
}
.testimonial-card {
    max-width: 740px;
    margin: 2rem auto 0;
    text-align: center;
}
.testimonial-card blockquote {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-style: italic;
    line-height: 1.8;
    color: rgba(255,255,255,0.86);
    position: relative;
    padding: 0 1.5rem;
}
.testimonial-card blockquote::before {
    content: '\201C';
    font-size: 5rem;
    color: rgba(255,255,255,0.1);
    font-family: Georgia, serif;
    position: absolute;
    top: -1.8rem;
    left: 0;
    line-height: 1;
}
.testimonial-card cite {
    display: block;
    margin-top: 1.2rem;
    font-size: 0.875rem;
    font-style: normal;
    color: var(--pink-light);
    font-weight: 600;
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--purple-deeper);
    color: rgba(255,255,255,0.45);
    padding: 3rem 1.5rem 2rem;
    font-size: 0.85rem;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.5rem;
}
.footer-brand .footer-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.25rem;
}
.footer-brand .footer-tagline {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    font-style: italic;
}
.footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.footer-links a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--white); }
.footer-copy {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
}

/* ── DATA TABLES ─────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th {
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}
.data-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--gray-50); }

/* ── INFO PAGE LAYOUT ────────────────────────────────────────────────────── */
.info-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3.5rem;
    align-items: start;
}
.info-body p {
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}
.info-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.info-card {
    background: var(--purple-pale);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    border-left: 3px solid var(--purple);
}
.info-card-icon {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}
.info-card-icon svg { width: 1.6rem; height: 1.6rem; color: var(--purple); }
.info-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin-bottom: 0.3rem;
}
.info-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Flowing prose block (beliefs, mission) */
.prose p {
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
    max-width: 820px;
}

/* Two-column testimonial grid */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}
.testimonial-grid .testimonial-card {
    margin: 0;
    text-align: left;
}
.testimonial-grid .testimonial-card blockquote {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

/* ── INNER PAGE PHOTO STRIP ──────────────────────────────────────────────── */
.photo-strip {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 2rem 0 0;
    /* padding: 0 1.5rem; */
}
/* When strip is at the top inside section-inner, reduce top gap, add bottom gap */
.section-inner > .photo-strip {
    margin-top: 0;
    margin-bottom: 2.5rem;
}
.photo-strip-img {
    /* 200px square, but shrinks (staying square) when four don't fit — e.g. an
       810px-wide iPad in portrait, where a fixed 824px strip overflowed and
       was cropped at both edges. */
    flex: 0 1 200px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* Tablet  -  a full-width strip (not already inside a padded .section-inner)
   needs its own gutter once the photos start shrinking */
@media (max-width: 900px) {
    .photo-strip { padding: 0 1.5rem; }
    .section-inner > .photo-strip { padding: 0; }
}

/* Mobile  -  shrink photos so all four fit across the screen */
@media (max-width: 600px) {
    .photo-strip {
        width: 100%;
        padding: 0 0.75rem;
        gap: 4px;
        margin-top: 1.5rem;
        box-sizing: border-box;
    }
    .photo-strip-img {
        flex: 1 1 0;
        width: 0;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* ── Private "My List" marks (includes/my_list.php) ─────────────────────────
   A star on each row + a "My List (N)" button that opens a drawer of the
   user's own picks. Shared by recommendations/index.php and
   teamonly/reports/comments.php; see database/2026_user_marks.sql. */

.ml-star {
    /* 32px keeps the tap target comfortable on a phone while the icon itself
       stays small enough to sit inline beside a name or a sequence number. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin: -6px 2px -6px -4px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gray-400, #9ca3af);
    cursor: pointer;
    border-radius: 50%;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.ml-star svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.ml-star:hover { color: var(--purple, #723063); background: var(--purple-pale, #f5eef3); }
.ml-star:focus-visible { outline: 2px solid var(--purple, #723063); outline-offset: -2px; }
.ml-star--on { color: var(--purple, #723063); }
.ml-star--on svg { fill: currentColor; }
.ml-star--busy { opacity: 0.45; pointer-events: none; }
/* Brief pop when a mark lands, so a tap on a phone is unmistakably registered. */
.ml-star--pop { transform: scale(1.28); }

/* "My List (N)" — sits among each page's existing controls. */
.ml-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.ml-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ml-btn--has svg { fill: currentColor; }
.ml-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 99px;
    background: var(--purple, #723063);
    color: var(--white, #fff);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.ml-btn--has .ml-count { background: var(--purple-deeper, #2e1029); }

/* Drawer — centered card on desktop, bottom sheet on a phone. */
.ml-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 10, 40, 0.4);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-overlay[hidden] { display: none; }
.ml-drawer {
    display: flex;
    flex-direction: column;
    width: min(440px, 92vw);
    max-height: min(76vh, 620px);
    background: var(--white, #fff);
    border-radius: 14px;
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.25));
    overflow: hidden;
    /* No fill-mode: the resting position must come from the base rules, not from
       the animation. With "both" the drawer holds the from-state (translateY)
       whenever the animation does not actually run -- which parked the mobile
       sheet entirely below the viewport. Animation is decoration only. */
    animation: ml-drawer-in 0.22s cubic-bezier(.21, 1.02, .73, 1);
}
@keyframes ml-drawer-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ml-sheet-in  { from { opacity: 0; transform: translateY(100%); }          to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ml-drawer { animation: none; }
    .ml-star   { transition: none; }
}
.ml-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.ml-drawer-head h3 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-deeper, #2e1029);
}
.ml-drawer-head p { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--gray-500, #6b7280); line-height: 1.4; }
.ml-drawer-head .ml-head-text { flex: 1; min-width: 0; }
.ml-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--gray-500, #6b7280);
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}
.ml-close:hover { background: var(--gray-100, #f3f4f6); color: var(--purple, #723063); }

.ml-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 0; margin: 0; }
.ml-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--gray-800, #1f2937);
}
.ml-item + .ml-item { border-top: 1px solid var(--gray-100, #f3f4f6); }
.ml-item-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.ml-item-kicker { font-weight: 700; color: var(--purple, #723063); margin-right: 0.3rem; }
/* Status badge — tells the reader an item is already on the group's agenda (or
   has already been covered), so they do not raise it a second time. */
.ml-badge {
    display: inline-block;
    vertical-align: 1px;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ml-badge--discuss { background: var(--purple-pale, #f5eef3); color: var(--purple, #723063); border: 1px solid var(--purple-light, #9b4a87); }
.ml-badge--done    { background: var(--gray-100, #f3f4f6); color: var(--gray-500, #6b7280); border: 1px solid var(--gray-300, #d1d5db); }
/* An already-discussed item is dead weight on the list — mute the whole row. */
.ml-item--done .ml-item-text   { color: var(--gray-500, #6b7280); }
.ml-item--done .ml-item-kicker { color: var(--gray-500, #6b7280); }
/* Write-in names read as the user's own additions, not page rows. */
.ml-item--writein .ml-item-text { font-style: italic; }
.ml-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: -2px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--gray-400, #9ca3af);
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
}
.ml-remove:hover { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.ml-empty { padding: 1.5rem 1.25rem; text-align: center; font-size: 0.85rem; color: var(--gray-500, #6b7280); line-height: 1.5; }

.ml-writein { display: flex; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--gray-200, #e5e7eb); background: var(--gray-50, #f9fafb); }
/* Needed for allowWriteIn:false (comments.php): a class-level display rule
   outranks the UA sheet's [hidden] { display: none }, so the row would show
   anyway. Same reason .ml-overlay[hidden] exists above. */
.ml-writein[hidden] { display: none; }
.ml-writein input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 0.88rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 8px;
    outline: none;
}
.ml-writein input:focus { border-color: var(--purple, #723063); box-shadow: 0 0 0 3px rgba(114, 48, 99, 0.12); }
.ml-writein button { flex-shrink: 0; }

@media (max-width: 600px) {
    /* Bottom sheet: thumb-reachable, and it keeps the page visible behind it. */
    .ml-overlay { align-items: flex-end; }
    .ml-drawer {
        width: 100%;
        max-width: none;
        max-height: 78vh;
        border-radius: 16px 16px 0 0;
        /* Clear the home indicator on iOS without a gap on Android. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    /* Its own keyframe name: redefining ml-drawer-in inside the media query is
       resolved inconsistently across engines and left the sheet parked at
       translateY(100%), i.e. entirely below the viewport. */
    .ml-drawer { animation-name: ml-sheet-in; }
    .ml-item { padding-top: 0.7rem; padding-bottom: 0.7rem; }
}

@media print {
    .ml-star, .ml-btn, .ml-overlay { display: none !important; }
}


/* ── TEAM ONLY LOGIN PAGE ────────────────────────────────────────────────── */
.login-wrap {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--purple-deeper), var(--purple-dark));
}
.login-card {
    background: var(--white);
    border-radius: 18px;
    padding: 2.5rem 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.login-card .lock-icon {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 0.5rem;
}
.login-card h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    color: var(--purple-dark);
    margin-bottom: 0.3rem;
}
.login-card .login-sub {
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}
.login-card .field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.3rem;
    display: block;
}
.login-card .field-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    transition: border-color 0.22s ease;
    margin-bottom: 1.1rem;
    box-sizing: border-box;
}
.login-card .field-input:focus {
    outline: none;
    border-color: var(--purple-light);
}
.login-card .btn-login {
    width: 100%;
    padding: 0.75rem;
    background: var(--white);
    color: var(--purple-dark);
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease;
    margin-top: 0.4rem;
}
.login-card .btn-login:hover { background: var(--gray-100); border-color: var(--gray-400); }
.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
    color: var(--gray-400);
    font-size: 0.8rem;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}
.oauth-pitch {
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--purple-dark);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.login-card .btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.95rem;
    background: var(--white);
    color: var(--text);
    border: 1.5px solid var(--gray-300);
    border-radius: 10px;
    font-size: 1.02rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.1s ease;
    box-sizing: border-box;
}
.login-card .btn-google:hover {
    border-color: var(--purple-light);
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}
.login-card .btn-google:active { transform: translateY(1px); }

.login-note {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}
.magic-link-details {
    margin-top: 1.25rem;
    text-align: center;
}
.magic-link-details summary {
    cursor: pointer;
    color: var(--purple-dark);
    font-size: 0.88rem;
    font-weight: 600;
    list-style: none;
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.magic-link-details summary::-webkit-details-marker { display: none; }
.magic-link-details[open] summary { color: var(--purple-dark); }
.magic-link-details .login-note { text-align: left; }
.login-card .login-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.login-hint {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.login-hint > div {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.5rem;
    align-items: start;
    margin-bottom: 0.3rem;
}

.login-hint-label {
    font-weight: 600;
    color: var(--text);
}

.login-hint-value {
    font-family: monospace;
    font-size: 0.875rem;
}

/* ── ACCOUNT LINKING PAGE ────────────────────────────────────────────────── */
.link-match-name {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--purple-dark);
    text-align: center;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 1rem 0 1.5rem;
}
.link-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.link-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s, background 0.2s;
}
.link-result-row:hover {
    border-color: var(--purple-light);
    background: var(--purple-pale);
}
.link-result-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.link-result-meta {
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* ── TEAM ONLY TOOLBAR (signed-in state) ────────────────────────────────── */
.to-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.to-logout-link {
    font-size: 0.8rem;
    color: var(--gray-500);
    text-decoration: none;
    border: 1px solid var(--gray-300);
    border-radius: 99px;
    padding: 0.25rem 0.75rem;
    transition: color 0.15s, border-color 0.15s;
}
.to-logout-link:hover { color: var(--purple); border-color: var(--purple-light); }

/* ── ASSET FILE LIST ─────────────────────────────────────────────────────── */
.asset-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.asset-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.asset-item:hover {
    border-color: var(--purple-light);
    box-shadow: var(--shadow-sm);
    background: var(--purple-pale);
}
.asset-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.asset-name {
    flex: 1;
    font-size: 0.925rem;
    font-weight: 500;
    word-break: break-word;
    text-decoration: none;
    color: var(--text);
}
.asset-name:hover { text-decoration: underline; }
.asset-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.asset-ext {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    letter-spacing: 0.05em;
}
.asset-size { font-size: 0.78rem; color: var(--gray-500); }
.asset-dl {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    color: var(--purple);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.asset-item:hover .asset-dl { background: var(--purple); color: var(--white); }

.asset-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.asset-row .asset-item { flex: 1; min-width: 0; }

/* -- File manager (includes/file_manager.php) ---------------------------- */
/* Admin-only upload form + per-file delete. Rendered on teamonly/assets.php and
   the church_info Documents tab. */
.fm-flash {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid;
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin-bottom: 1.1rem;
    font-size: 0.875rem;
}
.fm-flash i { width: 17px; height: 17px; flex-shrink: 0; }
.fm-flash--ok  { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.fm-flash--err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.fm-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background: var(--purple-pale);
    border: 1px dashed var(--purple-light);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
}
/* The real input is hidden; .fm-upload-label is the visible control. Kept
   focusable-adjacent rather than display:none so keyboard tabbing still lands
   on it via the label's `for`. */
.fm-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.fm-upload-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 12rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.5rem 0.8rem;
    font-size: 0.875rem;
    color: var(--gray-600);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.fm-upload-label:hover { border-color: var(--purple-light); color: var(--purple); }
.fm-upload-label i { width: 16px; height: 16px; flex-shrink: 0; }
.fm-upload-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-upload--picked .fm-upload-label { color: var(--text); border-color: var(--purple); }
/* The file input is visually hidden but still tab-focusable, so mirror its focus
   ring onto the label the user actually sees. Relies on the input preceding the
   label in the markup. */
.fm-upload input[type="file"]:focus-visible + .fm-upload-label {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}
.fm-upload-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fm-upload-hint {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.fm-del-form { display: flex; flex-shrink: 0; }
.fm-del-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--gray-500);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fm-del-btn:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}
.fm-del-btn i { width: 16px; height: 16px; }

@media (max-width: 640px) {
    .fm-upload-label { min-width: 0; }
}
.asset-annotate {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.9rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--purple);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.asset-annotate:hover {
    border-color: var(--purple-light);
    box-shadow: var(--shadow-sm);
    background: var(--purple-pale);
}
.asset-annotate i { width: 16px; height: 16px; }
/* "Download annotated" variant — a green accent distinguishes "get the finished,
   marked-up map" from the purple "Annotate" (open the editor) action beside it. */
.asset-annotate--dl { color: #1e874b; }
.asset-annotate--dl:hover {
    border-color: #27ae60;
    background: rgba(39,174,96,0.09);
}
/* Narrow screens: the action buttons don't shrink, so beside the file they
   squeeze its name down to one letter per line. Give the file its own line and
   let the actions share the one below. Only rows that have such buttons — a
   plain file + delete row (teamonly/assets.php) still fits side by side. */
@media (max-width: 760px) {
    .asset-row:has(.asset-annotate) { flex-wrap: wrap; }
    .asset-row:has(.asset-annotate) .asset-item { flex-basis: 100%; }
    .asset-row .asset-annotate {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.6rem 0.9rem;
    }
}

/* Empty state (shared) */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--gray-500);
}
.empty-state p:first-child { font-size: 3rem; margin-bottom: 0.75rem; }
.empty-state p { font-size: 1rem; }


/* ── CHURCH INFO PAGE ────────────────────────────────────────────────────── */

/* Header row: church name + summary pills */
.ci-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.ci-church-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ci-church-city {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-600);
}
.ci-church-id {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gray-600);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}
.ci-summary-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.ci-pill {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    white-space: nowrap;
}
.ci-pill--notes   { background: #eef2ff; color: #3730a3; }
.ci-pill--docs    { background: #fef3c7; color: #92400e; }
.ci-pill--vendors { background: #d1fae5; color: #065f46; }

/* Tab bar */
.ci-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.ci-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 1.1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}
.ci-tab:hover { color: var(--purple); }
.ci-tab.active {
    color: var(--purple);
    border-bottom-color: var(--purple);
}
.ci-tab-count {
    background: var(--purple-pale);
    color: var(--purple-dark);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
}
.ci-tab.active .ci-tab-count {
    background: var(--purple);
    color: var(--white);
}

/* Tab panels */
.ci-panel { display: none; }
.ci-panel.active { display: block; }

/* Empty state per tab */
.ci-tab-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--gray-600);
}
.ci-tab-empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Notes */
.ci-notes-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ci-note-row {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.ci-note-date {
    flex-shrink: 0;
    min-width: 80px;
    background: var(--purple);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    line-height: 1.3;
}
.ci-note-text {
    flex: 1;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Vendor city note */
.ci-vendor-city-note {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 1.25rem;
    padding: 0.6rem 0.9rem;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 3px solid var(--purple-light);
}

/* Vendor type accordions */
.ci-vtype-accordion {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.ci-vtype-accordion:last-child { margin-bottom: 0; }
.ci-vtype-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
}
.ci-vtype-accordion[open] > .ci-vtype-summary {
    border-bottom-color: var(--gray-200);
    background: var(--purple-pale);
}
.ci-vtype-summary::-webkit-details-marker { display: none; }
.ci-vtype-name {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--purple-dark);
    flex: 1;
}
.ci-vtype-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-600);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
}
.ci-vtype-chevron {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--gray-600);
    border-bottom: 2px solid var(--gray-600);
    transform: rotate(45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.ci-vtype-accordion[open] .ci-vtype-chevron { transform: rotate(-135deg); }
.ci-vtype-body { padding: 0.85rem 1rem 1rem; }

/* Vendor table */
.ci-vendor-table { margin-bottom: 0; }
.ci-vendor-name { font-size: 0.875rem; font-weight: 500; }
.ci-vendor-city { font-weight: 400; color: var(--gray-600); }
.ci-vendor-phone {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin-top: 0.15rem;
}
.ci-vendor-contact {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 0.1rem;
    font-style: italic;
}
.ci-cost-cell {
    font-weight: 600;
    white-space: nowrap;
}
.ci-people-cell {
    font-size: 0.9rem;
    white-space: nowrap;
}
.ci-per-person {
    display: block;
    font-size: 0.72rem;
    color: var(--gray-600);
}
.ci-tec-btn {
    background: var(--purple-pale);
    color: var(--purple-dark);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s;
    white-space: nowrap;
}
.ci-tec-btn:hover { background: var(--purple); color: var(--white); }
.ci-note-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.2rem;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.ci-note-btn:hover { opacity: 1; }

/* Note editing (level 9+) */
.ci-note-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.85rem; }
.ci-note-toolbar .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.ci-note-toolbar .btn i { width: 15px; height: 15px; }
.ci-note-actions { flex-shrink: 0; display: flex; gap: 0.35rem; }
.ci-note-actions form { margin: 0; }
.ci-note-act {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    color: var(--gray-500);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ci-note-act:hover { border-color: var(--purple); color: var(--purple); }
.ci-note-act--del:hover { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
.ci-note-act i { width: 15px; height: 15px; }

/* Note modal */
.ci-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.ci-modal-box {
    background: var(--purple-dark);
    color: var(--white);
    border-radius: 14px;
    padding: 2rem 2rem 1.75rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    position: relative;
}
.ci-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: color 0.15s;
}
.ci-modal-close:hover { color: var(--white); }
.ci-modal-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.75rem;
}
.ci-modal-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--white);
}

/* Version chooser (annotated vs original) action buttons */
.ci-version-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.ci-version-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ci-version-btn i { width: 17px; height: 17px; }
/* Primary = annotated: big, green, obvious default */
.ci-version-btn--primary {
    background: #2ecc71;
    color: #0b3d22;
    font-size: 0.95rem;
}
.ci-version-btn--primary:hover { background: #27ae60; color: var(--white); }
/* Secondary = original: smaller, quiet outline */
.ci-version-btn--secondary {
    background: transparent;
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.28);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
}
.ci-version-btn--secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

@media (max-width: 600px) {
    .ci-header { flex-direction: column; }
    .ci-note-row { flex-direction: column; gap: 0.4rem; }
    .ci-note-date { min-width: unset; width: fit-content; }
    .ci-note-actions { align-self: flex-end; }
    .ci-tab { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
    .ci-vendor-table th:nth-child(5),
    .ci-vendor-table td:nth-child(5) { display: none; }
}

/* ── CHURCH DETAILS ENTRY ────────────────────────────────────────────────── */
.cd-selector-wrap { margin-bottom: 2rem; }
.field-label-plain {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.4rem;
}
.cd-select {
    width: 100%;
    max-width: 480px;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.15s;
}
.cd-select:focus { outline: none; border-color: var(--purple-light); }

.cd-section {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.cd-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.cd-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--purple-pale);
    color: var(--purple);
    border-radius: 20px;
    padding: 0.15rem 0.65rem;
}
.cd-empty { color: var(--gray-500); font-style: italic; font-size: 0.9rem; }

.cd-detail-list { display: flex; flex-direction: column; gap: 1rem; }
.cd-detail-row {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1rem;
    background: var(--gray-50);
}
.cd-detail-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.cd-textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
    margin-bottom: 0.75rem;
}
.cd-textarea:focus { outline: none; border-color: var(--purple-light); }
.cd-detail-actions { display: flex; gap: 0.5rem; }

/* Small button variant */
.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8rem; }

/* Danger button */
.btn-danger {
    background: #dc2626;
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-danger:hover { background: #b91c1c; }

@media (max-width: 600px) {
    .cd-select { max-width: 100%; }
    .cd-detail-actions { flex-wrap: wrap; }
}


/* ── TALK ACCORDION ──────────────────────────────────────────────────────── */
.talk-accordion { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }

.talk-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.talk-item[open] { border-color: var(--purple-light); }

.talk-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s;
}
.talk-summary::-webkit-details-marker { display: none; }
/* The default focus ring is a square outline that .talk-item's overflow:hidden
   clips at the rounded corners, leaving dark straight edges and faint corners.
   Draw the ring on the card itself instead so it follows the radius. */
.talk-summary:focus { outline: none; }
.talk-item:has(.talk-summary:focus-visible) {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}
.talk-summary:hover { background: var(--gray-100); }
.talk-item[open] .talk-summary { background: var(--gray-100); border-bottom: 1px solid var(--gray-200); }

.talk-num {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--purple);
    background: rgba(124, 58, 237, 0.08);
    border-radius: 99px;
    padding: 0.2rem 0.65rem;
}
.talk-title-text {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}
.talk-duration {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--gray-500);
    white-space: nowrap;
}
.talk-chevron {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.talk-chevron::after {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--gray-400);
    border-bottom: 2px solid var(--gray-400);
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-top: -4px;
}
.talk-item[open] .talk-chevron::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.talk-body {
    padding: 1.5rem 1.5rem 1.75rem;
    color: var(--gray-700);
    line-height: 1.7;
}
.talk-body p { margin: 0 0 1rem; }

.print-talk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    color: var(--purple);
    background: transparent;
    border: 2px solid var(--purple);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.print-talk-btn:hover { background: var(--purple); color: var(--white); }
.print-talk-btn svg { width: 15px; height: 15px; }
.talk-body ol, .talk-body ul {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}
.talk-body li { margin-bottom: 0.4rem; }
.talk-body ol ol { margin-top: 0.35rem; margin-bottom: 0.35rem; }

/* Verse reference table (Talk 2) */
.verse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}
.verse-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: var(--gray-100);
    border-bottom: 2px solid var(--gray-200);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600);
}
.verse-table td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}
.verse-table td:first-child {
    white-space: nowrap;
    font-weight: 600;
    color: var(--purple-dark);
    width: 9rem;
}
.verse-section-header {
    font-weight: 700 !important;
    color: var(--text) !important;
    padding-top: 0.9rem !important;
    background: none;
}

@media (max-width: 600px) {
    .talk-summary { gap: 0.5rem; padding: 0.875rem 1rem; }
    .talk-duration { display: none; }
    .talk-body { padding: 1.25rem 1rem 1.5rem; }
    .verse-table td:first-child { width: auto; white-space: normal; }
}


/* ── RESOURCE GRID (Team Only hub) ──────────────────────────────────────── */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.resource-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.resource-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--purple-light);
    transform: translateY(-2px);
}
.resource-card-icon {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.resource-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin: 0;
}
.resource-card p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* ── CONTACT FORM ────────────────────────────────────────────────────────── */
.form-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 2rem 2.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    margin-bottom: 2rem;
}

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(114,48,99,0.12);
}
.form-row textarea { resize: vertical; min-height: 160px; }
.req { color: var(--purple); }

.form-success {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--purple-pale);
    border-radius: var(--radius);
    border: 1px solid rgba(114,48,99,0.15);
}
.form-success h2 { font-family: 'Poppins', sans-serif; color: var(--purple-dark); margin-bottom: 0.5rem; }

.form-errors {
    background: #fff0f0;
    border: 1px solid #f5c0c0;
    border-radius: 8px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.5rem;
    color: #c0392b;
    font-size: 0.9rem;
}

/* ── PAYMENT FORMS ───────────────────────────────────────────────────────── */
.payment-block { margin-bottom: 1rem; }
.payment-form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 480px; }

/* ── TEC COUNCIL ─────────────────────────────────────────────────────────── */
.council-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.council-group-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin-bottom: 1rem;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--gray-200);
}
.faq-item:last-of-type { border-bottom: none; }
.faq-item h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin-bottom: 0.6rem;
}
.faq-item p { color: var(--gray-600); line-height: 1.75; margin-bottom: 0.5rem; }
.faq-item p:last-child { margin-bottom: 0; }
.faq-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    margin-top: 0.5rem;
}
.faq-two-col ul { padding-left: 1.2rem; color: var(--gray-600); line-height: 1.9; }

/* ── HISTORY ─────────────────────────────────────────────────────────────── */
.history-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.history-card {
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: box-shadow var(--transition), transform var(--transition);
}
.history-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.history-card-media {
    height: 165px;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.history-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: var(--gray-100);
}
.history-card-year { z-index: 1; }
.history-card-media.no-photo {
    background: linear-gradient(135deg, var(--purple-deeper) 0%, var(--purple) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.history-card-media.canceled-card {
    background: linear-gradient(135deg, var(--gray-400) 0%, var(--gray-500) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.history-card-num-bg {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    color: rgba(255,255,255,0.18);
    letter-spacing: 0.02em;
    user-select: none;
}
.history-card-year {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
}
.history-card-canceled-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.75rem;
    background: var(--gray-600);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
}
.history-card-body {
    padding: 1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.history-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--purple-dark);
    font-size: 1rem;
    margin-bottom: 0.15rem;
}
.history-card-dates { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.history-card-church { font-size: 0.84rem; color: var(--gray-500); margin-bottom: 0.6rem; }
.history-card-details { font-size: 0.84rem; color: var(--gray-600); line-height: 1.65; flex: 1; }
.history-card-details p { margin-bottom: 0.25rem; }
.history-card-canceled-reason { font-size: 0.875rem; font-style: italic; color: var(--gray-500); flex: 1; margin-top: 0.25rem; }
.history-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.history-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
    border: 1px solid rgba(114,48,99,0.3);
    border-radius: 20px;
    padding: 0.2rem 0.7rem;
    transition: background var(--transition), color var(--transition);
    background: var(--purple-pale);
    width: calc(50% - 0.2rem);
    text-align: center;
    box-sizing: border-box;
}
.history-link:hover { background: var(--purple); color: var(--white); }
@media (max-width: 700px) {
    .history-grid { grid-template-columns: 1fr; }
    .history-card-media { height: 140px; }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    color: var(--purple);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    transition: background var(--transition), border-color var(--transition);
}
.page-btn:hover { background: var(--purple-pale); border-color: var(--purple); }
.page-info { font-size: 0.85rem; color: var(--gray-600); margin: 0 0.5rem; }

/* ── PROMOTION PAGE ──────────────────────────────────────────────────────── */
.promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
    align-items: start;
}
.promo-item h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin-bottom: 0.6rem;
}
.promo-item p { color: var(--gray-600); line-height: 1.75; margin-bottom: 1rem; }
.logo-downloads { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.logo-thumb-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--purple);
    font-size: 0.8rem;
    font-weight: 600;
}
.logo-thumb-link img { border-radius: 6px; border: 1px solid var(--gray-200); }
.logo-thumb-link:hover img { border-color: var(--purple); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .nav-right { display: none; }
    .nav-hamburger { display: flex; }
    .page-subnav { display: none; }

    .footer-inner { grid-template-columns: 1fr; gap: 1rem; }
    .footer-links { justify-content: flex-start; }

    .info-layout { grid-template-columns: 1fr; }
    .info-sidebar { flex-direction: row; flex-wrap: wrap; }
    .info-card { flex: 1 1 200px; }

    .testimonial-grid { grid-template-columns: 1fr; }

    .council-grid { grid-template-columns: 1fr; gap: 2rem; }
    .promo-grid { grid-template-columns: 1fr; gap: 2rem; }
    .faq-two-col { grid-template-columns: 1fr; }
}

/* Safety net, set by the guard script in includes/nav.php when it finds neither
   the hamburger nor the desktop nav/subnav actually usable. Must stay after the
   breakpoint block above. Screen only: print hides the nav, which the guard
   reads as "no usable menu" (iPad re-runs it while laying out the print), and
   the !important here would otherwise beat the print rules that hide it. */
@media screen {
    html.nav-guard .nav-hamburger { display: flex !important; }
    html.nav-guard .page-subnav   { display: block !important; }
}

@media (max-width: 600px) {
    section { padding: 3.5rem 0; }
    .stats-bar { flex-wrap: wrap; }
    .stat-item { flex: 1 1 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }

    .data-table { font-size: 0.78rem; }
    .data-table th { font-size: 0.64rem; padding: 0.45rem 0.5rem; }
    .data-table td { padding: 0.45rem 0.5rem; }
}

/* ── TEAM FORMS PAGE ─────────────────────────────────────────────────────── */
.tf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}
.tf-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 14px;
    padding: 1.4rem 1.25rem 1.25rem;
    transition: box-shadow 0.18s, transform 0.15s, border-color 0.15s;
}
.tf-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--purple-light);
}
.tf-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.tf-icon { font-size: 1.75rem; line-height: 1; }
.tf-badge-required {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #fef3c7;
    color: #92400e;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}
.tf-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin: 0;
}
.tf-desc {
    flex: 1;
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}
.tf-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--purple);
    color: var(--white);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    align-self: flex-start;
}
.tf-download-btn:hover { background: var(--purple-dark); color: var(--white); }
.tf-dl-icon {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 700px) {
    .tf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .tf-grid { grid-template-columns: 1fr; }
}

/* ── WEEKEND SCHEDULE ────────────────────────────────────────────────────── */

/* Live indicator dot */
.sched-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    margin-right: 0.3rem;
    animation: sched-pulse 2s infinite;
    vertical-align: middle;
}
@keyframes sched-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Team tab bar — the mobile analog of the desktop team columns. Sticky so the
   active team stays visible while scrolling a day. Opaque bg + padding-bottom
   (instead of margin) so scrolling rows never show through the pinned bar.
   Its live height is published to --sched-tabs-h (see schedule.php) so the day
   header can pin flush underneath it. */
.sched-tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    position: sticky;
    top: calc(var(--nav-height) + var(--subnav-h, 3rem));
    z-index: 30;
    background: var(--white);
    padding-bottom: 0.9rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.25);
}
.sched-tab {
    flex: 0 0 calc(50% - 0.175rem);
    padding: 0.5rem 1.1rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    background: var(--white);
    color: var(--gray-600);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
    white-space: nowrap;
}
.sched-tab:hover { border-color: var(--purple); color: var(--purple-dark); }
.sched-tab--active,
.sched-tab--active:hover {
    background: var(--purple);
    border-color: var(--purple);
    color: var(--white);
}

/* Panels */
.sched-panel { display: none; }
.sched-panel--active { display: block; }

/* Day section */
.sched-day-section { margin-bottom: 1.75rem; }
.sched-day-hd {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--white);
    background: var(--purple);
    padding: 0.4rem 0.9rem;
    border-radius: 8px 8px 0 0;
}

/* Mobile: pin each day's header just under the sticky tab bar. --sched-tabs-h
   is set by JS from the tab bar's live height (it wraps to two rows on narrow
   screens); 5.6rem is a sane fallback before the script runs. */
.sched-mobile .sched-day-hd {
    position: sticky;
    top: calc(var(--nav-height) + var(--subnav-h, 3rem) + var(--sched-tabs-h, 5.6rem));
    z-index: 20;
}

/* Schedule rows */
.sched-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0.9rem;
    border-bottom: 1px solid var(--gray-100);
    border-left: 1.5px solid var(--gray-200);
    border-right: 1.5px solid var(--gray-200);
    background: var(--white);
    position: relative;
    transition: background 0.12s;
}
.sched-day-section > .sched-row:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: 1.5px solid var(--gray-200);
}
.sched-row:nth-child(even) { background: var(--gray-50); }
.sched-row:nth-child(even).sched-row--past { background: var(--gray-50); }

/* Past rows */
.sched-row--past .sched-time,
.sched-row--past .sched-activity {
    color: var(--gray-400);
}

/* Upcoming rows */
.sched-row--upcoming .sched-time,
.sched-row--upcoming .sched-activity {
    color: var(--gray-800);
}

.sched-time {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 70px;
    color: var(--gray-500);
}
.sched-row--upcoming .sched-time { color: var(--purple); }

.sched-activity {
    font-size: 0.88rem;
    line-height: 1.45;
    flex: 1;
}

/* "Now" marker on first upcoming row — floats outside the left edge of the row */
.sched-now-marker {
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--white);
    background: var(--purple);
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1;
}

/* Desktop vs mobile schedule visibility */
.sched-desktop { display: none; }
.sched-mobile  { display: block; }

@media (min-width: 700px) {
    .sched-desktop { display: block; }
    .sched-mobile  { display: none; }
    .sched-now-marker { left: -1rem; }
}

/* Desktop: 5-column grid header — sticky so the team columns stay labeled
   while scrolling within a day. Sticks within its own .sched-day-section, so
   it also hands off to the next day's header. */
.sched-day-hd--grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr 1fr;
    gap: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--white);
    background: var(--purple);
    padding: 0.4rem 0.9rem;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: calc(var(--nav-height) + var(--subnav-h, 3rem));
    z-index: 21;
}

/* Day label row between header and data rows — pins just under the column
   header (its ~2.05rem height) so day + teams stay visible together. */
.sched-day-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--purple);
    background: var(--purple-50, #f3eeff);
    padding: 0.28rem 0.9rem;
    border-left: 1.5px solid var(--gray-200);
    border-right: 1.5px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-100);
    position: sticky;
    top: calc(var(--nav-height) + var(--subnav-h, 3rem) + 2.05rem);
    z-index: 20;
}

/* Desktop data rows */
.sched-grid-row {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr 1fr;
    gap: 0;
    align-items: baseline;
    padding: 0.45rem 0.9rem;
    border-bottom: 1px solid var(--gray-100);
    border-left: 1.5px solid var(--gray-200);
    border-right: 1.5px solid var(--gray-200);
    background: var(--white);
    transition: background 0.12s;
    position: relative;
}
.sched-day-section > .sched-grid-row:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: 1.5px solid var(--gray-200);
}
.sched-grid-row:nth-child(odd) { background: var(--gray-50); }
.sched-grid-row:nth-child(odd).sched-row--past { background: var(--gray-50); }

/* Past styling for grid rows */
.sched-grid-row.sched-row--past .sched-time,
.sched-grid-row.sched-row--past .sched-col {
    color: var(--gray-400);
}
.sched-grid-row.sched-row--upcoming .sched-time { color: var(--purple); }
.sched-grid-row.sched-row--upcoming .sched-col  { color: var(--gray-800); }

/* Team content cells in desktop rows */
.sched-col {
    font-size: 0.83rem;
    line-height: 1.45;
    padding-right: 0.5rem;
}

/* Print toolbar */
.sched-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* ── Weekend schedule — print: one day per page, all four teams ─────────── */
@media print {
    /* reports.css sets body { overflow: hidden } for single-page reports; this
       page prints across several pages, so it must scroll its own content */
    body.sched-page { overflow: visible !important; }

    .sched-page .photo-strip,
    .sched-page .sched-toolbar,
    .sched-page .sched-mobile,
    .sched-page .sched-now-marker { display: none !important; }

    /* Always print the four-team grid, whatever the screen width was */
    .sched-page .sched-desktop { display: block !important; }

    .sched-page .sched-day-section {
        margin-bottom: 0;
        break-after: page;
    }
    .sched-page .sched-day-section:last-of-type { break-after: auto; }

    /* Keep a day's header rows attached to the first schedule row */
    .sched-page .sched-day-hd--grid,
    .sched-page .sched-day-label { break-after: avoid; }
    .sched-page .sched-grid-row  { break-inside: avoid; }

    /* Past-item graying is a live-retreat screen cue; print everything black */
    .sched-page .sched-grid-row.sched-row--past .sched-time,
    .sched-page .sched-grid-row.sched-row--past .sched-col,
    .sched-page .sched-grid-row.sched-row--upcoming .sched-time,
    .sched-page .sched-grid-row.sched-row--upcoming .sched-col {
        color: #000 !important;
    }

    .sched-page .sched-day-hd--grid,
    .sched-page .sched-day-label,
    .sched-page .sched-grid-row:nth-child(odd) {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* ── PRAYER PARTNER TRACKER ─────────────────────────────────────────────── */

/* Team selector grid */
.ppt-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.ppt-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.4rem 1rem;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 14px;
    text-decoration: none;
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.ppt-team-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--purple);
    color: var(--purple-dark);
}
.ppt-team-icon { font-size: 2rem; line-height: 1; }
.ppt-svg-icon {
    width: 2rem;
    height: 2rem;
    display: block;
    color: var(--purple);
}
.ppt-team-name { font-size: 0.88rem; }

/* Flash banner */
.ppt-flash {
    padding: 0.75rem 1.1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.ppt-flash--ok { background:#d1fae5; color:#065f46; border:1.5px solid #6ee7b7; }

/* Instructions */
.ppt-instructions {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.55;
}
.ppt-instr-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }

/* Legend */
.ppt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    color: var(--gray-600);
    align-items: center;
}
.ppt-legend-item { display: flex; align-items: center; gap: 0.4rem; }
.ppt-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ppt-badge--new   { background: #fef3c7; color: #92400e; }
.ppt-badge--adult { background: #dbeafe; color: #1e40af; }
.ppt-badge--atl   { background: var(--purple); color: #fff; }

/* Group list */
.ppt-group-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }

.ppt-group-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    transition: border-color 0.15s, background 0.15s;
}
.ppt-group-row--filled {
    border-color: #6ee7b7;
    background: #f0fdf4;
}

.ppt-group-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--purple);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 1.35rem;
}

.ppt-group-selects {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
}

.ppt-select-wrap { display: flex; flex-direction: column; gap: 0.25rem; }
.ppt-select-wrap--third { opacity: 0.7; }
.ppt-select-wrap--third:focus-within { opacity: 1; }

.ppt-select-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ppt-select-wrap--third .ppt-select-label { color: var(--gray-400); }

.ppt-select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--gray-800);
    background: var(--white);
    outline: none;
    transition: border-color 0.15s;
}
.ppt-select:focus { border-color: var(--purple); }
.ppt-select:disabled { opacity: 0.4; background: var(--gray-100); cursor: not-allowed; }

/* Sticky save bar */
.ppt-save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);

    padding: 0.9rem 1rem;
    margin-top: 1rem;
    z-index: 50;
}
.ppt-save-btn {
    padding: 0.65rem 1.5rem;
    background: var(--purple);
    color: var(--white);
    border: none;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.ppt-save-btn:hover { background: var(--purple-dark); }
.ppt-save-hint { font-size: 0.8rem; color: var(--gray-500); }

@media (max-width: 600px) {
    .ppt-group-selects { grid-template-columns: 1fr 1fr; }
    .ppt-select-wrap--third { grid-column: 1 / -1; }
    .ppt-save-hint { display: none; }
}

/* ── LEADERSHIP SELECTION TRACKER ───────────────────────────────────────── */

.lst-flash {
    padding: 0.75rem 1.1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.lst-flash--ok   { background:#d1fae5; color:#065f46; border:1.5px solid #6ee7b7; }
.lst-flash--warn { background:#fef3c7; color:#92400e; border:1.5px solid #fcd34d; }
.lst-flash--err  { background:#fee2e2; color:#991b1b; border:1.5px solid #fca5a5; }

/* Add card */
.lst-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.1rem;
    box-shadow: var(--shadow-sm);
}
.lst-card-hd {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}
.lst-card-icon { font-size: 1.25rem; }
.lst-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin: 0;
    flex: 1;
}
.lst-tec-badge {
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--purple);
    color: var(--white);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
}

/* Live search */
.lst-search-wrap {
    position: relative;
    margin-bottom: 0.9rem;
}
.lst-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 2.2rem 0.55rem 0.85rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
}
.lst-search-input:focus { border-color: var(--purple); }
.lst-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0 0.2rem;
    line-height: 1;
}
.lst-search-clear:hover { color: var(--gray-700); }

/* Add form grid */
.lst-add-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
}
.lst-field { display: flex; flex-direction: column; gap: 0.3rem; }
.lst-field--wide { }
.lst-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lst-select {
    padding: 0.5rem 0.65rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--gray-800);
    background: var(--white);
    outline: none;
    transition: border-color 0.15s;
}
.lst-select:focus { border-color: var(--purple); }

.lst-field--actions { flex-shrink: 0; }
.lst-add-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.lst-check-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--gray-700);
    white-space: nowrap;
    cursor: pointer;
}
.lst-check-label input[type="checkbox"],
.lst-accepted-label input[type="checkbox"] {
    accent-color: var(--purple);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.lst-add-btn {
    padding: 0.52rem 1.25rem;
    background: var(--purple);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.lst-add-btn:hover { background: var(--purple-dark); }

.lst-legend-note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Count badge next to heading */
.lst-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-700);
    color: var(--white) !important;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 20px;
    padding: 0 0.4rem;
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* Team block */
.lst-team-block {
    margin-bottom: 1.75rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}
.lst-team-hd {
    background: var(--purple);
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
}
.lst-gender-block { }
.lst-gender-hd {
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 1rem;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

/* Each row */
.lst-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.9fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--white);
    transition: background 0.12s;
}
.lst-row:last-child { border-bottom: none; }
.lst-row:hover { background: var(--gray-50); }

.lst-inline-select {
    width: 100%;
    padding: 0.35rem 0.45rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--gray-800);
    background: var(--white);
    outline: none;
}
.lst-inline-select:focus { border-color: var(--purple); }

.lst-accepted-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--gray-600);
    cursor: pointer;
    white-space: nowrap;
}
.lst-accepted-text { }

.lst-row-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.lst-btn-save, .lst-btn-del {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.13s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lst-btn-save { background: var(--purple); color: #fff; border: none; }
.lst-btn-save:hover { background: var(--purple-dark); }
.lst-btn-del  { background: transparent; color: #888; border: 1.5px solid #d1d5db; }
.lst-btn-del:hover  { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }

.lst-empty {
    text-align: center;
    color: var(--gray-500);
    font-size: 0.95rem;
    padding: 2.5rem 1rem;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1.5px dashed var(--gray-300);
}

@media (max-width: 720px) {
    .lst-add-grid {
        grid-template-columns: 1fr 1fr;
    }
    .lst-field--wide { grid-column: 1 / -1; }
    .lst-field--actions { grid-column: 1 / -1; }
    .lst-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .lst-row-name    { grid-column: 1 / -1; }
    .lst-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ── INVENTORY TRACKER ───────────────────────────────────────────────────── */

.inv-saved-banner {
    background: #d1fae5;
    color: #065f46;
    border: 1.5px solid #6ee7b7;
    border-radius: 10px;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.inv-instructions {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.55;
}
.inv-instr-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }

/* Quick-jump pills */
.inv-team-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.inv-team-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1.5px solid var(--gray-200);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.inv-team-pill:hover { background: var(--purple-light); border-color: var(--purple); color: var(--purple-dark); }
.inv-team-pill--done { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.inv-team-pill-count {
    font-size: 0.7rem;
    background: rgba(0,0,0,0.08);
    border-radius: 20px;
    padding: 0.05rem 0.4rem;
}

/* Team section */
.inv-team-section {
    margin-bottom: 2.25rem;
    scroll-margin-top: 90px;
}
.inv-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    background: var(--purple);
    border-radius: 10px 10px 0 0;
    color: var(--white);
}
.inv-team-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--white);
}
.inv-team-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.inv-progress-label {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.9;
}
.inv-progress-bar {
    width: 80px;
    height: 7px;
    background: rgba(255,255,255,0.25);
    border-radius: 20px;
    overflow: hidden;
}
.inv-progress-fill {
    height: 100%;
    background: #a7f3d0;
    border-radius: 20px;
    transition: width 0.3s ease;
}

/* Item rows */
.inv-item-list {
    border: 1.5px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.inv-item-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--white);
    transition: background 0.15s;
}
.inv-item-row:last-child { border-bottom: none; }
.inv-item-row:hover { background: var(--gray-50); }
.inv-item-row--filled { background: #f0fdf4; }
.inv-item-row--filled:hover { background: #dcfce7; }

.inv-item-thumb-link {
    display: block;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    border-radius: 8px;
}
.inv-item-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: opacity 0.15s, transform 0.15s;
}
.inv-item-thumb-link:hover .inv-item-thumb {
    opacity: 0.85;
    transform: scale(1.05);
}

/* Lightbox */
.inv-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}
.inv-lightbox--open { display: flex; }
.inv-lightbox-img {
    max-width: min(90vw, 520px);
    max-height: 72vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.inv-lightbox-caption {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
}
.inv-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.15s;
}
.inv-lightbox-close:hover { color: #fff; }
.inv-item-thumb-placeholder {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--gray-100);
    border-radius: 8px;
    flex-shrink: 0;
}

.inv-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-800);
}

/* Qty stepper */
.inv-qty-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.inv-qty-btn {
    width: 30px;
    height: 36px;
    border: 1.5px solid var(--gray-300);
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s;
    user-select: none;
}
.inv-qty-minus { border-radius: 8px 0 0 8px; border-right: none; }
.inv-qty-plus  { border-radius: 0 8px 8px 0; border-left: none; }
.inv-qty-btn:hover { background: var(--purple-light); color: var(--purple-dark); }
.inv-qty-input {
    width: 58px;
    height: 36px;
    border: 1.5px solid var(--gray-300);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
    outline: none;
    -moz-appearance: textfield;
}
.inv-qty-input::-webkit-outer-spin-button,
.inv-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inv-qty-input:focus { border-color: var(--purple); z-index: 1; }

/* Sticky save bar */
.inv-save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);

    padding: 0.9rem 1rem;
    margin-top: 1.5rem;
    z-index: 50;
}
.inv-save-btn {
    padding: 0.65rem 1.5rem;
    background: var(--purple);
    color: var(--white);
    border: none;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.inv-save-btn:hover { background: var(--purple-dark); }
.inv-save-hint {
    font-size: 0.8rem;
    color: var(--gray-500);
}

@media (max-width: 560px) {
    .inv-item-row {
        grid-template-columns: 44px 1fr auto;
        gap: 0.5rem;
        padding: 0.5rem 0.6rem;
    }
    .inv-item-thumb, .inv-item-thumb-placeholder { width: 42px; height: 42px; }
    .inv-qty-input { width: 46px; }
    .inv-qty-btn   { width: 26px; }
    .inv-save-hint { display: none; }
    .inv-progress-bar { width: 50px; }
}

/* ── DELEGATION CHECKLIST ────────────────────────────────────────────────── */

/* Toast */
.dc-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: #065f46;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: opacity 0.5s ease, transform 0.5s ease;
    white-space: nowrap;
}
.dc-toast-hide {
    opacity: 0;
    transform: translateX(-50%) translateY(1rem);
}

/* ── Team selector grid ── */
.dc-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: 0.25rem;
}
.dc-team-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem 0.9rem;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    position: relative;
    overflow: hidden;
}
.dc-team-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--purple);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.dc-team-card:hover {
    border-color: var(--purple-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--text);
}
.dc-team-card:hover::before { transform: scaleX(1); }
.dc-team-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--purple-dark);
}
.dc-team-meta {
    font-size: 0.75rem;
    color: var(--gray-600);
}
.dc-team-arrow {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--gray-200);
    transition: color 0.15s, right 0.15s;
}
.dc-team-card:hover .dc-team-arrow {
    color: var(--purple);
    right: 0.7rem;
}

/* ── Checklist header ── */
.dc-checklist-header {
    margin-bottom: 1.5rem;
}
.dc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
    margin-bottom: 0.75rem;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.dc-back-link:hover { opacity: 1; }
.dc-checklist-title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.dc-tec-badge {
    background: var(--purple);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Progress bar ── */
.dc-progress-wrap {
    margin-bottom: 1.75rem;
}
.dc-progress-label {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}
.dc-progress-pct {
    margin-left: auto;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--purple);
}
.dc-progress-track {
    height: 8px;
    background: var(--gray-100);
    border-radius: 10px;
    overflow: hidden;
}
.dc-progress-fill {
    height: 100%;
    background: var(--purple-light);
    border-radius: 10px;
    transition: width 0.3s ease, background 0.3s ease;
    min-width: 0;
}
.dc-progress-fill.dc-progress-mid  { background: #7c3aed; }
.dc-progress-fill.dc-progress-done { background: #059669; }

/* ── Task list ── */
.dc-task-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.dc-task-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.12s;
}
.dc-task-row:last-child { border-bottom: none; }
.dc-task-row:hover { background: var(--gray-50); }

/* Completion checkbox */
.dc-task-check {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    accent-color: #059669;
    cursor: pointer;
}

/* Status dot */
.dc-task-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-200);
    border: 2px solid var(--gray-200);
    transition: background 0.2s, border-color 0.2s;
}
.dc-task-filled .dc-task-dot {
    background: #059669;
    border-color: #059669;
}

/* Completed task */
.dc-task-done { background: var(--gray-50); }
.dc-task-done .dc-task-label {
    color: var(--gray-400);
    text-decoration: line-through;
}

/* Left accent stripe on filled rows */
.dc-task-row {
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.15s;
}
.dc-task-filled { border-left-color: #059669; }

.dc-task-label {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
    line-height: 1.4;
}
.dc-task-input {
    width: 200px;
    flex-shrink: 0;
    padding: 0.35rem 0.7rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--text);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dc-task-input:focus {
    outline: none;
    border-color: var(--purple-light);
    box-shadow: 0 0 0 3px rgba(114,48,99,0.1);
}
.dc-task-input::placeholder { color: var(--gray-200); }
.dc-task-filled .dc-task-input {
    border-color: #6ee7b7;
    background: #f0fdf4;
}

/* ── Save bar ── */
.dc-save-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
}
.dc-unsaved-note {
    font-size: 0.8rem;
    color: #b45309;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
}
.dc-unsaved-note.visible { opacity: 1; }


@media (max-width: 700px) {
    .dc-team-grid { grid-template-columns: repeat(2, 1fr); }
    .dc-task-row { gap: 0.5rem; padding: 0.65rem 0.75rem; }
    .dc-task-input { width: 140px; font-size: 0.8rem; }
}
@media (max-width: 480px) {
    .dc-team-grid { grid-template-columns: 1fr; }
    .dc-task-row { flex-wrap: wrap; }
    .dc-task-input { width: 100%; }
    .dc-task-label { flex: 1 1 100%; order: -1; }
    .dc-task-dot { order: -2; }
    .dc-task-check { order: -3; }
}

/* ── SUPPORT CHECKLIST ───────────────────────────────────────────────────── */

.sc-flash {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #d1fae5;
    color: #065f46;
    border: 1.5px solid #6ee7b7;
    border-radius: 10px;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
}
/* Top bar: save button left, instructions right */
.sc-top-bar {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.sc-top-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    flex-shrink: 0;
    padding-top: 0.1rem; /* optical alignment with first line of text */
}
.sc-instructions {
    font-size: 0.87rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Scrollable table container */
.sc-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    margin-bottom: 1.75rem;
}

/* Table */
.sc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 540px;
}
.sc-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--purple);
}
.sc-th {
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--white);
    white-space: nowrap;
}
.sc-th-center { text-align: center; }
.sc-th-ro { opacity: 0.75; font-style: italic; cursor: default; }
.sc-th-name { min-width: 160px; }
.sc-th-team { min-width: 110px; }

/* Sort links in headers */
.sc-th-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    transition: color 0.12s;
}
.sc-th-link:hover { color: var(--white); }
.sc-th-active { color: var(--white); }
.sc-sort-arrow { font-size: 0.65rem; margin-left: 0.25rem; }

/* Sort headers are <button>s — strip the native button chrome so they read
   as header labels (the color/typography comes from .sc-th / .sc-th-link) */
.sc-sort-btn {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

/* Rows */
.sc-row { border-bottom: 1px solid var(--gray-100); }
.sc-row:last-child { border-bottom: none; }
.sc-row:nth-child(even) { background: var(--gray-50); }
.sc-row:hover { background: #f3eeff; }

.sc-td {
    padding: 0.48rem 0.75rem;
    color: var(--gray-700);
    vertical-align: middle;
}
.sc-td-center { text-align: center; }
.sc-td-name { font-weight: 500; color: var(--gray-800); }
.sc-td-team { font-size: 0.82rem; color: var(--gray-600); }
.sc-empty { padding: 1.5rem; text-align: center; color: var(--gray-400); font-style: italic; }

/* Leadership star badge */
.sc-leader-badge {
    color: var(--purple);
    font-size: 0.75rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Checkboxes */
.sc-check-edit {
    accent-color: var(--purple);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.sc-check-ro {
    accent-color: var(--purple);
    width: 16px;
    height: 16px;
    pointer-events: none;
    cursor: default;
}

/* Inline AJAX save feedback */
.sc-td-saving .sc-check-edit { opacity: 0.35; }
.sc-td-saved  .sc-check-edit { box-shadow: 0 0 0 3px #4caf5088; transition: box-shadow 1.2s ease; }
.sc-td-error  .sc-check-edit { box-shadow: 0 0 0 3px #f4433688; }

/* Inline save feedback for generic text/number inputs and their containers */
.sc-td-saving input { opacity: 0.5; }
.sc-td-saved  input { box-shadow: 0 0 0 3px #4caf5088; transition: box-shadow 1.2s ease; }
.sc-td-error  input { box-shadow: 0 0 0 3px #f4433688; }

/* Dirty state: text input has been edited but not yet saved (not blurred) */
.dc-input-dirty {
    border-color: #f59e0b !important;
    background-color: #fffdf5 !important;
    box-shadow: 0 0 0 2px #f59e0b44 !important;
}

/* Summary cards grid */
.sc-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.sc-summary-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}
.sc-summary-hd {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin: 0 0 0.75rem;
    padding: 0;
}
.sc-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}
.sc-summary-table th {
    text-align: left;
    font-weight: 700;
    color: var(--gray-600);
    padding: 0.2rem 0.5rem 0.35rem 0;
    border-bottom: 1.5px solid var(--gray-200);
    white-space: nowrap;
}
.sc-summary-table td {
    padding: 0.22rem 0.5rem 0.22rem 0;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
}
.sc-summary-table tr:last-child td { border-bottom: none; }
.sc-summary-total td {
    font-weight: 700;
    color: var(--gray-800);
    border-top: 1.5px solid var(--gray-300);
    border-bottom: none;
    padding-top: 0.35rem;
}
.sc-summary-note {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0.6rem 0 0;
    line-height: 1.4;
}

/* Bottom save bar */
.sc-save-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 0 0.5rem;
}
.sc-save-bar--bottom {
    position: sticky;
    bottom: 0;
    background: var(--white);

    padding: 0.9rem 1rem;
    margin-top: 1.5rem;
    z-index: 50;
}
.sc-save-btn--wide {
    min-width: 200px;
    text-align: center;
}
.sc-save-note {
    font-size: 0.8rem;
    color: #b45309;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
}
.sc-unsaved--visible { opacity: 1; }

/* Mobile: Gender hidden; only Name is sticky; every other column shrinks to
   its smallest width and scrolls (behind the pinned Name column) */
@media (max-width: 600px) {
    .sc-col-gender { display: none; }

    /* table-layout: fixed lets us pin exact column widths; the widths sum to
       wider than the viewport so the wrapper's overflow-x: auto kicks in */
    .sc-table {
        table-layout: fixed;
        min-width: 360px;
        width: auto;
    }

    /* Explicit column widths — Name stays readable, the rest are minimal */
    .sc-th-name, .sc-td-name   { width: 140px; }
    .sc-th-team, .sc-td-team   { width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sc-col-shirt               { width: 44px; }
    .sc-col-paid                { width: 44px; }
    .sc-col-bgrd                { width: 48px; }
    .sc-col-health              { width: 50px; }

    /* Tighten cell padding to reclaim horizontal space */
    .sc-th, .sc-td { padding-left: 0.45rem; padding-right: 0.45rem; }

    /* Only the Name column is pinned; all other columns scroll behind it */
    .sc-th-name, .sc-td-name {
        position: sticky;
        left: 0;
        z-index: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 3px 0 5px -1px rgba(0,0,0,0.12);
    }

    /* Name header cell is sticky on both axes → sits above scrolled cells */
    .sc-table thead .sc-th-name { z-index: 3; background: var(--purple); }

    /* Opaque backgrounds so scrolled columns hide behind the pinned Name */
    .sc-td-name { background: var(--white); }
    .sc-row:nth-child(even) .sc-td-name { background: var(--gray-50); }
    .sc-row:hover .sc-td-name { background: #f3eeff; }

    /* Stack the top bar */
    .sc-top-bar { flex-direction: column; gap: 0.75rem; }
}

@media (max-width: 860px) {
    .sc-summary-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .sc-summary-grid { grid-template-columns: 1fr; }
}

/* ── Support Checklist — Payment Links send panel ─────────────────────────── */
.pls-view-toggle {
    display: inline-flex;
    margin: 0 0 1.25rem;
    border: 1.5px solid var(--gray-200, #e5e7eb);
    border-radius: 9px;
    overflow: hidden;
}
.pls-tab {
    appearance: none;
    border: 0;
    background: var(--white, #fff);
    color: var(--purple, #723063);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
}
.pls-tab + .pls-tab { border-left: 1.5px solid var(--gray-200, #e5e7eb); }
.pls-tab-active { background: var(--purple, #723063); color: #fff; }

.pls-intro {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--gray-600, #4b5563);
    line-height: 1.55;
}

.pls-filter-bar { margin: 0 0 1rem; }
.pls-filter-bar input {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
}
.pls-filter-bar input:focus {
    outline: none;
    border-color: #723063;
    box-shadow: 0 0 0 2px rgba(114,48,99,0.15);
}

.pls-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.85rem;
}
.pls-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white, #fff);
}
.pls-card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--purple, #723063);
    color: #fff;
    padding: 0.55rem 0.85rem;
}
.pls-name { font-weight: 700; font-size: 0.95rem; }
.pls-card-hd .sc-team-pill { background: rgba(255,255,255,0.22); color: #fff; }
.pls-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem 0.85rem;
}
.pls-recipients { display: flex; flex-direction: column; gap: 0.5rem; }
.pls-rcpt {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #342e3c;
    cursor: pointer;
}
.pls-rcpt input {
    accent-color: var(--purple);
    width: 16px;
    height: 16px;
    margin-top: 0.1rem;
    flex: 0 0 auto;
    cursor: pointer;
}
.pls-rcpt-text { display: flex; flex-direction: column; line-height: 1.25; }
.pls-rcpt-label { font-weight: 600; }
.pls-email {
    color: var(--gray-500, #6b7280);
    font-size: 0.78rem;
    word-break: break-all;
}
.pls-sent {
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
    color: #1f7a32;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.pls-noemail {
    margin: 0;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--gray-500, #6b7280);
}
.pls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pls-send-btn { padding: 0.4rem 1.1rem; font-size: 0.85rem; }
.pls-copy-btn { padding: 0.4rem 1rem; font-size: 0.85rem; }
.pls-all-paid,
.pls-no-results { color: var(--gray-600, #4b5563); font-size: 0.9rem; }

@media (max-width: 600px) {
    .pls-list { grid-template-columns: 1fr; }
    .pls-actions > .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 480px) {
    .pls-view-toggle { display: flex; flex-wrap: wrap; width: 100%; }
    .pls-tab { flex: 1 1 auto; padding: 0.5rem 0.6rem; font-size: 0.82rem; text-align: center; }
    .pls-tab + .pls-tab { border-left: 1.5px solid var(--gray-200, #e5e7eb); }
}


/* ── SPEAKER REQUEST SHEET (form) ────────────────────────────────────────── */

/* Flash / error banners */
.srs-flash {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #d1fae5;
    color: #065f46;
    border: 1.5px solid #6ee7b7;
    border-radius: 10px;
    padding: 0.8rem 1.1rem;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}
.srs-alert {
    background: #fef3c7;
    color: #92400e;
    border: 1.5px solid #fcd34d;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}

/* Talk info card */
.srs-info-card {
    background: var(--purple);
    border: none;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.srs-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.7rem 1.5rem;
}
.srs-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.srs-info-card .srs-info-label {
    color: rgba(255,255,255,0.65);
}
.srs-info-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
}
.srs-wheat-notice {
    margin-top: 0.9rem;
    padding: 0.6rem 0.9rem;
    background: #fef3c7;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #92400e;
}

/* Intro paragraphs */
.srs-intro {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

/* Form sections */
.srs-section {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.srs-section-hd {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-dark);
    margin: 0 0 0.4rem;
    padding: 0;
}
.srs-section-desc {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin: 0 0 0.85rem;
}
.srs-empty {
    font-size: 0.87rem;
    color: var(--gray-400);
    font-style: italic;
}

/* Checkbox rows */
.srs-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--gray-700);
    line-height: 1.5;
}
.srs-check-row:last-child { border-bottom: none; }
.srs-check-row input[type="checkbox"] {
    accent-color: var(--purple);
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Guest rows */
.srs-guests { display: flex; flex-direction: column; gap: 0.75rem; }
.srs-guest-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.srs-guest-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--purple);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.55rem; /* align with input, not label */
}
.srs-guest-fields {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 0.6rem;
}

/* Labelled field group */
.srs-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.srs-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
}

.srs-input {
    padding: 0.52rem 0.75rem;
    border: 1.5px solid var(--gray-400);
    border-radius: 7px;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--gray-50);
    transition: border-color 0.15s, background 0.15s;
}
.srs-input:focus {
    border-color: var(--purple);
    background: var(--white);
}

/* Textarea */
.srs-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--gray-400);
    border-radius: 7px;
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    background: var(--gray-50);
    transition: border-color 0.15s, background 0.15s;
}
.srs-textarea:focus {
    border-color: var(--purple);
    background: var(--white);
}

/* Submit bar */
.srs-submit-bar {
    padding: 1rem 0 0.5rem;
    display: flex;
    justify-content: center;
}

@media (max-width: 580px) {
    .srs-guest-fields { grid-template-columns: 1fr; }
    .srs-guest-num { margin-top: 0; align-self: center; }
    .srs-submit-bar { justify-content: stretch; }
    .srs-submit-bar .btn { width: 100%; text-align: center; }
}

/* ── SPEAKER REQUEST SHEETS COMPLETED (view/print) ───────────────────────── */

/* Print button bar */
.src-print-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.src-filter-select {
    font-size: 0.88rem;
    padding: 0.35rem 0.6rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 6px;
    color: var(--gray-700);
    background: var(--white);
    cursor: pointer;
}
.src-filter-select:focus { outline: 2px solid var(--purple); outline-offset: 2px; }

.src-duplex-blank { display: none; }

.src-tec-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-600);
}

/* Individual speaker card */
.src-speaker-card {
    background: var(--white);
    border: 2px solid var(--purple);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
    page-break-after: always;
    break-after: page;
}

/* Card header */
.src-card-hd {
    background: var(--purple);
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.src-card-hd-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}
.src-logo {
    height: 48px;
    width: auto;
    flex-shrink: 0;
}
.src-card-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0.15rem;
}
.src-card-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
}
.src-talk-title {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    margin-top: 0.15rem;
}
.src-unassigned {
    font-style: italic;
    opacity: 0.75;
}

/* Talk details row */
.src-details-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    padding: 0.65rem 1.25rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.85rem;
    color: var(--gray-700);
}

/* Guardian Angel fill-in */
.src-angel-row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.85rem;
}

.src-angel-line {
    flex: 1;
    border-bottom: 1.5px solid var(--gray-400);
    min-width: 80px;
    margin-top: 2px;
}

/* Three-column personnel row */
.src-personnel-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--gray-200);
}
.src-personnel-col {
    padding: 0.6rem 1.25rem;
    border-right: 1px solid var(--gray-100);
}
.src-personnel-col:last-child { border-right: none; }
.src-personnel-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-500);
    margin-bottom: 0.2rem;
}
.src-personnel-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
}

/* Content sections */
.src-section {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
}
.src-section:last-of-type { border-bottom: none; }
.src-section-hd {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--purple-dark);
    margin: 0 0 0.4rem;
    padding: 0;
}
.src-prayup-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.88rem;
    color: var(--gray-700);
    line-height: 1.6;
}
.src-prayup-list li { margin-bottom: 0.2rem; }
.src-empty {
    font-size: 0.86rem;
    color: var(--gray-400);
    margin: 0;
}

/* Guest grid (2 columns) */
.src-guest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem 1.5rem;
}
.src-guest-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.87rem;
}
.src-guest-name { font-weight: 600; color: var(--gray-800); }
.src-guest-phone { color: var(--gray-500); font-size: 0.82rem; }

/* Body text (Bible verses / prayer requests) */
.src-body-text {
    font-size: 0.88rem;
    color: var(--gray-700);
    line-height: 1.65;
    margin: 0;
}

/* Guardian Angel note footer */
.src-angel-note {
    padding: 0.6rem 1.25rem 0.85rem;
    font-size: 0.82rem;
    color: var(--gray-600);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    line-height: 1.5;
}

/* Phase dividers (Pray Up / Pray Down labels) */
.src-phase-hd {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #fff;
    background: #5b2067;
    padding: 0.3rem 1.25rem;
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Step / procedural text */
.src-step-text {
    font-size: 0.87rem;
    color: var(--gray-700);
    line-height: 1.65;
    margin: 0.25rem 0;
}
.src-step-list {
    margin: 0.25rem 0;
    padding-left: 1.5rem;
    font-size: 0.87rem;
    color: var(--gray-700);
    line-height: 1.7;
}

/* Checkbox-style checklist */
.src-checklist {
    list-style: none;
    margin: 0.25rem 0;
    padding-left: 0.1rem;
    font-size: 0.87rem;
    color: var(--gray-700);
    line-height: 1.9;
}
.src-checklist li { display: flex; align-items: baseline; gap: 0.5rem; }
.src-checklist li::before { content: '☐'; flex-shrink: 0; color: var(--gray-500); }

/* Read-aloud script blocks */
.src-script-block {
    background: #fffbeb;
    border: 1.5px solid #b45309;
    border-radius: 6px;
    padding: 0.55rem 0.8rem;
    margin: 0.4rem 0;
    font-style: italic;
    font-size: 0.86rem;
    color: #1a1a1a;
    line-height: 1.65;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.src-script-label {
    display: block;
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b45309;
    margin-bottom: 0.2rem;
}

/* Ritual item blocks */
.src-ritual-block {
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.5rem;
    background: var(--gray-50);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.src-ritual-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: #5b2067;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}
.src-ritual-note {
    font-size: 0.82rem;
    color: var(--gray-600);
    margin-top: 0.35rem;
    line-height: 1.5;
    font-style: italic;
}

/* Selected prayer style blocks */
.src-prayer-block {
    border: 1.5px solid #723063;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.4rem;
    background: #faf5ff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.src-prayer-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: #723063;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

/* Write-in lines */
.src-write-in-prompt {
    font-size: 0.81rem;
    color: var(--gray-500);
    font-style: italic;
    margin: 0.4rem 0 0.1rem;
}
.src-write-in-line {
    border-bottom: 1px solid var(--gray-400);
    margin: 0.5rem 0;
    min-height: 1.3rem;
}

/* Print styles */
@page { margin: 0.5in; }

@media print {
    .no-print,
    nav, .page-header, .page-subnav, footer,
    .src-print-bar, .photo-strip {
        display: none !important;
    }
    body { font-size: 13pt; color: #000; background: #fff; }
    .src-speaker-card {
        border: 1.5pt solid #723063;
        box-shadow: none;
        margin-bottom: 0;
        break-before: page;
        page-break-before: always;
    }
    /* Blank back page inserted after a talk that ends on an odd page
       (Double-sided option) so the next talk starts on a fresh sheet. */
    .src-duplex-blank {
        display: block;
        height: 1px;
        break-before: page;
        page-break-before: always;
    }
    .src-card-hd { background: #723063 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .src-logo { height: 36pt; }
    .src-section { padding: 0.4rem 1rem; }
    .src-guest-grid { grid-template-columns: repeat(2, 1fr); }
    section { padding: 0 !important; }
    .section-inner { max-width: 100% !important; padding: 0 !important; }

    /* Pray-Up + Pray-Down Prayer Styles side by side */
    .src-prayer-styles-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid var(--gray-100, #f3f4f6);
    }
    .src-prayer-styles-row .src-section {
        border-bottom: none;
        border-right: 1px solid #ccc;
    }
    .src-prayer-styles-row .src-section:last-child {
        border-right: none;
    }

    /* Bible Verses + Prayer Requests side by side */
    .src-verse-prayer-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .src-verse-prayer-row .src-section {
        border-bottom: none;
        border-right: 1px solid #ccc;
    }
    .src-verse-prayer-row .src-section:last-child {
        border-right: none;
    }

    /* Script/guide elements */
    .src-phase-hd { background: #5b2067 !important; }
    .src-script-block { background: #fffbeb !important; page-break-inside: avoid; break-inside: avoid; }
    .src-ritual-block { background: #f9fafb !important; page-break-inside: avoid; break-inside: avoid; }
    .src-prayer-block { background: #faf5ff !important; page-break-inside: avoid; break-inside: avoid; }
    .src-write-in-line { margin: 0.6rem 0; }
}

@media (max-width: 560px) {
    .src-card-hd-left { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .src-logo { height: 36px; }
    .src-guest-grid { grid-template-columns: 1fr; }
}

/* ── TABLE COMMISSIONING PLANNER ─────────────────────────────────────────── */

/* Flash banner */
.tcp-flash {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #d1fae5;
    color: #065f46;
    border: 1.5px solid #6ee7b7;
    border-radius: 10px;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}

/* Save bars */
.tcp-save-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.tcp-save-bar--bottom {
    position: sticky;
    bottom: 0;
    background: var(--white);

    padding: 0.9rem 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
    z-index: 50;
}
.tcp-save-btn {
    padding: 0.6rem 1.5rem;
    background: var(--purple);
    color: var(--white);
    border: none;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background var(--transition);
    white-space: nowrap;
}
.tcp-save-btn:hover { background: var(--purple-dark); }
.tcp-unsaved-note {
    font-size: 0.8rem;
    color: #b45309;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
}
.tcp-unsaved--visible { opacity: 1; }

/* Scrollable table wrapper */
.tcp-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    margin-bottom: 0.5rem;
}

/* Main table */
.tcp-table {
    border-collapse: collapse;
    min-width: 900px;
    width: 100%;
    font-size: 13px;
}

/* Sticky header */
.tcp-thead {
    position: sticky;
    top: 0;
    z-index: 10;
}
.tcp-th {
    background: var(--purple);
    color: var(--white);
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.6rem 0.75rem;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.2);
}
.tcp-th:last-child { border-right: none; }
.tcp-th-info {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 11;
    min-width: 170px;
    border-right: 2px solid rgba(255,255,255,0.35);
}

/* Table info cell */
.tcp-td-info {
    vertical-align: top;
    padding: 10px 12px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    border-right: 2px solid var(--gray-300);
    min-width: 170px;
    position: sticky;
    left: 0;
    z-index: 2;
}
.tcp-tr:nth-child(even) .tcp-td-info { background: var(--white); }
.tcp-tr:hover .tcp-td-info { background: var(--purple-pale); }

.tcp-info-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--purple-dark);
    line-height: 1.3;
    margin-bottom: 2px;
}
.tcp-info-atl { font-size: 12px; color: var(--gray-700); margin-top: 1px; }
.tcp-info-room,
.tcp-info-phone { font-size: 11px; color: var(--gray-500); margin-top: 1px; }

/* Activity summary list */
.tcp-status-list {
    margin-top: 7px;
    list-style: none;
    padding: 0;
    font-size: 11px;
    line-height: 1.75;
}
.tcp-status-list li { margin: 0; }

/* Step cells (columns 1-6) */
.tcp-td-step {
    vertical-align: top;
    padding: 8px 10px;
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    min-width: 130px;
    background: var(--white);
}
.tcp-tr:nth-child(even) .tcp-td-step { background: var(--gray-50); }
.tcp-tr:hover .tcp-td-step { background: #f9f3ff; }

.tcp-tr:last-child .tcp-td-step,
.tcp-tr:last-child .tcp-td-info,
.tcp-tr:last-child .tcp-td-clean { border-bottom: none; }

/* Step column header label (hidden on desktop, shown on mobile) */
.tcp-step-label {
    display: none;
}

/* Field groups inside step cell */
.tcp-step-field { margin-bottom: 5px; }
.tcp-step-field:last-child { margin-bottom: 0; }
.tcp-field-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.tcp-select,
.tcp-time-input {
    width: 100%;
    font-size: 12px;
    padding: 4px 6px;
    border: 1.5px solid var(--gray-300);
    border-radius: 5px;
    background: var(--white);
    color: var(--gray-900);
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s;
}
.tcp-select:focus,
.tcp-time-input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 2px rgba(114,48,99,0.1);
}
.tcp-time-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tcp-time-input { flex: 1; min-width: 0; }

/* "Set now" clock button */
.tcp-now-btn {
    background: none;
    border: none;
    padding: 2px 3px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--gray-400);
    border-radius: 4px;
    position: relative;
    transition: color var(--transition);
    flex-shrink: 0;
}
.tcp-now-btn:hover { color: var(--purple); }

/* Tooltip */
.tcp-now-btn::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 20;
}
.tcp-now-btn:hover::after { opacity: 1; }

/* Live elapsed timer */
.tcp-timer {
    font-size: 11px;
    color: #0d6efd;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

/* Notes textarea */
.tcp-textarea {
    width: 100%;
    font-size: 11px;
    padding: 4px 6px;
    border: 1.5px solid var(--gray-300);
    border-radius: 5px;
    background: var(--white);
    resize: vertical;
    min-height: 42px;
    font-family: 'Inter', sans-serif;
    color: var(--gray-900);
    transition: border-color 0.15s;
}
.tcp-textarea:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 2px rgba(114,48,99,0.1);
}

/* Breakout sub-checkboxes */
.tcp-breakout-checks {
    display: none;
    margin-top: 4px;
    padding: 4px 0 2px;
    border-top: 1px dashed var(--gray-200);
}
.tcp-breakout-checks label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 1.7;
    cursor: pointer;
    color: var(--gray-700);
}
.tcp-breakout-checks input[type="checkbox"] {
    accent-color: var(--purple);
    flex-shrink: 0;
}

/* Clean table cell */
.tcp-td-clean {
    vertical-align: middle;
    text-align: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--gray-200);
    min-width: 56px;
    background: var(--white);
}
.tcp-tr:nth-child(even) .tcp-td-clean { background: var(--gray-50); }
.tcp-tr:hover .tcp-td-clean { background: #f9f3ff; }

.tcp-clean-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--gray-600);
    cursor: pointer;
    font-weight: 600;
}
.tcp-clean-label input[type="checkbox"] {
    accent-color: var(--purple);
    width: 18px;
    height: 18px;
}

/* ── Mobile: card-per-table layout ──────────────────────────────────────── */
@media (max-width: 860px) {
    .tcp-wrap {
        border: none;
        border-radius: 0;
        overflow: visible;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .tcp-table {
        display: block;
        min-width: 0;
        width: 100%;
    }
    .tcp-thead { display: none; }
    .tcp-tbody { display: block; }

    /* Each row becomes a card */
    .tcp-tr {
        display: block;
        background: var(--white);
        border: 1.5px solid var(--gray-200);
        border-radius: 12px;
        margin: 0 1.5rem 1.25rem;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    /* Info cell → purple card header */
    .tcp-td-info {
        display: block;
        position: static;
        background: var(--purple) !important;
        color: var(--white);
        padding: 12px 16px;
        border-right: none;
        border-bottom: none;
        min-width: 0;
        z-index: auto;
    }
    .tcp-info-name { color: var(--white); font-size: 15px; }
    .tcp-info-atl  { color: rgba(255,255,255,0.85); }
    .tcp-info-room,
    .tcp-info-phone { color: rgba(255,255,255,0.7); }

    /* Status summary inline on mobile header */
    .tcp-status-list {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 10px;
        margin-top: 8px;
        font-size: 11px;
        color: rgba(255,255,255,0.9);
    }

    /* Step cells stacked */
    .tcp-td-step {
        display: block;
        background: var(--white) !important;
        border-right: none;
        border-bottom: 1px solid var(--gray-100);
        padding: 10px 16px;
        min-width: 0;
    }

    .tcp-step-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--purple);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin: -10px -16px 10px;
        padding: 6px 16px;
        background: #f0e8f5;
        border-bottom: 1px solid #ddd0e8;
    }

    /* On mobile: activity + times side by side */
    .tcp-mobile-row {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 5px;
    }
    .tcp-mobile-activity { flex: 0 0 100%; }
    .tcp-mobile-time     { flex: 1; min-width: 100px; }

    /* Clean cell */
    .tcp-td-clean {
        display: block;
        background: var(--white) !important;
        text-align: left;
        border-bottom: none;
        border-top: 1px solid var(--gray-100);
        padding: 10px 16px;
    }
    .tcp-clean-label {
        flex-direction: row;
        gap: 8px;
        font-size: 13px;
        color: var(--gray-700);
    }
    .tcp-clean-label br { display: none; }
}

/* ── TABLE LEADER EVAL (te-) ─────────────────────────────────────────────── */
.te-instructions {
    color: var(--gray-700);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.te-instructions strong { color: var(--text); }

.te-form-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.te-field-group {
    margin-bottom: 1.25rem;
}
.te-field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.4rem;
}
.te-select {
    width: 100%;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--gray-400);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    background: var(--gray-50);
    color: var(--text);
    cursor: pointer;
}
.te-select:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(114,48,99,0.12);
}

/* AJAX-loaded member area */
.te-members-wrap {
    margin-top: 0.25rem;
}
.te-no-data {
    color: var(--gray-500);
    font-style: italic;
    padding: 1rem 0;
}
.te-weekender {
    border-top: 1px solid var(--gray-200);
    padding: 1rem 0 0.5rem;
}
.te-weekender:first-child { border-top: none; padding-top: 0; }
.te-weekender-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--purple-dark);
    margin-bottom: 0.5rem;
}
.te-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--gray-400);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    background: var(--gray-50);
    color: var(--text);
    resize: vertical;
    min-height: 80px;
}
.te-textarea:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(114,48,99,0.12);
}
.te-submit-bar {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
}
.te-submit-btn {
    padding: 0.65rem 2rem;
    background: var(--purple);
    color: var(--white);
    border: none;
    border-radius: 9px;
    font-size: 0.975rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background var(--transition);
    min-width: 180px;
}
.te-submit-btn:hover { background: var(--purple-dark); }
.te-submit-btn:disabled {
    background: var(--gray-400);
    cursor: default;
}

.te-flash {
    background: #d1fae5;
    border: 1.5px solid #6ee7b7;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    color: #065f46;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.te-error {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    padding: 0.85rem 1.25rem;
    color: #991b1b;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.te-privacy-note {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-top: 0.5rem;
    font-style: italic;
}

/* ── LEADERSHIP EVAL (tev-) ──────────────────────────────────────────────── */
.tev-flash {
    background: #d1fae5;
    border: 1.5px solid #6ee7b7;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    color: #065f46;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.tev-error {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    padding: 0.85rem 1.25rem;
    color: #991b1b;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.tev-intro {
    color: var(--gray-700);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.tev-card {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}
.tev-card-hd {
    background: var(--purple);
    border-bottom: 1.5px solid var(--purple-dark);
    padding: 0.85rem 1.25rem;
}
.tev-card-hd h3 {
    margin: 0;
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--white);
}
.tev-card-hd p {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.8);
}
.tev-card-body {
    padding: 1.25rem;
}
.tev-field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.4rem;
}
.tev-select-lg {
    width: 100%;
    max-width: 340px;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--gray-400);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    background: var(--gray-50);
    color: var(--text);
}
.tev-select-lg:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(114,48,99,0.12);
}
/* Recommendation grid */
.tev-rec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.tev-rec-col-hd {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}
.tev-rec-col-note {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-style: italic;
    margin-bottom: 0.6rem;
}
.tev-rec-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.3rem;
}
.tev-rec-num {
    font-size: 0.72rem;
    color: var(--gray-400);
    width: 1.1rem;
    text-align: right;
    flex-shrink: 0;
}
.tev-select {
    flex: 1;
    min-width: 0;
    padding: 0.28rem 0.45rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    background: var(--gray-50);
    color: var(--text);
}
.tev-select:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 2px rgba(114,48,99,0.10);
}
/* Textareas */
.tev-desc {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.65;
    margin-bottom: 0.85rem;
}
.tev-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--gray-400);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    background: var(--gray-50);
    color: var(--text);
    resize: vertical;
}
.tev-textarea:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(114,48,99,0.12);
}
/* General comments */
.tev-comment-box {
    border: 1.5px solid var(--gray-200);
    border-radius: 9px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--gray-50);
}
.tev-comment-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.tev-comment-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-700);
}
.tev-comment-del {
    font-size: 0.75rem;
    color: var(--gray-500);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
}
.tev-comment-del:hover { color: #991b1b; background: #fef2f2; }
.tev-add-btn {
    margin-top: 0.5rem;
    padding: 0.45rem 1.1rem;
    background: transparent;
    border: 1.5px solid var(--purple);
    color: var(--purple);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.tev-add-btn:hover { background: var(--purple); color: var(--white); }
/* Submit bar */
.tev-submit-bar {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0.5rem;
}
.tev-submit-btn {
    padding: 0.7rem 2.5rem;
    background: var(--purple);
    color: var(--white);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background var(--transition);
    min-width: 220px;
}
.tev-submit-btn:hover { background: var(--purple-dark); }

/* 2-column card grid for recommendation pairs */
.tev-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.tev-cards-grid .tev-card {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .tev-rec-grid    { grid-template-columns: 1fr; }
    .tev-cards-grid  { grid-template-columns: 1fr; }
}

/* ── TABLE INFORMATION EDITOR (tie-) ────────────────────────────────────── */
.tie-flash {
    background: #d1fae5;
    border: 1.5px solid #6ee7b7;
    color: #065f46;
    border-radius: 10px;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}
.tie-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.tie-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
.tie-input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 7px;
    font-size: 0.92rem;
    font-family: 'Inter', sans-serif;
    color: var(--gray-800);
    background: var(--white);
    box-sizing: border-box;
    transition: border-color var(--transition);
}
.tie-input:focus {
    outline: none;
    border-color: var(--purple);
}
@media (max-width: 480px) {
    .tie-field-row { grid-template-columns: 1fr; }
}


/* ── COMMON TEAMS (ct-) ─────────────────────────────────────────────────── */
.ct-form-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e4dfe4;
    box-shadow: 0 2px 8px rgba(114,48,99,.08);
    padding: 1.5rem;
    max-width: 680px;
    margin: 1.5rem auto 0;
}
.ct-people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
}
.ct-person-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.ct-person-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #6b6578;
}
/* Remove (×) buttons only matter above the two-person minimum. */
.ct-people:not(.ct-removable) .ct-remove-person { display: none; }
.ct-remove-person {
    border: none;
    background: none;
    color: #a05a8f;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    border-radius: 6px;
}
.ct-remove-person:hover { color: #4e1f44; background: #f3e9f1; }
.ct-add-row { margin-top: 1rem; }
.ct-add-person {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    background: #fff;
    border: 1.5px dashed var(--purple);
    color: var(--purple);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.ct-add-person:hover { background: #f9f5f9; }
.ct-add-person[hidden] { display: none; }
.ct-filter-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.ct-filter-input {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid #e4dfe4;
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    color: #1a1020;
    box-sizing: border-box;
}
.ct-filter-input:focus { outline: none; border-color: var(--purple); }
.ct-filter-btn {
    padding: 0.45rem 0.7rem;
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
}
.ct-filter-btn:hover { background: #4e1f44; }
.ct-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid #e4dfe4;
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    color: #1a1020;
    background: #fff;
    box-sizing: border-box;
}
.ct-select:focus { outline: none; border-color: var(--purple); }
.ct-member-count {
    font-size: 0.7rem;
    color: #9b8fa8;
    margin-top: 0.3rem;
}
.ct-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f2eff2;
    gap: 1rem;
}
.ct-same-team-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #4e1f44;
    cursor: pointer;
}
.ct-same-team-label input[type="checkbox"] {
    accent-color: var(--purple);
}
.ct-search-btn {
    padding: 0.55rem 1.4rem;
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.2s;
    white-space: nowrap;
}
.ct-search-btn:hover { background: #4e1f44; }

/* Results */
.ct-results-heading {
    font-size: 0.95rem;
    color: #4e1f44;
    margin: 2rem 0 1rem;
    text-align: center;
}
.ct-results-heading em {
    font-style: normal;
    font-weight: 700;
    color: #1a1020;
}
.ct-table-wrap {
    width: fit-content;      /* size to the table's content… */
    max-width: 100%;         /* …but never past the section, then scroll */
    margin: 0 auto;
    overflow-x: auto;
}
.ct-table {
    width: 100%;
    min-width: 860px;        /* floor: the pre-multi-person width */
    border-collapse: collapse;
    font-size: 0.875rem;
}
.ct-table thead tr {
    background: var(--purple);
    color: #fff;
}
.ct-table th {
    padding: 0.6rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-align: left;
    white-space: nowrap;
}
.ct-table tbody tr {
    border-bottom: 1px solid #f0ecf0;
}
.ct-table tbody tr:hover {
    background: #faf7fa;
}
.ct-table td {
    padding: 0.55rem 1rem;
    vertical-align: middle;
}
.ct-col-tec {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--purple);
    white-space: nowrap;
}
.ct-col-date {
    white-space: nowrap;
    color: #555;
    font-size: 0.8rem;
}
.ct-team-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 99px;
    border: 1.5px solid var(--purple);
    color: var(--purple);
    background: #f9f5f9;
    white-space: nowrap;
    min-width: 6rem;
    text-align: center;
}
.ct-col-church {
    color: #333;
}
.ct-church-city {
    color: #999;
    font-size: 0.8rem;
    margin-left: 0.35rem;
}
.ct-empty {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 2.5rem 0;
}

@media (max-width: 560px) {
    .ct-people { grid-template-columns: 1fr; }
    .ct-controls { flex-direction: column; align-items: stretch; }
    .ct-search-btn { text-align: center; }

    /* Drop the desktop width floor so the card layout fits the phone. */
    .ct-table-wrap { width: auto; }
    .ct-table { min-width: 0; }

    /* Collapse table into labeled cards */
    .ct-table thead { display: none; }
    .ct-table tbody tr {
        display: block;
        border: 1px solid #e4dfe4;
        border-radius: 10px;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        box-shadow: 0 1px 4px rgba(114,48,99,.06);
    }
    .ct-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0;
        border-bottom: 1px solid #f5f2f5;
        font-size: 0.82rem;
    }
    .ct-table td:last-child { border-bottom: none; }
    .ct-table td::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #9b8fa8;
        flex-shrink: 0;
        margin-right: 0.75rem;
    }
    .ct-col-tec { font-size: 0.95rem; }
}

/* ── ACCEPTED LEADERSHIP (al-) ───────────────────────────────────────────── */
.al-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .al-grid { grid-template-columns: repeat(2, 1fr); }
}

.al-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.al-card-header {
    background: var(--purple);
    color: #fff;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.al-card-header h3 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.al-badge {
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}

.al-members {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    flex: 1;
}
.al-members li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    color: #333;
    line-height: 1.3;
    border-bottom: 1px solid #f0eaf3;
}
.al-members li:last-child {
    border-bottom: none;
}

.al-avatar-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--purple);
    opacity: 0.55;
}

.al-summary {
    max-width: 860px;
    margin-top: 1.75rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75rem 1.1rem;
    background: #f6f0f5;
    border-left: 4px solid var(--purple);
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    color: #555;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.al-summary strong {
    color: var(--purple);
}

@media (max-width: 480px) {
    .al-grid { grid-template-columns: 1fr; }
}

/* ── AC ELIGIBILITY (acs-) ───────────────────────────────────────────────── */
.acs-criteria {
    background: #f6f0f5;
    border-left: 4px solid var(--purple);
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.acs-criteria-heading {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--purple);
}
.acs-criteria-list {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #444;
    line-height: 1.7;
}
.acs-criteria-note {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.acs-star {
    color: var(--purple);
    font-size: 0.8rem;
    margin-right: 4px;
    vertical-align: middle;
    opacity: 0.75;
}

.acs-section {
    max-width: 860px;
    margin: 0 auto 2rem;
}
.acs-section-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e8dded;
}

.acs-table-wrap {
    overflow-x: auto;
}
.acs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.acs-table thead th {
    text-align: center;
    padding: 7px 10px;
    background: var(--purple);
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}
.acs-th-name {
    text-align: left !important;
}
.acs-table tbody tr {
    border-bottom: 1px solid #f0eaf3;
}
.acs-table tbody tr:last-child {
    border-bottom: none;
}
.acs-table tbody tr:nth-child(even) td {
    background: #faf7fb;
}
.acs-row-exp td {
    background: #fff8f0 !important;
}
.acs-table td {
    padding: 6px 10px;
    vertical-align: middle;
}
.acs-num {
    text-align: center;
    color: #555;
}
.acs-name-link {
    color: inherit;
    text-decoration: none;
}
.acs-name-link:hover {
    text-decoration: underline;
    color: var(--purple);
}
.acs-name-exp {
    font-weight: 600;
}

/* ── TEAM MEMBER PAGE (tm-) ──────────────────────────────────────────────── */

/* Two-column layout */
.tm-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.75rem;
    align-items: start;
}

/* Sidebar */
.tm-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 76px;
}

/* Cards */
.tm-card {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid #e4dfe4;
    box-shadow: 0 2px 8px rgba(114,48,99,.08);
}
.tm-card-head {
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid #f2eff2;
    border-radius: 12px 12px 0 0;
}
.tm-card-head h3 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b6578;
    margin: 0;
}
.tm-card-hint {
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #6b6578;
    text-transform: none;
    letter-spacing: 0;
}
.tm-card-hint strong { color: #723063; font-weight: 700; }
.tm-card-body {
    padding: 1rem 1.2rem;
}

/* Filter */
.tm-filter-row {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}
.tm-filter-input {
    flex: 1;
    padding: 0.55rem 0.85rem;
    border: 1.5px solid #e4dfe4;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    color: #1a1020;
    transition: border-color 0.22s ease;
}
.tm-filter-input:focus {
    outline: none;
    border-color: var(--purple);
}
.tm-filter-btn {
    padding: 0.55rem 0.85rem;
    background: var(--purple);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.22s ease;
    font-family: 'Inter', sans-serif;
}
.tm-filter-btn:hover { background: #4e1f44; }
.tm-filtered-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f5eef3;
    color: #4e1f44;
    border-radius: 20px;
    padding: 0.15rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}
.tm-filtered-tag a {
    color: var(--purple);
    text-decoration: none;
    font-weight: 700;
}

/* Member dropdown */
.tm-member-select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid #e4dfe4;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    color: #1a1020;
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.22s ease;
}
.tm-member-select:focus {
    outline: none;
    border-color: var(--purple);
}
.tm-member-count {
    font-size: 0.75rem;
    color: #6b6578;
    margin-top: 0.4rem;
}

/* Detail panel */
.tm-detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Empty state */
.tm-empty {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid #e4dfe4;
    padding: 3.5rem 2rem;
    text-align: center;
    color: #6b6578;
}
.tm-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.tm-empty h3 {
    color: #4e1f44;
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

/* Profile card */
.tm-profile-body {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.tm-profile-photo {
    width: 150px;
    height: 180px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 3px solid #f2eff2;
}
.tm-profile-info { flex: 1; }
.tm-profile-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1020;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}
.tm-info-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    color: #6b6578;
}
.tm-info-row .tm-label {
    font-weight: 600;
    color: #1a1020;
    min-width: 90px;
    flex-shrink: 0;
}
.tm-info-row a { color: var(--purple); text-decoration: none; }
.tm-info-row a:hover { text-decoration: underline; }
.tm-pill {
    display: inline-block;
    background: #f5eef3;
    color: #4e1f44;
    border-radius: 20px;
    padding: 0.15rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Stats */
.tm-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.tm-stat-box {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid #e4dfe4;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(114,48,99,.08);
}
.tm-sv {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--purple);
    line-height: 1;
}
.tm-sl {
    font-size: 0.72rem;
    color: #6b6578;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
}
.tm-stat-warn .tm-sv { color: #b45309; }
.tm-stat-muted .tm-sv { color: #6b6578; }

/* Church filter summary — shown only while a Location cell filter is active */
.tm-church-summary {
    background: #fff;
    border: 2px solid #723063;
    border-radius: 12px;
    padding: 0.85rem 1.2rem;
    margin-bottom: 1rem;
}
.tm-church-summary[hidden] { display: none; }
.tm-church-summary-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.tm-church-summary-count {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: #723063;
}
.tm-church-summary-text { flex: 1; min-width: 0; }
.tm-church-summary-name {
    display: block;
    font-weight: 700;
    color: #2f2b36;
}
.tm-church-summary-sub {
    display: block;
    font-size: 0.78rem;
    color: #6b6578;
    margin-top: 0.15rem;
}
.tm-church-summary-clear {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #d8cfd6;
    background: #fff;
    color: #6b6578;
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.tm-church-summary-clear:hover { background: #f5eef3; color: #723063; }
.tm-church-summary-btn {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #723063;
    background: #fff;
    color: #723063;
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.tm-church-summary-btn:hover { background: #f5eef3; }
.tm-church-summary-btn[hidden] { display: none; }

/* Every TEC the church has hosted */
.tm-church-tecs {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f2eff2;
}
.tm-church-tecs[hidden] { display: none; }
.tm-church-tecs-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    margin: 0 0 0.7rem;
    font-size: 0.76rem;
    color: #6b6578;
}
.tm-tec-key { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.tm-tec-key-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 1px solid #e4dfe4;
    background: #fbfafb;
}
.tm-tec-key--worked    { background: #723063; border-color: #723063; }
.tm-tec-key--weekender { background: #fff6e5; border-color: #e0a92a; }
.tm-tec-key--upcoming  { background: #fff; border-color: #c9bfc7; border-style: dashed; }
.tm-church-tecs-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b6578;
    margin: 0.6rem 0 0.4rem;
}
.tm-church-tecs-head:first-child { margin-top: 0; }
/* Equal-width pills that stretch to fill each row. auto-fit collapses the
   track count to what fits, and the 1fr max shares the leftover space out. */
.tm-church-tec-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.4rem;
}
.tm-church-tec {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid #e4dfe4;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 0.78rem;
    background: #fbfafb;
    color: #6b6578;
    transition: box-shadow 0.15s, transform 0.05s;
}
.tm-church-tec:hover { box-shadow: 0 1px 6px rgba(114,48,99,0.22); }
.tm-church-tec:active { transform: translateY(1px); }
.tm-church-tec:focus-visible { outline: 2px solid #723063; outline-offset: 2px; }
.tm-church-tec b { font-weight: 700; font-style: normal; }
.tm-church-tec i { font-style: normal; font-size: 0.72rem; opacity: 0.75; }
.tm-church-tec em {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Weekends the member was actually at stand out from the rest */
.tm-church-tec--worked {
    background: #723063;
    border-color: #723063;
    color: #fff;
}
.tm-church-tec--weekender {
    background: #fff6e5;
    border-color: #e0a92a;
    color: #8a5a00;
}
.tm-church-tec--upcoming {
    border-style: dashed;
    border-color: #c9bfc7;
    background: #fff;
}

/* Team badges */
.tm-teams-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tm-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    background: #f3f4f6;
    color: #374151;
}
.tm-badge-count { font-size: 0.78rem; color: #6b6578; margin-right: 0.4rem; }
.tm-badge--filter {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    border: 2px solid #723063;
    background: #fff;
    color: #723063;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s, color 0.15s;
}
.tm-badge--filter:hover { background: #f5eef3; }
.tm-badge--filter.active { background: #723063; color: #fff; }
.tm-badge-count-inline {
    background: rgba(114,48,99,0.15);
    border-radius: 10px;
    padding: 0 5px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
}
.tm-badge--filter.active .tm-badge-count-inline { background: rgba(255,255,255,0.25); }
/* Weekend history & Leadership history tables — team badges all purple */
#tm-leadership-table .tm-badge,
#tm-weekend-table .tm-badge {
    background: #f5eef3;
    color: #723063;
}
.tm-badge--support  { background: #e8f4fd; color: #1a6fa8; }
.tm-badge--kitchen  { background: #fef3e2; color: #b45309; }
.tm-badge--wheat    { background: #fefce8; color: #a16207; }
.tm-badge--music    { background: #f0fdf4; color: #166534; }
.tm-badge--ac       { background: #fdf4ff; color: #7e22ce; }
.tm-badge--sd       { background: #fff1f2; color: #9f1239; }
.tm-badge--atl      { background: #eff6ff; color: #1d4ed8; }
.tm-badge--ytl      { background: #f0fdfa; color: #0f766e; }
.tm-badge--rector   { background: #faf5ff; color: #6b21a8; }
.tm-badge--photo    { background: #fff7ed; color: #c2410c; }

/* Data table */
.tm-table-wrap { overflow-x: auto; }
.tm-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.tm-data-table thead th {
    background: #faf9fa;
    color: #6b6578;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e4dfe4;
    white-space: nowrap;
}
.tm-th-center { text-align: center !important; }
.tm-data-table tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #f2eff2;
    vertical-align: middle;
}
.tm-data-table tbody tr:last-child td { border-bottom: none; }
.tm-data-table tbody tr:hover td { background: #faf9fa; }
.tm-row-dimmed td { opacity: 0.4; }
.tm-check { color: var(--purple); font-size: 1rem; }
.tm-tec-num { font-weight: 700; color: #1a1020; }
.tm-tec-year { font-size: 0.75rem; color: #6b6578; display: block; }
.tm-col-location { cursor: pointer; }
.tm-col-location:active { background: #f5eef3; }
/* Location cell doubles as a church filter toggle */
.tm-col-church { cursor: pointer; }
.tm-col-church:hover { color: #723063; }
.tm-col-church:active { background: #f5eef3; }
#tm-weekend-table tr.tm-row-church-active .tm-col-church { font-weight: 700; color: #723063; }
.tm-col-short { display: none; }
.tm-footnote {
    font-size: 0.78rem;
    color: #6b6578;
    font-style: italic;
    padding: 0.5rem 1.2rem 1rem;
    margin: 0;
}

/* Location overlay */
#tm-loc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
#tm-loc-overlay.open { display: flex; }
#tm-loc-box {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    max-width: 320px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.5;
}
.tm-loc-tec {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #4e1f44;
    margin-bottom: 0.3rem;
}
.tm-loc-dates { font-size: 0.9rem; color: var(--purple); font-weight: 600; margin-bottom: 0.4rem; }
.tm-loc-place { font-size: 0.9rem; color: #6b6578; }
.tm-loc-leaders {
    font-size: 0.85rem;
    color: #4e1f44;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f2eff2;
    white-space: pre-line;   /* Rector / Rectora arrive on separate lines */
}
.tm-loc-leaders[hidden] { display: none; }
.tm-loc-link {
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--purple);
    border: 1px solid var(--purple);
    border-radius: 20px;
    text-decoration: none;
}
.tm-loc-link:hover { background: #f5eef3; }
.tm-loc-link[hidden] { display: none; }
.tm-loc-dismiss {
    margin-top: 1rem;
    display: inline-block;
    padding: 0.45rem 1.25rem;
    background: var(--purple);
    color: #fff;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
}

/* Responsive */
@media (max-width: 1024px) {
    .tm-wrap { grid-template-columns: 1fr; }
    .tm-sidebar { position: static; }
}
@media (max-width: 560px) {
    .tm-wrap { padding: 1rem 1rem 3rem; }
    .tm-profile-body { flex-direction: column; }
    .tm-stats-row { grid-template-columns: 1fr 1fr; }
    .tm-data-table { font-size: 0.78rem; }
    .tm-data-table thead th { font-size: 0.65rem; padding: 0.45rem 0.5rem; }
    .tm-data-table tbody td { padding: 0.45rem 0.5rem; }
    .tm-col-full { display: none; }
    .tm-col-short { display: inline; }
    .tm-church-summary { padding: 0.75rem 1rem; }
    .tm-church-summary-row { flex-wrap: wrap; gap: 0.5rem 0.8rem; }
    .tm-church-summary-count { font-size: 1.5rem; }
    .tm-church-summary-text { flex-basis: 0; }
    .tm-church-summary-btn,
    .tm-church-summary-clear { order: 3; }
    .tm-church-summary-btn { margin-left: auto; }
    .tm-church-tec-list { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
}

/* ── COUNCIL EMAILS (ce-) ────────────────────────────────────────────────── */
.ce-list {
    max-width: 680px;
    margin: 1.75rem auto 1.5rem;
    border: 1px solid #e4dfe4;
    border-radius: 12px;
    overflow: hidden;
}
.ce-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #f0ecf0;
    transition: background var(--transition);
}
.ce-row:last-child { border-bottom: none; }
.ce-row:hover { background: #faf8fa; }

.ce-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--purple);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ce-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.ce-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ce-position {
    font-size: 0.78rem;
    color: #9b8fa8;
}
.ce-email {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--purple);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}
.ce-email:hover { color: var(--dark); }
.ce-email svg { flex-shrink: 0; }

.ce-count {
    max-width: 680px;
    margin: 0 auto;
    text-align: right;
    font-size: 0.78rem;
    color: #b0a4bb;
}

@media (max-width: 560px) {
    .ce-row { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.85rem 1rem; }
    .ce-email {
        flex-basis: 100%;
        padding-left: 52px; /* avatar width + gap */
        font-size: 0.78rem;
    }
}

/* ── LEADERSHIP LIST (ld-) ───────────────────────────────────────────────── */
.ld-wrap {
    max-width: 680px;
    margin: 1.75rem auto 0;
    border: 1px solid #e4dfe4;
    border-radius: 12px;
    overflow: hidden;
}
.ld-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

/* Header row */
.ld-table thead tr {
    background: #f7f4f7;
}
.ld-table thead th {
    padding: 0.6rem 0.9rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9b8fa8;
    border-bottom: 1px solid #e4dfe4;
    white-space: nowrap;
}
.ld-table thead th a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}
.ld-table thead th a:hover,
.ld-table thead th.ld-sort-active a { color: var(--purple); }

/* Team section header rows */
.ld-table .ld-team-header td {
    padding: 0.45rem 0.9rem;
    background: var(--purple);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ld-table .ld-team-header:first-child td { border-top: none; }

/* Data rows */
.ld-table tbody tr:not(.ld-team-header) {
    border-bottom: 1px solid #f0ecf0;
    transition: background var(--transition);
}
.ld-table tbody tr:not(.ld-team-header):last-child { border-bottom: none; }
.ld-table tbody tr:not(.ld-team-header):hover { background: #faf8fa; }

.ld-table td {
    padding: 0.55rem 0.9rem;
    color: var(--dark);
}

/* Youth (bold) */
.ld-youth td { font-weight: 700; }

/* Inline checkbox + name label */
.ld-first-label {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    cursor: pointer;
}
.ld-check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--purple);
    cursor: pointer;
}

/* Column widths */
.ld-col-team  { width: 34%; }
.ld-col-first { width: 33%; }
.ld-col-last  { width: 33%; }

/* Summary line */
.ld-summary {
    max-width: 680px;
    margin: 0.5rem auto 0;
    text-align: right;
    font-size: 0.78rem;
    color: #b0a4bb;
}

@media (max-width: 480px) {
    .ld-col-team { display: none; }
    .ld-team-header td { font-size: 0.82rem; }
}

/* ── FIRST-TIME TEAM PHOTOS (ftt-) ──────────────────────────────────────── */
.ftt-count {
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 1rem 0 1.5rem;
}
.ftt-empty {
    text-align: center;
    color: var(--gray-500);
    padding: 3rem 0;
}

/* Grid of pair-cards */
.ftt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto 2.5rem;
}

/* Individual pair card */
.ftt-card {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.ftt-card:hover { box-shadow: var(--shadow-md); }

/* Each half of the card */
.ftt-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.1rem 0.9rem 1rem;
    gap: 0.15rem;
}
.ftt-side--first  { background: var(--purple-pale); }
.ftt-side--mentor { background: var(--white); }

/* Role label */
.ftt-role-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--purple);
    margin-bottom: 0.5rem;
}

/* Photo */
.ftt-photo-wrap {
    width: 140px;
    height: 168px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-100);
    margin-bottom: 0.2rem;
}
.ftt-photo-wrap--sm {
    width: 60px;
    height: 72px;
    border-radius: 6px;
}
.ftt-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Name & meta */
.ftt-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: center;
}
.ftt-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-align: center;
}
.ftt-team {
    font-size: 0.72rem;
    color: var(--purple);
    font-weight: 600;
}

/* Mentor item — stacked vertically, same as first-timer side */
.ftt-mentor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    width: 100%;
}
.ftt-mentor-item + .ftt-mentor-item {
    border-top: 1px solid var(--gray-200);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

/* Vertical divider between the two halves */
.ftt-divider {
    width: 1px;
    background: var(--gray-200);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .ftt-grid { grid-template-columns: 1fr; }
    .ftt-card { flex-direction: column; }
    .ftt-divider { width: auto; height: 1px; }
}

/* ── WEEKENDERS BY TABLE PHOTOS (pwt-) ──────────────────────────────────── */
.pwt-empty {
    text-align: center;
    color: var(--gray-500);
    padding: 3rem 0;
}

/* Table section */
.pwt-section {
    padding: 0;
    margin-bottom: 0.6rem;
    max-width: 824px;
    margin-left: auto;
    margin-right: auto;
}
.pwt-section:first-of-type { margin-top: 1.75rem; }
.pwt-section:last-of-type  { margin-bottom: 2rem; }

/* Section header */
.pwt-section-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    background: var(--purple);
    border-radius: 10px 10px 0 0;
}
.pwt-table-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    flex: 1;
}
.pwt-breakout {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pwt-count {
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border-radius: 20px;
    padding: 0.1rem 0.55rem;
}

/* Photo grid */
.pwt-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 10px 10px;
}
.pwt-person {
    width: 150px;
}

/* Individual person */
.pwt-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.pwt-photo-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
}
.pwt-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.pwt-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-700);
    text-align: center;
    line-height: 1.3;
}
.pwt-name a {
    color: inherit;
    text-decoration: none;
}
.pwt-name a:hover { color: var(--purple); }
.pwt-leader { font-weight: 700; color: var(--purple); }
.pwt-photo-wrap a { display: block; width: 100%; height: 100%; }
.pwt-photo-wrap a:hover img { opacity: 0.85; }

@media (max-width: 480px) {
    .pwt-grid { gap: 0.65rem; }
    .pwt-person { width: 90px; }
}

/* ── PRAYER PARTNERS (pp-) ───────────────────────────────────────────────── */

/* ── Team selection ── */
.pp-select-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #9b8fa8;
    max-width: 720px;
    margin: 1.75rem auto 0.6rem;
}
.pp-select-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
.pp-select-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    background: var(--white);
    border: 1px solid #e4dfe4;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.pp-select-card:hover {
    border-color: var(--purple);
    box-shadow: 0 2px 8px rgba(114,48,99,.12);
}
.pp-select-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--purple);
}
.pp-select-sub {
    font-size: 0.75rem;
    color: #9b8fa8;
}

@media (max-width: 560px) {
    .pp-select-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Results: back link ── */
.pp-back-row {
    max-width: 680px;
    margin: 1.25rem auto 0.75rem;
}
.pp-back {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity var(--transition);
}
.pp-back:hover { opacity: 1; }

/* ── Results: card grid ── */
.pp-cards-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    max-width: 720px;
    margin: 0 auto;
}
.pp-card {
    background: var(--white);
    border: 1px solid #e4dfe4;
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.pp-card-trio {
    border-top: 3px solid var(--purple);
}

/* Each member row within a card */
.pp-member {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.pp-member + .pp-member {
    padding-top: 0.45rem;
    border-top: 1px solid #f2eef2;
}

/* Initials avatar */
.pp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ece4f0;
    color: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.pp-member-new .pp-avatar {
    background: var(--purple);
    color: var(--white);
}

/* Name + tag */
.pp-info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}
.pp-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.pp-member-new .pp-name { font-weight: 700; }
.pp-new-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--purple);
    line-height: 1;
}

/* Empty / summary */
.pp-empty {
    max-width: 720px;
    margin: 2rem auto;
    text-align: center;
    color: #9b8fa8;
    font-size: 0.9rem;
}
.pp-summary {
    max-width: 720px;
    margin: 0.5rem auto 2rem;
    text-align: right;
    font-size: 0.78rem;
    color: #b0a4bb;
}

@media (max-width: 560px) {
    .pp-cards-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
    .pp-cards-wrap { grid-template-columns: 1fr; }
}


/* ── REGISTRATIONS (reg-) ────────────────────────────────────────────────── */

/* Toolbar */
.reg-toolbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 1.75rem auto 0.75rem;
    max-width: 820px;
}

/* TEC selector */
.reg-tec-form { display: flex; align-items: center; gap: 0.4rem; }
.reg-tec-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9b8fa8;
}
.reg-tec-sel {
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #d9cfdf;
    border-radius: 7px;
    font-size: 0.88rem;
    color: var(--dark);
    background: var(--white);
    cursor: pointer;
}
.reg-tec-sel:focus { outline: 2px solid var(--purple); border-color: transparent; }

/* Filter buttons */
.reg-filters { display: flex; gap: 0.4rem; }
.reg-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1.5px solid #d9cfdf;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #7a6b88;
    text-decoration: none;
    background: var(--white);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.reg-filter-btn:hover { border-color: var(--purple); color: var(--purple); }
.reg-filter-btn.active {
    background: var(--purple);
    border-color: var(--purple);
    color: var(--white);
}
.reg-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,.25);
    border-radius: 10px;
    padding: 0.05rem 0.35rem;
}
.reg-filter-btn:not(.active) .reg-count {
    background: #ede8f0;
    color: #9b8fa8;
}

/* Table */
.reg-table-wrap {
    border: 1px solid #e4dfe4;
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
    margin-bottom: 2rem;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.reg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.reg-table thead tr { background: #f7f4f7; }
.reg-table thead th {
    padding: 0.6rem 0.9rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9b8fa8;
    border-bottom: 1px solid #e4dfe4;
    white-space: nowrap;
}
.reg-table thead th a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}
.reg-table thead th a:hover,
.reg-table thead th a.active { color: var(--purple); }

.reg-table tbody tr {
    border-bottom: 1px solid #f0ecf0;
    transition: background var(--transition);
}
.reg-table tbody tr:last-child { border-bottom: none; }
.reg-table tbody tr:hover { background: #faf8fa; }
.reg-table td { padding: 0.5rem 0.9rem; color: var(--dark); vertical-align: middle; }
.reg-table td a { color: var(--purple); text-decoration: none; }
.reg-table td a:hover { text-decoration: underline; }

/* Fixed-layout table so columns always align */
.reg-table { table-layout: fixed; }

/* Column widths */
.reg-col-type    { width: 50px; }
.reg-col-date    { width: 76px; white-space: nowrap; font-size: 0.8rem; color: #9b8fa8; }
.reg-col-name    { overflow: hidden; }
.reg-col-choices { width: 230px; }
.reg-date-mobile { display: none; font-size: 0.72rem; color: #9b8fa8; margin-top: 0.15rem; }

/* Pills */
.reg-pills-desktop,
.reg-pills-mobile { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.reg-pills-mobile { display: none; margin-top: 0.3rem; }

.reg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    padding: 0.15rem 0.25rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: #ede8f2;
    color: #6b4f82;
}
/* Per-team colours */
.reg-pill-ac      { background: #f0e8f5; color: var(--purple); }
.reg-pill-sd      { background: #e8f0f5; color: #3a6b8f; }
.reg-pill-kitchen,
.reg-pill-k       { background: #fef3e2; color: #a06020; }
.reg-pill-support,
.reg-pill-s       { background: #eaf5ea; color: #2d7a3a; }
.reg-pill-wheat,
.reg-pill-w       { background: #fdf6e3; color: #8a7020; }
.reg-pill-music,
.reg-pill-m       { background: #e8eaf8; color: #3a45a0; }
.reg-pill-atl     { background: #fce8f0; color: #a03060; }
.reg-pill-ytl     { background: #fce8f0; color: #a03060; }

/* Type badge */
.reg-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
}
.reg-type-youth { background: #eaf0fb; color: #3a6abf; }
.reg-type-adult { background: #f0ebf7; color: var(--purple); }

/* Empty state */
.reg-empty {
    margin: 2rem 0;
    text-align: center;
    color: #9b8fa8;
    font-size: 0.9rem;
}

@media (max-width: 540px) {
    .reg-toolbar { gap: 0.75rem; }
    .reg-col-choices { width: 130px; }
    .reg-col-date { display: none; }
    .reg-col-name { overflow: hidden; }
    .reg-date-mobile { display: block; }
    .reg-pills-mobile { display: none; }
}

/* Weekender-specific columns */
.reg-col-name-wknd { width: 200px; overflow: hidden; }
.reg-col-city      { width: 140px; overflow: hidden; }
.reg-col-flag      { width: 40px; text-align: center; }
.reg-col-cb        { text-align: center; }

/* Canceled rows */
.reg-row-canceled td { opacity: 0.45; }

/* Count badges */
.reg-counts { display: flex; align-items: center; gap: 0.5rem; }
.reg-count-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    background: #f0ebf7;
    color: var(--purple);
}
.reg-count-canceled {
    background: #fdf0f0;
    color: #b03030;
}

/* Parent two-column layout inside rc-card-wide */
.rc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.reg-mobile-meta {
    display: none;
    font-size: 0.75rem;
    color: #9b8fa8;
    margin-top: 0.15rem;
}
.reg-mobile-date {
    margin-left: 0.4rem;
    opacity: 0.75;
}

@media (max-width: 540px) {
    .rc-two-col { grid-template-columns: 1fr; }
    .reg-col-city { display: none; }
    .reg-mobile-meta { display: block; }
}

/* ── REGISTRATION FORM (rform-) ─────────────────────────────────────────── */
.rform-dev-banner {
    background: #fff3cd;
    border: 1.5px solid #f0c040;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #7a5c00;
    margin-bottom: 1.25rem;
}
.rform-notice {
    background: #fdf0f0;
    border: 1.5px solid #f0c0c0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    color: #8b1a1a;
    margin-bottom: 1.25rem;
}
.rform-intro {
    font-size: 0.9rem;
    color: #6b5b78;
    margin-bottom: 1.5rem;
}

/* Cards */
.rform-card {
    background: var(--white);
    border: 1.5px solid #e4dfe4;
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.rform-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple);
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rform-card-desc {
    font-size: 0.85rem;
    color: #6b5b78;
    margin: 0 0 1.1rem;
}

/* Grids */
.rform-grid { display: grid; gap: 1rem; }
.rform-grid-1 { grid-template-columns: 1fr; }
.rform-grid-2 { grid-template-columns: 1fr 1fr; }
.rform-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.rform-grid-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.rform-grid-city { grid-template-columns: 1fr auto auto; }
.rform-span-2 { grid-column: span 2; }

/* Fields */
.rform-field { display: flex; flex-direction: column; gap: 0.3rem; }
.rform-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #5a4a66;
}
.rform-optional { font-weight: 400; color: #9b8fa8; }
.rform-input,
.rform-select,
.rform-textarea {
    padding: 0.5rem 0.7rem;
    border: 1.5px solid #d9cfdf;
    border-radius: 8px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--dark);
    background: var(--white);
    transition: border-color 0.15s;
}
.rform-input:focus,
.rform-select:focus,
.rform-textarea:focus {
    outline: none;
    border-color: var(--purple);
}
.rform-textarea { resize: vertical; }

/* Team descriptions */
.rform-team-descs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ede8ed;
}
.rform-team-desc {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.1rem 0.5rem;
    background: #faf8fc;
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
}
.rform-team-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--purple);
}
.rform-team-count {
    font-size: 0.72rem;
    color: #9b8fa8;
    white-space: nowrap;
    text-align: right;
}
.rform-team-text {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: #5a4a66;
    line-height: 1.4;
}

/* Agreement blocks */
.rform-agreement-block { margin-bottom: 1.5rem; }
.rform-agreement-block:last-child { margin-bottom: 0; }
.rform-content-box {
    border: 1.5px solid #e4dfe4;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    font-size: 0.83rem;
    line-height: 1.55;
    color: #3a3040;
}
.rform-content-box h3.rform-content-title {
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--purple);
    margin: 0 0 0.6rem;
}
.rform-content-box h4 { font-size: 0.83rem; margin: 0.75rem 0 0.25rem; }
.rform-content-box h5 { font-size: 0.8rem;  margin: 0.6rem 0 0.2rem; }
.rform-content-box p  { margin: 0.4rem 0; }
.rform-content-box ol,
.rform-content-box ul { margin: 0.4rem 0; padding-left: 1.4rem; }
.rform-content-box li { margin-bottom: 0.25rem; }

.rform-check-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.rform-check-link {
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--purple);
}
.rform-check-link:hover { text-decoration: underline; }
.rform-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--dark);
    cursor: pointer;
    line-height: 1.5;
}
.rform-check-label input[type="checkbox"] {
    margin-top: 0.15rem;
    accent-color: var(--purple);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Submit card */
.rform-submit-card p { font-size: 0.88rem; color: #5a4a66; margin: 0 0 0.6rem; }
.rform-notice-inline { color: #5a1a1a !important; }

/* Page-level h2 above cards */
.rform-page-title { margin: 0 0 1.25rem; font-size: 1.25rem; color: #3d2a52; }

/* Small hint text under a label */
.rform-field-hint { font-size: 0.78rem; color: #9b8fa8; margin: 0; }

/* Inset nested card (e.g. parent 1/2 inside parent card) */
.rform-card-inset {
    background: #f9f7fb;
    border: 1px solid #e8e0f0;
    padding: 1rem 1.25rem;
    margin: 0;
}

@media (max-width: 768px) {
    .rform-grid-city  { grid-template-columns: 1fr; }
    .rform-span-2   { grid-column: span 1; }
}

@media (max-width: 600px) {
    .rform-grid-2   { grid-template-columns: 1fr; }
    .rform-grid-3     { grid-template-columns: 1fr; }
    .rform-grid-2-1-1 { grid-template-columns: 1fr; }
    .rform-team-descs { grid-template-columns: 1fr; }
    .rform-card { padding: 1rem; }
}

/* ── YOUTH LEADERSHIP (yl-) ─────────────────────────────────────────────── */
/* Toolbar */
.yl-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 520px;
    margin: 1.75rem auto 0.75rem;
}
.yl-filter-form { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.yl-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9b8fa8;
}
.yl-filter-select {
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #d9cfdf;
    border-radius: 7px;
    font-size: 0.88rem;
    color: var(--dark);
    background: var(--white);
    cursor: pointer;
    margin-right: 0.5rem;
}
.yl-filter-select:focus { outline: 2px solid var(--purple); border-color: transparent; }
.yl-filter-count {
    font-size: 0.78rem;
    color: #9b8fa8;
    white-space: nowrap;
}

/* Card grid */
.yl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 520px;
    margin: 0 auto 0.5rem;
}

.yl-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid #e4dfe4;
    background: #fff;
    text-decoration: none;
    color: var(--dark);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.yl-card:hover { box-shadow: 0 3px 12px rgba(114,48,99,0.1); border-color: #c4a8bc; }
.yl-tier-2 { background: #f5f0fb; border-left: 4px solid #9b4a87; }
.yl-tier-3 { background: #edf2fb; border-left: 4px solid #3a6abf; }
.yl-tier-4 { background: #fdf0f0; border-left: 4px solid #b83030; }

.yl-card-photo {
    width: 70px;
    height: 84px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 2px solid #f2eff2;
    flex-shrink: 0;
}
.yl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.yl-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--purple-dark);
    line-height: 1.3;
    margin-bottom: 0.2rem;
}
.yl-card-total {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--purple);
    line-height: 1;
}
.yl-card-total-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9b8fa8;
    margin-top: 0.15rem;
    margin-bottom: 0.5rem;
}
.yl-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.yl-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.03em;
}
.yl-badge-overall { background: #f0e8f5; color: var(--purple-dark); }
.yl-badge-support { background: #e6f0fb; color: #2a5f9e; }
.yl-badge-wheat   { background: #fdf5e0; color: #8a6200; }
.yl-badge-kitchen { background: #e8f5ec; color: #2a6e3f; }
.yl-badge-music   { background: #fce8ef; color: #8a2040; }

.yl-empty {
    padding: 2rem;
    text-align: center;
    color: #9b8fa8;
    font-size: 0.9rem;
}
.yl-note {
    font-size: 0.78rem;
    color: #9b8fa8;
    margin-bottom: 2rem;
}

/* ── WEEKENDS WORKED (ww-) ──────────────────────────────────────────────── */
.ww-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.75rem auto 1rem;
    max-width: 680px;
}
.ww-filter-form { display: flex; align-items: center; gap: 0.4rem; }
.ww-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9b8fa8;
}
.ww-filter-select {
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #d9cfdf;
    border-radius: 7px;
    font-size: 0.88rem;
    color: var(--dark);
    background: var(--white);
    cursor: pointer;
}
.ww-filter-select:focus { outline: 2px solid var(--purple); border-color: transparent; }
.ww-count {
    font-size: 0.78rem;
    color: #9b8fa8;
}

/* Card grid */
.ww-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 0.75rem;
    max-width: 720px;
    margin: 0 auto 2rem;
}

.ww-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid #e4dfe4;
    background: #fff;
    text-decoration: none;
    color: var(--dark);
    position: relative;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ww-card:hover { box-shadow: 0 3px 12px rgba(114,48,99,0.1); border-color: #c4a8bc; }

.ww-card-rank {
    position: absolute;
    top: 0.5rem;
    left: 0.6rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #b8a8b8;
}
.ww-card-name {
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
    color: var(--purple-dark);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
.ww-card-count {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--purple);
    line-height: 1;
}
.ww-card-label {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9b8fa8;
    margin-top: 0.2rem;
}

.ww-rank-1 { background: #fffbea; border-color: #ddc84a; }
.ww-rank-2 { background: #f7f7f9; border-color: #b8b8c8; }
.ww-rank-3 { background: #fff5ee; border-color: #d4a882; }
.ww-rank-1 .ww-card-count { color: #a07808; }
.ww-rank-2 .ww-card-count { color: #707080; }
.ww-rank-3 .ww-card-count { color: #a86030; }
.ww-rank-1 .ww-card-rank  { color: #c8a020; }
.ww-rank-2 .ww-card-rank  { color: #909090; }
.ww-rank-3 .ww-card-rank  { color: #b87848; }

.ww-empty {
    padding: 2rem;
    text-align: center;
    color: #9b8fa8;
    font-size: 0.9rem;
}

/* ── TEAM LEADERSHIP HISTORY (tlh-) ─────────────────────────────────────── */
.tlh-wrap {
    margin: 1.75rem 0 0.5rem;
    border: 1px solid #e4dfe4;
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}
.tlh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 640px;
}
.tlh-table thead tr {
    background: var(--purple);
    color: var(--white);
}
.tlh-table thead th {
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
.tlh-table tbody tr {
    border-bottom: 1px solid #f0ecf0;
}
.tlh-table tbody tr:last-child { border-bottom: none; }
.tlh-stripe { background: #faf7fa; }
.tlh-table td {
    padding: 0.3rem 0.75rem;
    color: var(--dark);
    vertical-align: top;
}
.tlh-col-tec {
    width: 52px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--purple);
    white-space: nowrap;
}
.tlh-incomplete {
    font-size: 0.65rem;
    color: #b0a4bb;
    vertical-align: super;
    margin-left: 1px;
}
.tlh-note {
    font-size: 0.75rem;
    color: #b0a4bb;
    margin: 0.4rem 0 2rem;
}

/* ── REGISTRATION COMPLETE / VIEW (rc-) ──────────────────────────────────── */

/* Back row */
.rc-back-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 1rem;
    flex-wrap: wrap;
}
.rc-back {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity var(--transition);
}
.rc-back:hover { opacity: 1; }
.rc-tec-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9b8fa8;
    background: #f2eef7;
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
}

/* Card grid layout */
.rc-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.rc-card {
    background: var(--white);
    border: 1px solid #e4dfe4;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
}
.rc-card-wide { grid-column: 1 / -1; }
.rc-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #9b8fa8;
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0ecf0;
}

/* Field list */
.rc-fields { display: flex; flex-direction: column; gap: 0.45rem; }
.rc-field {
    display: flex;
    gap: 0.75rem;
    font-size: 0.86rem;
    line-height: 1.4;
}
.rc-label {
    flex-shrink: 0;
    width: 120px;
    font-weight: 600;
    color: #9b8fa8;
    font-size: 0.78rem;
    padding-top: 0.05rem;
}
.rc-value { color: var(--dark); }

/* Team choices */
.rc-choices {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.rc-choice-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}
.rc-choice-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--purple);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rc-choice-name { color: var(--dark); font-weight: 500; }

/* Subsections (prose blocks) */
.rc-subsection { margin-top: 0.85rem; }
.rc-sub-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9b8fa8;
    margin: 0 0 0.35rem;
}
.rc-prose {
    font-size: 0.86rem;
    color: var(--dark);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}
.rc-empty-field { font-size: 0.85rem; color: #b0a4bb; margin: 0; }

/* Talks */
.rc-talks { display: flex; flex-direction: column; gap: 0.45rem; }
.rc-talk {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    color: #9b8fa8;
}
.rc-talk-checked { color: var(--dark); }
.rc-talk-indicator {
    width: 20px;
    text-align: center;
    font-weight: 700;
    color: #ccc;
    flex-shrink: 0;
}
.rc-talk-checked .rc-talk-indicator { color: #4a9a5a; }
.rc-talk a { color: var(--purple); text-decoration: none; }
.rc-talk a:hover { text-decoration: underline; }

/* Agreements */
.rc-agreements { display: flex; flex-direction: column; gap: 0.55rem; }
.rc-agreement {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.86rem;
    color: var(--dark);
}
.rc-yes { color: #4a9a5a; font-weight: 700; font-size: 0.82rem; flex-shrink: 0; }
.rc-no  { color: #c05050; font-weight: 700; font-size: 0.82rem; flex-shrink: 0; }

@media (max-width: 640px) {
    .rc-layout { grid-template-columns: 1fr; }
    .rc-card-wide { grid-column: 1; }
}

.rc-error {
    max-width: 480px;
    margin: 3rem auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.rc-error-msg {
    font-size: 0.95rem;
    color: #7a6b88;
    line-height: 1.6;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   UPCOMING RETREATS PAGE
   ══════════════════════════════════════════════════════════════════════════ */
/* ── RETREAT CARD ────────────────────────────────────────────────────────── */
.retreat-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2.5rem;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: box-shadow var(--transition), transform var(--transition);
}
.retreat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.retreat-card-header {
    background: linear-gradient(120deg, var(--purple-dark), var(--purple));
    padding: 1.6rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.retreat-tec-number {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.2rem;
}
.retreat-dates {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}
.retreat-year {
    color: var(--pink-light);
    font-size: 1rem;
    font-weight: 400;
}

.retreat-card-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.add-calendar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.add-calendar-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.retreat-card-body { padding: 2rem; }

/* Church info */
.church-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: var(--purple-pale);
    border-radius: 10px;
    margin-bottom: 1.8rem;
}
.church-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.1rem; }
.church-icon svg { width: 1.4rem; height: 1.4rem; color: var(--purple-dark); }
.church-name { font-weight: 700; color: var(--purple-dark); font-size: 1rem; }
.church-address { font-size: 0.875rem; color: var(--gray-600); margin-top: 0.15rem; }
.church-address a { color: var(--purple); text-decoration: none; font-weight: 500; }
.church-address a:hover { text-decoration: underline; }

/* Arrival grid */
.arrival-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.arrival-item {
    text-align: center;
    padding: 1rem 0.75rem;
    border-radius: 10px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}
.arrival-day {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--purple);
    margin-bottom: 0.25rem;
}
.arrival-date { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.15rem; }
.arrival-time { font-size: 0.8rem; color: var(--gray-600); }

/* Schedule list */
.schedule-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
}
.schedule-list {
    list-style: none;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
}
.schedule-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
    background: var(--gray-50);
}
.schedule-list li:last-child { border-bottom: none; }
.schedule-event { font-weight: 600; color: var(--text); }
.schedule-time { color: var(--gray-600); font-size: 0.83rem; white-space: nowrap; }
.schedule-date { color: var(--purple); font-weight: 600; font-size: 0.83rem; white-space: nowrap; text-align: right; }
.schedule-date.multi-date { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }

/* Empty state */
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--gray-600); }
.empty-state h2 { color: var(--purple-dark); margin-bottom: 0.75rem; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .retreat-card-header { flex-direction: column; align-items: flex-start; }
    .retreat-card-body { padding: 1.25rem; }
    .arrival-grid { grid-template-columns: 1fr; }
    .schedule-list li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* Church combobox — shared by adult.php, team.php, assign_churches.php */
.church-combo { position: relative; width: 100%; }
.church-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.church-dropdown-item {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--gray-100);
}
.church-dropdown-item:last-child { border-bottom: none; }
.church-dropdown-item:hover,
.church-dropdown-item.active { background: var(--gray-50, #f9fafb); }
.church-dropdown-name { font-weight: 600; color: var(--text); }
.church-dropdown-location { font-size: 0.78rem; color: var(--gray-500); }
.church-not-listed {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--gray-500);
    text-decoration: underline;
}
.church-not-listed:hover { color: var(--text); }
.church-unlisted-section {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1rem 1rem 0.25rem;
}


/* ── teamonly/weekender_guardian_angel_forms.php (wga-) ─────────────────── */
.wga-print-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.wga-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.wga-print-btn:hover { opacity: 0.88; }
.wga-count {
    font-size: 0.9rem;
    color: var(--gray-500);
}
.wga-form {
    background: #fff;
    border: 1.5px solid #e8dfe6;
    border-radius: 12px;
    padding: 2rem 2.25rem;
    margin-bottom: 2rem;
}
.wga-form-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--purple);
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #f0ebee;
}
.wga-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.wga-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--purple);
    margin-bottom: 0.2rem;
}
.wga-info-value { color: var(--gray-800); line-height: 1.5; }
.wga-section-hd {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 1.5rem 0 0.5rem;
}
.wga-body-text {
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.65;
    margin-bottom: 0.75rem;
}
.wga-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.wga-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.wga-checklist li input[type="checkbox"] {
    margin-top: 0.3rem;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    accent-color: var(--purple);
}
.wga-checklist li span { flex: 1; min-width: 0; }
.wga-script {
    background: #f9f5f8;
    border-left: 4px solid var(--purple);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}
.wga-script ul {
    margin: 0.75rem 0 0 1rem;
    padding: 0;
}
.wga-script ul li { margin-bottom: 0.6rem; }
.wga-yn {
    display: inline-flex;
    gap: 0.75rem;
    margin-left: 0.5rem;
}
.wga-yn label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
}
@media print {
    .wga-print-bar { display: none; }
    .wga-form {
        border: none;
        border-radius: 0;
        padding: 0.3in 0.5in;
        margin: 0;
        page-break-after: always;
        break-after: page;
    }
    .wga-form:last-child {
        page-break-after: avoid;
        break-after: avoid;
    }
    body, .wga-body-text, .wga-checklist li,
    .wga-script, .wga-info-value { font-size: 9.5pt; color: #000; line-height: 1.4; }
    .wga-form-title  { font-size: 12pt; color: #723063; margin-bottom: 0.6rem; }
    .wga-section-hd  { font-size: 10pt; margin: 0.6rem 0 0.2rem; }
    .wga-info-label  { font-size: 7.5pt; }
    .wga-info-grid   { margin-bottom: 0.6rem; gap: 0.5rem; }
    .wga-checklist li { margin-bottom: 0.2rem; gap: 0.35rem; }
    .wga-script      { padding: 0.4rem 0.6rem; }
    .wga-script ul   { margin-top: 0.3rem; }
    .wga-script ul li { margin-bottom: 0.3rem; }
}
@media (max-width: 600px) {
    .wga-info-grid { grid-template-columns: 1fr 1fr; }
    .wga-form { padding: 1.25rem; }
}

/* ── teamonly/vendor_info_entry.php (vie-) ──────────────────────────────── */
.vie-flash      { background:#d1fae5; border:1.5px solid #6ee7b7; color:#065f46; border-radius:8px; padding:0.75rem 1rem; margin-bottom:1.5rem; font-weight:600; }
.vie-flash--del { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
.vie-error      { background:#fee2e2; border:1.5px solid #fca5a5; color:#991b1b; border-radius:8px; padding:0.75rem 1rem; margin-bottom:1.5rem; }
.vie-label      { display:block; font-size:0.8rem; font-weight:600; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.35rem; }
.vie-input,
.vie-select     { width:100%; padding:0.55rem 0.8rem; border:1.5px solid #ddd6e8; border-radius:8px; font-size:0.95rem; font-family:inherit; color:var(--gray-800); background:#fff; }
.vie-input:focus,
.vie-select:focus { outline:none; border-color:var(--purple); }
.vie-textarea   { width:100%; padding:0.55rem 0.8rem; border:1.5px solid #ddd6e8; border-radius:8px; font-size:0.95rem; font-family:inherit; color:var(--gray-800); resize:vertical; }
.vie-textarea:focus { outline:none; border-color:var(--purple); }
.vie-grid       { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.vie-field      { display:flex; flex-direction:column; }
.vie-submit-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    background: var(--white);
    padding: 0.9rem 1rem;
    margin-top: 1.5rem;
    z-index: 50;
}
.vie-submit-btn { background:var(--purple); color:#fff; border:none; border-radius:8px; padding:0.7rem 2.5rem; font-size:1rem; font-weight:700; cursor:pointer; }
.vie-submit-btn:hover { opacity:0.88; }
@media (max-width:640px) {
    .vie-grid { grid-template-columns:1fr; }
}

/* ── teamonly/theme_verse_song_history.php (tvsh-) ──────────────────────── */
.tvsh-search-wrap { margin-bottom: 1.5rem; }
.tvsh-search {
    width: 100%;
    max-width: 380px;
    padding: 0.55rem 1rem;
    border: 1.5px solid #ddd6e8;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--gray-800);
    background: #fff;
    transition: border-color 0.2s;
}
.tvsh-search:focus { outline: none; border-color: var(--purple); }
.tvsh-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1.5px solid #e8dfe6;
}
.tvsh-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tvsh-table thead th {
    background: var(--purple);
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    text-align: left;
    white-space: nowrap;
}
.tvsh-table thead th:first-child { width: 5.5rem; }
.tvsh-table tbody tr { border-bottom: 1px solid #f0ebee; transition: background 0.15s; }
.tvsh-table tbody tr:last-child  { border-bottom: none; }
.tvsh-table tbody tr:hover       { background: #faf7fb; }
.tvsh-table tbody tr.tvsh-hidden { display: none; }
.tvsh-table td { padding: 0.85rem 1rem; vertical-align: top; color: var(--gray-800); line-height: 1.55; }
.tvsh-tec { font-weight: 700; font-size: 1rem; color: var(--purple); white-space: nowrap; }
.tvsh-year { display: block; margin-top: 0.1rem; font-size: 0.78rem; color: var(--gray-500); }
.tvsh-ref { margin-bottom: 0.25rem; font-weight: 600; font-size: 0.82rem; color: var(--purple); text-transform: uppercase; letter-spacing: 0.05em; }
.tvsh-verse-text { font-style: italic; font-size: 0.88rem; color: var(--gray-700); }
.tvsh-song-title { font-weight: 600; color: var(--gray-800); }
.tvsh-artist { margin-top: 0.15rem; font-size: 0.82rem; color: var(--gray-500); }
.tvsh-empty { font-style: italic; font-size: 0.85rem; color: var(--gray-400); }
.tvsh-no-results { display: none; padding: 2rem; text-align: center; font-style: italic; color: var(--gray-500); }
.tvsh-count { margin-top: 0.9rem; font-size: 0.8rem; color: var(--gray-400); }
@media (max-width: 560px) {
    .tvsh-table thead th:nth-child(3),
    .tvsh-table td:nth-child(3) { display: none; }
}

/* ── teamonly/support_checklist.php (sc- additions) ────────────────────── */
.sc-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.sc-filter-bar input[type="search"] {
    flex: 1;
    max-width: 320px;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.sc-filter-bar input[type="search"]:focus {
    outline: none;
    border-color: #723063;
    box-shadow: 0 0 0 2px rgba(114,48,99,0.15);
}
.sc-filter-count { font-size: 0.82rem; color: #888; }
#sc-no-results { display: none; padding: 1rem 0; color: #888; font-style: italic; }
.sc-team-pill {
    display: inline-block;
    box-sizing: border-box;
    width: 6.5rem;
    text-align: center;
    background: #f3e8f0;
    color: #723063;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.sc-team-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    align-items: center;
}
.sc-team-toggle {
    display: inline-block;
    background: #f3e8f0;
    color: #723063;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.22rem 0.75rem;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
    font-family: inherit;
}
.sc-team-toggle:hover { background: #e8d0e5; }
.sc-team-toggle.sc-toggle-active { background: #723063; color: #fff; border-color: #723063; }
.sc-top-bar { align-items: center; }
@media (max-width: 600px) {
    .sc-top-bar-btn .btn { width: 100%; text-align: center; }
}

/* ── teamonly/servicemusic/index.php (sm-) ──────────────────────────────── */
.sm-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    overflow: hidden;
    max-width: 600px;
    margin: 0 auto;
}
.sm-card-title {
    background: #723063;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
}
.sm-empty { padding: 1.25rem; color: #888; font-style: italic; }

/* ── teamlist/index.php (tl-) ───────────────────────────────────────────── */
.tl-wrap { max-width: 824px; margin-left: auto; margin-right: auto; }
.tl-table th { cursor: pointer; user-select: none; white-space: nowrap; }
.tl-table th .tl-th-inner { display: flex; align-items: center; gap: 0.35rem; }
.tl-table th .tl-sort-arrow { font-size: 0.65rem; opacity: 0.8; }
.tl-table th:hover .tl-th-inner { text-decoration: underline; }
.tl-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 824px;
    margin: 0.6rem auto 0;
    font-size: 0.85rem;
    color: #666;
}
.tl-unavailable { padding: 2rem; color: #666; text-align: center; font-style: italic; }
/* Override the shared .tlh-table min-width so the 3 short columns fit narrow
   screens instead of being clipped; .tl-wrap still scrolls if needed. */
.tl-table { min-width: 0; border-collapse: collapse; border-spacing: 0; }
/* Paint the purple on the cells (not just the row) and drop cell borders so no
   vertical dividers show between the header columns. */
.tl-table thead th { background: var(--purple); border: 0; }
@media (max-width: 540px) {
    .tl-table { font-size: 0.78rem; }
    .tl-table thead th { padding: 0.5rem 0.45rem; font-size: 0.6rem; letter-spacing: 0.03em; }
    .tl-table td { padding: 0.3rem 0.45rem; }
}

/* ── registrations/index.php (reg-) ─────────────────────────────────────── */
.reg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}
.reg-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: #fff;
    border: 1px solid #e0d4e8;
    border-radius: 10px;
    padding: 1.4rem 1.25rem 1.2rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: box-shadow 0.18s, transform 0.18s, background 0.18s;
}
.reg-card:hover {
    box-shadow: 0 6px 22px rgba(114,48,99,0.13);
    transform: translateY(-2px);
    background: #fdf8fc;
}
.reg-card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0e8ef;
    border-radius: 9px;
    color: #723063;
    flex-shrink: 0;
    margin-bottom: 0.1rem;
}
.reg-card-body { flex: 1; }
.reg-card-title { font-size: 1rem; font-weight: 700; color: #723063; margin: 0 0 0.25rem; }
.reg-card-desc { font-size: 0.875rem; color: #666; margin: 0; line-height: 1.45; }
.reg-card-arrow { display: none; }
.reg-card-featured {
    grid-column: span 2;
    background: #f9f5f8;
    border: 1px solid #c9a8c0;
    padding: 1.6rem 1.5rem 1.4rem;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
}
.reg-card-featured:hover { background: #f5eef3; }
.reg-card-featured .reg-card-icon {
    width: 52px;
    height: 52px;
    background: #e8d6e4;
    border-radius: 11px;
    flex-shrink: 0;
}
.reg-card-featured .reg-card-icon svg { width: 28px; height: 28px; }
.reg-card-featured .reg-card-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a07090;
    margin: 0 0 0.3rem;
}
.reg-card-featured .reg-card-title { font-size: 1.2rem; }
.reg-card-featured .reg-card-desc  { font-size: 0.9rem; }
.reg-card-featured-arrow {
    font-size: 1.4rem;
    color: #c0a0b8;
    flex-shrink: 0;
    margin-left: auto;
}
@media (max-width: 600px) {
    .reg-grid { grid-template-columns: 1fr; }
    .reg-card-featured { grid-column: span 1; flex-direction: column; }
    .reg-card-featured-arrow { display: none; }
}


/* ── registrations/health_form_completed.php ────────────────────────────── */
.med-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 0.5rem; }
.med-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid #e0d4e8;
    color: #723063;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.med-table td { padding: 6px 8px; border-bottom: 1px solid #f0e8f0; vertical-align: top; }
.cond-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.25rem; }
.cond-tag { background: #f0e8f0; color: #5a2452; border-radius: 4px; padding: 3px 10px; font-size: 0.85rem; }
.no-print-actions { margin-bottom: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.auth-text { font-size: 0.85rem; color: #555; line-height: 1.6; margin: 0 0 0.6rem; }
@media print {
    .no-print-actions,
    .page-header,
    nav, .subnav, footer { display: none !important; }
}

/* ── registrations/health_form.php ─────────────────────────────────────── */
.conditions-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0.5rem 0 1rem; }
.conditions-grid .cond-item { display: flex; align-items: center; gap: 6px; }
.medication-entry { margin-bottom: 0.5rem; }
.medication-entry + hr { margin: 0.75rem 0; border: none; border-top: 1px solid #e0d8e8; }
#add-medication-button { margin-top: 0.75rem; margin-bottom: 1.5rem; }
.radio-group { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.radio-group label { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }

/* ── recommendations/index.php (recs-) ──────────────────────────────────── */
.recs-legend {
    background: #f9f5f8; border: 1px solid #e2d7e7; border-radius: 10px;
    padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.recs-legend ul {
    margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column;
    gap: 0.6rem; font-size: 0.875rem; color: #444; list-style: disc;
}
.recs-legend li { line-height: 1.6; }
.recs-selector { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1.5rem; width: 100%; }
.recs-selector label { font-size: 0.85rem; font-weight: 600; color: #723063; }
.recs-selector select { padding: 0.35rem 0.65rem; border: 1px solid #c4b2cd; border-radius: 6px; font-size: 0.9rem; background: #fff; cursor: pointer; color: #1a1020; }
.recs-team-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.recs-expand-toggle { display: none; margin-left: auto; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none; }
@media (min-width: 601px) { .recs-expand-toggle { display: flex; } }
.recs-expand-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.recs-toggle-track { position: relative; width: 32px; height: 18px; background: #ccc; border-radius: 999px; transition: background 0.2s; flex-shrink: 0; }
.recs-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left 0.2s; }
.recs-expand-toggle input:checked ~ .recs-toggle-track { background: #723063; }
.recs-expand-toggle input:checked ~ .recs-toggle-track .recs-toggle-thumb { left: 16px; }
.recs-toggle-label { font-size: 0.78rem; color: #723063; white-space: nowrap; }
.teams-expanded .team-history { display: inline-flex; position: static; border: none; box-shadow: none; padding: 0; background: none; }
.teams-expanded .teams-toggle { display: none; }
.legend-teams-expanded { display: none; }
.teams-expanded .legend-teams-collapsed { display: none; }
.teams-expanded .legend-teams-expanded { display: list-item; }
.legend-teams-collapsed .teams-toggle { display: inline-flex; }
.recs-team-tab {
    padding: 0.4rem 0.9rem; border: 1.5px solid var(--gray-300, #d1d5db); border-radius: 8px;
    background: #fff; color: #4b5563; font-size: 0.88rem; font-weight: 600; cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s; white-space: nowrap; font-family: 'Inter', sans-serif;
}
.recs-team-tab:hover { border-color: #723063; color: #4e1f44; }
.recs-team-tab--active, .recs-team-tab--active:hover { background: #723063; border-color: #723063; color: #fff; }
@media (max-width: 700px) { .recs-team-tab { flex: 0 0 calc(33.333% - 0.24rem); } }
.rec-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 1px solid #4e1f44; border-radius: 5px;
    background: #4e1f44; color: #fff; font-size: 0.8rem; font-weight: 700;
    cursor: pointer; padding: 0; line-height: 1; transition: background 0.15s, border-color 0.15s;
}
.rec-btn:hover { background: #723063; border-color: #723063; color: #fff; }
/* Zero recommendations used to keep the full dark button with transparent text,
   so every row rendered as four identical dark squares and the strip carried no
   at-a-glance signal. Empties now recede to a faint outline; see the .rec-heat-*
   ramp below for the filled end. */
.rec-btn-empty, .rec-btn-empty:hover {
    background: #fdfbfd; border-color: #ece4ea; color: transparent; cursor: default;
}
a.person-link { color: inherit; text-decoration: none; font-weight: 500; }
a.person-link:hover { text-decoration: underline; }
.eligible a.person-link { color: #b91c1c; }
.eligible .grad-year { color: #b91c1c; }
/* Overall only: already served as Rector/a -- teal instead of the eligible red.
   Listed after .eligible so it wins when both classes are present. */
.served-overall a.person-link { color: #0e7490; }
.served-overall .grad-year { color: #0e7490; }
sup.leadership-sup { font-size: 0.6rem; color: #723063; vertical-align: super; letter-spacing: 0; }
.team-history { display: none; position: absolute; z-index: 20; background: #fff; border: 1.5px solid #ddd6e8; border-radius: 8px; padding: 5px 7px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); flex-wrap: wrap; gap: 3px; }
.team-history.th-open { display: flex; }
.teams-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: 3px; padding: 0 4px; height: 15px; font-size: 0.62rem; background: #f5f0f5; border: 1px solid #c4b2cd; border-radius: 4px; cursor: pointer; color: #723063; vertical-align: middle; line-height: 1; font-family: inherit; font-weight: 600; gap: 2px; }
.teams-toggle:hover { background: #ede5f0; border-color: #723063; }
a.team-count-link {
    display: inline-flex; align-items: center; font-size: 0.65rem; color: #555;
    text-decoration: none; border: 1px solid #bbb; border-radius: 4px; padding: 0 3px;
    height: 16px; line-height: 1; white-space: nowrap; background: transparent;
}
a.team-count-link:hover { color: #723063; border-color: #723063; }
.photo-tooltip { position: relative; display: inline-block; vertical-align: middle; margin-right: 4px; }
.camera-icon { display: block; }
.photo-tip {
    display: none; position: absolute; z-index: 100; left: 50%;
    transform: translateX(-50%); top: 20px; width: 120px; height: 144px;
}
.photo-tip-img {
    display: block; width: 100%; height: 100%; border-radius: 8px;
    background-size: cover; background-position: center; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.photo-tooltip:hover .photo-tip { display: block; }
.recs-team-card { background: #fff; border: 1px solid #e2d7e7; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
/* Pinned just under the sticky nav + subnav so the team stays labeled while
   scrolling its list. Each h2 sticks within its own .recs-team-card, so the
   next team's header pushes the previous one out instead of stacking.
   --subnav-h is published by JS from the subnav's live height (it wraps to
   extra rows on narrow screens); 3rem is a sane fallback before it runs. */
.recs-team-card > h2 {
    font-size: 0.95rem; font-weight: 700; color: #fff; background: #723063;
    text-transform: uppercase; letter-spacing: 0.07em; margin: -1rem -1.25rem 1rem;
    padding: 0.55rem 1.25rem; border-radius: 9px 9px 0 0;
    position: sticky; top: calc(var(--nav-height) + var(--subnav-h, 3rem)); z-index: 15;
}
/* align-items: start keeps each gender column only as tall as its own content.
   With the default stretch both columns share the taller one's height, and the
   shorter column's sticky h3 would keep hanging around under an empty area. */
.recs-gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 700px) { .recs-gender-grid { grid-template-columns: 1fr; } }
/* Pins directly under its team's h2. --recs-team-hd-h is published by JS from
   that header's live height; 2.3rem is the fallback before the script runs. The
   white background and the padding/negative-margin pair give the pinned band
   something opaque to cover the rows scrolling beneath it without changing the
   spacing it had before. */
.recs-gender-section > h3 {
    font-size: 0.8rem; font-weight: 700; color: #555; text-transform: uppercase;
    letter-spacing: 0.05em; margin: -0.2rem 0 0.2rem; padding: 0.2rem 0;
    position: sticky; z-index: 14; background: #fff;
    top: calc(var(--nav-height) + var(--subnav-h, 3rem) + var(--recs-team-hd-h, 2.3rem));
}
.recs-table { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
.recs-table th { font-size: 0.72rem; font-weight: 600; color: #999; text-align: center; padding: 2px 4px; border-bottom: 1px solid #e2d7e7; text-decoration: underline; }
.recs-table td { vertical-align: middle; padding: 2px 2px; }
.recs-table td.td-rec { text-align: center; width: 30px; padding-left: 1px; padding-right: 1px; }
.recs-table td.td-person { position: relative; }
.recs-table td.td-photo { width: 24px; text-align: center; padding: 0; }
.recs-table tr:hover td { background: #faf6fb; }
.recs-table .no-data { color: #bbb; font-size: 0.8rem; font-style: italic; }
.grad-year { font-size: 0.75rem; color: #4c4c4c; margin-left: 1px; vertical-align: middle; }
/* Two grad-year forms ship in the markup; width picks one (see the 600px block). */
.gy-short { display: none; }
.legend-rec-samples { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.legend-rec-sample {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 1px solid #4e1f44; border-radius: 5px;
    background: #4e1f44; color: #fff; font-size: 0.8rem; font-weight: 700;
}
.legend-rec-sample.empty { background: #fdfbfd; border-color: #ece4ea; color: transparent; }

/* ── Recommendation heat ramp ───────────────────────────────────────────────
   The four TEC columns are the same width for everyone, so intensity is the
   only free channel for "how many". Shading the count by size turns the strip
   into a per-person heat map read left to right -- total ink is roughly total
   recommendations -- which is what keeps a strong showing three TECs ago from
   disappearing next to a fresh one. Thresholds are 1 / 2 / 3-4 / 5+; the ramp
   is the page's own plum, so it does not introduce a new colour language.
   Applies to both .rec-btn and the .legend-rec-sample swatches, and must stay
   after both base rules. .rec-btn:hover deliberately still wins, so every
   button gives the same press feedback regardless of its step. */
.rec-heat-1 { background: #f4ecf2; border-color: #dcc8d6; color: #6b4560; }
.rec-heat-2 { background: #dcc0d4; border-color: #c39eb8; color: #4e1f44; }
.rec-heat-3 { background: #986189; border-color: #86507a; color: #fff; }
.rec-heat-4 { background: #4e1f44; border-color: #4e1f44; color: #fff; }
.recs-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(30,10,28,0.55);
    z-index: 1000; align-items: center; justify-content: center; padding: 1rem;
    overflow-y: auto;
}
.recs-modal-overlay.open { display: flex; }
.recs-modal {
    background: #fff; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.28);
    width: calc(100vw - 2rem); max-width: 480px;
    max-height: 90vh; max-height: 90dvh;
    display: flex; flex-direction: column; overflow: hidden;
}
#recsModalContent { overflow-y: auto; flex: 1; min-height: 0; }
.recs-modal-header {
    background: #4e1f44; color: #fff; padding: 1rem 1.25rem; border-radius: 12px 12px 0 0;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem;
}
.recs-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.recs-modal-header p { margin: 0.2rem 0 0; font-size: 0.78rem; opacity: 0.75; }
.recs-modal-close { background: none; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0; opacity: 0.8; flex-shrink: 0; }
.recs-modal-close:hover { opacity: 1; }
.recs-modal-body { padding: 1rem 1.25rem; display: flex; gap: 1rem; align-items: flex-start; }
.recs-modal-photo { width: 100px; height: 120px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.recs-modal-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.recs-modal-table th { text-align: left; font-size: 0.72rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.5rem 0.4rem 0; border-bottom: 1px solid #e2d7e7; }
.recs-modal-table td { padding: 0.3rem 0.5rem 0.3rem 0; vertical-align: top; border-bottom: 1px solid #f2ecf6; color: #1a1020; }
.recs-modal-table tr:last-child td { border-bottom: none; }
.recs-modal-empty { padding: 1rem 1.25rem; color: #aaa; font-size: 0.875rem; font-style: italic; }
.recs-modal-loading { padding: 1.5rem 1.25rem; text-align: center; color: #888; font-size: 0.875rem; }
.recs-modal-section-heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #723063; margin: 0.75rem 1.25rem 0.4rem; }
@media (max-width: 600px) {
    .recs-team-card { padding: 0.5rem; margin-bottom: 1rem; }
    .recs-team-card > h2 { margin-bottom: 0.5rem; }
    .recs-gender-grid { gap: 0.75rem; }
    .recs-gender-section > h3 { margin-bottom: 0.25rem; }
    .recs-legend { padding: 0.6rem 0.75rem; }
    .td-photo { display: none; }

    /* ── Keep a person on one line ──────────────────────────────────────
       At 375px the four TEC columns take 120px of a 309px table, leaving
       ~181px for name + leadership sups + grad year + team badge. The "My
       List" star claimed 32px of that, wrapping most rows onto a second
       line. These trims claw back roughly 40px between them; individually
       none is enough, which is why they travel together. Desktop keeps the
       larger controls and the full year. */
    .recs-table            { font-size: 0.8rem; }
    .recs-table td         { padding: 2px 1px; }
    .recs-table td.td-rec  { width: 26px; padding-left: 0; padding-right: 0; }
    .rec-btn               { width: 25px; height: 25px; font-size: 0.75rem; }
    /* Scoped to this table so the comments-page star, whose column has the
       room, keeps its full 32px tap target. */
    .recs-table .ml-star     { width: 24px; height: 24px; margin: -6px 0 -6px -3px; }
    .recs-table .ml-star svg { width: 15px; height: 15px; }
    /* "2026" -> "'26", and drop the badge's decorative caret. The badge still
       reads as a button, and the legend explains what it does. */
    .gy-full   { display: none; }
    .gy-short  { display: inline; }
    .tt-caret  { display: none; }
}

/* ── recommendations/completed_evals.php (ce-) ──────────────────────────── */
.ce-selector-form { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.ce-selector-form label { font-weight: 600; color: #4b2342; }
.ce-selector-form select { padding: 0.3rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; }
.ce-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); overflow: hidden; margin-bottom: 1.5rem; }
.ce-card-title { background: #723063; color: #fff; padding: 0.75rem 1.25rem; font-size: 1rem; font-weight: 600; }
.ce-table { width: 100%; border-collapse: collapse; }
.ce-table th { background: #f3e8f0; color: #4b2342; text-align: left; padding: 0.6rem 1rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ce-table td { padding: 0.65rem 1rem; border-top: 1px solid #eee; vertical-align: middle; }
.ce-table tr:hover td { background: #faf5f9; }
.ce-name { font-weight: 600; color: #2d2d2d; }
.ce-team { color: #666; font-size: 0.9rem; }
.ce-actions { text-align: right; }
.ce-view-btn { padding: 0.35rem 0.85rem; background: #4e1f44; color: #fff; border: none; border-radius: 4px; font-size: 0.85rem; cursor: pointer; }
.ce-view-btn:hover { background: #6b2d5e; }
.ce-empty { padding: 1.5rem 1.25rem; color: #888; font-style: italic; }
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 1000; align-items: flex-start; justify-content: center; padding-top: 2rem;
}
.modal-overlay.open { display: flex; }
.modal-box { background: #fff; border-radius: 10px; width: 92%; max-width: 700px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.modal-header { background: #723063; color: #fff; padding: 0.9rem 1.25rem; border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal-title { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.modal-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; flex-shrink: 0; }
.modal-sort-bar { display: flex; gap: 0.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid #eee; background: #faf5f9; }
.sort-btn { padding: 0.3rem 0.9rem; border: 2px solid #723063; border-radius: 4px; background: #fff; color: #723063; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.sort-btn.active { background: #723063; color: #fff; }
.modal-body { overflow-y: auto; padding: 1rem 1.25rem; flex: 1; }
.modal-loading { text-align: center; color: #888; padding: 2rem; }
.ce-recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.ce-group-sep { grid-column: 1 / -1; background: #682d5a; color: #fff; font-weight: 600; font-size: 0.95rem; padding: 0.4rem 0.75rem; border-radius: 4px; }
.ce-rec-item { text-align: center; }
.ce-photo { width: 130px; height: 156px; object-fit: cover; border-radius: 8px; display: block; margin: 0 auto 0.4rem; }
.ce-rec-name { font-weight: 600; font-size: 0.85rem; color: #2d2d2d; }
.ce-rec-team { font-size: 0.8rem; color: #666; }
.ce-no-recs { color: #888; font-style: italic; }
@media (max-width: 600px) {
    .ce-table .ce-team-col { display: none; }
    .ce-recs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── forms/ shared styles (.printable-content) ──────────────────────────── */
.printable-content {
    font-size: 1rem; line-height: 1.7;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 2rem 2.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.printable-content p { margin-bottom: 0.9rem; }
.printable-content ul,
.printable-content ol { padding-left: 1.75rem; margin: 0.25rem 0 1rem; }
.printable-content ol { list-style: decimal; }
.printable-content ul ul { margin: 0.25rem 0 0.5rem; }
.printable-content li { margin-bottom: 0.5em; }
.printable-content em { color: #555; }
.printable-content .rform-content-title { margin-top: 0; margin-bottom: 1rem; }
.printable-content h4 {
    margin-top: 1.75rem; margin-bottom: 0.5rem; padding: 0.4rem 0.8rem;
    background: var(--purple-pale, #f5eef3); border-left: 4px solid var(--purple, #723063);
    border-radius: 0 4px 4px 0; font-size: 1.05rem;
}
.printable-content h5 {
    margin-top: 1.1rem; margin-bottom: 0.3rem; color: var(--purple, #723063);
    font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--purple-pale, #f5eef3); padding-bottom: 0.2rem;
}
.printable-content h3 {
    margin-top: 1.75rem; margin-bottom: 0.5rem; padding: 0.4rem 0.8rem;
    background: var(--purple-pale, #f5eef3); border-left: 4px solid var(--purple, #723063);
    border-radius: 0 4px 4px 0; font-size: 1.05rem;
}
.printable-content .pc-callout {
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e4dfe4);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 6px 24px rgba(114,48,99,0.14));
    margin: 1.75rem 0;
}
.printable-content .pc-callout h4 {
    background: var(--purple-dark, #4e1f44);
    color: var(--white, #fff);
    margin: 0;
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    border-left: none; border-radius: 0;
}
.printable-content .pc-callout p {
    padding: 0 1.1rem;
    margin-bottom: 0.6rem;
}
.printable-content .pc-callout p:first-of-type { padding-top: 1rem; }
.printable-content .pc-callout p:last-child { padding-bottom: 1rem; margin-bottom: 0; }
.page-break { display: none; }
@media print {
    nav, .page-header, .subnav, footer, .no-print { display: none !important; }
    .printable-content { font-size: 10pt; line-height: 1.5; background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; }
    .printable-content h3,
    .printable-content h4 { background: none; border-left: 3px solid #723063; }
    .printable-content h5 { color: #723063; }
    .printable-content .pc-callout { box-shadow: none; border-color: #cfc8d0; }
    .printable-content .pc-callout h4 { background: #4e1f44; }
    .page-break { display: block; page-break-before: always; break-before: page; }
    section { padding: 0 !important; }
}

/* ── forms/song_lyrics_template.php (slt-) ──────────────────────────────── */
.slt-instructions { background: #f9f5f8; border: 1px solid #e2d7e7; border-radius: 10px; padding: 1rem 1.25rem; font-size: 0.9rem; margin-bottom: 1.5rem; color: #3a2040; }
.slt-copy-area { border: 2px dashed #c4b2cd; border-radius: 10px; padding: 1.5rem 2rem; background: #fff; margin-bottom: 1.5rem; }
.slt-talk-block { text-align: center; font-family: Arial, sans-serif; margin-bottom: 1.5rem; }
.slt-talk-title { font-weight: bold; font-size: 1.15em; line-height: 1.2; }
.slt-talk-speakers { font-size: 1em; line-height: 1.3; margin-top: 0.15em; }
.slt-talk-song { font-style: italic; font-size: 1em; line-height: 1.3; margin-top: 0.1em; }
.slt-page-break-hint { font-size: 0.85em; color: #666; margin-top: 0.5em; margin-bottom: 0.75em; }
.slt-divider { border: none; border-top: 2px solid #e2d7e7; margin: 0.5rem 0 1.5rem; }
.slt-copy-marker { text-align: center; font-size: 0.85rem; color: #888; margin: 0.5rem 0; }

/* ── emaillist/weekenders.php (wl-) ─────────────────────────────────────── */
.wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
@media (max-width: 700px) { .wl-grid { grid-template-columns: 1fr; } }
.wl-row-label { grid-column: 1 / -1; margin: 1.5rem 0 .25rem; padding-bottom: .4rem; border-bottom: 2px solid #e8d5e4; font-size: 1.05rem; font-weight: 700; color: #4e1f44; }
.wl-row-label:first-child { margin-top: 0; }
.wl-section { display: flex; flex-direction: column; }
.wl-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.wl-section-header h3 { margin: 0; font-size: .95rem; color: #4e1f44; }
.btn-wl-copy { padding: .3rem .85rem; background: #723063; color: #fff; border: none; border-radius: 4px; font-size: .82rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.btn-wl-copy:hover { background: #5a2350; }

/* ── emaillist/index.php (el-) ──────────────────────────────────────────── */
.el-mode-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.el-mode-nav a { padding: .4rem 1.1rem; border-radius: 4px; font-size: .9rem; text-decoration: none; border: 1px solid #723063; color: #723063; transition: background .15s, color .15s; }
.el-mode-nav a.active, .el-mode-nav a:hover { background: #723063; color: #fff; }
.el-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
@media (max-width: 700px) { .el-grid { grid-template-columns: 1fr; } }
.el-full { grid-column: 1 / -1; }
.el-section { display: flex; flex-direction: column; }
.el-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.el-section-header h3 { margin: 0; font-size: 1rem; color: #4e1f44; }
.btn-el-copy { padding: .3rem .85rem; background: #723063; color: #fff; border: none; border-radius: 4px; font-size: .82rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.btn-el-copy:hover { background: #5a2350; }
.wl-section textarea, .el-section textarea {
    width: 100%; font-family: monospace; font-size: .82rem; border: 1px solid #ccc;
    border-radius: 4px; padding: .4rem; resize: vertical; background: #fafafa; box-sizing: border-box;
}

/* ── attendance/index.php (att-) ────────────────────────────────────────── */
.att-wrap { overflow-x: auto; border-radius: 10px; border: 1.5px solid #e4dfe4; margin-bottom: 1.75rem; }
.att-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.att-table thead { position: sticky; top: 0; z-index: 2; background: #723063; }
.att-table th {
    text-align: left; padding: 0.55rem 0.5rem; font-family: 'Poppins', sans-serif;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #fff; white-space: nowrap;
}
.att-table td { padding: 0.48rem 0.5rem; border-bottom: 1px solid #f2eff2; vertical-align: middle; color: #4e4858; }
.att-table tbody tr:last-child td { border-bottom: none; }
.att-table tbody tr:nth-child(even) td { background: #faf9fa; }
.att-table tbody tr:hover td { background: #f3eeff; }
.att-table select { width: 54px; padding: 0.2rem 0.15rem; font-size: 0.85rem; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; }
.att-table input[type="text"] { width: 100%; min-width: 140px; padding: 0.25rem 0.4rem; font-size: 0.85rem; border: 1px solid #d1d5db; border-radius: 4px; }
.att-table input[type="text"]:focus,
.att-table select:focus { outline: none; border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.15); }
.att-team-pill { display: inline-block; box-sizing: border-box; width: 6.5rem; text-align: center; background: #f3e8f0; color: #723063; font-size: 0.78rem; font-weight: 600; padding: 0.18rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.att-seg { display: inline-flex; border-radius: 4px; }
.att-seg-btn { min-width: 24px; height: 28px; padding: 0 0.25rem; margin: 0 0 0 -1px; font-size: 0.75rem; font-weight: 600; line-height: 1; color: #4e4858; background: #fff; border: 1px solid #d1d5db; border-radius: 0; cursor: pointer; }
.att-seg-btn:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
.att-seg-btn:last-child { border-radius: 0 4px 4px 0; }
.att-seg-btn:hover { background: #f3e8f0; }
.att-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(114,48,99,0.3); position: relative; z-index: 1; }
.att-seg-btn.att-seg-on, .att-seg-btn.att-seg-on:hover { color: #fff; background: #723063; border-color: #723063; position: relative; z-index: 1; }
.sc-td-saving .att-seg { opacity: 0.5; }
.sc-td-saved  .att-seg { box-shadow: 0 0 0 3px #4caf5088; transition: box-shadow 1.2s ease; }
.sc-td-error  .att-seg { box-shadow: 0 0 0 3px #f4433688; }
.att-ldr-star { color: #723063; font-size: 0.85em; opacity: 0.75; vertical-align: middle; margin-left: 2px; }
.att-filter-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.att-filter-bar input[type="search"] { flex: 1; max-width: 280px; padding: 0.35rem 0.6rem; font-size: 0.9rem; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
.att-filter-bar input[type="search"]:focus { outline: none; border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.15); }
.att-filter-count { font-size: 0.82rem; color: #888; }
#att-no-results { display: none; padding: 1rem 0; color: #888; font-style: italic; }
.att-team-toggles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; align-items: center; }
.att-team-toggle {
    display: inline-block; background: #f3e8f0; color: #723063; font-size: 0.8rem; font-weight: 600;
    padding: 0.22rem 0.75rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
    white-space: nowrap; transition: background 0.15s, border-color 0.15s; user-select: none; font-family: inherit;
}
.att-team-toggle:hover { background: #e8d0e5; }
.att-team-toggle.att-toggle-active { background: #723063; color: #fff; border-color: #723063; }
.att-actions {
    position: sticky; bottom: 0; display: flex; justify-content: center;
    background: var(--white); padding: 0.9rem 1rem; margin-top: 1.5rem; z-index: 50;
}
.att-actions .btn { min-width: 280px; text-align: center; }
@media (max-width: 640px) {
    .att-wrap { overflow-x: visible; }
    .att-table, .att-table tbody { display: block; }
    .att-table thead { display: none; }
    .att-table tbody tr {
        display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); align-items: center; gap: 0.3rem 0.6rem;
        border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.7rem 0.85rem;
        margin-bottom: 0.6rem; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .att-table tbody tr:hover td,
    .att-table tbody tr:nth-child(even) td { background: transparent; }
    .att-seg-btn { min-width: 34px; height: 40px; }
    .att-table td { display: inline-flex; align-items: center; gap: 0.3rem; border: none; padding: 0.1rem 0; font-size: 0.88rem; }
    .att-td-name { font-weight: 600; font-size: 0.95rem; }
    .att-td-team { justify-self: end; }
    .att-table .att-td-ldr { display: none; }
    .att-td-ldr.att-has-ldr { display: inline-flex; }
    .att-td-ldr.att-has-ldr::before { content: "Ldr"; color: #888; font-size: 0.75rem; }
    .att-td-first::before  { content: "1st"; color: #888; font-size: 0.75rem; }
    .att-td-second::before { content: "2nd"; color: #888; font-size: 0.75rem; }
    .att-td-third::before  { content: "3rd"; color: #888; font-size: 0.75rem; }
    /* Grid gives two equal columns (Ldr/1st, 2nd/3rd, or 1st/2nd, 3rd); fixed-width labels line the groups up */
    .att-td-ldr.att-has-ldr::before, .att-td-first::before,
    .att-td-second::before, .att-td-third::before { display: inline-block; width: 2rem; }
    .att-table .att-td-talk { display: none; }
    .att-td-talk.att-has-talk { display: inline-flex; }
    .att-td-talk.att-has-talk::before { content: "Talk"; color: #888; font-size: 0.75rem; }
    .att-td-notes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.2rem; }
    .att-td-notes::before { content: "Notes"; color: #888; font-size: 0.75rem; }
    .att-td-notes input[type="text"] { min-width: 0; width: 100%; }
    .att-table select { width: 50px; }
    .att-actions .btn { width: 100%; text-align: center; }
}

/* ── admin/index.php (al-) ──────────────────────────────────────────────── */
.al-list { list-style: none; padding: 0.6rem 1.1rem 0.9rem; margin: 0; }
.al-list li { font-size: 1.05rem; line-height: 1.45; margin-bottom: 0.4rem; display: flex; align-items: flex-start; flex-wrap: wrap; }
.al-list li a { color: #3b1d52; text-decoration: none; display: flex; align-items: flex-start; flex: 1; min-width: 0; }
.al-list li a:hover { color: #723063; text-decoration: underline; }
.al-list li.al-demo-item { background: rgba(251,191,36,0.18); border-radius: 5px; }
.al-link-icon { width: 0.85em; height: 0.85em; margin-top: 0.22em; margin-right: 0.35em; flex-shrink: 0; color: #9080b0; }
/* per-category icon colors */
.al-link-icon.lucide-list,
.al-link-icon.lucide-file-text,
.al-link-icon.lucide-printer,
.al-link-icon.lucide-tag          { color: #5580b8; } /* steel blue  — lists, docs, printables, nametags */
.al-link-icon.lucide-external-link,
.al-link-icon.lucide-folder-open  { color: #3a90c8; } /* sky blue    — external links, Drive */
.al-link-icon.lucide-map-pin      { color: #4a9060; } /* forest green — maps */
.al-link-icon.lucide-mail         { color: #3a8878; } /* teal        — email */
.al-link-icon.lucide-camera       { color: #c07830; } /* amber       — photos */
.al-link-icon.lucide-calendar-days { color: #b87030; } /* amber-gold — schedule */
.al-link-icon.lucide-landmark     { color: #a08030; } /* gold        — church */
.al-link-icon.lucide-heart-pulse  { color: #c04545; } /* red         — health/medical */
.al-link-icon.lucide-lock         { color: #9a3535; } /* dark red    — security */
.al-link-icon.lucide-bar-chart-2  { color: #6050b8; } /* indigo      — charts/metrics */
.al-link-icon.lucide-music        { color: #9840a8; } /* magenta     — music/songs */
.al-link-icon.lucide-heart        { color: #8058b0; } /* warm purple — prayer */
.al-link-icon.lucide-shield-check { color: #6068b8; } /* blue-purple — guardian angel */
.al-link-icon.lucide-pin          { color: #c05040; } /* coral red   — trackers/planners */
.al-link-icon.lucide-check-square { color: #458858; } /* green       — checklists/attendance */
.al-link-icon.lucide-package      { color: #9a7040; } /* brown       — inventory */
.al-link-icon.lucide-utensils     { color: #c07030; } /* orange      — recipes */
.al-link-icon.lucide-settings     { color: #7080a0; } /* gray-blue   — admin/system */
.al-link-icon.lucide-image        { color: #7060a8; } /* soft purple — assets/logos */
.al-link-icon.lucide-pencil       { color: #408888; } /* dark teal   — entry/registration */
.al-link-icon.lucide-message-square { color: #9a7858; } /* warm tan  — comments/evals */
.al-list li.al-sub { padding-left: 1rem; font-size: 0.82rem; }
.al-divider { height: 1px; background: #ede5f2; margin: 0.55rem 0 0.5rem; border: none; }
.al-tier { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.4rem; border-radius: 3px; vertical-align: middle; }
.al-tier-council { background: #e8dfef; color: #723063; }
.al-tier-admin { background: #723063; color: #fff; }
/* Per-link team badges (admin Team Links). Colors keyed to the TeamNumber table. */
/* Link name + team pills share a flex label. The name keeps its own column; pills
   anchor to the right (margin-left:auto). One pill: label is nowrap so the pill is
   pinned top-right and the NAME wraps in the remaining width. 2+ pills: label may
   wrap, so the pills stay on the name's line when everything fits and only drop to
   a second line (right-justified, row-gap spacing) when they don't. */
.al-link-label { display: flex; flex-wrap: nowrap; align-items: baseline; flex: 1; min-width: 0; column-gap: 0.5rem; }
.al-link-label-multi { flex-wrap: wrap; row-gap: 0.25rem; }
.al-link-name { flex: 1 1 auto; min-width: 0; }
.al-team-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; margin-left: auto; }
.al-team-tags-1 { flex: 0 0 auto; }       /* single: same line, pinned right */
.al-team-tags-multi { flex: 0 0 auto; }   /* 2+: same line if it fits, else wraps right-justified */
.al-team { display: inline-block; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.08rem 0.4rem; border-radius: 10px; line-height: 1.4; white-space: nowrap; }
.al-team-1 { background: #ede7f3; color: #5b4080; } /* Overall */
.al-team-2 { background: #fdecd8; color: #9a5a1e; } /* Kitchen */
.al-team-3 { background: #d8efe6; color: #1e7a5a; } /* Support */
.al-team-4 { background: #f6eccf; color: #8a6a1e; } /* Wheat   */
.al-team-5 { background: #f3e0f0; color: #9a3a8a; } /* Music   */
.al-team-6 { background: #dde7f6; color: #3a5a9a; } /* AC      */
/* The viewer's own team: a clear ring in the team color + a leading dot so it
   reads as "this one's yours" at a glance. */
.al-team-mine { outline: 1.5px solid currentColor; outline-offset: 1.5px; font-weight: 800; }
.al-team-mine::before { content: "\2605"; margin-right: 0.25em; }
/* Wholesale team filter bar. Team buttons inherit their tint from the .al-team-N
   colors above; the active one gets a ring in its own color. */
.al-team-filter { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: -0.4rem 0 1.4rem; }
.al-team-filter-label { font-size: 0.72rem; font-weight: 700; color: #6b5578; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.1rem; }
.al-teamf { font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 6px; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.3; opacity: 0.72; transition: opacity 0.12s, box-shadow 0.12s; }
.al-teamf[data-team="0"] { background: #ece3f2; color: #3b1d52; }
.al-teamf:hover { opacity: 1; }
.al-teamf.active { opacity: 1; box-shadow: inset 0 0 0 1.5px currentColor; }
.al-team-filter-note { font-size: 0.72rem; color: #8a7a98; font-style: italic; }
.al-level-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.55rem 0.9rem; background: #f2eaf6; border: 1px solid #ddd2e6; border-radius: 8px; margin-bottom: 1.25rem; font-size: 0.82rem; color: #3b1d52; }
.al-level-bar strong { color: #723063; }
/* Search box: the loudest thing above the cards, pinned under the nav + subnav
   while the page scrolls (--subnav-h is published by admin/index.php syncSticky()).
   The "Match: Word starts | Anywhere" toggle sits under the box and only shows
   while searching. */
.al-search-label { display: block; font-size: 1.05rem; font-weight: 700; color: var(--purple-dark); }
.al-search-row { position: sticky; top: calc(var(--nav-height) + var(--subnav-h, 3rem)); z-index: 20; background: #fff; padding: 0.5rem 0; margin-bottom: 1rem; }
.al-search-row.al-stuck { box-shadow: 0 8px 8px -8px rgba(46,16,41,0.28); }
.al-search-wrap { position: relative; }
.al-match-mode { display: none; align-items: center; gap: 0.3rem; margin-top: 0.5rem; }
.al-searching .al-match-mode { display: flex; }
.al-match-label { font-size: 0.72rem; font-weight: 700; color: #6b5578; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.1rem; }
.al-matchm { font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 6px; border: 1.5px solid #e2d7e7; background: #fff; color: #6b5578; cursor: pointer; font-family: inherit; line-height: 1.3; }
.al-matchm:hover { border-color: #c4adcf; }
.al-matchm.active { background: #ece3f2; border-color: #723063; color: #3b1d52; }
.al-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; pointer-events: none; color: var(--purple); line-height: 1; }
.al-search-icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; }
.al-search-wrap input[type="search"] { width: 100%; box-sizing: border-box; padding: 0.95rem 2.8rem 0.95rem 3rem; font-size: 1.1rem; font-family: inherit; border: 2px solid var(--purple); border-radius: 10px; outline: none; background: #fff; color: #3b1d52; box-shadow: 0 2px 10px rgba(114,48,99,0.14); text-overflow: ellipsis; transition: border-color 0.15s, box-shadow 0.15s; }
.al-search-wrap input[type="search"]::placeholder { color: #7d6a8a; opacity: 1; }
.al-search-wrap input[type="search"]:focus { border-color: var(--purple-dark); box-shadow: 0 0 0 4px rgba(114,48,99,0.2), 0 2px 10px rgba(114,48,99,0.14); }
/* "/" shortcut badge: only where there's a keyboard, and only while the box is
   idle (the clear button takes the same spot once there's text). */
.al-search-kbd { display: none; position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); font-family: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1; color: #6b5578; background: #f2eaf6; border: 1px solid #d5c6dd; border-bottom-width: 2px; border-radius: 5px; padding: 0.3rem 0.5rem; pointer-events: none; }
@media (hover: hover) { .al-search-wrap input[type="search"]:placeholder-shown:not(:focus) ~ .al-search-kbd { display: block; } }
.al-search-wrap input[type="search"]::-webkit-search-cancel-button,
.al-search-wrap input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.al-search-clear { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; color: #9b8fa8; padding: 0.2rem 0.3rem; border-radius: 4px; display: none; }
.al-search-clear:hover { color: #723063; }
.al-search-clear.visible { display: block; }
.al-search-none { text-align: center; color: #9b8fa8; font-size: 0.9rem; padding: 2.5rem 0 1rem; }
.al-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
.al-card { background: #fff; border: 1px solid #e2d7e7; border-radius: 10px; padding: 0; overflow: hidden; }
.al-card.al-council { border-color: #c4adcf; }
.al-card.al-admin { border-color: #723063; background: #fdf8fc; }
.al-card-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #fff; margin: 0; padding: 0.6rem 1.1rem; background: linear-gradient(120deg, var(--purple-dark), var(--purple)); border-bottom: none; display: flex; align-items: center; gap: 0.4rem; }
.al-card.al-admin .al-card-title { background: linear-gradient(120deg, var(--purple-deeper), var(--purple-dark)); }.al-card-title .al-tier { margin-left: auto; }
@media (max-width: 900px) { .al-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .al-card-grid { grid-template-columns: 1fr; } }
.al-tabs { display: flex; gap: 0.35rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.al-tab { background: #f2eaf6; border: 1.5px solid #e2d7e7; color: #3b1d52; font-size: 0.8rem; font-weight: 600; padding: 0.45rem 1.1rem; border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; }
.al-tab:hover { background: #e8dff0; border-color: #c4adcf; }
.al-tab.active { background: linear-gradient(120deg, var(--purple-dark), var(--purple)); color: #fff; border-color: transparent; }
.al-list-2col { column-count: 2; column-gap: 0; }
.al-list-2col li { break-inside: avoid; }
.al-list-2col .al-divider { column-span: all; }
.al-card-icon { font-size: 1em; line-height: 1; flex-shrink: 0; }
.al-card-icon svg { width: 1em; height: 1em; vertical-align: -0.125em; }
.al-list li { position: relative; padding-right: 1.6rem; }
.al-fav-btn { position: absolute; right: 0; top: 0; background: none; border: none; cursor: pointer; font-size: 0.82rem; line-height: 1.35; color: #c8b8d8; padding: 0; opacity: 0.25; transition: opacity 0.12s, color 0.12s; font-family: inherit; }
.al-list li:hover .al-fav-btn { opacity: 1; }
.al-fav-btn.al-fav-on { opacity: 1; color: #e8a800; }
@media (hover: hover) { .al-fav-btn:hover { color: #f5c430; } }
@media (hover: none) { .al-fav-btn { opacity: 0.55; font-size: 1rem; padding: 0 0.1rem; } }
.al-tab-favs { border-style: dashed; }
.al-tab-favs.active { border-style: solid; }
.al-fav-empty { grid-column: 1 / -1; text-align: center; color: #9b8fa8; padding: 3rem 1rem; font-size: 0.92rem; line-height: 1.7; }
.al-fav-empty-star { font-size: 1.8rem; display: block; margin-bottom: 0.4rem; color: #d4c4de; }
.al-list li.al-fav-li { display: flex; align-items: center; gap: 0.35rem; padding-right: 0.4rem !important; }
.al-fav-li .al-fav-btn { position: static; opacity: 1; }
.al-fav-li a { flex: 1; min-width: 0; }
.al-fav-handle { cursor: grab; color: #c8b8d8; font-size: 1.1rem; line-height: 1; flex-shrink: 0; user-select: none; touch-action: none; padding: 0.3rem 0.1rem; }
.al-fav-handle:active { cursor: grabbing; }
.al-fav-li.al-fav-dragging { opacity: 0.35; }
.al-fav-sep-li .al-divider { flex: 1; margin: 0 0.25rem; }
.al-fav-sep-li .al-fav-btn { color: #c8b8d8; font-size: 0.75rem; }
.al-fav-add-sep { display: block; width: 100%; background: none; border: none; border-top: 1px dashed #e0d4ec; color: #a890be; font-size: 0.78rem; padding: 0.45rem 1.1rem; text-align: left; cursor: pointer; font-family: inherit; }
.al-fav-add-sep:hover { color: #7c5295; }
.al-hint { font-size: 0.8rem; color: #9b8fa8; margin: -0.5rem 0 1rem; }
.al-hint-foot { margin: 1.5rem 0 0; text-align: center; }
/* Phones: shrink the header and clear the decks while filtering so results
   show above the on-screen keyboard (admin/index.php liftSearch()). */
@media (max-width: 640px) {
    .al-page-header { padding: 1rem 1rem 0.9rem; }
    .al-page-header .page-sub { display: none; }
    .al-search-row { margin-bottom: 0.5rem; }
    .al-search-wrap input[type="search"] { padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 1.05rem; }
    .al-searching .al-hint,
    .al-searching .al-team-filter { display: none; }
    /* Keep the page tall enough that the filter box can scroll to the top
       even when only a card or two match. */
    .al-searching .al-card-grid { min-height: 100vh; align-content: start; }
}

/* Tap-to-expand link descriptions (mobile-friendly replacement for hover tooltips) */
.al-desc-btn { background: none; border: none; cursor: pointer; padding: 0 0.15rem; margin-left: 0.1rem; color: #b6a8cc; line-height: 1; flex-shrink: 0; align-self: flex-start; margin-top: 0.25em; -webkit-tap-highlight-color: transparent; }
.al-desc-icon { width: 0.92em; height: 0.92em; vertical-align: -0.14em; }
.al-desc-btn.al-desc-active { color: #7c5295; }
@media (hover: hover) { .al-desc-btn:hover { color: #7c5295; } }
.al-desc { display: none; margin: 0.2rem 0 0.25rem 1.2rem; font-size: 0.82rem; line-height: 1.4; color: #6b6076; width: 100%; }
.al-desc.al-desc-on { display: block; }

/* ── admin shared: item-card, item-field, btn-save, btn-del ─────────────── */
.item-card { background: #fff; border: 1.5px solid #e4dfe4; border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.item-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #f2eff2; }
.item-card-name { font-weight: 600; font-size: 0.95rem; color: #2d2438; }
.item-card-active { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #555; cursor: pointer; white-space: nowrap; }
.item-card-active input[type="checkbox"] { accent-color: var(--purple); width: 16px; height: 16px; cursor: pointer; }
.item-card-top { display: flex; gap: 0.75rem; margin-bottom: 0.6rem; align-items: flex-start; }
.item-card-id { font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; }
.item-card-row { display: flex; gap: 0.75rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.item-field { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 120px; }
.item-field-wide { flex: 2; }
.item-field-sort { flex: 0 0 80px; }
.item-field-num  { flex: 0 0 90px; }
.item-field label { font-family: 'Poppins', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #723063; }
.item-field input[type="text"],
.item-field input[type="date"],
.item-field input[type="number"],
.item-field select,
.item-field textarea { width: 100%; padding: 0.3rem 0.5rem; font-size: 0.875rem; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; box-sizing: border-box; font-family: inherit; }
.item-field input[type="text"]:focus,
.item-field input[type="date"]:focus,
.item-field input[type="number"]:focus,
.item-field select:focus,
.item-field textarea:focus { outline: none; border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.15); }
.item-field textarea { resize: vertical; min-height: 60px; }
.item-card-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; border-top: 1px solid #f2eff2; padding-top: 0.75rem; }
.btn-save { background: var(--purple); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; padding: 0.35rem 0.9rem; }
.btn-save:hover { background: var(--purple-dark); }
.btn-del { background: transparent; color: #888; border: 1.5px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 0.85rem; padding: 0.35rem 0.9rem; }
.btn-del:hover { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }

/* ── admin/council_member_tracker.php (cmt-) ────────────────────────────── */
.cmt-filter-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.cmt-filter-bar input[type="search"] { flex: 1; max-width: 280px; padding: 0.35rem 0.6rem; font-size: 0.9rem; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-family: inherit; }
.cmt-filter-bar input[type="search"]:focus { outline: none; border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.15); }
.cmt-filter-count { font-size: 0.82rem; color: #888; white-space: nowrap; }
#cmt-no-results { display: none; padding: 1rem 0; color: #888; font-style: italic; }
@media (max-width: 600px) {
    .cmt-filter-bar input[type="search"] { max-width: none; width: 100%; }
}

/* ── admin/update_teconnect_dev.php (dct-) ──────────────────────────────── */
.dct-banner { display: flex; align-items: flex-start; gap: 0.75rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 0.9rem 1.1rem; margin-bottom: 2rem; font-size: 0.88rem; color: #78350f; line-height: 1.5; }
.dct-banner-icon { font-size: 1.1rem; flex-shrink: 0; padding-top: 0.05rem; }
.dct-banner code { font-family: 'Courier New', monospace; font-weight: 700; background: rgba(0,0,0,0.08); padding: 0.1em 0.4em; border-radius: 3px; }
.dct-all { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; flex-wrap: wrap; }
.dct-log-wrap { display: none; margin-bottom: 2rem; }
.dct-log-wrap.visible { display: block; }
.dct-log-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; margin-bottom: 0.4rem; }
.dct-log { background: #1e1e2e; color: #d4d4d8; font-family: 'Courier New', monospace; font-size: 0.82rem; line-height: 1.6; padding: 1rem 1.25rem; border-radius: 8px; white-space: pre-wrap; word-break: break-all; max-height: 460px; overflow-y: auto; margin: 0; }
.dct-list { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.dct-list-header { display: flex; justify-content: space-between; align-items: center; background: #f9fafb; padding: 0.6rem 1rem 0.6rem 2.75rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; border-bottom: 1px solid #e5e7eb; }
.dct-list-meta { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; margin-bottom: 0.85rem; }
.dct-group-header-row { display: flex; align-items: center; gap: 0.75rem; background: #f3effa; padding: 0.7rem 1rem; border-bottom: 1px solid #e5e7eb; }
.dct-group-name { flex: 1; font-size: 0.95rem; font-weight: 700; color: #4e1f44; }
.dct-group-count { display: inline-block; background: #723063; color: #fff; font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.35rem; vertical-align: middle; }
.dct-hidden { display: none !important; }
.dct-filter { position: relative; margin-bottom: 1rem; max-width: 420px; }
.dct-filter-input { width: 100%; box-sizing: border-box; padding: 0.55rem 2.2rem 0.55rem 0.85rem; font-size: 0.9rem; border: 1px solid #d1d5db; border-radius: 6px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.dct-filter-input:focus { border-color: #723063; box-shadow: 0 0 0 3px rgba(114,48,99,0.12); }
.dct-filter-clear { display: none; position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); background: none; border: none; font-size: 1.25rem; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 0.25rem; }
.dct-filter-clear:hover { color: #4e1f44; }
.dct-check input[type="checkbox"]:indeterminate + .dct-toggle { background: #b48aa9; }
.dct-check input[type="checkbox"]:indeterminate + .dct-toggle::after { transform: translateX(0.5rem); }
.dct-row { display: flex; align-items: center; padding: 0.55rem 1rem; border-bottom: 1px solid #f3f4f6; gap: 0.75rem; }
.dct-row:last-child { border-bottom: none; }
.dct-row:hover { background: #fafafa; }
.dct-check { display: flex; align-items: center; flex-shrink: 0; }
.dct-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.dct-check .dct-toggle { display: inline-block; width: 2.2rem; height: 1.2rem; background: #d1d5db; border-radius: 999px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.dct-check .dct-toggle::after { content: ''; position: absolute; top: 0.17rem; left: 0.17rem; width: 0.86rem; height: 0.86rem; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.dct-check input[type="checkbox"]:checked + .dct-toggle { background: #723063; }
.dct-check input[type="checkbox"]:checked + .dct-toggle::after { transform: translateX(1rem); }
.dct-check input[type="checkbox"]:disabled + .dct-toggle { opacity: 0.5; cursor: not-allowed; }
.dct-tname { font-size: 1rem; color: #1e1e2e; flex: 1; }
.dct-btn { flex-shrink: 0; width: 18rem; height: 2.5rem; text-align: center; background: #723063; color: #fff; border: none; border-radius: 5px; padding: 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dct-btn:hover:not(:disabled) { background: #5a2450; }
.dct-btn.dct-btn-group { background: transparent; border: 2px solid #723063; color: #723063; }
.dct-btn.dct-btn-group:hover:not(:disabled) { background: #723063; color: #fff; }
.dct-btn:disabled, .btn.btn-purple:disabled, .btn.btn-outline-purple:disabled { opacity: 0.5; cursor: not-allowed; }
.dct-empty { color: #6b7280; font-style: italic; }
.dct-list--grouped .dct-row { padding-left: 2.75rem; }
.dct-log .dct-line-error   { color: #f87171; background: rgba(248,113,113,0.12); display: block; border-left: 3px solid #f87171; padding-left: 0.5rem; margin-left: -0.5rem; }
.dct-log .dct-line-success { color: #4ade80; display: block; }
.dct-log .dct-line-warning { color: #fbbf24; display: block; }
.dct-log-label-errors { color: #f87171; font-weight: 800; margin-left: 0.5rem; }
.dct-completion { margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 6px; font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 0.6rem; }
.dct-completion.dct-comp-success { background: #dcfce7; border: 1px solid #4ade80; color: #166534; }
.dct-completion.dct-comp-error   { background: #fee2e2; border: 1px solid #f87171; color: #991b1b; }
.dct-jump-btn { background: none; border: 1px solid currentColor; border-radius: 4px; padding: 0.2rem 0.65rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; margin-left: auto; white-space: nowrap; }
.dct-jump-btn:hover { background: rgba(0,0,0,0.06); }
.dct-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.dct-modal-overlay.visible { opacity: 1; pointer-events: all; }
.dct-modal { background: #fff; border-radius: 10px; padding: 1.75rem 2rem 1.5rem; max-width: 400px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); transform: translateY(-12px); transition: transform 0.15s; }
.dct-modal-overlay.visible .dct-modal { transform: translateY(0); }
.dct-modal-title { font-size: 1.05rem; font-weight: 700; color: #1e1e2e; margin: 0 0 0.5rem; }
.dct-modal-msg { margin: 0 0 0.35rem; font-size: 0.9rem; line-height: 1.6; color: #374151; }
.dct-modal-detail { margin: 0 0 1.5rem; font-size: 0.82rem; color: #6b7280; line-height: 1.5; }
.dct-modal-btns { display: flex; gap: 0.65rem; justify-content: flex-end; }
.dct-modal-btns .btn { min-width: 90px; }

/* ── admin/picture200_list.php (pl-) ────────────────────────────────────── */
.pl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .pl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .pl-grid { grid-template-columns: repeat(2, 1fr); } }
.pl-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.pl-thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; object-fit: cover; display: block; background: #e5e7eb; }
.pl-filename { font-size: 0.75rem; color: #6b7280; text-align: center; word-break: break-all; }
.pl-empty { color: #6b7280; font-style: italic; padding: 2rem 0; }
.pl-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pl-toolbar-note { font-size: 0.85rem; color: #6b7280; }
.pl-flash { background: #ecfdf5; border: 1px solid #10b981; color: #065f46; border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; }
.pl-actions { display: flex; gap: 0.4rem; align-items: center; }
.pl-del-form { margin: 0; }
.pl-btn { padding: 0.3rem 0.8rem; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: var(--purple-dark, #4a1d3f); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.pl-btn:hover { background: #f3f4f6; }
.pl-btn-add { background: var(--purple, #723063); color: #fff; border-color: transparent; padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.pl-btn-add:hover { background: var(--purple, #723063); opacity: 0.9; }
.pl-btn-del { color: #b91c1c; }
.pl-missing { display: flex; align-items: center; justify-content: center; border: 2px dashed #9ca3af; background: #f9fafb; color: #6b7280; font-weight: 600; box-sizing: border-box; }
.pcrop-title { color: #fff; font-weight: 700; margin-bottom: 0.75rem; }

/* ── admin/delegation_task_input.php (team-group-heading, dlg-) ─────────── */
.team-group-heading { font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #fff; background: #723063; margin: 1.5rem 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: 6px; }
.team-group-heading:first-of-type { margin-top: 0; }
/* One grid row per task on desktop. The same column template drives the
   sticky column-label strip, so labels and fields always line up. */
.dlg-row, .dlg-cols {
    display: grid; align-items: center; column-gap: 0.5rem;
    grid-template-columns: 3.75rem minmax(0, 1fr) 12rem 4.25rem 9.5rem 3rem 4.5rem;
    grid-template-areas: "sort name anchor offset preview autodone actions";
}
.team-group { margin-bottom: 1.75rem; scroll-margin-top: calc(var(--nav-height) + var(--subnav-h, 3rem) + 0.5rem); }
.dlg-group-head {
    position: sticky; top: calc(var(--nav-height) + var(--subnav-h, 3rem)); z-index: 15;
    background: #fff; padding-top: 0.25rem;
}
.dlg-group-head .team-group-heading { margin: 0; }
.dlg-cols { padding: 0.35rem 0.6rem 0.3rem; border-bottom: 1.5px solid #e4dfe4; }
.dlg-cols span { font-family: 'Poppins', sans-serif; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #723063; }
.dlg-cols span:nth-child(6) { text-align: center; }
.dlg-row {
    position: relative; padding: 0.3rem 0.6rem; border-bottom: 1px solid #f0ecf0;
    border-left: 3px solid transparent;
    scroll-margin-top: calc(var(--nav-height) + var(--subnav-h, 3rem) + var(--dlg-head-h, 4.5rem) + 0.5rem);
}
.dlg-row:hover { background: #fcfafc; }
.dlg-row--weekend { background: #faf5f9; border-left-color: #c39eb8; }
.dlg-row--weekend:hover { background: #f6eef4; }
.dlg-row--error { box-shadow: inset 0 0 0 1.5px #fca5a5; }
.dlg-sort    { grid-area: sort; }
.dlg-name    { grid-area: name; }
.dlg-anchor  { grid-area: anchor; }
.dlg-offset  { grid-area: offset; }
.dlg-preview { grid-area: preview; }
.dlg-auto-cell { grid-area: autodone; }
.dlg-actions { grid-area: actions; }
.dlg-row input[type="number"], .dlg-row select, .dlg-row textarea {
    width: 100%; box-sizing: border-box; padding: 0.3rem 0.45rem; font-size: 0.875rem; font-family: inherit;
    color: #2d2438; background: #fff; border: 1px solid #e2dde2; border-radius: 4px;
}
.dlg-row input[type="number"]:focus, .dlg-row select:focus, .dlg-row textarea:focus { outline: none; border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.15); }
.dlg-row input:disabled { background: #f7f6f7; color: #bbb; }
.dlg-name { resize: none; overflow: hidden; line-height: 1.35; min-height: 0; field-sizing: content; }
.dlg-preview { font-size: 0.82rem; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg-row--nodue .dlg-preview { color: #aaa; }
.dlg-pill { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; font-size: 0.66rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.04em; color: #723063; background: #efe3ec; border-radius: 999px; vertical-align: 1px; }
.dlg-warn { display: block; font-size: 0.7rem; color: #b03636; white-space: normal; }
.dlg-auto-cell { display: flex; justify-content: center; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.8rem; color: #555; }
.dlg-auto-cell input { accent-color: var(--purple); width: 16px; height: 16px; cursor: pointer; margin: 0; }
.dlg-mobile-only { display: none; }
.dlg-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.15rem; }
.dlg-menu { position: relative; }
.dlg-menu summary, .dlg-del {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 1px solid transparent; border-radius: 5px; background: transparent; color: #888; cursor: pointer; padding: 0;
    list-style: none;
}
.dlg-menu summary::-webkit-details-marker { display: none; }
.dlg-menu summary svg, .dlg-del svg { width: 17px; height: 17px; }
.dlg-menu summary:hover, .dlg-menu[open] summary { color: #723063; background: #f5f0f5; border-color: #e2d7e7; }
.dlg-del:hover { color: #b91c1c; background: #fef2f2; border-color: #fca5a5; }
.dlg-menu-pop {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 14rem;
    background: #fff; border: 1.5px solid #ddd6e8; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); padding: 0.6rem 0.7rem;
}
.dlg-menu-pop label { display: flex; flex-direction: column; gap: 0.3rem; font-family: 'Poppins', sans-serif; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #723063; }
.dlg-menu-pop select { font-family: 'Inter', sans-serif; font-weight: 400; text-transform: none; letter-spacing: normal; }
/* Floats over the row's top edge so it never steals column width. */
.dlg-save-status {
    position: absolute; right: 0.6rem; top: -0.55rem; z-index: 5; display: none;
    padding: 0.05rem 0.5rem; font-size: 0.72rem; font-weight: 600; border-radius: 999px; white-space: nowrap;
}
.dlg-save-status.is-saving { display: block; color: #666; background: #f1f1f1; }
.dlg-save-status.is-ok     { display: block; color: #1a7a45; background: #e3f4ea; }
.dlg-save-status.is-error  { display: block; color: #b03636; background: #fdecec; border: 1px solid #fca5a5; }

/* Narrow screens: each row stacks into a small card. */
@media (max-width: 960px) {
    .dlg-cols { display: none; }
    .dlg-group-head { padding-bottom: 0.4rem; }
    .dlg-row {
        grid-template-columns: 3.75rem minmax(0, 1fr) 4.25rem;
        grid-template-areas:
            "sort    name    name"
            "anchor  anchor  offset"
            "preview preview preview"
            "autodone autodone actions";
        row-gap: 0.4rem; padding: 0.7rem 0.6rem; border: 1.5px solid #e4dfe4; border-radius: 10px; margin-bottom: 0.6rem;
    }
    .dlg-row--weekend { border-left: 3px solid #c39eb8; }
    .dlg-auto-cell { justify-content: flex-start; }
    .dlg-mobile-only { display: inline; }
    .dlg-preview { white-space: normal; }
}

/* ── admin/medical_conditions_input.php (admin-table) ──────────────────── */
.admin-wrap { border-radius: 10px; border: 1.5px solid #e4dfe4; margin-bottom: 1.75rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-table thead { background: #723063; }
.admin-table th { text-align: left; padding: 0.55rem 0.5rem; font-family: 'Poppins', sans-serif; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #fff; white-space: nowrap; }
.admin-table td { padding: 0.48rem 0.75rem; border-bottom: 1px solid #f2eff2; vertical-align: middle; color: #4e4858; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:nth-child(even) td { background: #faf9fa; }
.admin-table tbody tr:hover td { background: #f3eeff; }
.admin-table input[type="text"] { width: 100%; padding: 0.25rem 0.4rem; font-size: 0.85rem; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; box-sizing: border-box; }
.admin-table input[type="text"]:focus { outline: none; border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.15); }
.col-id { width: 60px; color: #888; font-size: 0.8rem; }
.col-condition { width: 100%; }
.actions-cell { white-space: nowrap; text-align: center; width: 90px; }

/* ── groceries/grocery_list.php (gl-) ───────────────────────────────────── */
.gl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.gl-card { background: #fff; border: 1px solid #e2d7e7; border-radius: 10px; padding: 1.1rem 1.25rem; }
.gl-card h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #723063; margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e2d7e7; }
.gl-card ul { list-style: disc; padding-left: 1.2rem; margin: 0; font-size: 0.9rem; line-height: 1.8; color: #2a1a36; }
.gl-card ul li { margin-bottom: 0.1rem; }
.gl-card .gl-empty { font-size: 0.85rem; color: #9b8fa8; font-style: italic; }
.gl-item-for { display: block; font-size: 0.72rem; color: #9b8fa8; font-style: italic; padding-left: 0.6rem; margin-top: 0.05rem; margin-bottom: 0.2rem; }
.gl-summary { background: #f9f5f8; border: 1px solid #e2d7e7; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.875rem; }
.gl-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.gl-summary table { width: 100%; border-collapse: collapse; }
.gl-summary td { padding: 0.2rem 0.75rem 0.2rem 0; vertical-align: top; line-height: 1.6; }
.gl-summary td:first-child { font-weight: 600; color: #723063; white-space: nowrap; width: 1%; }
.gl-summary-footer { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid #e2d7e7; }
.gl-actions { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.gl-print-header { display: none; margin-bottom: 1rem; }
.gl-print-header h2 { margin: 0 0 0.25rem; font-size: 14pt; }
.gl-print-header p { margin: 0; font-size: 9pt; color: #555; }
@media print {
    .no-print { display: none !important; }
    nav, .subnav, .page-header, footer { display: none !important; }
    .gl-print-header { display: block !important; }
    body { font-size: 10pt; }
    .gl-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .gl-card { border: 1px solid #ccc; padding: 0.5rem 0.75rem; border-radius: 4px; }
    .gl-card h3 { font-size: 8pt; margin-bottom: 0.3rem; padding-bottom: 0.2rem; }
    .gl-card ul { font-size: 9pt; line-height: 1.5; }
    .gl-summary { border: 1px solid #ccc; }
    section { padding: 0 !important; }
    .section-inner { padding: 0 !important; }
}
@media (max-width: 600px) {
    .gl-grid { grid-template-columns: 1fr; }
    .gl-summary-grid { grid-template-columns: 1fr; }
    .gl-summary-footer { border-top: none; margin-top: 0; padding-top: 0; }
}

/* ── admin/links_admin.php — icon picker (la-) ───────────────────────────── */
/* ── links_admin confirm modal ───────────────────────────────────────────── */
.la-confirm-box { background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(114,48,99,0.22); width: min(380px, 92vw); padding: 2rem 1.75rem 1.5rem; text-align: center; }
.la-confirm-icon { width: 48px; height: 48px; background: #fef2f2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.la-confirm-icon i { width: 22px; height: 22px; color: #dc2626; }
.la-confirm-title { margin: 0 0 0.5rem; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: #2a1a36; }
.la-confirm-msg { margin: 0 0 1.5rem; font-size: 0.85rem; color: #6b5578; line-height: 1.5; }
.la-confirm-actions { display: flex; gap: 0.6rem; justify-content: center; }
/* Neutral (non-destructive) variant — purple icon instead of the red delete look. */
.la-confirm-box--neutral .la-confirm-icon   { background: var(--purple-pale); }
.la-confirm-box--neutral .la-confirm-icon i { color: var(--purple); }

/* ── links_admin icon picker (la-) ──────────────────────────────────────── */
.la-icon-trigger { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; border: 1.5px solid #c9b8d0; border-radius: 6px; background: #fff; cursor: pointer; font-size: 0.82rem; color: #4e1f44; transition: border-color 0.15s, background 0.15s; white-space: nowrap; }
.la-icon-trigger:hover { border-color: #723063; background: #fdf8fc; }
.la-icon-trigger svg, .la-icon-trigger i { width: 16px; height: 16px; flex-shrink: 0; }
.la-icon-trigger .la-icon-name { font-family: 'Inter', sans-serif; font-size: 0.78rem; color: #6b5578; }

.la-picker-overlay { position: fixed; inset: 0; background: rgba(30,10,40,0.35); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.la-picker-overlay[hidden] { display: none; }
.la-picker-box { background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(114,48,99,0.22); width: min(640px, 96vw); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.la-picker-head { padding: 0.85rem 1rem 0; display: flex; gap: 0.6rem; align-items: center; border-bottom: 1px solid #ede8f0; flex-shrink: 0; }
.la-picker-head h3 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 700; color: #4e1f44; flex: 1; }
.la-picker-search { flex: 1; padding: 0.35rem 0.65rem; border: 1.5px solid #c9b8d0; border-radius: 6px; font-size: 0.82rem; font-family: 'Inter', sans-serif; outline: none; }
.la-picker-search:focus { border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.12); }
.la-picker-close { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: #9b8fa8; padding: 0 0.2rem; }
.la-picker-close:hover { color: #4e1f44; }

.la-picker-body { overflow-y: auto; padding: 0.75rem 1rem 1rem; }
.la-picker-group { margin-bottom: 1rem; }
.la-picker-group-label { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9b8fa8; margin: 0 0 0.4rem; }
.la-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
.la-picker-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0.45rem 0.2rem; border: 1.5px solid transparent; border-radius: 7px; cursor: pointer; transition: border-color 0.12s, background 0.12s; background: none; }
.la-picker-item:hover { border-color: #c9b8d0; background: #fdf8fc; }
.la-picker-item.la-picker-selected { border-color: #723063; background: #fdf0f9; }
.la-picker-item i, .la-picker-item svg { width: 20px; height: 20px; color: #4e1f44; }
.la-picker-item span { font-size: 0.6rem; color: #6b5578; text-align: center; line-height: 1.2; word-break: break-all; }
.la-picker-none { padding: 2rem; text-align: center; color: #9b8fa8; font-size: 0.85rem; font-style: italic; }
.la-picker-search-result { margin-bottom: 0.5rem; }
.la-picker-search-result .la-picker-group-label { color: #723063; }

/* ── links_admin card/link editor rows ───────────────────────────────────── */
.la-filter-wrap { position: relative; display: flex; align-items: center; margin-bottom: 1.5rem; }
.la-filter-icon { position: absolute; left: 0.65rem; width: 15px; height: 15px; color: #a070b0; pointer-events: none; flex-shrink: 0; }
.la-filter-input { width: 100%; padding: 0.45rem 0.75rem 0.45rem 2.1rem; border: 1.5px solid #8a3870; border-radius: 8px; font-size: 0.88rem; font-family: 'Inter', sans-serif; outline: none; background: #fff; }
.la-filter-input:focus { border-color: #5a1f4a; box-shadow: 0 0 0 2px rgba(114,48,99,0.18); }
.la-filter-count { margin-left: 0.75rem; font-size: 0.78rem; color: #7a5898; white-space: nowrap; }

.la-section-head { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0.6rem; }
.la-section-head h2 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: #4e1f44; }
.la-section-head .la-count { font-size: 0.75rem; color: #9b8fa8; }
.la-add-btn { margin-left: auto; }

.la-card-row { background: #fff; border: 1.5px solid #8a3870; border-radius: 10px; margin-bottom: 0.55rem; transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden; }
.la-card-row.la-inactive { opacity: 0.55; }
.la-card-row.la-open { border-color: #5a1f4a; box-shadow: 0 3px 16px rgba(114,48,99,0.22); }
.la-card-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; cursor: pointer; user-select: none; background: #f0e4f5; transition: background 0.15s; }
.la-card-row.la-open .la-card-head { background: #e4d0ee; }
.la-card-handle { color: #a070b0; cursor: grab; font-size: 1rem; flex-shrink: 0; }
.la-card-summary { flex: 1; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: #2a1a36; }
.la-card-summary i { width: 16px; height: 16px; color: #723063; flex-shrink: 0; }
.la-card-tab-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.1rem 0.45rem; border-radius: 99px; background: #ddc8f0; color: #4e1070; }
.la-card-tier-badge { font-size: 0.65rem; padding: 0.1rem 0.45rem; border-radius: 99px; background: #fde68a; color: #78350f; }
.la-card-chevron { margin-left: auto; color: #a070b0; transition: transform 0.2s; }
.la-card-row.la-open .la-card-chevron { transform: rotate(180deg); color: #723063; }
.la-card-body { display: none; border-top: none; padding: 0.75rem 0.85rem 0.85rem; background: #fdf8ff; border-radius: 0 0 8px 8px; }
.la-card-row.la-open .la-card-body { display: block; }
.la-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.la-field { display: flex; flex-direction: column; gap: 0.2rem; }
.la-field label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #7a5898; }
.la-field input, .la-field select { padding: 0.3rem 0.5rem; border: 1.5px solid #c8a8dc; border-radius: 6px; font-size: 0.83rem; font-family: 'Inter', sans-serif; outline: none; background: #fff; }
.la-field input:focus, .la-field select:focus { border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.18); }
.la-card-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem; }
.la-del-btn { margin-left: auto; }

.la-card-config { border: 1.5px solid #b8a060; border-radius: 8px; margin-bottom: 1rem; overflow: hidden; }
.la-card-config-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.7rem; cursor: pointer; user-select: none; background: #f0e8c8; transition: background 0.15s; }
.la-card-config.la-cfg-open .la-card-config-head { background: #e8ddb0; }
.la-card-config-head svg, .la-card-config-head i { width: 14px; height: 14px; color: #7a6030; flex-shrink: 0; }
.la-card-config-label { flex: 1; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #4a3810; }
.la-card-config-chevron { color: #7a6030; transition: transform 0.2s; flex-shrink: 0; }
.la-card-config.la-cfg-open .la-card-config-chevron { transform: rotate(180deg); }
.la-card-config-body { display: none; padding: 0.75rem 0.8rem 0.8rem; background: #faf7ec; border-top: 1px solid #cfc080; }
.la-card-config.la-cfg-open .la-card-config-body { display: block; }

.la-links-area { margin-top: 1rem; padding-top: 0.85rem; border-top: 2px solid #c0a0d4; }
.la-links-area h4 { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #7a5898; }
.la-link-row { background: #fff; border: 1px solid #8a3870; border-radius: 7px; margin-bottom: 0.35rem; transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden; }
.la-link-row.la-inactive { opacity: 0.5; }
.la-link-row.la-sep-row { background: #f8f2fc; }
.la-link-row.la-open { border-color: #5a1f4a; border-width: 1.5px; box-shadow: 0 2px 8px rgba(114,48,99,0.18); }
.la-link-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.65rem; cursor: pointer; background: #f0e4f5; transition: background 0.15s; }
.la-link-row.la-open .la-link-head { background: #e4d0ee; }
.la-link-handle { color: #a070b0; cursor: grab; font-size: 0.9rem; flex-shrink: 0; }
.la-link-summary { flex: 1; font-size: 0.8rem; color: #3d2250; display: flex; align-items: center; gap: 0.4rem; overflow: hidden; }
.la-link-summary i { width: 14px; height: 14px; color: #723063; flex-shrink: 0; }
.la-link-summary .la-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-link-summary .la-sep-label { font-style: italic; color: #8860a8; font-size: 0.75rem; }
.la-link-vis { font-size: 0.65rem; color: #7a5898; white-space: nowrap; flex-shrink: 0; }
.la-link-chevron { color: #a070b0; transition: transform 0.2s; flex-shrink: 0; }
.la-link-row.la-open .la-link-chevron { transform: rotate(180deg); color: #723063; }
.la-link-body { display: none; border-top: 1px solid #c8a8dc; padding: 0.6rem 0.7rem 0.7rem; background: #fdf8ff; border-radius: 0 0 6px 6px; }
.la-link-row.la-open .la-link-body { display: block; }
.la-link-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.8rem; margin-bottom: 0.5rem; }
.la-link-fields .la-full { grid-column: 1 / -1; }
.la-link-fields textarea { width: 100%; padding: 0.3rem 0.5rem; border: 1.5px solid #c8a8dc; border-radius: 6px; font-size: 0.82rem; font-family: 'Inter', sans-serif; resize: vertical; min-height: 52px; outline: none; box-sizing: border-box; background: #fff; }
.la-link-fields textarea:focus { border-color: #723063; box-shadow: 0 0 0 2px rgba(114,48,99,0.18); }
.la-link-actions { display: flex; gap: 0.4rem; align-items: center; }
.la-add-link-btn { width: 100%; margin-top: 0.45rem; padding: 0.35rem; font-size: 0.78rem; background: none; border: 1.5px dashed #b090c8; border-radius: 7px; color: #7a5898; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.la-add-link-btn:hover { border-color: #723063; color: #723063; }

/* ============================================================
   Closing Service outline (teamonly/closing_service.php)
   ============================================================ */
.cs-note { padding: 0.8rem 1rem; margin: 0 0 0.7rem; background: #f7f4f9; border-left: 4px solid #cbb8d6; border-radius: 6px; font-size: 0.92rem; color: #3d2a48; transition: background 0.15s ease, border-color 0.15s ease; }
.cs-note p { margin: 0 0 0.5rem; }
.cs-note p:last-child { margin-bottom: 0; }

.cs-section-heading { margin: 2rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid #723063; color: #4e1f44; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.3rem; }
.cs-section-heading:first-of-type { margin-top: 1rem; }

.cs-divider { margin: 1.6rem 0 0.6rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8a7a98; }

.cs-cue { border-left: 4px solid #e4dfe4; border-radius: 6px; padding: 0.75rem 1rem; margin: 0 0 0.6rem; background: transparent; transition: background 0.15s ease, border-color 0.15s ease; }
.cs-cue-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.cs-cue-title { font-weight: 700; color: #2e1029; }
.cs-cue p { margin: 0 0 0.5rem; }
.cs-cue p:last-child { margin-bottom: 0; }
.cs-cue ul { margin: 0.2rem 0 0.5rem; padding-left: 1.2rem; }
.cs-cue li { margin-bottom: 0.3rem; }

.cs-pill { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.08rem 0.45rem; border-radius: 10px; line-height: 1.5; white-space: nowrap; }
.cs-pill-overall      { background: #ede7f3; color: #5b4080; }
.cs-pill-kitchen       { background: #fdecd8; color: #9a5a1e; }
.cs-pill-support       { background: #d8efe6; color: #1e7a5a; }
.cs-pill-wheat         { background: #f6eccf; color: #8a6a1e; }
.cs-pill-music         { background: #f3e0f0; color: #9a3a8a; }
.cs-pill-ac            { background: #dde7f6; color: #3a5a9a; }
.cs-pill-sd            { background: #d6eef2; color: #1e6a7a; }
.cs-pill-photographer  { background: #faedcf; color: #8a6410; }
.cs-pill-council       { background: #e3e0f6; color: #463a8a; }

.cs-script-line { border-left: 4px solid transparent; border-radius: 4px; padding: 0.35rem 0.6rem; margin: 0 0 0.35rem; transition: background 0.15s ease, border-color 0.15s ease; }
.cs-script-line p { margin: 0 0 0.35rem; }
.cs-script-line p:last-child { margin-bottom: 0; }
.cs-script-line .cs-cue-head { margin-bottom: 0.2rem; }

.cs-read { background: #f4eef9; border: 1px solid #ddccea; border-radius: 10px; padding: 0.8rem 1.1rem; margin: 0.55rem 0; font-style: italic; color: #3d2a48; }
.cs-read p { margin: 0 0 0.5rem; }
.cs-read p:last-child { margin-bottom: 0; }

.cs-blank { color: #b0a8b8; font-weight: 600; }

.cs-tl-lead { font-weight: 600; margin: 0.4rem 0 0.3rem; }
.cs-cue ul.cs-tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.4rem 1rem; margin: 0 0 0.3rem; padding: 0; list-style: none; }
.cs-tl-grid li { font-weight: 600; color: #2e1029; }

.cs-filter { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cs-filter-label { font-size: 0.72rem; font-weight: 700; color: #6b5578; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.1rem; }
.cs-teamf { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; padding: 0.32rem 0.7rem; border-radius: 7px; border: 1.5px solid #ccc; background: #fff; color: #888; cursor: pointer; font-family: inherit; line-height: 1.3; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.cs-teamf:hover { filter: brightness(0.97); }
.cs-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.cs-clear-btn { font-size: 0.78rem; font-weight: 600; padding: 0.32rem 0.7rem; border-radius: 7px; border: 1.5px solid #cfc8d0; background: #fff; color: #6b6578; cursor: pointer; font-family: inherit; }
.cs-clear-btn:hover { border-color: #723063; color: #723063; }

.report-controls:has(.cs-filter) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; }

.cs-hint { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 1rem; padding: 0.6rem 0.85rem; background: #f2ecf6; border: 1px solid #ddd0e6; border-radius: 8px; font-size: 0.82rem; color: #55415f; line-height: 1.5; }
.cs-hint strong { color: #4e1f44; font-weight: 700; }
.cs-hint-x { flex-shrink: 0; margin-left: auto; background: none; border: none; font-size: 1.15rem; line-height: 1; color: #8a7a98; cursor: pointer; padding: 0 0.15rem; font-family: inherit; }
.cs-hint-x:hover { color: #723063; }

@media print {
    .cs-hint { display: none !important; }
    .cs-cue, .cs-script-line, .cs-note {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Keep each cue, read-aloud prayer, note, and table-leader name whole on
       one page. The Team introductions cue holds several script lines and can
       outgrow a page, so it may split — but only between its lines. */
    .cs-cue, .cs-note, .cs-read, .cs-script-line, .cs-tl-grid li {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .cs-cue:has(.cs-script-line), .cs-cue .cs-read:has(.cs-script-line) {
        break-inside: auto;
        page-break-inside: auto;
    }
    /* Don't strand a heading or label at the bottom of a page */
    .cs-section-heading, .cs-divider, .cs-cue-head, .cs-tl-lead {
        break-after: avoid;
        page-break-after: avoid;
    }
}

@media (max-width: 640px) {
    .cs-cue ul.cs-tl-grid { grid-template-columns: 1fr 1fr; gap: 0.35rem 0.6rem; }
    .cs-teamf { padding: 0.26rem 0.55rem; font-size: 0.74rem; gap: 0.32rem; }
    .cs-swatch { width: 9px; height: 9px; }
    .cs-clear-btn { padding: 0.26rem 0.55rem; font-size: 0.74rem; }
}

@media (max-width: 640px) {
    .la-card-fields { grid-template-columns: 1fr; }
    .la-link-fields { grid-template-columns: 1fr; }
    .la-picker-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}

/* ==========================================================
   shared-tools.css
   Shared patterns across tracker / commissioning / misc tool pages.
   Loaded LAST in global.css so these grouped selectors override
   any remaining duplicates in the individual tool files via cascade.
   ========================================================== */

/* ----------------------------------------------------------
   Flash banners – SUCCESS
   ---------------------------------------------------------- */
.ppt-flash--ok,
.lst-flash--ok,
.inv-saved-banner,
.sc-flash,
.srs-flash,
.te-flash,
.tev-flash,
.tie-flash,
.vie-flash {
    background: #d1fae5;
    color: #065f46;
    border: 1.5px solid #6ee7b7;
}

/* ----------------------------------------------------------
   Flash banners – WARNING
   ---------------------------------------------------------- */
.lst-flash--warn,
.srs-alert {
    background: #fef3c7;
    color: #92400e;
    border: 1.5px solid #fcd34d;
}

/* ----------------------------------------------------------
   Flash banners – ERROR
   ---------------------------------------------------------- */
.lst-flash--err,
.vie-flash--del,
.vie-error,
.te-error,
.tev-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1.5px solid #fca5a5;
}

/* ----------------------------------------------------------
   Numbered circles (28×28 purple)
   ---------------------------------------------------------- */
.ppt-group-num,
.srs-guest-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--purple);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ----------------------------------------------------------
   Instructions boxes
   ---------------------------------------------------------- */
.ppt-instructions,
.inv-instructions {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.55;
}

/* ----------------------------------------------------------
   Sticky save bars
   ---------------------------------------------------------- */
.ppt-save-bar,
.inv-save-bar,
.sc-save-bar--bottom,
.vie-submit-bar {
    position: sticky;
    bottom: 0;
    background: var(--white);
    padding: 0.9rem 1rem;
    margin-top: 1.5rem;
    z-index: 50;
}

/* ----------------------------------------------------------
   Save / submit buttons  (mirror of .btn-purple)
   ---------------------------------------------------------- */
.ppt-save-btn,
.inv-save-btn,
.te-submit-btn,
.tev-submit-btn,
.vie-submit-btn {
    background: var(--purple);
    color: var(--white);
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.ppt-save-btn:hover,
.inv-save-btn:hover,
.te-submit-btn:hover,
.tev-submit-btn:hover,
.vie-submit-btn:hover {
    background: var(--purple-dark);
}

/* ----------------------------------------------------------
   Field labels  (uppercase small caps style)
   ---------------------------------------------------------- */
.ppt-select-label,
.lst-label,
.srs-field-label,
.srs-info-label,
.te-field-label,
.tev-field-label,
.tie-field-label,
.field-label-plain {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
}

/* ── Assignment picker ──────────────────────────────────────────────────────
   Takeaway assignment: chips plus a checkbox-list modal. Shared so the
   council-meeting agenda and the comments report present the same thing.
   The overlay itself is .la-picker-overlay (css/misc-pages.css).

   teamonly/reports/comments.php still carries its own .cm-assign-* copy of
   this; it predates the shared version. Migrating it is a straight class
   rename — do it when that page is next open, not as a drive-by. */
.la-assign { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.la-assign-label {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--gray-500, #6b7280); margin-right: 0.1rem;
}
.la-assign-chip {
    display: inline-block; font-size: 0.78rem; font-weight: 600; line-height: 1.3;
    padding: 0.15rem 0.55rem; border-radius: 99px;
    background: var(--purple-pale, #ecd9e8); color: var(--purple-dark, #4e1f44);
}
.la-assign-chip.is-done { opacity: 0.55; text-decoration: line-through; }
.la-assign-btn {
    font-family: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1.3;
    padding: 0.15rem 0.55rem; border-radius: 99px;
    border: 1px dashed var(--gray-300, #d1d5db);
    background: transparent; color: var(--gray-500, #6b7280); cursor: pointer;
}
.la-assign-btn:hover { border-color: var(--purple, #723063); color: var(--purple, #723063); }

.la-assign-box {
    background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(114,48,99,0.22);
    width: min(380px, 92vw); padding: 1.5rem 1.5rem 1.25rem;
}
.la-assign-title {
    margin: 0 0 0.3rem; font-family: 'Poppins', sans-serif;
    font-size: 1rem; font-weight: 700; color: #2a1a36;
}
.la-assign-sub { margin: 0 0 1rem; font-size: 0.8rem; color: #6b5578; line-height: 1.45; }
.la-assign-list {
    max-height: 46vh; overflow-y: auto; margin: 0 0 1rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.la-assign-opt {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.2rem; font-size: 0.9rem; cursor: pointer;
}
.la-assign-opt:hover { background: rgba(114, 48, 99, 0.04); }
.la-assign-opt input[type="checkbox"],
.la-assign-opt input[type="radio"] {
    flex-shrink: 0; cursor: pointer; width: 1.05rem; height: 1.05rem;
    accent-color: var(--purple, #723063);
}
.la-assign-opt-pos { margin-left: auto; font-size: 0.72rem; color: var(--gray-500, #6b7280); text-align: right; }
.la-assign-actions { display: flex; align-items: center; gap: 0.5rem; }
.la-assign-spacer { flex: 1 1 auto; }
@media print { .la-assign-btn { display: none !important; } }


/* -- Leadership selection board -------------------------------------------
   Moved out of teamonly/leadership_selection_board.php so the inline board on
   teamonly/meetings/agenda.php renders identically. Markup comes from
   leadership_board_cards_html() (PHP) and lsbRenderCards() (JS) -- keep all
   three in step. Print rules for these stay on the board page, which is the
   only one printed as a board. */
        /* ── Info box ────────────────────────────────────── */
        .lsb-info {
            background: var(--gray-50, #f9f9f9);
            border: 1px solid #ddd2e4;
            border-left: 4px solid var(--purple, #723063);
            border-radius: 6px;
            padding: 1rem 1.25rem;
            margin-top: 1.5rem;
            font-family: 'Inter', 'Segoe UI', sans-serif;
            font-size: 0.85rem;
            color: var(--gray-700, #444);
        }

        .lsb-info-desc {
            margin: 0 0 0.75rem;
            line-height: 1.6;
        }

        .lsb-info-list {
            margin: 0;
            padding-left: 1.1rem;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
            line-height: 1.6;
        }

        .lsb-priority--ex {
            font-size: 0.6rem;
            height: 15px;
            min-width: 15px;
            padding: 0 5px;
            vertical-align: middle;
        }

        /* ── Cards ───────────────────────────────────────── */
        .lsb-cards {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .lsb-card {
            border: 1px solid #c5b3d0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(104,45,90,0.08);
        }

        .lsb-card-header {
            background: var(--purple, #723063);
            border-bottom: none;
            padding: 8px 16px;
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: #fff;
        }

        .lsb-card-body {
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: #fff;
        }

        .lsb-gender-col {
            padding: 12px 16px;
        }

        .lsb-gender-col + .lsb-gender-col {
            border-left: 1px solid #e0d4e8;
        }

        .lsb-gender-label {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--gray-500, #888);
            margin-bottom: 8px;
        }

        /* ── People ──────────────────────────────────────── */
        .lsb-person { margin-bottom: 8px; }
        .lsb-person:last-child { margin-bottom: 0; }

        .lsb-name-line {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap;
            border-bottom: 1px solid var(--purple, #723063);
            padding-bottom: 2px;
            margin-bottom: 3px;
        }

        .lsb-name {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            font-size: 1rem;
            font-weight: 700;
        }

        .lsb-priority {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--purple, #723063);
            color: #fff;
            border-radius: 999px;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 0 6px;
            height: 17px;
            min-width: 17px;
            flex-shrink: 0;
            letter-spacing: 0.02em;
        }

        .lsb-accepted {
            font-size: 0.78rem;
            color: #16a34a;
            font-weight: 700;
            flex-shrink: 0;
        }

        .lsb-prev {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            font-size: 0.72rem;
            color: var(--gray-500, #888);
            font-style: italic;
            margin-top: 2px;
            line-height: 1.4;
            padding-left: 11px;
        }

        .lsb-empty {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            color: var(--gray-300, #bbb);
            font-style: italic;
            font-size: 0.82rem;
        }

        .lsb-note {
            font-size: 0.78rem;
            color: var(--gray-500, #888);
            margin-top: 0.85rem;
            line-height: 1.6;
        }

        /* ── Mobile ──────────────────────────────────────── */
        @media (max-width: 500px) {
            .lsb-card-body { grid-template-columns: 1fr; }
            .lsb-gender-col + .lsb-gender-col {
                border-left: none;
                border-top: 1px solid #e0d4e8;
            }
        }

        /* ── Print ───────────────────────────────────────── */

/* ==========================================================================
   payments.css — Team application fee & background check payment pages
   Used by: payments/index.php, payments/payment_complete.php
   ========================================================================== */

/* -- Payment card layout -------------------------------------------------- */

.payment-cards-row {
    display: flex;
    gap: 1.75rem;
    align-items: stretch;
}
.payment-cards-row .payment-card { flex: 1; margin-bottom: 0; }
@media (max-width: 700px) {
    .payment-cards-row { flex-direction: column; }
}
/* When only the team card renders (no background check card), don't let it
   stretch the full 1100px — center it at a comfortable single-card width. */
.payment-cards-row--single { max-width: 560px; margin-left: auto; margin-right: auto; }

.payment-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-top: 4px solid var(--purple);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(114,48,99,0.07);
    padding: 2rem 2.25rem 2.25rem;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
}

/* Team card: form grows to fill remaining space; button anchors to bottom */
.payment-card--team .payment-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.payment-card--team .payment-form .btn {
    margin-top: auto;
}

/* Background check card: push entire form (label + input + button) to bottom */
.payment-card--bgcheck .payment-form {
    margin-top: auto;
}
.payment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.payment-card-header .section-title { margin-bottom: 0; }
.payment-card p {
    color: var(--gray-600);
    margin-bottom: 1.75rem;
    line-height: 1.65;
}
.payment-card .payment-form { max-width: 100%; }
.payment-card .payment-form .btn { width: 100%; }

.fee-badge {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple));
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    padding: 0.3rem 1rem;
    border-radius: 50px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(114,48,99,0.25);
}

.payment-divider {
    border: none;
    border-top: 2px dashed var(--gray-200);
    margin: 0 0 2.5rem;
}

/* -- Inline notices ------------------------------------------------------- */

.payment-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}
.no-members-notice {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
}

/* -- Toggle switch -------------------------------------------------------- */

.manual-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 0.9rem;
    user-select: none;
    width: fit-content;
}
.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--gray-300, #d1d5db);
    border-radius: 22px;
    transition: background 0.2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--purple); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

/* -- Manual name row ------------------------------------------------------ */

.manual-name-row {
    display: flex;
    gap: 0.75rem;
}
.manual-name-row .form-row { flex: 1; margin-bottom: 0; }

.form-row-2col {
    display: flex;
    gap: 1rem;
}

.form-row-2col .form-row {
    flex: 1;
}

/* -- Match-confirmed banner ----------------------------------------------- */

.match-confirmed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #166534;
}
.match-confirmed strong { font-weight: 600; }
.already-paid-notice {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #1e40af;
}
.already-paid-notice strong { font-weight: 600; }
.already-paid-notice a { color: #1e40af; text-decoration: underline; }
.already-paid-notice .match-clear-btn { color: #1d4ed8; }
.already-paid-notice .match-clear-btn:hover { color: #1e3a8a; }
/* These use display:flex, which would otherwise override the `hidden` attribute. */
.match-confirmed[hidden],
.already-paid-notice[hidden] { display: none !important; }
.match-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #15803d;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
    flex-shrink: 0;
}
.match-clear-btn:hover { color: #166534; text-decoration: underline; }

/* -- Fuzzy-match modal ---------------------------------------------------- */

.fuzzy-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
}
.fuzzy-backdrop.visible { display: block; }

.fuzzy-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-top: 5px solid var(--purple);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    padding: 2rem 2.25rem 1.75rem;
    width: 360px;
    max-width: 92vw;
    z-index: 9999;
    transition: transform 0.2s ease, opacity 0.2s ease;
    text-align: center;
    pointer-events: none;
}
.fuzzy-toast.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.fuzzy-toast-icon {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
    display: block;
}
.fuzzy-toast h3 {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    color: var(--gray-900, #111827);
}
.fuzzy-toast p {
    margin: 0 0 1.25rem;
    color: var(--gray-600, #4b5563);
    font-size: 0.95rem;
    line-height: 1.5;
}
.fuzzy-toast p strong { color: var(--purple, #723063); font-weight: 700; }
.fuzzy-toast-btns {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}
.fuzzy-toast-btns .btn-yes {
    background: var(--purple, #723063);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 0.55rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}
.fuzzy-toast-btns .btn-yes:hover { opacity: 0.88; }
.fuzzy-toast-btns .btn-no {
    background: none;
    color: var(--gray-600, #4b5563);
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 7px;
    padding: 0.55rem 1.5rem;
    font-size: 0.95rem;
    cursor: pointer;
    flex: 1;
}
.fuzzy-toast-btns .btn-no:hover { background: var(--gray-50, #f9fafb); }

/* -- Payment complete confirmation card ----------------------------------- */

.confirm-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-top: 4px solid var(--purple);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(114,48,99,0.07);
    padding: 2.5rem 2.25rem;
    text-align: center;
}
.confirm-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}
.confirm-card p {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.confirm-card .btn { margin-top: 1rem; }

/* ── CHART PAGES ─────────────────────────────────────────────────────────── */
.chart-page .section-inner { max-width: 95vw; }

.chart-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 24px;
}

.chart-note {
    text-align: center;
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 12px;
}

/* ── CHART FILTER CONTROLS ───────────────────────────────────────────────── */
.chart-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 16px;
}

.chart-filters form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-filters label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple);
    white-space: nowrap;
}

.chart-filters select {
    padding: 0.35rem 0.65rem;
    border: 1px solid #c4b2cd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}

.chart-filters select:focus {
    outline: 2px solid var(--purple);
    border-color: transparent;
}

.chart-filters input[type="text"] {
    padding: 0.35rem 0.65rem;
    border: 1px solid #c4b2cd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    box-sizing: border-box;
}

.chart-filters input[type="text"]:focus {
    outline: 2px solid var(--purple);
    border-color: transparent;
}

/*
 * reports.css
 * Consolidated styles for all PHP report pages in teamonly/reports/
 * Linked via global.css — do not use @import here.
 *
 * Sections:
 *   1.  Shared report controls bar
 *   2.  Shared report table base (.report-table)
 *   3.  Shared group / section separator rows
 *   4.  Shared utility columns (col-center, col-ldr, col-count, col-tec)
 *   5.  Shared print title utility
 *   6.  Shared report total / note / summary footers
 *   7.  Shared print styles — standard report-table
 *   8.  Health / medical table (.health-table, .table-wrap)
 *   9.  Health toolbar & filter controls
 * 10.  Sensitive-column reveal
 * 10b. Health / medical print styles (toolbar hide, column widths, sens-cell reveal)
 * 11.  Shared toolbar buttons (.filter-btn, .reveal-btn, .print-btn)
 * 12.  Shared empty state
 * 13.  Shared table footer (.table-footer)
 * 14.  Comments report (comments.php, comments_test.php)
 * 15.  Council member timeline (council_member_timeline.php)
 * 16.  Meal / table card grid (meal_calling_order.php, table_list.php)
 * 17.  Talk / song list (talk_song_list.php)
 * 18.  Team registration audit (team_registration_audit.php)
 * 19.  TEC weekend metrics (tec_weekend_metrics.php)
 * 20.  TEConnect log (teconnect_log.php)
 * 21.  Communication metrics / timeline (weekender_list_communication_metrics.php)
 * 22.  Addressed-letters print page (weekender_list_addressed_letters_to_self.php)
 * 23.  Weekender support checklist (weekender_support_checklist.php)
 * 24.  Closing check-in list (weekender_list_closing_checkin.php)
 * 25.  Team shirt checklist (team_shirt_checklist.php)
 * 26.  File-unique per-report tweaks
 */


/* ============================================================
   0.  REPORT BODY WRAPPER (anchors right-aligned chrome to the table)
   ============================================================ */

/*
 * report_header.php / report_footer.php wrap the page body in .report-body.
 * On a narrow viewport a bare .report-table is wider than the screen, and the
 * .section-inner:has(.report-table) scroll container (see components.css) lets
 * it overflow. Without this rule the right-aligned .report-controls (Print) and
 * .report-total size to the scroll container's content box (the viewport), so
 * they pin to the screen's right edge — far to the left of the table's actual
 * right edge — and drift as you scroll.
 *
 * Sizing the wrapper to max-content (with min-width:100% so narrow tables still
 * fill the page on desktop) makes the wrapper as wide as the table, so its
 * right-aligned children line up with the table's right edge on every viewport.
 *
 * Scoped to a direct .report-table child so reports that scroll the table inside
 * their own .table-wrap (overflow-x:auto) are left untouched — those already
 * keep the page from going sideways.
 */
.report-body:has(> .report-table) {
    width: -webkit-max-content;
    width: max-content;
    min-width: 100%;
}

/*
 * Tighten the empty band between the subnav and the controls row. The global
 * rule (.page-subnav + section) pads the section 2rem at the top, which — added
 * to the controls' own margin — pushes the table needlessly far down when the
 * controls row only holds a Print button. Scoped to report pages via .report-body.
 */
section:has(> .section-inner > .report-body) { padding-top: 0.85rem; }
.report-body > .report-controls { margin-bottom: 0.75rem; }


/* ============================================================
   1.  SHARED REPORT CONTROLS BAR
   ============================================================ */

/* Default: print button on the right only */
.report-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

/* Variant used on several reports that also have a left side */
.report-controls.ctrl-spaced {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.report-controls .ctrl-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-controls label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700, #444);
}

.report-controls select.ctrl-select,
.ctrl-select {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--gray-300, #ccc);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.report-controls-right { display: flex; gap: 0.5rem; align-items: center; }
.report-controls-left  { display: flex; align-items: center; gap: 0.5rem; }


/* ============================================================
   2.  SHARED REPORT TABLE BASE (.report-table)
   ============================================================ */

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 12px;
}

/* Default header — purple fill */
.report-table thead th {
    background: var(--purple, #6b4fa0);
    color: #fff;
    padding: 7px 8px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

/* Default body cells */
.report-table tbody td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
    white-space: nowrap;
}

/* Alternating rows — used by the majority of reports */
.report-table tbody tr:nth-child(odd)  td { background: #f3f3f3; }
.report-table tbody tr:nth-child(even) td { background: #ffffff; }

/* Variant: striping only on .data-row (used where separator rows exist) */
.report-table tbody tr.data-row:nth-child(odd)  td { background: #f3f3f3; }
.report-table tbody tr.data-row:nth-child(even) td { background: #ffffff; }

/* Variant: even-only highlight (team_list_all_recent_*, team_list_current_cancelations) */
.report-table tbody tr.data-row:nth-child(even) td { background: var(--gray-50, #f9f9f9); }

/* Links inside report tables */
.report-table a {
    color: var(--purple-dark, #4a2d72);
    text-decoration: none;
    font-weight: 500;
}
.report-table a:hover { text-decoration: underline; }


/* ============================================================
   3.  SHARED GROUP / SECTION SEPARATOR ROWS
   ============================================================ */

/*
 * Generic group separator — used as tr.group-row, tr.tec-row, tr.team-row,
 * tr.gender-row (strong variant) across many reports.
 * Each report uses a different tr class name but the rules are identical.
 */
tr.group-row td,
tr.tec-row td,
tr.team-row td,
tr.gender-row td {
    font-weight: 700;
    font-size: 13px;
    color: var(--purple-dark, #4a2d72);
    padding: 10px 8px 4px;
    background: #fff !important;
    border-bottom: 2px solid var(--purple, #6b4fa0);
}

/* Spacer row between groups */
tr.spacer-row td {
    height: 14px;
    background: #fff !important;
    border: none;
}


/* ============================================================
   4.  SHARED UTILITY COLUMNS
   ============================================================ */

td.col-center { text-align: center; }

td.col-ldr {
    text-align: center;
    width: 40px;
    font-size: 14px;
    color: var(--purple, #6b4fa0);
}

td.col-tec  { text-align: center; }


/* ============================================================
   5.  SHARED PRINT TITLE UTILITY
   ============================================================ */

/* Hidden on screen; shown when printing */
.print-title { display: none; }


/* ============================================================
   6.  SHARED REPORT FOOTER LINES
   ============================================================ */

.report-total {
    text-align: right;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: var(--gray-600, #666);
    margin-top: 0.5rem;
}

.report-note {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: var(--gray-600, #666);
    margin-top: 0.25rem;
    line-height: 1.6;
}

.report-summary {
    text-align: right;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: var(--gray-600, #666);
    margin-top: 0.25rem;
}


/* ============================================================
   7.  SHARED PRINT STYLES — STANDARD REPORT TABLE
   ============================================================ */

@media print {
    /* Hide chrome */
    .page-header, nav, .subnav, .photo-strip-wrap,
    .report-controls, footer { display: none !important; }

    body { background: #fff; overflow: hidden; }
    .report-table { width: 100%; table-layout: auto; }
    .section-inner { max-width: 100% !important; overflow: hidden; }

    /* Print title shown */
    .print-title {
        display: block !important;
        font-family: 'Segoe UI', sans-serif;
        font-size: 13pt;
        font-weight: 700;
        margin-bottom: 0.4rem;
    }

    /* Table header in print */
    .report-table thead th {
        background: #fff !important;
        color: #000 !important;
        border-top: 2px solid #000;
        border-bottom: 1px solid #000;
        font-size: 8pt;
        padding: 2px 4px;
    }

    /* Table body in print */
    .report-table tbody td {
        font-size: 8pt;
        padding: 2px 4px;
        border-bottom: none;
        white-space: normal;
    }

    /* Preserve alternating row shading in print */
    .report-table tbody tr:nth-child(odd) td,
    .report-table tbody tr.data-row:nth-child(odd) td {
        background: #f3f3f3 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .report-table tbody tr:nth-child(even) td,
    .report-table tbody tr.data-row:nth-child(even) td { background: #fff !important; }

    /* Group separator rows in print */
    tr.group-row td,
    tr.tec-row td,
    tr.team-row td,
    tr.gender-row td {
        font-size: 9pt;
        padding: 5px 4px 2px;
        border-bottom: 1px solid #000;
    }

    .report-total,
    .report-note,
    .report-summary { font-size: 8pt; }

    section { padding: 0 !important; }

    /* Default page — landscape; individual files override as needed */
    @page { size: landscape; margin: 0.5in; }
}


/* ============================================================
   8.  HEALTH / MEDICAL TABLE
       (health_form_list.php, medical_needs.php)
   ============================================================ */

.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.health-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: var(--white);
    white-space: nowrap;
}

.health-table th {
    background: var(--purple, #6b4fa0);
    color: #fff;
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--purple-dark, #5a3d8a);
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}

.health-table th:first-child { border-left: none; }

.health-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    color: var(--text);
    white-space: normal;
    max-width: 200px;
}

.health-table td.nowrap { white-space: nowrap; max-width: none; }
.health-table tbody tr:last-child td { border-bottom: none; }
.health-table tbody tr:nth-child(even) td { background: var(--gray-50); }
.health-table tbody tr:hover td { background: var(--purple-pale); }

.health-table a {
    color: var(--purple);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.health-table a:hover { color: var(--purple-dark); }

/* ── EMPTY STATE ── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-500);
}
.empty-state svg { margin: 0 auto 1rem; display: block; opacity: 0.35; }
.empty-state h3 { font-size: 1.1rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.4rem; }
.empty-state p { font-size: 0.9rem; }

/* ── TABLE FOOTER ── */
.table-footer {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--gray-500);
    text-align: right;
}


/* ============================================================
   9.  HEALTH TOOLBAR & FILTER CONTROLS
       (health_form_list.php — shared patterns also in medical_needs.php)
   ============================================================ */

.health-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-right { display: flex; gap: 0.5rem; align-items: center; }

.filter-group {
    display: flex;
    gap: 0.25rem;
}

.filter-sep {
    display: flex;
    align-items: center;
    color: var(--gray-300);
    font-size: 1rem;
    padding: 0 0.1rem;
    user-select: none;
}

/* ── INFO PANEL (health_form_list.php) ── */
.info-panel {
    display: none;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.83rem;
    color: var(--gray-700);
    line-height: 1.7;
}
.info-panel.open { display: block; }
.info-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.25rem 2rem;
}
.info-panel strong { color: var(--gray-800); }


/* ============================================================
   10.  SENSITIVE-COLUMN REVEAL
        (health_form_list.php, medical_needs.php)
   ============================================================ */

.health-table th.sens-col::after {
    content: ' 🔒';
    font-size: 0.65rem;
    opacity: 0.6;
}

.health-table.show-sensitive th.sens-col::after { content: ' 🔓'; }

.health-table td.sens-cell {
    filter: blur(5px);
    user-select: none;
    cursor: pointer;
    transition: filter 0.2s;
}

.health-table.show-sensitive td.sens-cell,
.health-table td.sens-cell.cell-revealed {
    filter: none;
    cursor: default;
}


/* ── Print — health / medical tables ─────────────────────────
   (health_form_list.php, medical_needs.php)
   ──────────────────────────────────────────────────────────── */
@media print {
    /* Hide toolbars & chrome specific to these pages */
    .health-toolbar, .med-toolbar, .info-toggle,
    .info-panel { display: none !important; }

    /* Table layout */
    .health-table {
        font-size: 7pt;
        table-layout: fixed;
        width: 100%;
    }
    .health-table th, .health-table td {
        white-space: normal !important;
        max-width: none !important;
        word-break: break-word;
        padding: 0.3rem 0.4rem;
    }
    .health-table th {
        background: #f0f0f0 !important;
        position: static;
    }
    .health-table th.sens-col::after { content: '' !important; }
    .health-table tbody tr:nth-child(even) td { background: #f8f8f8 !important; }
    .health-table tbody tr:hover td { background: inherit !important; }

    /* Always reveal sensitive cells when printing */
    .health-table td.sens-cell {
        filter: none !important;
        cursor: default !important;
    }

    /* health_form_list.php — 11-column widths (landscape) */
    /* Name · Emerg · Clinic · Ins · FoodAlg · MedAlg · Meds · Req · Restrict · OTC · Cond */
    .health-table th:nth-child(1),  .health-table td:nth-child(1)  { width: 9%;  }
    .health-table th:nth-child(2),  .health-table td:nth-child(2)  { width: 11%; }
    .health-table th:nth-child(3),  .health-table td:nth-child(3)  { width: 9%;  }
    .health-table th:nth-child(4),  .health-table td:nth-child(4)  { width: 10%; }
    .health-table th:nth-child(5),  .health-table td:nth-child(5)  { width: 8%;  }
    .health-table th:nth-child(6),  .health-table td:nth-child(6)  { width: 8%;  }
    .health-table th:nth-child(7),  .health-table td:nth-child(7)  { width: 10%; }
    .health-table th:nth-child(8),  .health-table td:nth-child(8)  { width: 5%;  }
    .health-table th:nth-child(9),  .health-table td:nth-child(9)  { width: 9%;  }
    .health-table th:nth-child(10), .health-table td:nth-child(10) { width: 5%;  }
    .health-table th:nth-child(11), .health-table td:nth-child(11) { width: 16%; }

    /* Row-missing highlight (print) */
    .health-table tbody tr.row-missing td { background: #fff8dc !important; }

    /* Badge and link adjustments */
    .no-form-badge { background: #ffe; border: 1px solid #aaa; }
    .health-table a { color: #000 !important; text-decoration: none !important; }
    .name-team { color: #555 !important; }

    .table-footer { display: none; }
    @page { size: landscape; margin: 0.4in; }
}


/* ============================================================
   11.  SHARED TOOLBAR BUTTONS
   ============================================================ */

/* Filter toggle buttons (group of pills) */
.filter-btn {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    border: 1.5px solid var(--gray-300);
    color: var(--gray-600);
    background: var(--white);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.6;
}
.filter-btn:hover  { border-color: var(--purple); color: var(--purple); background: var(--purple-pale); }
.filter-btn.active { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* Limit buttons (tec_weekend_metrics.php) */
.limit-btn {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    border: 1.5px solid var(--gray-300);
    color: var(--gray-600);
    background: var(--white);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.6;
}
.limit-btn:hover  { border-color: var(--purple); color: var(--purple); background: var(--purple-pale); }
.limit-btn.active { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* Reveal sensitive data button */
.reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
}
.reveal-btn:hover  { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
.reveal-btn.active { background: #7c3aed; border-color: #7c3aed; color: var(--white); }

/* Info toggle button (health_form_list.php) */
.info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
}
.info-toggle:hover { border-color: var(--purple); color: var(--purple); }

/* "Missing forms" filter button (health_form_list.php) */
.missing-btn {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border: 1.5px solid var(--gray-300);
    color: var(--gray-600);
    background: var(--white);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.6;
}
.missing-btn:hover  { border-color: #d97706; color: #d97706; background: #fffbeb; }
.missing-btn.active { background: #d97706; border-color: #d97706; color: var(--white); }

/* Print button (shared across many reports) */
.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
}
.print-btn:hover { border-color: var(--purple); color: var(--purple); }


/* ============================================================
   12.  SHARED EMPTY STATE
   (already defined above under §8 — kept here as a no-op note)
   ============================================================ */
/*  .empty-state rules are in section 8 above  */


/* ============================================================
   13.  SHARED TABLE FOOTER
   ============================================================ */
/* .table-footer defined in section 8 above */

/* Variant with flex row (health_form_list.php) */
.table-footer.flex-row {
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem;
}
.table-footer span { display: inline-flex; align-items: center; gap: 0.3rem; }


/* ============================================================
   14.  COMMENTS REPORT
        comments.php  /  comments_test.php
   ============================================================ */

.cm-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.cm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.1rem; /* comments.php; comments_test.php uses 0.9rem — overridden per-file */
    line-height: 1.6;
}

.cm-table th {
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    border-bottom: 2px solid var(--gray-200);
    text-align: left;
}
.cm-table td {
    padding: 0.6rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid var(--gray-200);
}

.cm-table tr:last-child td { border-bottom: none; }
.cm-row-alt td { background: var(--gray-50); }

/* Sequence number column */
.cm-col-seq {
    width: 2.75rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.78rem;
}
.cm-seq-chunk { white-space: nowrap; }

/* Submitted-by column (comments_test.php) */
.cm-col-by {
    width: 10rem;
    white-space: nowrap;
    color: var(--gray-600);
    font-size: 0.85rem;
}
.cm-col-by-empty { color: var(--gray-400); font-style: italic; }

/* Timestamp column (comments_test.php) */
.cm-col-ts {
    width: 10rem;
    white-space: nowrap;
    color: var(--gray-500);
    font-size: 0.78rem;
}

/* Comment text column */
.cm-col-text {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Grouped-comment divider (comments.php) */
.cm-divider {
    border: none;
    border-top: 2px solid var(--gray-300);
    margin: 0.5rem 0;
}

/* TEC-number header row (comments.php) */
.cm-tec-header td {
    background: var(--purple-pale) !important;
    color: var(--purple-dark);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 0.35rem 0.75rem;
}

/* "Discussed" separator row (comments.php) */
.cm-discussed td {
    background: var(--purple) !important;
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 0.35rem 0.75rem;
}

/* Record count */
.cm-count {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-align: right;
    margin-top: 0.35rem;
}

/* Disclaimer */
.cm-disclaimer {
    font-size: 0.8rem;
    color: var(--gray-500);
    border-top: 1px solid var(--gray-200);
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    line-height: 1.7;
}

.cm-wrap { padding: 0 0 1.5rem; }

/* ── Name / meta within health and comment rows (shared pattern) ── */
.name-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}
.name-team {
    font-size: 0.71rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* ── Print — comments ── */
@media print {
    .cm-card  { border: none; border-radius: 0; }
    .cm-table { font-size: 9pt; }
    .cm-table td { padding: 2px 5px; }
    .cm-wrap  { padding: 0; }
}

/* ── Mobile — comments ── */
@media (max-width: 600px) {
    .cm-col-ts  { display: none; }
    .cm-table   { font-size: 0.85rem; }
}


/* ============================================================
   15.  COUNCIL MEMBER TIMELINE
        council_member_timeline.php
   ============================================================ */

.timeline-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.timeline-filter {
    flex: 1;
    min-width: 220px;
    max-width: 380px;
    padding: 0.55rem 0.9rem 0.55rem 2.4rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--text);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.65rem center;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.timeline-filter:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(114,48,99,0.12);
}
.timeline-filter::placeholder { color: var(--gray-400); }

.timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.78rem;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gray-700);
    white-space: nowrap;
}
.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Gantt shell ── */
.gantt-outer {
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--white);
}
.gantt { min-width: 860px; }

/* Shared two-column layout: label | track */
.g-row { display: flex; align-items: stretch; }
.g-label {
    width: 195px;
    flex-shrink: 0;
    padding: 0 0.75rem 0 1rem;
    box-sizing: border-box;
    border-right: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.g-track { flex: 1; position: relative; min-height: 1px; }

/* Ruler sticky wrapper */
.gantt-ruler-wrap {
    position: sticky;
    top: 0;
    z-index: 20;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-bottom: 2px solid var(--gray-200);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--gray-50);
    box-shadow: var(--shadow-sm);
    margin-bottom: -1px;
}

/* Year ruler */
.gantt-ruler {
    height: 38px;
    min-width: 860px;
    background: var(--gray-50);
}
.gantt-ruler .g-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    padding-bottom: 0;
}
.year-tick {
    position: absolute;
    bottom: 7px;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gray-500);
    white-space: nowrap;
    pointer-events: none;
}
.year-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--gray-200);
    pointer-events: none;
}

/* Position group header */
.gantt-group { border-top: 2px solid var(--gray-200); }
.gantt-group-hdr { height: 28px; background: var(--gray-100); }
.gantt-group-hdr .g-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--purple-dark);
}

/* Member row */
.gantt-row {
    height: 36px;
    border-top: 1px solid var(--gray-100);
    transition: background 0.12s;
}
.gantt-row:hover { background: var(--purple-pale); }
.gantt-row .g-label { color: var(--gray-800); }

/* Bar */
.g-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    border-radius: 5px;
    min-width: 5px;
    cursor: pointer;
    transition: opacity 0.15s, filter 0.15s;
}
.g-bar:hover { opacity: 0.82; filter: brightness(1.14); }

/* Tooltip */
.g-tip {
    display: none;
    position: fixed;
    background: var(--gray-900);
    color: var(--white);
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.55;
    pointer-events: none;
    z-index: 9999;
    max-width: 270px;
    box-shadow: var(--shadow-lg);
}

/* Empty state */
.gantt-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
}

.gantt-hidden { display: none !important; }


/* ============================================================
   16.  MEAL / TABLE CARD GRID
        meal_calling_order.php  /  table_list.php
   ============================================================ */

.table-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 1rem;
    justify-content: space-between;
}
.table-group {
    width: calc(50% - 8px);
    background: #f9f9f9;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid #d0c0cc;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
@media (max-width: 640px) {
    .table-group { width: 100%; }
}
.table-group h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--purple-dark, #4a2d72);
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}
.members {
    margin: 8px 0 0 0;
    padding-left: 18px;
    font-family: 'Inter', sans-serif;
}
.members li { margin-bottom: 3px; font-size: 13px; }

/* table_list.php extras */
.tg-meta  { font-size: 13px; margin-bottom: 2px; font-family: 'Inter', sans-serif; }
.tg-label { font-weight: 600; margin-right: 4px; }

/* ── Print — card grid ── */
@media print {
    .table-groups { gap: 10px; }
    .table-group {
        width: calc(50% - 5px);
        background: #fff;
        border: 1px solid #000;
        box-shadow: none;
        page-break-inside: avoid;
        padding: 10px 12px;
        break-after: auto !important;
    }
    .table-group h3    { font-size: 13pt; border-bottom: 1px solid #000; }
    .members li        { font-size: 11pt; }
    .tg-meta           { font-size: 11pt; }
    /* table_list.php page-break cycle */
    .table-group:nth-of-type(4n) { break-after: page; }
    .table-group:last-of-type    { break-after: auto !important; }
}


/* ============================================================
   17.  TALK / SONG LIST
        talk_song_list.php
   ============================================================ */

.ts-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.ts-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.ts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
}
.ts-table thead { position: sticky; top: 0; z-index: 2; }
.ts-table th {
    background: var(--purple);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
    text-align: left;
    border-bottom: 2px solid var(--purple-dark);
}
.ts-table th:first-child { border-radius: 10px 0 0 0; }
.ts-table th:last-child  { border-radius: 0 10px 0 0; }

.ts-table td {
    padding: 0.45rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid var(--gray-100);
    min-width: 130px;
}
.ts-table td:first-child {
    min-width: auto;
    font-weight: 700;
    font-size: 13px;
    color: var(--purple-dark);
    white-space: nowrap;
    vertical-align: middle;
}
.ts-table tbody tr:nth-child(even) td { background: var(--gray-50); }
.ts-table tbody tr:hover td { background: var(--purple-pale); }

.song-artist {
    display: block;
    color: var(--gray-600);
    font-size: 11px;
    margin-top: 2px;
}
.song-speaker {
    display: block;
    font-style: italic;
    color: var(--gray-500);
    font-size: 11px;
    margin-top: 3px;
    border-top: 1px solid var(--gray-100);
    padding-top: 2px;
}
.song-empty { color: var(--gray-300); font-size: 13px; }

.ts-table a { text-decoration: none; color: var(--purple); }
.ts-table a:hover { text-decoration: underline; }

/* ── Print — talk/song ── */
@media print {
    .ts-toolbar { display: none !important; }
    .ts-table-wrap { box-shadow: none; border: none; overflow: visible; }
    .ts-table { font-size: 7pt; table-layout: fixed; width: 100%; }
    .ts-table thead { position: static; }
    .ts-table th { background: #ede !important; color: #000 !important; }
    .ts-table th, .ts-table td {
        white-space: normal !important;
        padding: 0.25rem 0.3rem;
        word-break: break-word;
    }
    .ts-table tbody tr:nth-child(even) td { background: #f8f8f8 !important; }
    .ts-table tbody tr:hover td { background: inherit !important; }
    .ts-table a { color: #000 !important; text-decoration: none !important; }
    .song-artist  { color: #444 !important; }
    .song-speaker { color: #555 !important; border-top-color: #ddd !important; }
    @page { size: landscape; margin: 0.4in; }
}


/* ============================================================
   18.  TEAM REGISTRATION AUDIT
        team_registration_audit.php
   ============================================================ */

.audit-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* .legend-item already defined in §15; audit uses same pattern */
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-dot.mismatch  { background: #dc2626; }
.legend-dot.normalized { background: #d97706; }

/* Person cards */
.audit-list { display: flex; flex-direction: column; gap: 1rem; }
.audit-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--white);
    overflow: hidden;
}
.audit-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    gap: 1rem;
    flex-wrap: wrap;
}
.audit-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-dark);
}
.audit-badges { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

.diff-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.diff-count-badge.has-real {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
.diff-count-badge.normalized-only {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.toggle-all-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--purple);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: 'Inter', sans-serif;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.toggle-all-btn:hover { color: var(--purple-dark); }

/* Diff table */
.diff-table { width: 100%; border-collapse: collapse; font-size: 0.855rem; }
.diff-table th {
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}
.diff-table th:first-child { width: 120px; }
.diff-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}
.diff-table tr:last-child td { border-bottom: none; }
.diff-table .field-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-500);
}
.diff-table tr.row-match td       { color: var(--gray-400); }
.diff-table tr.row-match .field-label { color: var(--gray-300); }
.diff-table tr.row-hidden          { display: none; }

.diff-table tr.row-mismatch td:nth-child(2),
.diff-table tr.row-mismatch td:nth-child(3) { font-weight: 600; }
.val-reg.mismatch   { color: #dc2626; }
.val-mc.mismatch    { color: #dc2626; }
.val-reg.normalized { color: #d97706; }
.val-mc.normalized  { color: #d97706; }

/* Audit footer count */
.audit-footer {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--gray-500);
    text-align: right;
}

/* ── Print — audit ── */
@media print {
    .audit-toolbar { display: none !important; }
    .audit-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    .audit-card-head { background: #f5f5f5 !important; }
    .diff-table tr.row-hidden { display: table-row !important; }
    section { padding: 0.5rem 0 !important; }
    @page { size: portrait; margin: 0.5in; }
}


/* ============================================================
   19.  TEC WEEKEND METRICS
        tec_weekend_metrics.php
   ============================================================ */

.metrics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.toolbar-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.limit-btns { display: flex; gap: 0.25rem; }

.metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--white);
}
.metrics-table th {
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--gray-200);
    text-align: left;
    white-space: nowrap;
}
.metrics-table th:first-child { border-left: 4px solid var(--purple); }
.metrics-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    color: var(--text);
}
.metrics-table tbody tr:last-child td { border-bottom: none; }
.metrics-table tbody tr:nth-child(even) td { background: var(--gray-50); }
.metrics-table tbody tr:hover td { background: var(--purple-pale); }

.tec-num {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple);
}
.location-text { color: var(--gray-700); font-size: 0.85rem; }

/* Pill badges */
.pills { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.15rem 0; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
}
.pill-city { background: #eef2ff; color: #3b4bbf; border: 1px solid #c7d0f8; }
.pill-city:hover { background: #3b4bbf; color: var(--white); border-color: #3b4bbf; }
.pill-tec  { background: var(--purple-pale); color: var(--purple-dark); border: 1px solid #ddc8d8; }
.pill-tec:hover { background: var(--purple); color: var(--white); border-color: var(--purple); }
.pill-count { font-weight: 700; opacity: 0.75; font-size: 0.72rem; }

/* ── Print — metrics ── */
@media print {
    .metrics-toolbar { display: none !important; }
    .table-wrap { box-shadow: none; border: none; }
    .metrics-table th { background: #f0f0f0 !important; }
    .metrics-table tbody tr:nth-child(even) td { background: #f8f8f8 !important; }
    .metrics-table tbody tr:hover td { background: transparent !important; }
    .pill { border: 1px solid #ccc !important; }
    section { padding: 0.5rem 0 !important; }
    @page { size: landscape; margin: 0.4in; }
}


/* ============================================================
   20.  TECONNECT LOG
        teconnect_log.php
   ============================================================ */

td.col-time   { white-space: nowrap; width: 100px; }
td.col-action { white-space: normal; word-break: break-word; }

/* User separator — dark purple */
tr.user-row td {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    padding: 8px 8px 6px;
    background: #4d1f42 !important;
    border-bottom: 2px solid #3a1530;
}

/* Date separator — light gray */
tr.date-row td {
    font-weight: 600;
    font-size: 12px;
    color: #444;
    padding: 5px 8px 3px;
    background: #e8e8e8 !important;
    border-bottom: 1px solid #ccc;
}

/* ── Print — log ── */
@media print {
    tr.user-row td {
        background: #4d1f42 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 9pt;
        padding: 4px;
    }
    tr.date-row td {
        background: #e8e8e8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-size: 8pt;
        padding: 2px 4px;
    }
    @page { size: landscape; margin: 0.4in; }
}


/* ============================================================
   21.  COMMUNICATION METRICS / WEEKENDER TIMELINE
        weekender_list_communication_metrics.php
   ============================================================ */

/* Stats strip */
#stats-strip {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #d8c4d0;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}
.stat-card {
    flex: 1;
    min-width: 130px;
    padding: 10px 16px;
    border-right: 1px solid #e8d8e4;
    text-align: center;
}
.stat-card:last-child { border-right: none; }
.stat-card .sc-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--purple, #6b4fa0);
    line-height: 1.1;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.stat-card .sc-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Controls bar variant */
.report-controls .ctrl-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.report-controls select.btn {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--gray-300, #ccc);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.btn-outline-purple.btn-active {
    background: var(--purple, #6b4fa0) !important;
    color: #fff !important;
}

/* TEC section */
.tec-section {
    background: #fff;
    border: 1px solid #d8c4d0;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(104,45,90,0.07);
}
.tec-header {
    background: linear-gradient(135deg, #682d5a 0%, #8c4a7a 100%);
    color: #fff;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.tec-header .th-num {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Timeline body */
.tec-body { padding: 6px 14px 4px; }
.tl-bar-date {
    position: absolute;
    top: -18px;
    font-size: 10px;
    color: #444;
    white-space: nowrap;
    transform: translateX(-50%);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    pointer-events: none;
    transition: top 0s;
}
.tl-bar-date.stagger { top: -30px; color: #666; }
.tl-arrival-date {
    position: absolute;
    top: -18px;
    right: 0;
    font-size: 10px;
    font-weight: 600;
    color: #682d5a;
    white-space: nowrap;
    transform: translateX(50%);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    pointer-events: none;
}
.tl-row { display: flex; align-items: center; height: 50px; margin: 2px 0; }
.tl-row.is-canceled { opacity: 0.5; }
.tl-name {
    width: 150px;
    min-width: 150px;
    font-size: 12px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
    color: #333;
}
.tl-row.is-canceled .tl-name { text-decoration: line-through; color: #999; }
.tl-track {
    flex: 1;
    position: relative;
    height: 26px;
    background: #f5edf3;
    border-radius: 4px;
}
.tl-arrival {
    position: absolute;
    top: -5px;
    bottom: -5px;
    right: 0;
    width: 4px;
    background: #682d5a;
    border-radius: 2px;
    z-index: 3;
}
.tl-segment {
    position: absolute;
    top: 4px;
    height: 18px;
    border-radius: 3px;
    min-width: 4px;
    z-index: 1;
}
.seg-fast    { background: #28a745; }
.seg-ok      { background: #fd7e14; }
.seg-slow    { background: #dc3545; }
.seg-pending {
    background: repeating-linear-gradient(
        45deg,
        #dc3545 0px, #dc3545 4px,
        #f8b4bc 4px, #f8b4bc 9px
    );
}
.seg-phase2 { background: #17a2b8; }
.seg-phase3 { background: #0d6efd; }
.tl-days {
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    padding: 0 2px;
    pointer-events: none;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.tl-dot {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    z-index: 4;
}
.tl-dot.parent {
    background: #6f42c1;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.tl-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: #20c997;
    opacity: 0.8;
    z-index: 3;
}
.badge-canceled {
    font-size: 9px;
    font-weight: 700;
    background: #dc3545;
    color: #fff;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 5px;
    white-space: nowrap;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* TEC footer */
.tec-footer {
    padding: 5px 14px 5px 150px;
    background: #faf5f9;
    border-top: 1px solid #eddde8;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #666;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.tec-footer .tf-stat strong { color: #682d5a; }

/* Legend */
#legend {
    background: #fff;
    border: 1px solid #d8c4d0;
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 12px 16px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#legend .lg-title {
    font-size: 13px;
    font-weight: 700;
    color: #682d5a;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#legend .lg-groups { display: flex; flex-wrap: wrap; gap: 18px 32px; }
#legend .lg-group  { display: flex; flex-direction: column; gap: 7px; }
#legend .lg-group-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 2px;
}
.lg-item    { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; }
.lg-bar     { width: 32px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.lg-diamond { width: 12px; height: 12px; background: #6f42c1; border-radius: 2px; transform: rotate(45deg); border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.2); flex-shrink: 0; }
.lg-line    { width: 5px; height: 22px; background: #682d5a; border-radius: 2px; flex-shrink: 0; }
.lg-tick    { width: 3px; height: 18px; background: #20c997; border-radius: 1px; flex-shrink: 0; }

/* ── Print — communication metrics ── */
@media print {
    #stats-strip { border: none; border-bottom: 1px solid #ccc; border-radius: 0; margin-bottom: 8px; }
    .tec-section { box-shadow: none; border: 1px solid #ccc; }
    #legend      { display: none; }
    @page { size: landscape; margin: 0.4in; }
}


/* ============================================================
   22.  ADDRESSED-LETTERS PRINT PAGE
        weekender_list_addressed_letters_to_self.php
        (screen layout + print—specific page; not linked to site nav)
   ============================================================ */

/* Note: this file uses `body` directly (standalone print page); these rules
   are scoped via the unique class names so they won't bleed into other pages. */

.page-wrapper {
    max-width: 8.5in;
    margin: 0 auto 30px auto;
    background: white;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    page-break-after: always;
    display: flex;
    flex-direction: column;
    height: 10in;
}

.letter-page-header {
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.letter-page {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    box-sizing: border-box;
    padding: 10px;
}

.envelope {
    border: 1px solid #999;
    margin: 5px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.return-address {
    font-size: 9pt;
    position: absolute;
    top: 10px;
    left: 10px;
}

.recipient-address {
    font-size: 11pt;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 25%;
}

.stamp {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
}
.stamp img { width: 100%; height: 100%; object-fit: contain; }

@media print {
    .page-wrapper {
        max-width: none;
        margin: 0;
        box-shadow: none;
        padding: 0;
        height: 10in;
    }
    @page { size: portrait; margin: 0.5in; }
}


/* ============================================================
   23.  WEEKENDER SUPPORT CHECKLIST
        weekender_support_checklist.php
   ============================================================ */

/* Empty / missing-data cell */
td.empty-cell {
    background-color: #fff3cd !important;
    border-color: #e6a817 !important;
    outline: 2px solid #e6a817;
    min-width: 50px;
}

/* Checkbox cells */
td.col-checkbox {
    text-align: center;
    width: 50px;
}
td.col-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--purple, #6b4fa0);
    pointer-events: none;
}

/* ── Print — support checklist ── */
@media print {
    td.empty-cell {
        border: 1px solid #999 !important;
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    td.col-checkbox input[type="checkbox"] {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
        background: transparent !important;
        display: inline !important;
        position: static !important;
    }
    td.col-checkbox input[type="checkbox"]:checked::after {
        content: "✔";
        font-size: 11px;
        color: black;
    }
    @page { size: landscape; margin: 0.5in; }
}


/* ============================================================
   24.  CLOSING CHECK-IN LIST
        weekender_list_closing_checkin.php
   ============================================================ */

/* This report uses larger type (14px base) */
/* Column sizing */
td.col-gender  { width: 60px;  text-align: center; }
td.col-checkin { width: 100px; text-align: center; }
td.col-name    { width: 180px; white-space: nowrap; }
td.col-parents { width: 160px; word-break: break-word; }
td.col-notes   { width: auto; }

/* Screen checkbox */
td.col-checkin input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--purple, #6b4fa0);
    pointer-events: none;
}

/* Instructions box */
.instructions {
    background: var(--gray-50, #f9f9f9);
    border-left: 4px solid var(--purple, #6b4fa0);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 14px;
}
.instructions p  { margin: 0 0 0.5rem; font-weight: 600; }
.instructions ul { margin: 0; padding-left: 1.25rem; }
.instructions li { margin-bottom: 0.3rem; line-height: 1.5; }

/* Screen note (speaker_request_list.php) */
.screen-note {
    background: var(--gray-50, #f9f9f9);
    border-left: 4px solid var(--purple, #6b4fa0);
    padding: 0.6rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    margin-bottom: 1.25rem;
    color: var(--gray-700, #444);
}

/* ── Print — closing check-in ── */
@media print {
    .instructions {
        border-left: 2px solid #000;
        background: #fff !important;
        font-size: 10pt;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    td.col-checkin input[type="checkbox"] {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 14px !important;
        height: 14px !important;
        border: 1px solid #000 !important;
        background: #fff !important;
        display: inline-block !important;
        position: relative !important;
    }
    td.col-checkin input[type="checkbox"]:checked::after {
        content: "✔";
        position: absolute;
        top: -2px;
        left: 2px;
        font-size: 12px;
        color: black;
    }
    .screen-note { display: none !important; }
    @page { size: portrait; margin: 0.5in; }
}


/* ============================================================
   25.  TEAM SHIRT CHECKLIST
        team_shirt_checklist.php
        (only has a print block — tiny file)
   ============================================================ */

@media print {
    .shirt-print-btn { display: none !important; }
    .shirt-table { width: 100%; border-collapse: collapse; }
    .shirt-table th,
    .shirt-table td { border: 1px solid #ccc; padding: 6px 10px; font-size: 12px; }
}


/* ============================================================
   26.  FILE-UNIQUE TWEAKS
   ============================================================ */

/* ── comments.php — report-controls has justify-content: space-between ── */
/* (comments_test.php uses justify-content: flex-end — handled by default) */

/* ── health_form_list.php ── */
.health-table tbody tr.row-missing td       { background: #fffbeb !important; }
.health-table tbody tr.row-missing:hover td { background: #fef3c7 !important; }

.no-form-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #fde68a;
    color: #92400e;
    border: 1px solid #fcd34d;
    vertical-align: middle;
    white-space: nowrap;
}

td input[type="checkbox"] {
    accent-color: var(--purple);
    width: 14px;
    height: 14px;
}
.req-otc-row   { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.req-otc-label { font-size: 0.68rem; color: var(--gray-500); min-width: 2.2rem; }

/* ── medical_needs.php — max-width on td is 280px (health_form_list uses 200px) ── */
/* Override only for medical_needs — use scoped class if needed, or accept 200px default. */
.medical-needs { word-wrap: break-word; white-space: pre-wrap; }
.med-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* ── inactive_youth_team_members.php / team_list_by_tec_number.php ── */
/* tr.tec-row already covered by shared group-row rules above */

/* ── inventory_counts.php — TEC col header centered ── */
.report-table thead th.col-tec { text-align: center; }

/* ── leadership_selection_history.php ── */
.col-label { width: 10px; }
.name-accepted { font-weight: 700; }
.leadership-history-table td.col-tec { text-align: left; }

/* ── team_list_by_team.php — team footer row ── */
tr.team-footer-row td {
    font-weight: 600;
    font-size: 12px;
    color: var(--purple-dark, #4a2d72);
    text-align: right;
    padding: 4px 8px 8px;
    background: #fff !important;
    border-bottom: 2px solid var(--purple, #6b4fa0);
}
@media print {
    tr.team-footer-row td {
        font-size: 7.5pt;
        padding: 1px 4px 4px;
        border-bottom: 1px solid #000;
    }
}

/* ── team_list_by_team_by_gender.php — gender sub-separator (lighter) ── */
/* Note: tr.gender-row is the STRONG separator in most files; here it is lighter.
   Since the selector is the same, this relies on load order / specificity.
   If needed, add a variant class to the PHP. */
tr.gender-row.sub td {
    font-weight: 600;
    font-size: 12px;
    color: #555;
    padding: 6px 8px 3px;
    background: #f3f3f3 !important;
    border-bottom: 1px solid #ccc;
}

/* ── team_list_all_recent_adults/youth — expanded sub-rows ── */
tr.person-row th {
    background: var(--gray-100, #f3f3f3) !important;
    color: var(--text, #222);
    padding: 6px 10px;
    font-weight: 600;
    font-size: 13px;
    border-top: 1px solid var(--gray-300, #ccc);
    white-space: nowrap;
}
tr.assignment-row td {
    padding: 3px 10px 3px 22px;
    font-size: 12px;
    color: var(--gray-600, #555);
    background: #faf7ff !important;
    border-bottom: 1px solid var(--gray-100, #eee);
}
tr.assignment-row td.team-cell { color: var(--purple, #6b4fa0); font-weight: 600; }
.cell-center { text-align: center !important; }

/* ── team_list_team_counts.php — count columns ── */
td.col-count, th.col-count { width: 5%; text-align: center; }

/* ── weekender_list_ac.php — grad-year sub-separator ── */
tr.grad-row td {
    font-weight: 700;
    font-size: 13px;
    color: var(--purple-dark, #4e1f44);
    padding: 7px 8px 4px;
    background: var(--purple-pale, #f5eef3) !important;
    border-top: 2px solid var(--purple, #723063);
    border-bottom: 2px solid var(--purple, #723063);
    letter-spacing: 0.03em;
}
@media print {
    tr.grad-row td {
        font-size: 9pt;
        padding: 3px 4px 2px;
        background: var(--purple-pale, #f5eef3) !important;
        color: var(--purple-dark, #4e1f44) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

tr.data-row td:first-child { padding-left: 20px; }

/* ── weekender_list_ga.php — sort controls ── */
.sort-label {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--gray-700, #444);
}
.sort-select {
    font-family: Inter, sans-serif;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--gray-300, #ccc);
    border-radius: 4px;
    background: #fff;
    color: var(--gray-800, #333);
    cursor: pointer;
}

/* ── speaker_request_list.php — submitted checkbox column ── */
td.col-submitted {
    text-align: center;
    width: 70px;
}
td.col-submitted input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--purple, #6b4fa0);
    pointer-events: none;
}
@media print {
    td.col-submitted input[type="checkbox"] {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
        background: transparent !important;
        display: inline !important;
        position: static !important;
    }
    td.col-submitted input[type="checkbox"]:checked::after {
        content: "✔";
        font-size: 10px;
        color: black;
    }
}

/* ── team_registration_audit.php — audit legend dot variant ── */
/* (already defined above in §18) */

/* ── retreats_by_host_church.php — page size override ── */
/* These are handled inline by the PHP @page block since the base rule defaults
   to landscape. The PHP file's own @media print @page overrides are the cleanest
   way to handle per-report page orientation.  No extra rule needed here. */

/* ============================================================
   YOUTH TALK VOLUNTEERS  (youth_talk_volunteers.php)
   Youth registrants willing to give one or more talks for a
   selected TEC weekend. Reuses .report-table / .col-ldr; the
   few extras below are scoped with .ytv-.
   ============================================================ */

/* Talk legend / filter row under the toolbar */
.ytv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 0 0 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--gray-700);
}
.ytv-legend-item { white-space: nowrap; }
.ytv-chip {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    background: var(--purple);
    color: var(--white);
    border-radius: 4px;
    padding: 1px 5px;
    font-weight: 700;
    margin-right: 5px;
}
.ytv-muted { color: var(--gray-400); }

/* Filter hint above the table */
.ytv-filter-hint { margin: 0 0 0.6rem; font-style: italic; }

/* Talk-number toggle filter pills above the grid — compact so the row of
   them stays on one line, including on mobile */
.ytv-legend.ytv-filters { gap: 0.4rem; }
.ytv-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-dark);
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.ytv-pill:hover { border-color: var(--purple); color: var(--purple); }
.ytv-pill.active {
    background: var(--purple);
    border-color: var(--purple);
    color: var(--white);
}

/* The table sits in a .table-wrap so it scrolls inside its own box and never
   pushes the page sideways. On phones we also tighten it so it usually fits
   without scrolling at all. */
.ytv-table-wrap { margin-bottom: 0.75rem; }
@media (max-width: 600px) {
    #ytv-table { font-size: 11px; }
    #ytv-table thead th { padding: 6px 5px; }
    #ytv-table tbody td { padding: 4px 5px; }
    #ytv-table th.col-center,
    #ytv-table td.col-center,
    #ytv-table td.col-ldr { padding-left: 3px; padding-right: 3px; }
    #ytv-table td.col-ldr { width: auto; min-width: 18px; }
}

@media print {
    .report-controls, .ytv-filter-hint { display: none !important; }
    .ytv-table-wrap { overflow: visible; border: none; box-shadow: none; }
    .ytv-chip, .ytv-pill.active {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ── Photo Capture (mobile, teamlist/photo_capture.php) ────────────────── */
.pc-wrap { max-width: 560px; margin: 0 auto; }
.pc-roster-meta { color: var(--gray-600); font-size: 0.9rem; }
.pc-empty { color: var(--gray-600); padding: 2rem 0; text-align: center; }

.pc-mode-switch { display: flex; gap: 0.5rem; margin-top: 1.25rem; margin-bottom: 1.1rem; }
.pc-mode-link {
    padding: 0.4rem 0.9rem; border-radius: 999px; border: 1.5px solid #e5dde8;
    font-size: 0.85rem; font-weight: 600; color: var(--purple-dark); text-decoration: none;
}
.pc-mode-link--active { background: var(--purple); border-color: var(--purple); color: #fff; }

.pc-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.pc-toggle-btn {
    padding: 0.35rem 0.8rem; border-radius: 8px; border: 1.5px solid #e5dde8; background: #fff;
    color: var(--purple-dark); font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pc-toggle-btn:active { background: var(--purple-pale); }

.pc-list { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 2rem; }
.pc-list--missing-only .pc-row[data-hasfinal="1"] { display: none; }
.pc-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.9rem; border: 1.5px solid #e5dde8; border-radius: 10px; background: #fff;
}
.pc-row[data-status="staged"] { border-color: #f59e0b; background: #fffbeb; }
.pc-row[data-status="final"]  { border-color: #22c55e; background: #f0fdf4; }
.pc-name { flex: 1; font-weight: 600; color: var(--purple-dark); }
.pc-has-photo-hint { display: block; font-size: 0.7rem; font-weight: 500; color: var(--gray-500); }
.pc-status-badge { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.pc-row[data-status="staged"] .pc-status-badge { color: #b45309; }
.pc-row[data-status="final"]  .pc-status-badge { color: #15803d; }

.pc-capture-btn {
    position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.85rem; border-radius: 8px; background: var(--purple); color: #fff;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pc-capture-btn:active { background: var(--purple-dark); }
.pc-capture-btn input[type="file"] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

.pc-review-overlay {
    position: fixed; inset: 0; background: rgba(15,10,20,0.94); z-index: 1000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem;
}
.pc-review-overlay[hidden] { display: none; }
.pc-review-name { color: #fff; font-weight: 600; margin-bottom: 0.75rem; text-align: center; }
.pc-review-img { max-width: 100%; max-height: 65vh; border-radius: 10px; object-fit: contain; background: #000; }
.pc-review-error {
    color: #fecaca; background: rgba(220,38,38,0.25); border: 1px solid #dc2626; border-radius: 8px;
    padding: 0.5rem 0.75rem; margin-top: 0.75rem; font-size: 0.85rem; max-width: 420px; text-align: center;
}
.pc-review-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.pc-review-actions button { padding: 0.65rem 1.4rem; border-radius: 8px; border: none; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.pc-btn-retake { background: #3f3546; color: #fff; }
.pc-btn-accept { background: var(--purple); color: #fff; }
.pc-btn-accept:disabled, .pc-btn-retake:disabled { opacity: 0.6; cursor: default; }

/* ── Photo Crop (admin, admin/photo_crop.php) ───────────────────────────── */
.pcrop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.pcrop-card {
    border: 1.5px solid #e5dde8; border-radius: 10px; padding: 0.6rem; text-align: center;
    background: #fff; cursor: pointer; transition: box-shadow 0.15s;
}
.pcrop-card:hover { box-shadow: var(--shadow-md); }
.pcrop-card img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 6px; background: #f2eef4; }
.pcrop-card-name { font-size: 0.82rem; font-weight: 600; color: var(--purple-dark); margin-top: 0.4rem; }
.pcrop-has-final { display: inline-block; margin-top: 0.25rem; font-size: 0.7rem; font-weight: 700; color: #b45309; }

.pcrop-overlay {
    position: fixed; inset: 0; background: rgba(15,10,20,0.94); z-index: 1000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem;
}
.pcrop-overlay[hidden] { display: none; }
.pcrop-canvas-wrap { position: relative; touch-action: none; }
.pcrop-canvas-wrap canvas { display: block; border-radius: 4px; background: #000; touch-action: none; }
.pcrop-hint { color: #cbb9d6; font-size: 0.8rem; margin-top: 0.6rem; text-align: center; }
.pcrop-error {
    color: #fecaca; background: rgba(220,38,38,0.25); border: 1px solid #dc2626; border-radius: 8px;
    padding: 0.5rem 0.75rem; margin-top: 0.6rem; font-size: 0.85rem; max-width: 420px; text-align: center;
}
.pcrop-actions { display: flex; gap: 0.75rem; margin-top: 1.1rem; }
.pcrop-actions button { padding: 0.65rem 1.4rem; border-radius: 8px; border: none; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.pcrop-btn-cancel { background: #3f3546; color: #fff; }
.pcrop-btn-save { background: var(--purple); color: #fff; }
.pcrop-btn-save:disabled, .pcrop-btn-cancel:disabled { opacity: 0.6; cursor: default; }