/* ==========================================================================
   Linkou Toastmasters — application stylesheet
   Palette follows the Toastmasters International brand:
   Loyal Blue #004165 · True Maroon #772432 · Cool Gray #A9B2B1 · Happy Yellow #F2DF74
   ========================================================================== */

/* The hidden attribute always hides. Component rules such as `button {
   display: inline-flex }` would otherwise outrank the browser's own
   [hidden] style and leave "hidden" controls on screen. */
[hidden] { display: none !important; }

:root {
    /* brand */
    --tm-blue:   #004165;
    --tm-maroon: #772432;
    --tm-gray:   #a9b2b1;
    --tm-yellow: #f2df74;

    /* surfaces & text */
    --bg:         #f4f6f8;
    --card-bg:    #ffffff;
    --text:       #1a2733;
    --muted:      #5d6b79;
    --faint:      #7c8894;
    --border:     #dde3e9;
    --border-str: #c6d0d9;
    --accent:       var(--tm-blue);
    --accent-hover: #00314d;
    --accent-soft:  #e6eef3;

    /* neutral surfaces (tokenised so dark mode can flip them) */
    --surface-2: #eef2f5;   /* table headers            */
    --hover-bg:  #f7fafc;   /* row hover                */
    --tint:      #fbfcfd;   /* upcoming-meeting row     */
    --chip-bg:   #e8edf1;   /* muted badges, tags       */
    --track-bg:  #e3e9ee;   /* progress-meter track     */

    /* status */
    --ok-bg: #e4f1e6;  --ok-fg: #1f6b33;
    --warn-bg: #fdf0d5; --warn-fg: #8a5b00;
    --err-bg: #fdecea;  --err-fg: #a12a1d;

    /* spacing */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
    --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

    /* type scale */
    --fs-xs: 0.75rem;  --fs-sm: 0.85rem;  --fs-base: 0.95rem;
    --fs-md: 1.05rem;  --fs-lg: 1.25rem;  --fs-xl: 1.5rem;  --fs-2xl: 1.9rem;

    /* shape */
    --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 36, 52, 0.06);
    --shadow-md: 0 4px 16px rgba(16, 36, 52, 0.10);
}

* { box-sizing: border-box; touch-action: manipulation; }

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
    font-size: var(--fs-base);
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

h1 { margin: 0; font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.01em; }
h2 {
    margin: var(--s-6) 0 var(--s-3);
    font-size: var(--fs-lg);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

/* numerals that line up in columns */
.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Skip link — also used as a visually-hidden label elsewhere in the markup
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
a.skip-link:focus {
    position: fixed;
    top: var(--s-2); left: var(--s-2);
    z-index: 999;
    width: auto; height: auto;
    margin: 0; padding: var(--s-2) var(--s-4);
    clip: auto; clip-path: none;
    background: var(--accent);
    color: #fff;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   App bar
   -------------------------------------------------------------------------- */
.appbar {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.brand:hover { color: var(--accent); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-product {
    font-size: var(--fs-xs); font-weight: 500; color: var(--faint);
    letter-spacing: 0.02em;
}
.brand-stage {
    padding: 0 5px; border-radius: var(--r-pill);
    background: var(--chip-bg); color: var(--muted);
    font-size: 0.65rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em;
}
.login-product {
    margin: var(--s-5) auto 0; max-width: 420px;
    text-align: center; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
}
.login-product strong { color: var(--text); }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    flex: none;
}

/* primary nav — a fixed bottom bar at every width */
.nav {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    white-space: nowrap;
}
/* icons must be constrained or they fill the page */
.nav a svg { width: 17px; height: 17px; flex: none; }
.nav a:hover { background: var(--accent-soft); color: var(--accent); }
.nav a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.appbar .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    margin: 0;
    gap: 0;
    flex-wrap: nowrap;
    justify-content: space-around;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(16, 36, 52, 0.07);
    padding: var(--s-1) var(--s-2)
             calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
}
.appbar .nav a {
    flex: 1 1 0;
    max-width: 150px;
    flex-direction: column;
    gap: 3px;
    padding: var(--s-2) var(--s-1);
    font-size: 0.7rem;
    text-align: center;
}
.appbar .nav a svg { width: 21px; height: 21px; }
.appbar .nav a:hover { background: none; color: var(--accent); }
.appbar .nav a.is-active { background: none; color: var(--accent); font-weight: 600; }

/* account block */
.account {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-left: var(--s-4);
    border-left: 1px solid var(--border);
}
.account form { margin: 0; }
.account-name {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: var(--fs-sm);
}
.account-role {
    color: var(--faint);
    font-size: var(--fs-xs);
    text-transform: capitalize;
}

main {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--s-5) var(--s-4)
             calc(78px + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.page-actions {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.page-sub {
    margin: var(--s-1) 0 0;
    color: var(--muted);
    font-size: var(--fs-sm);
}
.back-link {
    display: inline-block;
    margin-bottom: var(--s-3);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-sm);
}
.back-link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
    box-shadow: var(--shadow-sm);
}
.card--feature {
    border-left: 4px solid var(--accent);
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--card-bg) 70%);
}
.card-title {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}

/* Help bubble: a "?" button with its text in a tooltip. Hover or keyboard
   focus shows it; a tap toggles .is-open (script in base.html). */
.hint { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; }
.hint__btn {
    position: relative;
    display: block;
    width: 16px; height: 16px; padding: 0;
    border: 0; border-radius: 50%;
    background: none; color: var(--muted);
    cursor: help;
}
.hint__btn svg {
    display: block; width: 100%; height: 100%;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.hint__btn::after { content: ""; position: absolute; inset: -14px; }
.hint__btn:hover, .hint.is-open .hint__btn { color: var(--accent); }
.hint__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hint__tip {
    display: none;
    position: absolute; z-index: 30;
    top: calc(100% + 8px); left: -8px;
    width: max-content; max-width: min(340px, calc(100vw - 48px));
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    background: var(--text); color: var(--card-bg);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-sm); font-weight: 400; line-height: 1.45;
    text-transform: none; letter-spacing: normal;
}
.hint.is-open .hint__tip { display: block; }
@media (max-width: 620px) {
    /* Full width under the title rather than hanging off the "?", which on a
       phone would run past the right edge. top:auto keeps it below the line. */
    .hint { position: static; }
    .hint__tip { top: auto; left: var(--s-4); right: var(--s-4); width: auto; max-width: none; margin-top: 8px; }
}

/* stat tiles */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.stat-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}
.stat-label { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s-1); }

/* definition list */
.definition {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: var(--s-2) var(--s-4);
    margin: 0;
}
.definition dt { color: var(--muted); font-size: var(--fs-sm); }
.definition dd { margin: 0; }

/* --------------------------------------------------------------------------
   Tables — horizontal scroll on desktop, stacked cards on phones
   -------------------------------------------------------------------------- */
.table-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}
/* Most tables use fixed column widths, so a column is the same width and never
   narrower than its longest value. Each width is the widest rendered value
   (or the header, with its sort chevron, when that is wider) plus the 32px
   cell padding, measured from the club data in Sep 2026. A fixed table never
   shrinks below the sum of its columns, so a table wider than the page
   scrolls inside .table-wrap; spare width is shared out across the columns. */
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
td { overflow-wrap: anywhere; }  /* anything longer than measured wraps */
/* Membership keeps every column within the page; long values wrap. */
.members-table col { width: auto; }
/* Except the copy-icon columns, which only ever hold a 32px button. */
.members-table col.c-email, .members-table col.c-mobile { width: 6rem; }
.members-table th { white-space: normal; overflow-wrap: anywhere; }
.members-table .sort-btn { text-align: left; }
.c-name        { width: 11.5rem;  }  /* member name, 14 chars              */
.c-name-toggle { width: 13.25rem; }  /* member name after the pathway toggle */
.c-zh          { width: 10.75rem; }  /* header "Chinese name"              */
.c-email       { width: 6rem;     }  /* copy icon, header "Email"          */
.c-mobile      { width: 6rem;     }  /* copy icon, header "Mobile"         */
.c-club        { width: 9.5rem;   }  /* club short name, "Entrepreneur"    */
.c-status      { width: 14.75rem; }  /* "No current registration"          */
.c-badge       { width: 9.25rem;  }  /* "365 days left" badge              */
.c-date        { width: 10rem;    }  /* "30 Sep 2026"                      */
.c-date-wide   { width: 11.5rem;  }  /* header "Last approval"             */
.c-theme       { width: 20.75rem; }  /* meeting theme, 30 chars            */
.c-type        { width: 24.75rem; }  /* "Regular meeting w/ Induction Ceremony" */
.c-role        { width: 24.75rem; }  /* "Discharge/Installation Ceremony Master" */
.c-path        { width: 21.75rem; }  /* "Distinguished Toastmaster Project" */
.c-version     { width: 10.5rem;  }  /* "Ver.20251022" tag                  */
.c-meter       { width: 12.75rem; }  /* header "Levels approved"           */
.c-level       { width: 6rem;     }
.c-yesno       { width: 8.75rem;  }  /* header "Rewarded"                  */
.c-term        { width: 19rem;    }  /* "30 Sep 2025 – 30 Sep 2026"        */
.c-btn         { width: 9.5rem;   }  /* "Mark present" button              */
.c-assign      { width: 23.5rem;  }  /* member select + Save + Remove       */
.role-drawer { position: fixed; inset: 0 0 0 auto; z-index: 80; display: flex; flex-direction: column; width: min(90vw, 340px); height: 100dvh; padding: var(--s-4); background: var(--card-bg); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.2s; }
.role-drawer.is-open { transform: none; box-shadow: var(--shadow-md); }
/* Closed: only the handle shows; the rest leaves the tab order once it has slid away. */
.role-drawer > :not(.role-drawer__handle) { transition: visibility 0s 0.2s; }
.role-drawer:not(.is-open) > :not(.role-drawer__handle) { visibility: hidden; }
.role-drawer.is-open > * { transition-delay: 0s; }
.role-drawer__handle { position: absolute; right: 100%; top: 50%; display: flex; align-items: center; justify-content: center; width: 28px; height: 88px; margin-top: -44px; padding: 0; border: 1px solid var(--border); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--card-bg); box-shadow: var(--shadow-md); color: var(--muted); cursor: pointer; }
.role-drawer__handle:hover, .role-drawer__handle:focus-visible { color: var(--accent); }
.role-drawer__handle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); }
.role-drawer.is-open .role-drawer__handle svg { transform: rotate(180deg); }
.role-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.role-drawer h3 { margin: 0; font-size: var(--fs-lg); }
.role-drawer p { margin: var(--s-2) 0; }
.role-drawer label { font-size: var(--fs-xs); font-weight: 700; }
.role-drawer input { width: 100%; padding: var(--s-2); border: 1px solid var(--border-str); border-radius: var(--r-sm); background: var(--card-bg); color: var(--text); }
.role-drawer__controls { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }
.role-cycle-control { position: relative; }
.role-control-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--card-bg); color: var(--muted); border: 1px solid var(--border-str); touch-action: manipulation; user-select: none; -webkit-touch-callout: none; }
.role-control-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-control-button.is-active, .role-control-button[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.role-control-menu { position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 2; display: grid; width: min(200px, calc(100vw - 32px)); padding: var(--s-1); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.role-control-menu button { min-height: 44px; text-align: left; background: transparent; color: var(--text); border: none; }
.role-control-menu button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.role-drawer .role-controls-status { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--muted); }
#role-drawer-close { flex: none; width: 36px; height: 36px; padding: 0; background: transparent; color: var(--muted); border: none; font-size: var(--fs-xl); }
.role-drawer .hint__tip { left: auto; right: 0; max-width: calc(100vw - 32px); font-size: var(--fs-sm); }
.meeting-tabs { display: flex; gap: var(--s-1); margin-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.line-match-form { display: grid; gap: var(--s-2); margin-top: var(--s-2); max-width: 320px; }
.line-match-form select { width: 100%; min-width: 0; }
.line-match-form label { font-size: var(--fs-xs); }
.line-match-form button { justify-self: start; }
.line-link-chip { border-radius: var(--r-pill); }
.line-link-chip.is-confirming { background: var(--accent); color: var(--card-bg); }
.settings-form.time-zone-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.time-zone-field { display: grid; gap: var(--s-2); min-width: 0; }
.time-zone-field select { width: 100%; min-width: 0; }
.time-zone-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 480px) { .settings-form.time-zone-form { grid-template-columns: 1fr; } }
.meeting-tabs button { min-width: 0; min-height: 44px; margin: 0; padding: var(--s-2); font-size: var(--fs-sm); white-space: normal; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); }
.meeting-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 700; }
.meeting-tabs button:disabled { color: var(--faint); opacity: .5; cursor: not-allowed; }
.rsvp-badge { background: var(--chip-bg); color: var(--muted); }
.rsvp-badge[data-rsvp-score]:not([data-rsvp-score=""]) { background: var(--rsvp-bg); color: var(--rsvp-text); }
.role-palette__members { display: grid; align-content: start; gap: var(--s-2); overflow-y: auto; margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.role-palette__members button { display: flex; justify-content: space-between; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-str); border-radius: var(--r-md); background: var(--chip-bg); color: var(--text); font: inherit; text-align: left; cursor: grab; user-select: none; }
/* Meeting roles as cards at every width (the generic table→card rules only
   apply on phones). */
