:root {
    /* Accent color for every interactive element — buttons, nav links, Admin badge,
       signed-up borders. A bright modern light blue; the old logo-teal read as dark
       and drab everywhere it was used, not just on buttons. */
    --brand: #1e88e5;
    --brand-dark: #1565c0;
    --bg: #f7f6f2;
    --card-bg: #ffffff;
    --border: #e1ddd3;
    --text: #2b2b28;
    --muted: #6b6a63;
    --danger: #b3402a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    /* Pushes the header down from under the iOS notch/Dynamic Island/status bar —
       env() resolves to 0 on devices/browsers without a safe area, so this is a no-op
       everywhere except where it's actually needed. The extra 12px is a flat baseline
       cushion on top of that, since even non-notched iPhones show Safari's own
       translucent floating toolbar overlapping the very top of the page on scroll. */
    padding-top: calc(env(safe-area-inset-top) + 12px);
}

.site-header-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-logo { height: 64px; width: auto; display: block; }

/* Hamburger menu — same pattern as ChatPort's navbar-toggler + collapse: a menu icon
   that reveals a dropdown panel of nav links, used at every viewport width (not just
   mobile), instead of an always-visible inline link row. */

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    /* When the header wraps onto two rows on a narrow screen, nav-right ends up alone
       on its own row — without this it sits at the row's left edge (flex-wrap doesn't
       right-align a lone item), which anchors the dropdown menu off-screen to the left
       since it's positioned right:0 relative to nav-right, not the viewport. */
    margin-left: auto;
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.menu-toggle:hover { background: var(--bg); }

.menu-bar {
    width: 20px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}

.site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    padding: 8px;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.site-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav a {
    display: flex;
    align-items: center;
    color: var(--brand);
    text-decoration: none;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 6px;
    font-weight: 500;
}

.site-nav a:hover { background: var(--bg); }

.site-nav .admin-link {
    background: var(--brand);
    color: #fff;
}

.site-nav .admin-link:hover { background: var(--brand-dark); }

.nav-user { color: var(--muted); font-size: 0.92rem; white-space: nowrap; }

main.container { padding-top: 32px; padding-bottom: 64px; min-height: 60vh; }

h1 { margin-top: 0; }

.subtitle { color: var(--muted); margin-top: -8px; }

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.alert-success { background: #e4f3e9; color: var(--brand-dark); border: 1px solid #bfe3cd; }
.alert-error { background: #fbe9e5; color: var(--danger); border: 1px solid #f0c6ba; }
.alert-info { background: #eaf1fb; color: #2a4d8f; border: 1px solid #c7d9f4; }

.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.activity-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.activity-card.signed-up { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

/* The Sign up / Cancel sign-up button is wrapped in a <form> — that form, not the
   button itself, is the direct flex child of .activity-card, so this is what actually
   needs pushing to the bottom for buttons to align across cards of different heights. */
.activity-card > form { margin-top: auto; }

.activity-card h2 { margin: 0 0 8px; font-size: 1.15rem; }

.activity-description { color: var(--muted); font-size: 0.92rem; margin: 0 0 12px; }

.activity-meta {
    margin: 0 0 16px;
    font-size: 0.88rem;
}

.activity-meta > div { display: flex; flex-direction: column; gap: 3px; padding: 5px 0; }

.activity-meta dt {
    color: var(--brand);
    font-weight: 800;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.activity-meta dd {
    margin: 0;
    text-align: left;
    color: var(--text);
    font-weight: 400;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn {
    /* min-height (not just padding) guarantees the iOS 44pt minimum tap target even
       for a one-line label like "Sign up" that wouldn't otherwise need this much height. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
    text-align: center;
    padding: 9px 16px;
    border-radius: 6px;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }

.btn-secondary { background: #eceae4; color: var(--text); }
.btn-secondary:hover { background: #ddd9d0; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #92301e; }

form { margin: 0; }

.form-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.form-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 500;
}

.form-card .checkbox-label {
    flex-direction: row;
    align-items: center;
    font-weight: 400;
    min-height: 44px;
}

.form-card .checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    flex-shrink: 0;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="number"],
.form-card textarea {
    min-height: 44px;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    /* Below 16px, iOS Safari zooms the whole page in on focus — jarring on a phone. */
    font-size: 1rem;
    font-family: inherit;
}

.form-card .optional { color: var(--muted); font-weight: 400; }

/* Empty required fields block submission via native browser validation with no visible
   cue otherwise — site.js adds .was-validated to the form on submit attempt, and this
   turns the blocked field(s) into an obvious red border instead of the button looking
   like it silently did nothing. */
.was-validated input:invalid {
    border-color: var(--danger);
    background: #fdf1ee;
}

.admin-subnav {
    display: flex;
    gap: 16px;
    margin: 12px 0 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.admin-subnav a { color: var(--brand-dark); text-decoration: none; font-weight: 500; }
.admin-subnav a:hover { text-decoration: underline; }

.admin-toolbar { margin-bottom: 16px; }

/* Wraps every admin table so on a narrow phone screen the TABLE scrolls horizontally
   within its own box instead of busting out and forcing the whole page to scroll
   sideways — the border/radius live here now instead of on .admin-table itself. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.admin-table th, .admin-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.admin-table th { background: #f1efe9; font-weight: 600; }

.admin-table .inactive-row { color: var(--muted); }

.row-actions { display: flex; gap: 12px; }
.row-actions a { color: var(--brand-dark); text-decoration: none; }
.row-actions a:hover { text-decoration: underline; }
.row-actions .danger-link { color: var(--danger); }

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.inline-form { display: inline; }

.site-footer {
    color: var(--muted);
    font-size: 0.85rem;
    padding: 24px 0;
    text-align: center;
}