.role-cards { background: none; border: none; box-shadow: none; overflow: visible; }
.role-cards table, .role-cards tr, .role-cards td { display: block; width: 100%; }
.role-cards colgroup { display: none; }
.role-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.role-cards tbody { display: grid; gap: var(--s-3); }
.role-cards tbody tr { margin: 0; padding: var(--s-2) var(--s-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: border-color 0.15s, background 0.15s; }
.role-cards tbody tr:hover { background: var(--card-bg); }
.role-cards tbody tr[data-rsvp-score]:not([data-rsvp-score=""]) {
    background: var(--rsvp-bg);
    border-color: var(--rsvp-edge);
    color: var(--rsvp-text);
}
.role-cards tbody tr[data-rsvp-score]:not([data-rsvp-score=""]):hover { background: var(--rsvp-bg); }
.role-cards td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); text-align: right; }
.role-cards tr td:last-child { border-bottom: none; }
.role-cards td::before { content: attr(data-label); flex: none; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); text-align: left; }
.role-cards tbody tr td:first-child { font-size: var(--fs-md); font-weight: 600; text-align: left; }
.role-cards tbody tr td:first-child::before { content: none; }
#meeting-roles-table tr.role-drop-target { border-color: var(--accent); background: var(--accent-soft); }
/* A member is selected: every card is a tap target. */
#meeting-roles-table.is-picking tr[data-slot-drop] { border-style: dashed; border-color: var(--accent); cursor: pointer; }
#meeting-roles-table.is-picking tr[data-slot-drop]:hover { background: var(--accent-soft); }
.role-palette__members small { font-size: var(--fs-xs); white-space: nowrap; }
.role-palette__members button { align-items: center; }
.role-palette__members button span { flex: 1; }
/* Drag starts here at once, even on touch, where dragging the chip itself needs a long press. */
.role-chip__grip { flex: none; width: 20px; height: 28px; margin: -6px 0 -6px -6px; padding: 4px; fill: var(--muted); cursor: grab; touch-action: none; }
.role-palette__members button:hover .role-chip__grip { fill: var(--accent); }
.role-chip-ghost { position: fixed; z-index: 90; pointer-events: none; margin: 0; background: transparent; box-shadow: none; transform: translate(-28px, -50%); }
.role-palette__members button:active { cursor: grabbing; }
.role-palette__members button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* RSVP colours match Coda: red, orange, yellow, blue, purple; saturated enough
   to tell apart at a glance; dark mode uses deep shades with light text. */
.role-palette__members button { min-height: 48px; padding: var(--s-3) var(--s-4); font-size: var(--fs-md); border-width: 2px; }
.role-palette__members button small { font-weight: 700; }
.role-palette__members button[data-rsvp-score]:not([data-rsvp-score=""]) { background: var(--rsvp-bg); border-color: var(--rsvp-edge); color: var(--rsvp-text); }
.role-palette__members button[data-rsvp-score]:not([data-rsvp-score=""]) .role-chip__grip { fill: currentColor; opacity: 0.6; }
[data-rsvp-score="1"] { --rsvp-bg: #fbcdc7; --rsvp-edge: #d63e30; --rsvp-text: #6e130c; }
[data-rsvp-score="2"] { --rsvp-bg: #ffd6a8; --rsvp-edge: #e07614; --rsvp-text: #663003; }
[data-rsvp-score="3"] { --rsvp-bg: #ffe980; --rsvp-edge: #c29a00; --rsvp-text: #554100; }
[data-rsvp-score="4"] { --rsvp-bg: #c2defa; --rsvp-edge: #2a7ad0; --rsvp-text: #0b375f; }
[data-rsvp-score="5"] { --rsvp-bg: #e4d1fa; --rsvp-edge: #8c45c7; --rsvp-text: #451866; }
[data-theme="dark"] [data-rsvp-score="1"] { --rsvp-bg: #5e1712; --rsvp-edge: #e5574a; --rsvp-text: #ffd7d2; }
[data-theme="dark"] [data-rsvp-score="2"] { --rsvp-bg: #5c2d05; --rsvp-edge: #f0923a; --rsvp-text: #ffe0c0; }
[data-theme="dark"] [data-rsvp-score="3"] { --rsvp-bg: #4a3b00; --rsvp-edge: #e2bb22; --rsvp-text: #fff0b3; }
[data-theme="dark"] [data-rsvp-score="4"] { --rsvp-bg: #0e3158; --rsvp-edge: #4b98e6; --rsvp-text: #d5e8ff; }
[data-theme="dark"] [data-rsvp-score="5"] { --rsvp-bg: #3e195a; --rsvp-edge: #b175e1; --rsvp-text: #edd8ff; }
.role-palette__members button[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.role-tap-assign { margin-left: var(--s-2); }
#meeting-roles-table tr.role-drop-target td { background: var(--accent-soft); }
thead { background: var(--surface-2); }
th {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hover-bg); }

/* whole-row links */
.row-link { position: relative; }
.row-link__a { text-decoration: none; font-weight: 600; color: var(--text); }
.row-link__a::after { content: ""; position: absolute; inset: 0; }
.row-link:hover .row-link__a { color: var(--accent); }
.row-link.is-upcoming { background: var(--tint); }
.row-link form { position: relative; z-index: 1; }  /* above the row-wide link */
.row-link.is-upcoming .row-link__a { color: var(--accent); }

.inactive-row { opacity: 0.62; }
.cell-empty { color: var(--faint); }
.faint { color: var(--faint); font-size: var(--fs-sm); }
.muted { color: var(--muted); }
.result-count {
    margin: var(--s-3) 0 0;
    color: var(--muted);
    font-size: var(--fs-sm);
}

/* empty state */
.empty {
    background: var(--card-bg);
    border: 1px dashed var(--border-str);
    border-radius: var(--r-lg);
    padding: var(--s-6) var(--s-5);
    text-align: center;
    color: var(--muted);
}
.empty p { margin: 0 0 var(--s-2); }
.empty p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Badges & tags
   -------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    background: var(--accent-soft);
    color: var(--accent);
}
.badge--current { background: var(--ok-bg);   color: var(--ok-fg); }
.badge--vacant  { background: var(--warn-bg); color: var(--warn-fg); }
.badge--muted   { background: var(--chip-bg);  color: var(--muted); }
.badge--dtm     { background: var(--tm-maroon); color: #fff; }

.tag {
    display: inline-block;
    margin-left: var(--s-2);
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 500;
    vertical-align: middle;
}
.tag--inactive { background: var(--chip-bg); color: var(--muted); }

/* --------------------------------------------------------------------------
   Progress meter (pathway levels)
   -------------------------------------------------------------------------- */
.meter { display: inline-flex; align-items: center; gap: var(--s-2); }
.meter-track {
    display: inline-block;
    width: 108px; height: 7px;
    border-radius: var(--r-pill);
    background: var(--track-bg);
    overflow: hidden;
}
.meter-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--accent);
    transition: width 0.3s ease;
}
.meter-fill.is-complete { background: var(--ok-fg); }
.meter-label {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Buttons & forms
   -------------------------------------------------------------------------- */
/* Shape is shared; weight and colour are not. A bare <button> is a
   secondary control, so repeated row actions (Save, Mark present, Sign up)
   do not read as a column of primary calls to action. Loudness is opt-in
   with .button or .btn--primary. */
button, .button, .btn--primary {
    display: inline-block;
    padding: var(--s-2) var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
}

/* secondary — the default */
button {
    background: var(--card-bg);
    border-color: var(--border-str);
    color: var(--text);
    font-weight: 500;
}
button:hover {
    background: var(--hover-bg);
    border-color: var(--muted);
    color: var(--text);
}

/* primary — opt in */
.button, .btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
.button:hover, .btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}
.button { margin-top: var(--s-3); }
.btn--sm { padding: var(--s-1) var(--s-3); font-size: var(--fs-xs); }

.text-button {
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-weight: 500;
    font-size: var(--fs-sm);
}
.text-button:hover { background: none; color: var(--accent-hover); text-decoration: underline; }

select, input[type="text"] {
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--text);
}
select {
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--border-str);
    border-radius: var(--r-sm);
    background: var(--card-bg);
    max-width: 190px;
}
.inline-form { display: flex; gap: var(--s-2); align-items: center; }

.alert {
    margin: var(--s-4) 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--err-bg);
    color: var(--err-fg);
    font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Members toolbar — search + filter popover
   -------------------------------------------------------------------------- */
.members-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}
.layout-switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border-str);
    border-radius: var(--r-md);
    background: var(--card-bg);
}
.layout-switch a {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-sm);
    color: var(--muted);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.layout-switch a:hover { color: var(--accent); }
.layout-switch a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
}
.period-picker { margin-bottom: var(--s-4); }  /* the page's subtitle, not another card */
.period-picker__row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.period-picker__dates { justify-content: space-between; font-variant-numeric: tabular-nums; }
/* Previous / next term: round 48px touch targets with a bold chevron. */
.period-picker__dates > a, .period-picker__dates > span {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px;
    border: 1px solid var(--border-str); border-radius: 50%;
    background: var(--chip-bg); color: var(--accent); text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: transform .1s, background .15s;
}
.period-picker__dates > * svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.period-picker__dates > a:hover { background: var(--accent-soft); border-color: var(--accent); }
.period-picker__dates > a:active { transform: scale(.92); background: var(--accent-soft); }
.period-picker__dates > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.period-picker__dates > span.is-end { background: none; border-style: dashed; color: var(--border-str); }  /* no term that way */
.period-picker__dates strong { text-align: center; }
.period-picker__now { display: grid; justify-items: center; gap: 2px; }
.period-picker__now small { color: var(--muted); font-size: var(--fs-xs); }
.leaderboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; gap: var(--s-4); }
.leaderboard-section { margin-top: var(--s-6); }
.leaderboard-section[role="tabpanel"] { margin-top: 0; }
.leaderboard-section .page-head h2 { margin: 0; }
.leaderboard { min-width: 0; }
.leaderboard h2 { margin: 0 0 var(--s-3); }
.leaderboard__list { margin: 0; padding: 0; list-style: none; }
.leaderboard__list li, .leaderboard__mine {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-2) 0; border-top: 1px solid var(--border);
}
.leaderboard__rank, .leaderboard__mine > span:first-child {
    width: 3rem; flex: none; color: var(--muted); font-variant-numeric: tabular-nums;
}
.leaderboard__rank { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.leaderboard__rank svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.leaderboard__rank--1 { color: #a46d00; }
.leaderboard__rank--2 { color: #687785; }
.leaderboard__rank--3 { color: #a45d38; }
.leaderboard__list .leaderboard__self, .leaderboard__mine.leaderboard__self {
    margin-inline: calc(-1 * var(--s-3)); padding-inline: var(--s-3);
    border-radius: var(--r-sm);
    background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent);
}
.leaderboard__list a, .leaderboard__mine strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.leaderboard__list strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.leaderboard__list small { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.leaderboard__mine { margin-top: var(--s-3); color: var(--accent); }
:root[data-theme="dark"] .leaderboard__rank--1 { color: #f2c45c; }
:root[data-theme="dark"] .leaderboard__rank--2 { color: #b5c5d1; }
:root[data-theme="dark"] .leaderboard__rank--3 { color: #d79a70; }
.activity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.milestone-list { margin: 0; padding: 0; list-style: none; }
.milestone-list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--border); }
.milestone-list a { min-width: 0; overflow-wrap: anywhere; }
.milestone-list span { color: var(--muted); font-size: var(--fs-sm); text-align: right; }
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--s-4);
}
.member-directory { grid-template-columns: repeat(auto-fill, minmax(min(100%, 175px), 1fr)); }
.member-directory .member-card { padding: var(--s-2) var(--s-3); }
.member-card {
    position: relative;
    min-width: 0;
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}
.member-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); }
.member-card__head > div { min-width: 0; }
.member-card__name { color: var(--text); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.member-card__name::after { content: ""; position: absolute; inset: 0; }
.member-card:hover .member-card__name { color: var(--accent); }
.member-card:focus-within { border-color: var(--accent); }
.member-card__sub { color: var(--muted); font-size: var(--fs-sm); }
.member-card__details { display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; }
.member-card__details div { min-width: 0; }
.member-card__details dt { color: var(--muted); font-size: var(--fs-xs); }
.member-card__details dd { margin: 0; overflow-wrap: anywhere; }
.member-card form { position: relative; z-index: 1; margin-top: var(--s-4); }
.search-wrap {
    display: flex;
    align-items: stretch;
    flex: 1 1 220px;
    max-width: 360px;
    border: 1px solid var(--border-str);
    border-radius: var(--r-md);
    background: var(--card-bg);
    overflow: hidden;
}
.search-wrap:focus-within { border-color: var(--accent); }
.search-input {
    flex: 1;
    min-width: 0;
    padding: var(--s-2) var(--s-3);
    border: none;
    outline: none;
    background: transparent;
}
.search-btn {
    display: flex;
    align-items: center;
    padding: 0 var(--s-3);
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--muted);
}
.search-btn:hover { background: var(--accent-soft); color: var(--accent); }
.search-clear { flex: none; min-width: 44px; margin: 0; padding: 0 var(--s-2); border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: var(--fs-xl); }
.role-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s-4); }
.role-layout-grid > div { grid-column: 1; grid-row: 1; }
.role-layout-palette { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: var(--s-3); max-height: 65vh; overflow-y: auto; }
.role-layout-source { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2); margin: var(--s-2) 0; text-align: left; }
.role-layout-row { position: relative; display: grid; grid-template-columns: 24px minmax(0,1fr) 130px 44px; align-items: center; gap: var(--s-2); padding: var(--s-2); margin: var(--s-2) 0; }
.role-layout-source, .role-layout-row { border: 1px solid var(--role-edge,var(--border-str)); border-radius: var(--r-md); background: var(--role-bg,var(--chip-bg)); color: var(--text); }
.role-layout-row strong { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.role-layout-row label { display: flex; align-items: center; gap: var(--s-1); }
.role-layout-row > label { grid-column: 3; grid-row: 1; }
.role-layout-row [data-remove] { grid-column: 4; grid-row: 1; }
.role-layout-row input { width: 4em; }
.role-layout-grip { position: relative; width: 24px; height: 32px; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: grab; touch-action: none; display: grid; place-items: center; }
.role-layout-grip::after { content: ''; position: absolute; inset: -6px -10px; }
.role-layout-grip svg { fill: currentColor; }
.role-layout-row > .role-layout-grip { position: absolute; left: var(--s-2); top: 50%; transform: translateY(-50%); }
.role-layout-remove { width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: var(--err-bg); color: var(--err-fg); font-size: 32px; line-height: 1; }
.role-layout-remove:hover, .role-layout-remove.is-confirming { background: var(--err-bg); color: var(--err-fg); outline: 2px solid var(--err-fg); }
.role-layout-remove[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.role-layout-place { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0; background: var(--accent-soft); color: var(--accent); border: 1px dashed var(--accent); font-size: var(--fs-lg); }
.role-layout-place:hover { background: var(--hover-bg); color: var(--accent); border-color: var(--accent); }
.role-layout-grip:hover, .role-layout-grip[aria-pressed="true"] { background: transparent; border: 0; color: var(--accent); }
.role-layout-row:has(.role-layout-grip[aria-pressed="true"]), .role-layout-source:has(.role-layout-grip[aria-pressed="true"]) { outline: 2px solid var(--accent); }
.role-layout-group h3 { font-size: var(--fs-xs); margin: var(--s-3) 0 var(--s-1); color: var(--muted); }
[data-role-type="Session Master"] { --role-bg: #eee4f8; --role-edge: #af8bd0; }
[data-role-type="Speaker/Evaluator"] { --role-bg: #ddf1eb; --role-edge: #69aa98; }
[data-role-type="Helper"] { --role-bg: #e0edfa; --role-edge: #7faad0; }
[data-role-type="Special"] { --role-bg: #fff0d3; --role-edge: #c6a04d; }
[data-theme="dark"] [data-role-type="Session Master"] { --role-bg: #362642; --role-edge: #8f6daa; }
[data-theme="dark"] [data-role-type="Speaker/Evaluator"] { --role-bg: #18372f; --role-edge: #508b79; }
[data-theme="dark"] [data-role-type="Helper"] { --role-bg: #203347; --role-edge: #668aaf; }
[data-theme="dark"] [data-role-type="Special"] { --role-bg: #3a301c; --role-edge: #a78c4b; }
.role-layout-insertion { position: fixed; z-index: 101; height: 3px; border-radius: var(--r-pill); background: var(--accent); pointer-events: none; transform: translateY(-50%); }
.role-layout-insertion::before, .role-layout-insertion::after { content: ''; position: absolute; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.role-layout-insertion::before { left: -3px; }
.role-layout-insertion::after { right: -3px; }
.role-layout-dragging .role-layout-place { display: none; }
.role-layout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
html:has(body.role-layout-page) { overflow: hidden; }
body.role-layout-page { height: var(--role-layout-height,100dvh); overflow: hidden; display: flex; flex-direction: column; }
.role-layout-page .appbar { flex: none; }
.role-layout-page main { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; padding-bottom: calc(var(--role-layout-nav-height,64px) + var(--s-2)); }
.role-layout-page main > h1 { margin: var(--s-2) 0; }
.role-layout-page main > p { margin: var(--s-2) 0; }
.role-layout-page #role-layout-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.role-layout-page .role-layout-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0,1fr); }
.role-layout-page .role-layout-grid > div { display: flex; min-height: 0; min-width: 0; }
.role-layout-page .role-layout-palette, .role-layout-page .role-layout-section { display: flex; flex-direction: column; min-height: 0; min-width: 0; margin: 0; overflow: hidden; }
.role-layout-page .role-layout-palette { position: static; align-self: stretch; max-height: none; }
.role-layout-page .role-layout-section { flex: 1; }
.role-layout-page .role-layout-palette h2, .role-layout-page .role-layout-section h2 { flex: none; margin: 0 0 var(--s-2); }
.role-layout-available-list, .role-layout-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
/* Never sideways: long names like "Discharge/Installation Ceremony Master" wrap instead. */
.role-layout-available-list { overflow-x: hidden; }
.role-layout-source span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .role-layout-grid { grid-template-columns: 1fr; }
    .role-layout-palette { grid-column: 1; position: static; }
    .role-layout-grid > div { grid-column: 1; }
    .role-layout-page .role-layout-grid { grid-template-rows: minmax(0,1fr); gap: var(--s-2); }
    /* One list at a time, chosen by the tabs above the grid. */
    .role-layout-grid[data-pane="meeting"] .role-layout-palette,
    .role-layout-grid[data-pane="add"] > div { display: none; }
    .role-layout-grid > div, .role-layout-palette { grid-row: 1; max-height: none; }
    .role-layout-tabs { flex: none; margin-bottom: var(--s-2); }
    /* Name, slot count and remove on one line; the input keeps its aria-label. */
    .role-layout-row { grid-template-columns: 24px minmax(0,1fr) auto auto; }
    .role-layout-row > label { grid-column: 3; }
    .role-layout-row [data-remove] { grid-column: 4; grid-row: 1; justify-self: end; }
    .role-layout-slots-label { display: none; }
}
@media (min-width: 721px) { .role-layout-tabs { display: none; } }
.page-head.member-roster-head { justify-content: flex-start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.member-roster-head h2, .member-roster-head form { margin: 0; }

.filter-wrap { position: relative; }
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border-str);
    border-radius: var(--r-md);
    background: var(--card-bg);
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}
.filter-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.filter-btn--on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.filter-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.filter-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    padding: var(--s-4) var(--s-4) var(--s-3);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
}
.filter-popover-title {
    margin-bottom: var(--s-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.filter-option {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) 0;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.filter-option input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; }
.filter-popover-actions {
    margin-top: var(--s-3);
    padding-top: var(--s-2);
    border-top: 1px solid var(--border);
}
.filter-apply-btn { width: 100%; }

/* --------------------------------------------------------------------------
   Term picker (officers)
   -------------------------------------------------------------------------- */
.term-picker {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.term-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--border-str);
    border-radius: var(--r-md);
    background: var(--card-bg);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-lg);
    line-height: 1;
    user-select: none;
}
.term-nav:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.term-nav--off { opacity: 0.35; pointer-events: none; }

.term-select-wrap { position: relative; }
.term-select {
    appearance: none;
    -webkit-appearance: none;
    max-width: none;
    min-width: 200px;
    padding: var(--s-2) var(--s-6) var(--s-2) var(--s-3);
    border: 1px solid var(--border-str);
    border-radius: var(--r-md);
    background: var(--card-bg);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.term-select:hover, .term-select:focus { border-color: var(--accent); outline: none; }
.term-select-wrap::after {
    content: "";
    position: absolute;
    right: var(--s-3);
    top: 50%;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--muted);
    pointer-events: none;
}
.term-badge {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--ok-bg);
    color: var(--ok-fg);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.alert--ok { background: var(--ok-bg); color: var(--ok-fg); }

/* Settings page: one card per setting group. */
.settings-section .faint { margin: var(--s-1) 0 var(--s-4); max-width: 60ch; }
.settings-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.settings-form select { max-width: 320px; }
.settings-form .button { margin: 0; }

.edit-form { display: grid; gap: var(--s-2); max-width: 680px; }
.edit-form label { font-weight: 600; font-size: var(--fs-sm); margin-top: var(--s-2); }
.edit-form input, .edit-form select, .edit-form textarea {
    width: 100%; max-width: none; padding: var(--s-2); border: 1px solid var(--border-str);
    border-radius: var(--r-sm); background: var(--card-bg); color: var(--text);
    font: inherit;
}
.edit-form__actions { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.edit-form__actions .button { margin: 0; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-6) 0;
}
.login-card {
    width: 100%;
    max-width: 420px;
    padding: var(--s-6) var(--s-5);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.login-card .brand-mark {
    width: 46px; height: 46px;
    margin: 0 auto var(--s-4);
    font-size: var(--fs-md);
    border-radius: var(--r-md);
}
.login-card h1 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.login-card p { color: var(--muted); font-size: var(--fs-sm); }

.line-login-button {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-sm);
    background: #06c755;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.line-login-button:hover { background: #05ad4a; color: #fff; }
.line-mark {
    padding-right: var(--s-3);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    font-weight: 800;
    letter-spacing: 0.03em;
}

.success-mark {
    width: 52px; height: 52px;
    margin: 0 auto var(--s-4);
    border-radius: 50%;
    background: #06c755;
    color: #fff;
    font-size: var(--fs-xl);
    line-height: 52px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Phones — app bar wraps, tables become stacked cards
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .appbar { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
    .account { margin-left: auto; padding-left: 0; border-left: none; }
    .account-name { display: none; }
    h1 { font-size: var(--fs-xl); }
    main {
        padding: var(--s-4) var(--s-3)
                 calc(78px + env(safe-area-inset-bottom, 0px));
    }
    .appbar .nav a { font-size: 0.68rem; }
    .sidebar { width: min(82vw, 300px); }
}

@media (max-width: 620px) {
    .table-wrap {
        background: none;
        border: none;
        box-shadow: none;
        overflow: visible;
    }
    table, tbody, tr, td { display: block; width: 100%; }
    colgroup { display: none; }
    thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

    tbody tr {
        margin-bottom: var(--s-3);
        padding: var(--s-2) var(--s-4);
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);
    }
    tbody tr:hover { background: var(--card-bg); }

    td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--s-4);
        padding: var(--s-2) 0;
        border-bottom: 1px solid var(--border);
        text-align: right;
    }
    tr td:last-child { border-bottom: none; }

    /* the header for each cell comes from the markup's data-label */
    td::before {
        content: attr(data-label);
        flex: none;
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        text-align: left;
    }
    td:not([data-label])::before { content: none; }

    /* the first cell reads as the card's title */
    tbody tr td:first-child {
        font-size: var(--fs-md);
        font-weight: 600;
        text-align: left;
    }
    tbody tr td:first-child::before { display: none; }

    .definition { grid-template-columns: 1fr; gap: var(--s-1); }
    .definition dd { margin-bottom: var(--s-3); }
    .search-wrap { max-width: none; }
    .term-select { min-width: 0; flex: 1; }
    .term-picker { flex-wrap: nowrap; }
    .term-select-wrap { flex: 1; }

    /* Keep role cards visible beside the open member drawer on phones. */
    .role-drawer { width: min(50vw, 240px); min-width: 160px; }
    body.role-drawer-open #meeting-roles-table { width: calc(100% - min(50vw, 240px)); }
    body.role-drawer-open #meeting-roles-table tbody tr {
        margin-bottom: var(--s-2);
        padding: var(--s-1) var(--s-2);
    }
    body.role-drawer-open #meeting-roles-table td {
        gap: var(--s-1);
        padding: var(--s-1) 0;
        font-size: var(--fs-xs);
    }
    body.role-drawer-open #meeting-roles-table tbody tr td:first-child { font-size: var(--fs-sm); }
    body.role-drawer-open .role-palette__members button {
        flex-wrap: wrap;
        gap: var(--s-1);
        padding: var(--s-1);
    }
    body.role-drawer-open .role-palette__members small { white-space: normal; }
}

/* Meeting dates in the list and club attendance calendar. */
.meeting-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--s-3);
}
.meeting-date-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
}
.meeting-date-card:hover, .meeting-date-card:focus-visible { border-color: var(--accent); color: var(--accent); }
.meeting-date-card__date {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-height: 54px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
    line-height: 1.1;
}
.meeting-date-card__date strong { font-size: var(--fs-lg); }
.meeting-date-card__date small { font-size: var(--fs-xs); }
.meeting-date-card__body { display: grid; min-width: 0; gap: 2px; }
.meeting-date-card__body strong, .meeting-date-card__body small { overflow-wrap: anywhere; }
.meeting-date-card__body small { color: var(--muted); }

.calendar-month-nav { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.calendar-month-nav > a:first-child, .calendar-month-nav > a:nth-child(3) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-str);
    border-radius: var(--r-sm);
    background: var(--card-bg);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-lg);
}
.calendar-month-nav__today { font-size: var(--fs-sm); }
.attendance-calendar-link { font-size: var(--fs-sm); font-weight: 400; }
.calendar-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-bg); }
.calendar-grid { display: table; width: 100%; table-layout: fixed; }
.calendar-grid thead { display: table-header-group; position: static; width: auto; height: auto; clip: auto; }
.calendar-grid tbody { display: table-row-group; }
.calendar-grid tr { display: table-row; }
.calendar-grid th { width: 14.285%; text-align: center; }
.calendar-grid td, .calendar-grid tr td:last-child {
    display: table-cell;
    width: 14.285%;
    height: 96px;
    padding: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
}
.calendar-grid tr td:last-child { border-right: 0; }
.calendar-grid tbody tr:last-child td { border-bottom: 0; }
.calendar-grid td::before { content: none; }
.calendar-grid tbody tr { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.calendar-day > span, .calendar-day > a { display: flex; flex-direction: column; height: 100%; padding: var(--s-2); }
.calendar-day > a { color: var(--text); text-decoration: none; }
.calendar-day > a:hover, .calendar-day > a:focus-visible { background: var(--accent-soft); }
.calendar-day--outside { background: var(--bg); color: var(--faint); }
.calendar-day__number { font-weight: 700; }
.calendar-day__count { margin-top: var(--s-1); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; }
.calendar-day__theme { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-xs); }
.calendar-day__mobile-count { display: none; }
.calendar-meetings { scroll-margin-top: var(--s-4); margin-bottom: var(--s-5); }
.calendar-meetings h3 { margin: 0 0 var(--s-2); font-size: var(--fs-base); }
@media (max-width: 620px) {
    .calendar-grid th { padding: var(--s-2) 0; font-size: 0.65rem; }
    .calendar-grid td, .calendar-grid tr td:last-child { height: 56px; }
    .calendar-grid tbody tr td:first-child { font-size: inherit; font-weight: inherit; }
    .calendar-day > span, .calendar-day > a { padding: 4px; }
    .calendar-day__count, .calendar-day__theme { display: none; }
    .calendar-day__mobile-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-top: 2px;
        border-radius: var(--r-pill);
        background: var(--accent-soft);
        color: var(--accent);
        font-size: 0.65rem;
        font-weight: 700;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   Slide-out sidebar drawer — used at every breakpoint
   ========================================================================== */
.drawer-toggle,
.drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    flex: none;
}
.drawer-toggle svg,
.drawer-close svg { width: 19px; height: 19px; }
.drawer-toggle:hover,
.drawer-close:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(12, 28, 41, 0.42);
    opacity: 0;
    transition: opacity 0.22s ease;
}
body.drawer-open .drawer-overlay { opacity: 1; }

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 70;
    width: 290px;
    max-width: 86vw;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.3, 0.8, 0.4, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-y: auto;
}
body.drawer-open .sidebar { transform: translateX(0); }

/* keep the closed drawer out of the tab order */
.sidebar[aria-hidden="true"] { visibility: hidden; }
body.drawer-open .sidebar { visibility: visible; }

/* The drawer covers the app bar, so its header must reproduce the app bar's
   geometry: same side padding, same vertical padding, same 36px button. That
   puts the close button exactly over the hamburger, as in Android's drawer.
   If .appbar padding changes, change these to match. */
.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--border);
}
.sidebar-head .brand { min-width: 0; gap: var(--s-2); }
.sidebar-head .brand-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.sidebar-head .brand-product:first-child { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
@media (max-width: 720px) {
    .sidebar-head { padding: var(--s-3) var(--s-4); }
}
.sidebar-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}

/* nav inside the drawer stacks vertically */
.sidebar .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: var(--s-3);
    flex-wrap: nowrap;
}
.sidebar .nav a {
    justify-content: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
}
.sidebar .nav a svg { width: 19px; height: 19px; }
/* Log out is a form button dressed as a menu entry. */
.sidebar .nav form { margin: 0; }
.sidebar .nav .nav-button {
    display: flex; align-items: center; gap: var(--s-3); width: 100%;
    padding: var(--s-3); border: 0; border-radius: var(--r-md);
    background: none; color: var(--muted); font: inherit; font-size: var(--fs-base);
    text-align: left; cursor: pointer;
}
.sidebar .nav .nav-button:hover { background: var(--accent-soft); color: var(--accent); }
.sidebar .nav .nav-button svg { width: 19px; height: 19px; flex: none; }


body.drawer-open { overflow: hidden; }
/* the drawer and its scrim cover the bottom bar */
body.drawer-open .appbar .nav { z-index: 30; }

/* ==========================================================================
   Officer dashboard
   ========================================================================== */
.attendance-strip {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.attendance-pip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 72px;
    padding: var(--s-3) var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
    text-decoration: none;
    color: var(--text);
}
.attendance-pip:hover { border-color: var(--accent); background: var(--accent-soft); }
.attendance-pip__n { font-size: var(--fs-lg); font-weight: 700; color: var(--accent); line-height: 1.1; }
.attendance-pip__d { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
    display: inline-block;
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--border-str);
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .sidebar, .drawer-overlay { transition: none; }
}


/* ==========================================================================
   Backstage theme — True Maroon
   Re-points the accent tokens, so every component that already reads
   var(--accent) re-themes without a per-component override.
   ========================================================================== */
.theme-officer {
    --accent:       var(--tm-maroon);
    --accent-hover: #5c1b26;
    --accent-soft:  #f7eceb;
}
.theme-officer .appbar { border-bottom-color: #e8d7d6; }

/* The drawer is backstage wherever it appears, so it is always maroon. */
/* The drawer used to force maroon because only officers saw it. Now that
   members have one too it inherits the page theme: blue for a member, maroon
   on an officer-themed page. */
.sidebar-group {
    margin: var(--s-3) 0 var(--s-1);
    padding: 0 var(--s-3);
    font-size: var(--fs-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--faint);
}
.sidebar .nav > .sidebar-group:first-child { margin-top: var(--s-2); }
.sidebar-head {
    background: var(--tm-blue);
    border-bottom-color: var(--tm-blue);
}
.theme-officer .sidebar-head {
    background: var(--tm-maroon);
    border-bottom-color: var(--tm-maroon);
}
.sidebar-head .sidebar-title { color: #fff; }
.sidebar .drawer-close {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
.sidebar .drawer-close:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}
.sidebar-foot {
    margin: auto var(--s-4) var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    color: var(--faint);
    font-size: var(--fs-xs);
}

/* ── Role sign-ups ───────────────────────────────────────── */
.btn--ghost {
    background: var(--card-bg);
    border: 1px solid var(--border-str);
    color: var(--muted);
    font-weight: 500;
}
.btn--ghost:hover {
    background: var(--err-bg);
    border-color: var(--err-fg);
    color: var(--err-fg);
}
.signer-list { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.chip--sm { padding: 0 var(--s-2); font-size: var(--fs-xs); }


/* ==========================================================================
   Dark mode
   Overrides the tokens only — every component already reads them, so nothing
   needs a per-component dark rule. Two exceptions are handled at the bottom:
   --accent becomes light enough to read as text on a dark background, which
   means solid accent buttons need dark ink rather than white.
   ========================================================================== */
/* Dark theme. The page carries data-theme="dark" or "light", set before
   first paint by the script in base.html: the toggle's saved choice, or
   the device setting until one is made. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:         #11161a;
    --card-bg:    #1a2127;
    --text:       #e6ecf1;
    --muted:      #a0aeb9;
    --faint:      #7a8792;
    --border:     #2c363e;
    --border-str: #44525c;

    --accent:       #6cb6e8;
    --accent-hover: #8ccbf5;
    --accent-soft:  #16303f;

    --surface-2: #222b32;
    --hover-bg:  #232d34;
    --tint:      #1c262d;
    --chip-bg:   #2a343c;
    --track-bg:  #2c363e;

    --ok-bg:   #163120;  --ok-fg:   #74c98d;
    --warn-bg: #33290f;  --warn-fg: #e2bb66;
    --err-bg:  #3a1e1c;  --err-fg:  #ea9d95;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
}

/* Officer dark mode — "Clay". True Maroon desaturated 55% before being
   blended into a near-black base, so it reads as a warm dark grey with a
   red cast rather than a red page. Body text 11.1:1 on cards, accent
   7.2:1, cards 1.24x lighter than the page so they still sit proud.

   Scoped to .theme-officer only. The drawer used to be listed here too,
   but members have one now, and an unscoped rule gave them a pink drawer
   on the blue theme. Inside an officer body the drawer inherits these
   anyway. */
[data-theme="dark"] .theme-officer {
    --bg:         #24171a;
    --card-bg:    #3e252a;
    --surface-2:  #42272c;
    --hover-bg:   #41262c;
    --tint:       #28191c;
    --chip-bg:    #45292e;
    --track-bg:   #44282d;
    --border:     #533d41;
    --border-str: #6c595d;

    --accent:       #dcafb6;
    --accent-hover: #e5c3c8;
    --accent-soft:  #352024;

    --text:  #e7e4e5;
    --muted: #b3a6a9;
    --faint: #8d8184;
}
[data-theme="dark"] .theme-officer .appbar { border-bottom-color: #392226; }

/* Use dark surfaces with light ink for primary controls in dark mode. */
[data-theme="dark"] .button, [data-theme="dark"] .btn--primary, [data-theme="dark"] .filter-apply-btn {
    background: var(--accent-soft);
    color: var(--accent);
}
[data-theme="dark"] .button:hover, [data-theme="dark"] .btn--primary:hover, [data-theme="dark"] .filter-apply-btn:hover {
    background: var(--hover-bg);
    color: var(--accent-hover);
}

/* Maroon is dark in both schemes, so this badge keeps white ink. */
[data-theme="dark"] .badge--dtm { color: #fff; }


/* ── Admin view-as toggle ────────────────────────────────────────────────── */
.viewas {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.viewas__label {
    padding: 0 var(--s-1) 0 var(--s-2);
    font-size: var(--fs-xs);
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.viewas__opt {
    padding: 3px var(--s-2);
    border: none;
    background: none;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: 4px;
    line-height: 1.6;
}
.viewas__opt:hover { background: var(--card-bg); color: var(--text); border: none; }
.viewas__opt.is-on {
    background: var(--card-bg);
    color: var(--accent);
    font-weight: 650;
    box-shadow: var(--shadow-sm);
}
.viewas select {
    max-width: 220px; padding: 3px var(--s-2);
    border: none; border-radius: 4px; background: var(--card-bg); color: var(--accent);
    font: inherit; font-size: var(--fs-xs); font-weight: 650;
}
/* Shown on every page while an admin views the app as someone else. */
.viewas-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-2) var(--s-4);
    background: var(--warn-bg); color: var(--warn-fg); font-size: var(--fs-sm);
}
.viewas-banner .text-button { color: inherit; text-decoration: underline; }
/* The switcher sits inline in the bar, reading as part of the sentence. */
.viewas-banner .viewas { background: none; border: none; padding: 0; }
.viewas-banner .viewas__label {
    display: inline; padding: 0 var(--s-1) 0 0;
    font-size: inherit; color: inherit; text-transform: none; letter-spacing: normal;
}
.viewas-banner form { margin: 0; }

@media (max-width: 720px) {
    /* The label goes; the selected view still reads on its own. */
    .viewas__label { display: none; }
    .viewas select { max-width: 140px; }
}

/* Member whose home club is explicitly not ours. */
.tag--guest {
    background: var(--warn-bg);
    color: var(--warn-fg);
    border: 1px solid var(--warn-fg);
}

/* Separates the work-list shortcuts from Settings in the backstage drawer. */
.sidebar-rule {
    height: 0;
    margin: var(--s-2) var(--s-3);
    border: 0;
    border-top: 1px solid var(--border);
}

/* Which Pathways revision an enrolment sits on. */
.tag--version {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-soft);
    font-variant-numeric: tabular-nums;
}

/* Pathway completion tree (Education). The toggle is a <details> in the
   Path cell; name="pathway" makes the browser keep only one open. The tree
   lives in the .row-detail row after it and shows while that toggle is open. */
.pw-toggle { display: inline-block; vertical-align: middle; margin: -4px var(--s-1) -4px -6px; }
.pw-toggle summary {
    list-style: none;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    color: var(--muted);
    cursor: pointer;
}
.pw-toggle summary::-webkit-details-marker { display: none; }
.pw-toggle summary::before {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid; border-bottom: 2px solid;
    transform: translateX(-1px) rotate(-45deg);   /* pointing right */
    transition: transform 0.15s ease;
}
.pw-toggle[open] summary::before { transform: translateY(-2px) rotate(45deg); }   /* pointing down */
.pw-toggle summary:hover, .pw-toggle[open] summary { color: var(--accent); background: var(--accent-soft); }
.pw-toggle summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
tbody tr:not(:has(details[open])) + .row-detail { display: none; }
tbody tr:nth-last-child(2):has(+ .row-detail) td { border-bottom: none; }
.row-detail, .row-detail:hover { background: var(--surface-2); }

.pw-tree, .pw-tree ul { list-style: none; margin: 0; padding: 0; }
.pw-tree { display: grid; gap: var(--s-2); }
.pw-level__name { font-weight: 600; margin-right: var(--s-2); }
.pw-level__state { font-size: var(--fs-sm); color: var(--muted); }
.pw-level--approved .pw-level__state { color: var(--ok-fg); }
.pw-level--not-started { color: var(--faint); }
.pw-tree ul {
    margin: var(--s-1) 0 0 var(--s-2);
    padding-left: var(--s-4);
    border-left: 2px solid var(--border-str);
}
/* Desktop: project and date on one line, speech title on the line below.
   Phones stack all three in markup order (see the 620px block). */
.pw-project { display: flex; flex-wrap: wrap; align-items: baseline; padding: 2px 0; font-size: var(--fs-sm); }
.pw-project .muted { order: 1; flex-basis: 100%; }
.pw-project + .pw-project, .pw-project + .pw-group { margin-top: var(--s-1); }
/* A project needing several items: "2 of 3", then its tasks one level in. */
.pw-project--multi > ul { order: 2; flex-basis: 100%; }
.pw-count { margin-left: var(--s-2); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.pw-count.is-complete { color: var(--ok-fg); }
.pw-task--todo { color: var(--faint); }
.pw-group {
    padding-top: var(--s-1);
    font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted);
}
.pw-group .pw-project { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--text); }
.pw-project .faint { margin-left: var(--s-2); white-space: nowrap; }

@media (max-width: 620px) {
    /* The card layout right-aligns cells beside a label; the tree has neither. */
    .row-detail { margin-top: calc(-1 * var(--s-3) + 2px); }
    /* Project, speech title and date each on their own line. */
    .pw-project { display: block; }
    .pw-project > span { display: block; }
    .pw-project--multi > span { display: inline; }   /* keep "2 of 3" beside the name */
    .pw-project .faint { margin-left: 0; }
    .row-detail td, .row-detail td:first-child {
        display: block; text-align: left; font-size: var(--fs-base); font-weight: 400;
    }
}

/* ── Expandable filter control ───────────────────────────────────────────── */
/* Replaces the .viewbar segmented control. Categories are independent
   single-choice lists; see templates/_filters.html for the contract. */
.filters { margin: 0 0 var(--s-4); }

.filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-height: 30px;
    padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
    border: 1px solid var(--border-str);
    border-radius: var(--r-md);
    background: var(--card-bg);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
}
.filters__toggle:hover { background: var(--bg); border-color: var(--muted); }
.filters.is-set .filters__toggle {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Drawn inline so it inherits colour from the theme rather than being an
   image that cannot follow it. */
.filters__chevron {
    width: 14px; height: 14px;
    flex: none;
    transition: transform .15s ease;
}
.filters.is-open .filters__chevron { transform: rotate(180deg); }

.filters__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}

.filters__panel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    margin-top: var(--s-3);
    padding: var(--s-4);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.filters__cat { min-width: 170px; margin: 0; padding: 0; border: 0; }
.filters__legend {
    padding: 0 0 var(--s-2);
    font-size: var(--fs-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--faint);
}

.filters__opt {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding: var(--s-1) 0;
    font-size: var(--fs-sm);
    cursor: pointer;
    line-height: 1.5;
}
.filters__opt input { accent-color: var(--accent); margin: 0; flex: none; }
.filters__opt:hover .filters__label { color: var(--accent); }

/* Indented under the option it qualifies, so it reads as part of that choice
   rather than as a filter of its own. */
.filters__sub {
    margin: 0 0 var(--s-1);
    padding-left: calc(13px + var(--s-2));
}
/* Greyed with its option. The arrows have already had their hrefs removed,
   so this is appearance only and nothing here is the sole guard. */
.filters__sub.is-disabled { opacity: .5; }

/* Disabled means the combination is meaningless, not merely empty — so it
   always carries a reason rather than leaving the reader guessing. */
.filters__opt.is-disabled { cursor: not-allowed; color: var(--faint); }
.filters__opt.is-disabled:hover .filters__label { color: var(--faint); }
.filters__why {
    font-size: var(--fs-xs);
    color: var(--faint);
    font-style: italic;
}

.filters__actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-left: auto;
    align-self: flex-end;
}
.filters__reset { font-size: var(--fs-sm); color: var(--accent); margin-left: var(--s-3); }

@media (max-width: 720px) {
    .filters__panel { flex-direction: column; gap: var(--s-4); }
    .filters__actions { margin-left: 0; align-self: flex-start; }
    /* Comfortable tap targets on a phone. */
    .filters__opt { padding: var(--s-2) 0; }
}

/* A filter category rendered as a select (used for the term list, which is
   far too long to be a sane radio list). */
.filters__select {
    width: 100%;
    max-width: 210px;
    margin-top: var(--s-1);
}
.filters__select[disabled] { opacity: .5; cursor: not-allowed; }
.filters__why--block { display: block; margin-top: var(--s-1); max-width: 210px; }

/* Term stepper inside the filter panel: arrows either side of the range. */
.filters__range { margin-bottom: 0; margin-top: var(--s-1); gap: var(--s-1); }
.filters__range .term-nav { width: 28px; height: 28px; }
.filters__range-label {
    /* Fixed, sized for the widest range ("30 Sep 2026" style dates), so the
       arrows do not move as the label changes between club year and officer
       term. */
    width: 200px;
    flex: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
/* Fixed width so the Needs attention column beside it never shifts, whatever
   the term label, toggle state or reason text. */
.filters__cat:has(.filters__range) { width: 290px; flex: none; }
@media (max-width: 720px) { .filters__cat:has(.filters__range) { width: auto; } }

.filters__typerow {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-1);
}
.filters__typerow .filters__types { margin-top: 0; }

/* Club year | Officer term. Two links styled as a small segmented control;
   the current one is filled from tokens so it follows the colour scheme. */
.filters__types {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin-top: var(--s-1);
}
.filters__type {
    /* Equal segments, so switching the bold one does not nudge the pill. */
    box-sizing: border-box;
    min-width: 7.4em;
    text-align: center;
    padding: 2px var(--s-2);
    white-space: nowrap;
    font-size: var(--fs-xs);
    color: var(--muted);
    text-decoration: none;
}
.filters__type.is-on { background: var(--chip-bg); color: var(--text); font-weight: 600; }
.filters__type:not(.is-on):hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Sortable table headers (script in base.html)
   -------------------------------------------------------------------------- */
th .sort-btn {
    appearance: none;
    border: 0;
    background: none;
    margin: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}
/* Show one chevron on hover or on the active sort column. */
th .sort-btn::after {
    content: "";
    width: .4em;
    height: .4em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(225deg);
    opacity: 0;
}
th .sort-btn:hover { color: var(--accent); }
th .sort-btn:hover::after { opacity: .8; }
th .sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
th .sort-btn:focus-visible::after { opacity: .8; }
th[aria-sort] .sort-btn { color: var(--text); }
th[aria-sort] .sort-btn::after { opacity: 1; color: var(--accent); }
th[aria-sort="descending"] .sort-btn::after { transform: rotate(45deg); }

/* Phones hide the header row, so the same control appears as a bar. */
.sort-bar { display: none; }
@media (max-width: 620px) {
    .sort-bar { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
    .sort-bar select { flex: 1; max-width: none; }
    .sort-dir { flex: none; width: 40px; }
    .sort-dir:disabled { opacity: .4; }
}

/* --------------------------------------------------------------------------
   Date strip — member attendance as a row of small date cards that scroll
   sideways with the arrows (or a swipe); the scrollbar is hidden.
   -------------------------------------------------------------------------- */
.date-strip { display: flex; align-items: center; gap: var(--s-2); }
.date-strip__list {
    display: flex; gap: var(--s-2);
    flex: 1; min-width: 0;
    margin: 0; padding: var(--s-1) 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;              /* sideways only: auto on x would make y scrollable too */
    overscroll-behavior-x: contain;  /* a swipe at either end stops here, not the page or back gesture */
    touch-action: pan-x pan-y;       /* vertical swipes still scroll the page */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.date-strip__list::-webkit-scrollbar { display: none; }
.date-strip__arrow {
    flex: none;
    width: 32px; height: 32px;
    border: 1px solid var(--border-str); border-radius: var(--r-pill);
    background: var(--card-bg); color: var(--text);
    display: grid; place-items: center; padding: 0 0 2px;
    font-size: var(--fs-lg); line-height: 1;
    cursor: pointer;
}
.date-strip__arrow:hover { background: var(--hover-bg); }
.date-card {
    position: relative;
    flex: none; scroll-snap-align: start;
    width: 68px;
    display: flex; flex-direction: column; align-items: center;
    padding: var(--s-2) var(--s-1);
    border: 1px dashed var(--border-str); border-radius: var(--r-md);
    background: var(--card-bg); color: var(--faint);
}
.date-card--present { background: var(--ok-bg); border: 1px solid var(--ok-fg); color: var(--ok-fg); }
.date-card__dow, .date-card__mon { font-size: var(--fs-xs); }
.date-card__day { font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; }

/* Engagement: next and last meeting, side by side above the filters. */
.meeting-spotlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.meeting-spotlight__card { display: block; margin: 0; color: inherit; text-decoration: none; }
a.meeting-spotlight__card:hover { border-color: var(--border-str); box-shadow: var(--shadow-md); }
.meeting-spotlight__card h2 { margin: 0 0 2px; font-size: var(--fs-xl); }
.meeting-spotlight__card p:last-child { margin-bottom: 0; }
.meeting-layout-switch { margin-bottom: var(--s-4); }

/* --------------------------------------------------------------------------
   Member education as RPG skills: one card per path with its level, an XP
   bar, a five-node level tree and the current level's projects as quests.
   -------------------------------------------------------------------------- */
.xp-summary {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.xp-summary div {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card-bg);
}
.xp-summary strong { font-size: var(--fs-xl); line-height: 1.1; }
.xp-summary span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.skill { margin-bottom: var(--s-4); }
.skill__head { display: flex; align-items: center; gap: var(--s-3); }
.skill__crest {
    flex: none; display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: var(--r-md);
    background: var(--accent); color: var(--card-bg); font-weight: 800; letter-spacing: .03em;
}
.skill__title { flex: 1; min-width: 0; }
.skill__title h3 { margin: 0; font-size: var(--fs-md); }
.skill__title .faint { font-size: var(--fs-sm); }
.skill__lv { flex: none; font-size: var(--fs-2xl); font-weight: 800; color: var(--accent); }
.skill__lv small { font-size: var(--fs-sm); font-weight: 700; }
.skill__xp-label { margin: var(--s-3) 0 0; font-size: var(--fs-xs); text-align: right; }
.skill__tree {
    display: flex; justify-content: space-between;
    margin: var(--s-4) 0; padding: 0; list-style: none; position: relative;
}
/* The line joining the orbs. */
.skill__tree::before {
    content: ""; position: absolute; top: 18px; left: 10%; right: 10%;
    border-top: 2px dashed var(--border-str);
}
.skill__tree::after {
    content: ""; position: absolute; top: 17px; left: 10%; width: var(--track);
    border-top: 4px solid #e0b93b;
}
.skill__node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); position: relative; z-index: 1; }
.skill__orb {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 2px dashed var(--border-str); background: var(--card-bg);
    color: var(--faint); font-weight: 700; font-size: var(--fs-sm);
}
.skill__node--approved .skill__orb {
    border: 2px solid #c9a227; background: var(--tm-yellow); color: #4a3b00; font-size: var(--fs-md);
}
.skill__node.is-current .skill__orb {
    border: 2px solid var(--accent); color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.skill__node-label { font-size: var(--fs-xs); color: var(--muted); }
.skill__node--not-started:not(.is-current) .skill__node-label { color: var(--faint); }
.skill__quest-title { margin-top: var(--s-3); }
.quest-list { margin: 0; padding: 0; list-style: none; }
.quest-list li { display: flex; align-items: baseline; gap: var(--s-2); padding: 3px 0; }
.quest-list__mark { color: var(--faint); }
.quest-list li.is-done .quest-list__mark { color: #c9a227; }
.meeting-quest-log { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.meeting-quest-log .card { margin: 0; }
.meeting-quest__body { display: grid; gap: 2px; min-width: 0; }
.meeting-quest__body a, .meeting-quest__body .faint { overflow-wrap: anywhere; }
.officer-badge-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.officer-badge {
    display: flex; align-items: center; gap: var(--s-3); min-width: 0;
    padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--card-bg); box-shadow: var(--shadow-sm);
}
.officer-badge--current { border-color: #c9a227; box-shadow: 0 0 0 2px var(--tm-yellow); }
.officer-badge__emblem { position: relative; flex: none; width: 66px; height: 58px; }
.officer-badge__seal {
    display: grid; place-items: center; width: 58px; height: 58px;
    border: 3px solid var(--tm-yellow); border-radius: 50%;
    background: var(--tm-blue); font-size: var(--fs-xl);
}
.officer-badge__body { display: grid; gap: 2px; min-width: 0; }
.officer-badge__body strong { overflow-wrap: anywhere; }
.officer-badge__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.officer-badge__tags span { padding: 1px var(--s-2); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; }
.officer-badge__multiplier { position: absolute; right: -9px; bottom: -7px; padding: 0 2px; color: var(--tm-yellow); -webkit-text-stroke: 1.5px var(--tm-maroon); paint-order: stroke fill; font-size: var(--fs-xl); font-style: italic; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.skill__log { margin-top: var(--s-3); }
.skill__log summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); }

/* Messaging: Messenger-style list of conversations beside the open thread.
   On a phone only one shows at a time: the list, or the thread with a back
   arrow. */
.alert--err { background: var(--err-bg); color: var(--err-fg); }
.messenger {
    display: grid; grid-template-columns: 320px 1fr;
    flex: 1; min-height: 0;
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--card-bg); overflow: hidden;
}
.messenger__list { overflow-y: auto; border-right: 1px solid var(--border); }
.messenger__empty { padding: var(--s-4); }
.chat-item {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4); color: inherit; text-decoration: none;
}
.chat-item:hover { background: var(--hover-bg); }
.chat-item.is-active { background: var(--accent-soft); }
.chat-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-item__top { display: flex; justify-content: space-between; gap: var(--s-2); }
.chat-item__top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chat-item__top time { flex: none; font-size: var(--fs-xs); color: var(--faint); }
.chat-item__preview {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fs-sm); color: var(--muted);
}
.chat-item.is-unread strong, .chat-item.is-unread .chat-item__preview { font-weight: 700; color: var(--text); }
.chat-item__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.avatar { flex: none; border-radius: 50%; object-fit: cover; }
.avatar--initial {
    display: grid; place-items: center;
    background: var(--chip-bg); color: var(--muted); font-weight: 700;
}
.messenger__thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.thread-head {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border);
}
.thread-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thread-head .faint { font-size: var(--fs-xs); }
.thread-head__back { display: none; font-size: var(--fs-lg); text-decoration: none; color: inherit; }
.thread-body {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--s-1);
    padding: var(--s-4);
    background: var(--bg);  /* a step darker than the bubbles, as in LINE */
}
.thread-day { align-self: center; margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-xs); color: var(--faint); }
.thread-empty, .thread-placeholder { margin: auto; text-align: center; max-width: 36ch; }
.thread-placeholder { display: grid; place-items: center; flex: 1; }
.bubble { max-width: min(75%, 520px); display: flex; flex-direction: column; }
.bubble p {
    align-self: flex-start; max-width: 100%;
    margin: 0; padding: var(--s-2) var(--s-3); border-radius: 18px;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
/* LINE emoji sit in the line of text; a sticker is shown on its own, unboxed. */
.bubble p img { width: 1.4em; height: 1.4em; vertical-align: -0.3em; }
.bubble p img.chat-photo { display: block; width: auto; height: auto; max-width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--r-sm); }
.bubble__avatar { aspect-ratio: 1; object-fit: cover; overflow: hidden; }
.bubble--sticker p, .bubble--emoji-only p { padding: 0; background: none !important; border: none !important; }
.bubble--emoji-only p { font-size: 2.6rem; line-height: 1.15; }  /* plain emoji like 👍, shown big as LINE does */
/* Until the script sets half the image's own width. */
.bubble--sticker p img { width: auto; height: auto; max-width: 185px; max-height: 160px; }
.bubble--emoji-only p img { width: 48px; height: 48px; vertical-align: middle; }
.bubble time { font-size: 0.7rem; color: var(--faint); margin: 2px var(--s-2) var(--s-1); }
.bubble--in { align-self: flex-start; }
.bubble--in p { background: var(--card-bg); border: 1px solid var(--border-str); border-bottom-left-radius: 6px; }
.bubble--out { align-self: flex-end; align-items: flex-end; }
.bubble--out p { align-self: flex-end; background: var(--accent); color: var(--card-bg); border-bottom-right-radius: 6px; }
.composer {
    display: flex; gap: var(--s-2); align-items: flex-end;
    padding: var(--s-3); border-top: 1px solid var(--border);
}
.composer textarea {
    flex: 1; resize: none; max-height: 8em; field-sizing: content;
    padding: var(--s-2) var(--s-3); border: 1px solid var(--border-str); border-radius: 20px;
    background: var(--bg); color: var(--text); font: inherit;
}
.composer .button { margin: 0; border-radius: 20px; }
@media (max-width: 720px) {
    .messenger { grid-template-columns: 1fr; }
    .messenger.has-thread .messenger__list { display: none; }
    .messenger:not(.has-thread) .messenger__thread { display: none; }
    .messenger__list { border-right: 0; }
    .thread-head__back { display: block; }
}

/* Light/dark toggle, top right of the app bar. Shows the moon in light
   mode and the sun in dark mode: the theme it switches to. */
.theme-toggle {
    margin-left: auto;
    display: grid; place-items: center;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--card-bg); color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--border-str); }
.viewas-toggle { margin-left: auto; }
.viewas-toggle + .viewas-menu + .theme-toggle { margin-left: 0; }
.viewas-menu { inset: 64px var(--s-4) auto auto; margin: 0; padding: var(--s-3); max-width: calc(100vw - 32px); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-md); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Copy-to-clipboard icon button (roster emails). Sits above the row link. */
.copy-btn {
    position: relative; z-index: 1;
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--card-bg); color: var(--muted); cursor: pointer;
}
.copy-btn:hover { color: var(--accent); border-color: var(--border-str); }
.copy-btn svg { width: 17px; height: 17px; }

/* Toast: bottom centre, above the bottom navigation. */
.toast {
    position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 100; transform: translate(-50%, 8px);
    max-width: calc(100vw - 32px); padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill); background: var(--text); color: var(--card-bg);
    font-size: var(--fs-sm); box-shadow: var(--shadow-md);
    opacity: 0; transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast__action { margin-left: var(--s-3); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Auto messages hub */
.auto-kind { margin-bottom: var(--s-4); }
.auto-kind .settings-form input[type="number"] { width: 5em; }
.auto-kind__switch { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.auto-kind__switch { position: relative; min-height: 44px; cursor: pointer; }
.auto-kind__switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; }
.auto-kind__switch-track { position: relative; flex: none; width: 44px; height: 24px; border: 1px solid var(--border-str); border-radius: var(--r-pill); background: var(--track-bg); }
.auto-kind__switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); }
.auto-kind__switch input:checked + .auto-kind__switch-track { background: var(--accent-soft); border-color: var(--accent); }
.auto-kind__switch input:checked + .auto-kind__switch-track::after { transform: translateX(20px); background: var(--accent); }
.auto-kind__switch input:focus-visible + .auto-kind__switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.auto-kind__due { margin: var(--s-3) 0; padding: var(--s-2) var(--s-3); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.auto-kind__due details { margin-top: var(--s-1); }
.auto-kind__due p { margin: var(--s-1) 0 0; }
.auto-kind__preview pre { white-space: pre-wrap; font: inherit; font-size: var(--fs-sm); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-sm); }
.template-variable-key { margin-bottom: var(--s-5); }
.template-variable-key p { margin-top: 0; }
.template-variable-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.template-variable { min-height: 36px; padding: var(--s-1) var(--s-3); border: 1px solid var(--border-str); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.template-variable:hover, .template-variable:focus-visible { border-color: var(--accent); color: var(--accent); }
.template-variable:disabled { opacity: .42; cursor: not-allowed; }
.message-template { max-width: none; margin-bottom: var(--s-5); }
.message-template__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.message-template__head h2 { margin: var(--s-1) 0; }
.message-template__head p { margin: 0; }
.eyebrow { color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.template-language-tabs { display: flex; gap: var(--s-1); margin: var(--s-4) 0 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.template-language-tabs button { position: relative; min-height: 44px; padding: var(--s-2) var(--s-4); border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: inherit; cursor: pointer; white-space: nowrap; }
.template-language-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 700; }
.template-status-dot { display: inline-block; width: 7px; height: 7px; margin-left: var(--s-1); border-radius: 50%; background: var(--warn-fg); vertical-align: middle; }
.template-language-state { min-height: 44px; padding: var(--s-3) 0; color: var(--muted); font-size: var(--fs-sm); }
.template-edit-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: var(--s-5); align-items: start; }
.template-content-form label { display: block; margin-top: var(--s-3); }
.template-content-form > label:first-child { margin-top: 0; }
.template-content-form textarea { width: 100%; resize: vertical; }
.template-content-form input { width: 100%; }
.template-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-3); }
.template-rsvp-options { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.template-rsvp-options label { display: grid; grid-template-columns: 12px 1.5em minmax(0, 1fr); align-items: center; gap: var(--s-2); margin: 0; color: var(--muted); }
.rsvp-option-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.rsvp-option-dot[data-score="5"] { background: #8c45c7; }
.rsvp-option-dot[data-score="4"] { background: #2a7ad0; }
.rsvp-option-dot[data-score="3"] { background: #c29a00; }
.rsvp-option-dot[data-score="2"] { background: #e07614; }
.rsvp-option-dot[data-score="1"] { background: #d63e30; }
.template-form-actions { justify-content: flex-start; }
.template-preview { position: sticky; top: var(--s-4); }
.template-preview > .card-title { margin-top: 0; }
.template-preview__phone { min-height: 320px; padding: var(--s-4); border: 1px solid var(--border-str); border-radius: var(--r-lg); background: var(--surface-2); }
.template-preview__bubble { display: grid; gap: var(--s-3); width: min(100%, 310px); margin: 0 auto; padding: var(--s-4); border-radius: var(--r-lg); background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.template-preview__bubble p { margin: 0; }
.template-preview__bubble .template-preview__reply { margin-top: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--accent); color: #fff; }
.template-preview__bubble > span { font-size: var(--fs-sm); color: var(--muted); }
.template-preview__action, .template-preview__choice { display: block; padding: var(--s-2); border-radius: var(--r-sm); text-align: center; font-weight: 700; }
.template-preview__action { border: 1px solid var(--accent); color: var(--accent) !important; }
.template-preview__choice { color: #fff !important; }
.template-preview__choice--5 { background: #8c45c7; }
.template-preview__choice--4 { background: #2a7ad0; }
.template-preview__choice--3 { background: #9a7800; }
.template-preview__choice--2 { background: #c45d00; }
.template-preview__choice--1 { background: #c13227; }
.template-history { margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-3); }
.template-history__list { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.template-history__list form { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
@media (max-width: 760px) {
    .template-edit-layout { grid-template-columns: minmax(0, 1fr); }
    .template-preview { position: static; }
    .template-preview__phone { min-height: 0; }
    .template-field-row { grid-template-columns: minmax(0, 1fr); }
    .message-template__head { display: block; }
    .message-template__head > .badge { margin-top: var(--s-2); }
}

/* Selected member context in Messaging. */
.member-context { flex: none; min-height: 0; max-height: 40%; overflow-y: auto; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.context-toggle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; }
.context-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.messaging-page .context-toggle, .messaging-page .messaging-send, .messaging-page .thread-head__back { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
.messaging-page .messaging-send { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.messaging-page .context-toggle:hover, .messaging-page .context-toggle[aria-expanded="true"], .messaging-page .messaging-send:hover, .messaging-page .thread-head__back:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.messaging-page .messaging-send:disabled { opacity: .45; cursor: not-allowed; }
.messaging-page .thread-head__back { padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); }
.member-context__content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: var(--s-2) var(--s-4) var(--s-3); overflow-wrap: anywhere; }
.member-context h2 { font-size: var(--fs-sm); margin: var(--s-2) 0; }
.member-context p { margin: var(--s-2) 0; }
.message-suggestions .member-context__content { grid-template-columns: minmax(0, 1fr); }
.message-suggestions .member-context__content > section { min-width: 0; }
.suggestion-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.suggestion-card > div { min-width: 0; }
.suggestion-card form { flex: none; }
.suggestion-section h3 { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-sm); }
.suggestion-picker { display: flex; align-items: center; gap: 4px; width: 264px; max-width: 100%; margin: var(--s-2) auto; }
.suggestion-picker__dates { position: relative; display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.suggestion-picker__dates::-webkit-scrollbar { display: none; }
.suggestion-picker button { margin: 0; min-height: 36px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-bg); color: var(--text); cursor: pointer; }
.suggestion-picker__date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 0 0 calc((100% - 8px) / 3); min-width: 0; min-height: 76px !important; font: inherit; font-size: var(--fs-xs); white-space: nowrap; scroll-snap-align: start; }
.suggestion-picker__date strong { font-size: var(--fs-2xl); line-height: 1.1; }
.suggestion-picker .suggestion-picker__arrow { flex: 0 0 44px; min-height: 44px; font-size: var(--fs-2xl); }
.suggestion-picker .suggestion-picker__date--next { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.suggestion-picker__date--next .date-card__dow { color: var(--accent); font-weight: 700; }
.suggestion-picker button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.suggestion-picker button:disabled { opacity: .35; cursor: default; }
.suggestion-card .messaging-send { font-size: var(--fs-xs); }
.suggestion-card:first-of-type { border-top: 0; }
.suggestion-card form, .suggestion-card button { margin: 0; }
@media (max-width: 767px) { .member-context__content { grid-template-columns: 1fr; } }
@media (min-width: 1024px) {
    .messaging-page main { max-width: 1440px; }
    .messenger__thread:has(.member-context:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto minmax(0, 1fr) auto; }
    .messenger__thread:has(.member-context:not([hidden])) .thread-head { grid-column: 1 / -1; }
    .messenger__thread:has(.member-context:not([hidden])) .thread-body { grid-column: 1; grid-row: 2; }
    .messenger__thread:has(.member-context:not([hidden])) .composer { grid-column: 1; grid-row: 3; }
    .member-context { grid-column: 2; grid-row: 2 / 4; border-left: 1px solid var(--border); border-bottom: 0; max-height: none; }
    .member-context__content { grid-template-columns: 1fr; }
}

.messaging-tabs { display: flex; gap: var(--s-4); margin-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.messaging-tabs a { padding: var(--s-2); color: var(--muted); text-decoration: none; }
.messaging-tabs a[aria-current="page"] { color: var(--accent); border-bottom: 3px solid var(--accent); font-weight: 700; }

.bubble--with-avatar { position: relative; margin-left: 40px; max-width: min(calc(75% - 40px), 520px); }
.bubble__avatar { position: absolute; left: -40px; top: 0; width: 32px; height: 32px; }

/* The list, messages and context scroll independently inside the screen. */
body.messaging-page { height: var(--messaging-height, 100dvh); overflow: hidden; display: flex; flex-direction: column; }
.messaging-page .appbar { flex: none; }
.messaging-page main { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; padding-top: var(--s-3); padding-bottom: calc(var(--messaging-nav-height, 64px) + var(--s-2)); }
.messaging-page .page-head { flex: none; margin-bottom: var(--s-2); }
.messaging-page .page-head h1 { margin: 0; }
.messaging-page .page-sub { font-size: var(--fs-sm); }
.messaging-page .messaging-tabs { flex: none; }
.messenger__list, .thread-body, .member-context, .member-context__content { overscroll-behavior: contain; }
.thread-body { min-height: 0; }
@media (max-width: 720px) {
    .messaging-page main { padding-top: var(--s-2); }
    .messaging-page .page-sub { display: none; }
}

html:has(body.messaging-page) { overflow: hidden; overscroll-behavior: none; }
.messaging-page .thread-head, .messaging-page .composer { flex: none; }
.messaging-page .composer textarea { max-height: min(8em, 20dvh); }

[data-theme="dark"] .bubble--out p,
[data-theme="dark"] .skill__crest,
[data-theme="dark"] .line-link-chip.is-confirming {
    background: var(--accent-soft); color: var(--text);
}
[data-theme="dark"] .toast,
[data-theme="dark"] .hint__tip {
    background: var(--surface-2); color: var(--text);
}
[data-theme="dark"] .skill__node--approved .skill__orb {
    background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-fg);
}
.sidebar-head .brand-product:first-child { color: #fff; }
.sidebar-head .brand-product { color: #e0d9db; }

/* Role editor: roles already in the meeting, and the row that just gained a slot. */
.role-layout-source { position: relative; }
/* Slot count of a role already in the meeting, on the card's top-right corner
   (4px out, inside the list's 4px padding so the scroll box does not clip it). */
.role-layout-in { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--card-bg); font-size: var(--fs-xs); font-weight: 700; line-height: 20px; text-align: center; }
@keyframes role-layout-bump { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 3px transparent; } }
.role-layout-row.is-bumped { animation: role-layout-bump 0.9s ease-out; }

/* Role cards are tapped and dragged, not read: stop those gestures selecting
   their text. Fields inside stay selectable, which Safari needs to type in them. */
.role-cards tbody tr, .role-layout-row, .role-layout-source { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.role-cards tbody tr :is(input, select, textarea), .role-layout-row input { -webkit-user-select: text; user-select: text; }

/* Table Topics speakers: tick-chips, recorded after the meeting. */
.tt-speakers { margin-top: var(--s-5); }
.tt-speakers[role="tabpanel"] { margin-top: 0; }
.tt-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.tt-chip { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: var(--s-1) var(--s-3); border: 2px solid var(--border-str); border-radius: var(--r-pill); background: var(--chip-bg); cursor: pointer; -webkit-user-select: none; user-select: none; }
.tt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tt-chip small { color: var(--muted); font-size: var(--fs-xs); }
.tt-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tt-chip:has(input:checked)::before { content: "✓"; }
.tt-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Guests on the meeting page. */
.guest-list { list-style: none; padding: 0; margin: var(--s-3) 0; display: grid; gap: var(--s-2); }
.guest-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.guest-list li > a { font-weight: 600; min-width: 8em; }
.guest-list form { margin: 0; }
.tt-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tt-chip.is-on::before { content: "✓"; }
.guest-add summary { cursor: pointer; font-weight: 600; margin: var(--s-2) 0; }
.guest-add__form { display: grid; grid-template-columns: max-content minmax(0, 320px); gap: var(--s-2) var(--s-3); align-items: center; }
.guest-add__form .guest-add__tt, .guest-add__form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 480px) { .guest-add__form { grid-template-columns: 1fr; } }

/* Touch screens learn the swipe once; hidden after the first one on this device. */
.period-picker__hint { display: none; color: var(--faint); font-size: var(--fs-xs); }
@media (pointer: coarse) { .period-picker__hint { display: block; } }
.lb-swiped .period-picker__hint { display: none; }
@media (prefers-reduced-motion: reduce) { .period-picker__now { animation: none !important; transition: none !important; } }


/* Leaderboard period: big term title (a button opening the sheet) between the arrows. */
.period-picker__dates { overflow: hidden; }  /* the title slides during a swipe */
.period-picker__title { display: inline-flex; align-items: baseline; gap: var(--s-1); min-height: 44px; padding: 0 var(--s-2); border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.period-picker__title span { font-size: var(--fs-sm); color: var(--muted); }
.period-picker__title:hover span, .period-picker__title:focus-visible span { color: var(--accent); }
/* The sheet: slides up from the bottom on phones, a centred card on wider screens. */
.period-sheet { width: min(100%, 460px); max-height: 85dvh; padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); border: 0; border-radius: var(--r-lg); background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-md); }
.period-sheet::backdrop { background: rgba(0, 0, 0, .45); }
.period-sheet[open] { animation: period-sheet-in .22s ease-out; }
@keyframes period-sheet-in { from { transform: translateY(24px); opacity: 0; } }
@media (max-width: 620px) {
    .period-sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    @keyframes period-sheet-in { from { transform: translateY(100%); } }
}
.period-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.period-sheet__label { margin: var(--s-3) 0 var(--s-1); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.period-sheet__switch { display: flex; padding: 3px; gap: 3px; border-radius: var(--r-md); background: var(--chip-bg); }
.period-sheet__switch label { flex: 1; cursor: pointer; display: grid; place-items: center; min-height: 44px; border-radius: calc(var(--r-md) - 3px); color: var(--text); text-decoration: none; font-weight: 600; text-align: center; line-height: 1.2; }
.period-sheet__switch label small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.period-sheet__switch label:has(:checked) { background: var(--accent); color: var(--card-bg); box-shadow: var(--shadow-sm); }
.period-sheet__switch label:has(:checked) small { color: inherit; opacity: .8; }
.period-sheet { overflow-x: hidden; }  /* only the term strip may scroll sideways */
.period-sheet__terms { flex: 1; min-width: 0; position: relative; display: flex; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x proximity; padding: 2px 20px var(--s-2); scroll-padding-inline: 20px; scrollbar-width: none; }  /* end chips clear of the edge fades */
.period-sheet__terms::-webkit-scrollbar { display: none; }
.period-sheet__terms { -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent); }  /* fades show it scrolls */
.period-sheet__terms-row label { flex: none; display: grid; place-items: center; min-width: 76px; min-height: 44px; padding: var(--s-1) var(--s-3); border: 1px solid var(--border-str); border-radius: var(--r-pill); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; cursor: pointer; scroll-snap-align: center; }
/* Current term: tinted, thick accent outline, bold, with a dot; the chosen term is solid. */
.period-sheet__terms-row label.is-current { display: flex; gap: 6px; border: 2.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-weight: 800; }
.period-sheet__terms-row label.is-current::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.period-sheet__terms-row label:has(:checked) { border-color: var(--accent); background: var(--accent); color: var(--card-bg); }
.period-sheet fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.period-sheet label input { position: absolute; opacity: 0; pointer-events: none; }
.period-sheet label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.period-sheet__terms-row { display: flex; align-items: center; gap: var(--s-2); }
.period-sheet__terms-row > label.is-current { margin-bottom: var(--s-2); }  /* lines up with the strip's chips */
.period-sheet__divider { flex: none; align-self: stretch; width: 1px; margin-bottom: var(--s-2); background: var(--border-str); }

/* Homepage: fits one phone screen, no scrolling. */
.home-hello { margin: 0 0 var(--s-3); }
.home-meeting { margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--card-bg); }  /* the accent bar is the only emphasis */
.home-meeting .card-title { margin: 0; }
.home-meeting h2 { margin: 2px 0 0; font-size: var(--fs-lg); }
.home-meeting p { margin: 2px 0 0; }
.home-meeting__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); }
.home-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.home-stats .stat-card { padding: var(--s-3); text-align: left; }
.home-stats .stat-label { margin: 0 0 2px; }
.home-stats__value { font-weight: 650; margin-bottom: 4px; overflow-wrap: anywhere; }
.home-attention-title { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-md); }
.home-attention { display: grid; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-bg); overflow: hidden; }
.home-attention a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.home-attention a:first-child { border-top: 0; }
.home-attention a::after { content: "›"; color: var(--muted); margin-left: calc(-1 * var(--s-2)); }
.home-attention a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }  /* inset: the list clips anything outside */
.home-attention--clear { margin: 0; padding: var(--s-3); color: var(--muted); font-size: var(--fs-sm); }
.home-attention strong { margin-left: auto; color: var(--accent); font-size: var(--fs-md); }
.home-attention a:hover { background: var(--hover-bg); }
@media (max-height: 700px) {  /* small phones: drop the greeting and labels to stay on one screen */
    .home-hello, .home-meeting .card-title { display: none; }
    .home-meeting { padding: var(--s-2) var(--s-3); }
    .home-meeting, .home-stats { margin-bottom: var(--s-2); }
    .home-stats .stat-card { padding: var(--s-2) var(--s-3); }
    .home-attention-title { margin: var(--s-2) 0 var(--s-1); }
    .home-attention a { min-height: 34px; }
}

/* Meeting role cards: who evaluates whom, and the per-role switch. */
.role-evaluation span { font-size: var(--fs-sm); }
.role-evaluation form { margin: 0; }
.role-evaluation__switch { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; font-size: var(--fs-sm); cursor: pointer; }
.role-evaluation__switch input { width: 20px; height: 20px; accent-color: var(--accent); }
.role-evaluation__project { font-size: var(--fs-sm); }
.role-evaluation__switch small { font-weight: 400; }
.meeting-spotlight__card--then { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); }
.meeting-spotlight__card--then p { margin: 2px 0 0; color: var(--muted); }

/* Attendance tab: the RSVP answer with its own send-request icon button. */
.rsvp-cell { display: inline-flex; align-items: center; gap: var(--s-2); }
.rsvp-cell form { margin: 0; }
.icon-button.rsvp-send { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.icon-button.rsvp-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.rsvp-send:hover:not(:disabled) { background: var(--accent); color: var(--card-bg); }
.icon-button.rsvp-send:active:not(:disabled) { transform: scale(.92); }
.icon-button.rsvp-send:disabled { border-color: var(--border); background: none; color: var(--faint); opacity: .7; cursor: not-allowed; }
/* Same-width RSVP answers and attendance buttons, so the send icons and the
   Mark present/absent buttons line up down the column on every row. */
.rsvp-cell .rsvp-badge { min-width: 6.5rem; justify-content: center; text-align: center; }

/* Attendance: ✓ present and ✕ absent beside the status; the current one is filled. */
.attendance-cell form { margin: 0; }
.icon-button.attendance-mark { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--border-str); border-radius: 50%; background: var(--card-bg); color: var(--faint); }
.icon-button.attendance-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.attendance-mark:active { transform: scale(.92); }
.attendance-mark--present:hover { border-color: var(--ok-fg); color: var(--ok-fg); }
.attendance-mark--absent:hover { border-color: var(--err-fg); color: var(--err-fg); }
[data-state="present"] .attendance-mark--present { border-color: var(--ok-fg); background: var(--ok-fg); color: var(--card-bg); }
[data-state="absent"] .attendance-mark--absent { border-color: var(--err-fg); background: var(--err-fg); color: var(--card-bg); }
.icon-button.attendance-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-button.rsvp-send:disabled:not([aria-disabled]) { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }  /* the cooldown countdown */
/* Status badge beside its toggle, fixed width so the toggles line up like the RSVP icons. */
.rsvp-cell .badge--current, .rsvp-cell .badge--muted, .rsvp-cell .badge--absent { min-width: 6.5rem; justify-content: center; text-align: center; }
/* First paint of a meeting opened on a tab (#attendance etc.): the inline
   script after the tab bar sets html[data-open-tab] to that panel, so it shows
   and Assignment hides before meeting-tabs.js (deferred) runs and clears it.
   Without this a reload flashed the Assignment tab. */
html[data-open-tab] #assignment-panel { display: none !important; }
html[data-open-tab="assignment-panel"] #assignment-panel[hidden] { display: block !important; }
html[data-open-tab="attendance-panel"] #attendance-panel[hidden] { display: block !important; }
html[data-open-tab="table-topics"] #table-topics[hidden] { display: block !important; }
html[data-open-tab="guests"] #guests[hidden] { display: block !important; }
html[data-open-tab="messages-panel"] #messages-panel[hidden] { display: block !important; }
.icon-button.rsvp-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.badge--absent { background: var(--err-bg); color: var(--err-fg); }
/* Default agenda order: the role editor with one list per section, no slot counts. */
.agenda-defaults .role-layout-list { min-height: 48px; }  /* an empty agenda still takes drops */
.agenda-defaults .role-layout-row > label { display: none; }  /* rows added from the palette get a slot box */
/* Team online presence: round avatars with a status dot, one scrolling row. */
.presence { position: relative; margin: 0; }
/* At the top of the menu drawer, under the brand. */
.sidebar-team { padding: var(--s-2) var(--s-4) var(--s-3); border-bottom: 1px solid var(--border); }
.sidebar-team__label { margin: 0 0 var(--s-1); color: var(--faint); font-size: var(--fs-xs);
                       text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.presence__list { list-style: none; margin: 0; padding: 4px 2px; display: flex; gap: var(--s-3);
                  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.presence__list::-webkit-scrollbar { display: none; }
.presence__who { position: relative; flex: none; width: 44px; height: 44px; padding: 2px; border: 0;
                 background: none; border-radius: 50%; cursor: pointer; }
.presence__who:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.presence__avatar { position: relative; display: grid; place-items: center; width: 40px; height: 40px;
                    border-radius: 50%; overflow: hidden; background: var(--surface-2); color: var(--muted);
                    font-weight: 700; border: 1px solid var(--border); }
.presence__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.presence__dot { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%;
                 border: 2px solid var(--card-bg); box-sizing: border-box; }
.presence__dot--on { background: #2e9e4d; }
.presence__dot--off { background: #9aa5af; }
.presence__tip { position: fixed; z-index: 80; max-width: min(280px, calc(100vw - 16px)); padding: 6px 10px;
                 border-radius: 8px; background: var(--text); color: var(--card-bg); font-size: var(--fs-sm);
                 pointer-events: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.2); }