@layer reset, base, theme, components, utilities;

@layer theme {
  :root {
    /* Strictly Shades of Blue & White Design System
       Anchored on Official ROCLUG Dark Blue (#0258a1) */
    --blue-950: #02182b;
    --blue-900: #03254c;
    --blue-800: #013a6b;
    --blue-700: #0258a1; /* Official ROCLUG Dark Blue */
    --blue-600: #0a6cc2;
    --blue-500: #2b82d4;
    --blue-300: #8ec5f8;
    --blue-200: #b8dbfa;
    --blue-100: #d6eafd;
    --blue-50: #edf5fd;
    --blue-25: #f6faff;
    --white: #ffffff;

    /* Semantic Blue & White Tokens */
    --frame-ink: var(--blue-950);
    --ink: var(--blue-950);
    --ink-muted: #2c4c6e;
    --ink-subtle: #4b6d91;

    --surface-paper: var(--blue-50);
    --surface-stone: var(--blue-25);
    --surface-white: var(--white);
    --surface-dark: var(--blue-900);

    --roclug-blue: var(--blue-700);
    --roclug-blue-hover: var(--blue-800);
    --roclug-blue-deep: var(--blue-900);
    --roclug-blue-pill: var(--blue-100);
    --roclug-blue-soft: var(--blue-50);

    /* Tonal Blue Status & Action Tokens (Zero non-blue/white colors) */
    --status-green: var(--blue-700);
    --status-mint: var(--blue-100);
    --status-coral: var(--blue-900);
    --fire-orange: var(--blue-800);
    --cny-purple: var(--blue-900);
    --cny-pill: var(--blue-100);

    /* Legacy compatibility aliases mapped strictly to Blue & White */
    --bg: var(--blue-25);
    --bg-elevated: var(--blue-50);
    --bg-card: var(--white);
    --bg-card-hover: var(--blue-50);
    --border: var(--blue-200);
    --text: var(--blue-950);
    --text-muted: #2c4c6e;
    --lego-yellow: var(--blue-700);
    --lego-blue: var(--blue-700);
    --lego-green: var(--blue-700);
    --lego-red: var(--blue-900);

    /* Mobile-first spacious geometry tokens (progressively enhanced on desktop) */
    --seam: 1.15rem;
    --section-gap: 1.5rem;
    --panel-radius: 20px;
    --btn-radius: 14px;
    --shadow-soft: 0 8px 28px rgba(2, 58, 107, 0.06);
    --shadow-float: 0 18px 44px rgba(2, 24, 43, 0.16);
  }

  @media (min-width: 768px) {
    :root {
      --seam: 1.5rem;
      --section-gap: 2.25rem;
      --panel-radius: 24px;
      --btn-radius: 15px;
    }
  }
}

@layer reset {
  body, h1, h2, h3, h4, p, ul, ol, figure, fieldset, dialog {
    margin: 0;
  }

  button, input, select, textarea, div, section, article, header, footer, aside, nav, main, dialog, form, fieldset, table, th, td, a, span, img {
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: "Helvetica Now Display", "Graphik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--blue-50);
    color: var(--ink);
    line-height: 1.55;
    letter-spacing: -0.015em;
    -webkit-font-smoothing: antialiased;
    accent-color: var(--roclug-blue);
    padding-block-end: 2rem;
  }

  h1, h2, h3, h4 {
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.06;
    text-wrap: balance;
    color: inherit;
  }

  p {
    text-wrap: pretty;
    font-weight: 500;
  }

  a {
    color: var(--roclug-blue);
    text-decoration: none;
    font-weight: 700;
  }

  a:hover {
    text-decoration: underline;
  }

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

  ::selection {
    background-color: var(--roclug-blue);
    color: var(--white);
  }
}

/* Fallback for older browsers without accent-color per modern-web-guidance `brand-consistent-forms` */
@supports not (accent-color: #0258a1) {
  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    background-color: var(--roclug-blue);
    border-color: var(--roclug-blue);
  }
}

@layer components {
  .visually-hidden {
    position: absolute;
    clip-path: inset(50%);
    overflow: hidden;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }

  /* Outer Bento Shell with generous breathing room */
  .bento-shell {
    padding: 1rem;
    max-inline-size: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-block-size: 100dvh;
  }

  @media (min-width: 768px) {
    .bento-shell {
      padding: 1.5rem 2.25rem 2.5rem;
    }
  }

  /* Tonal Blue & White Bento Surfaces */
  .bento-panel {
    background-color: var(--white);
    color: var(--ink);
    border-radius: var(--panel-radius);
    border: 1px solid var(--blue-100);
    box-shadow: var(--shadow-soft);
    overflow: clip;
    position: relative;
  }

  .bento-panel-white {
    background-color: var(--white);
    color: var(--ink);
    border-radius: var(--panel-radius);
    border: 1px solid var(--blue-100);
    box-shadow: var(--shadow-soft);
    overflow: clip;
    position: relative;
  }

  .bento-panel-blue {
    background-color: var(--roclug-blue);
    color: var(--white);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-soft);
    overflow: clip;
    position: relative;
  }

  .bento-panel-deep {
    background-color: var(--blue-900);
    color: var(--white);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-soft);
    overflow: clip;
    position: relative;
  }

  /* Steering Committee / Admin Caution-Taped Construction Zone Navbar (Above Standard UI) */
  .sc-caution-bar {
    background-color: #111317;
    color: #facc15;
    border-radius: var(--panel-radius);
    border: 2px solid #facc15;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    overflow: clip;
    position: relative;
  }

  .sc-caution-bar[hidden] {
    display: none !important;
  }

  .sc-caution-tape {
    block-size: 8px;
    inline-size: 100%;
    background: repeating-linear-gradient(
      -45deg,
      #facc15 0px,
      #facc15 14px,
      #111317 14px,
      #111317 28px
    );
  }

  .sc-caution-inner {
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  @media (min-width: 768px) {
    .sc-caution-inner {
      padding: 0.7rem 1.4rem;
      gap: 1rem;
    }
  }

  .sc-caution-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

  .sc-caution-zone-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #facc15;
    color: #111317;
    padding: 0.25rem 0.68rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .sc-caution-officer-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fef08a;
  }

  .sc-caution-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .sc-caution-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 36px;
    padding: 0.35rem 0.8rem;
    border-radius: 10px;
    border: 1.5px solid #facc15;
    background-color: #1f242d;
    color: #fef08a;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
  }

  .sc-caution-btn:hover {
    background-color: #facc15;
    color: #111317;
    text-decoration: none;
    transform: translateY(-1px);
  }

  .sc-caution-btn-yellow {
    background-color: #facc15;
    color: #111317;
    border-color: #facc15;
  }

  .sc-caution-btn-yellow:hover {
    background-color: #fde047;
    color: #000000;
  }

  .sc-caution-btn-danger {
    background-color: #7f1d1d;
    color: #fecaca;
    border-color: #f87171;
  }

  .sc-caution-btn-danger:hover {
    background-color: #dc2626;
    color: #ffffff;
    border-color: #fecaca;
  }

  .sc-caution-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 20px;
    block-size: 20px;
    padding: 0 0.35rem;
    border-radius: 999px;
    background-color: #111317;
    color: #facc15;
    font-size: 0.72rem;
    font-weight: 900;
  }

  /* Mobile-First Sticky Top Header Bar */
  .site-header {
    position: sticky;
    top: 0.75rem;
    z-index: 60;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border: 1px solid var(--blue-200);
    box-shadow: 0 8px 28px rgba(2, 58, 107, 0.08);
  }

  .header-inner {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: safe center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  @media (min-width: 768px) {
    .header-inner {
      padding: 0.85rem 1.5rem;
      gap: 1rem;
    }
  }

  .brand-cluster {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
  }

  .brand-logo {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
  }

  .brand-logo:hover {
    background-color: var(--blue-50);
  }

  .brand-logo img {
    display: block;
    block-size: 30px;
    inline-size: auto;
    max-inline-size: none;
  }

  @media (min-width: 768px) {
    .brand-logo img {
      block-size: 36px;
    }
  }

  /* ED. Studio-inspired split pill badge: progressively revealed on wide screens */
  .ed-split-pill {
    display: none;
  }

  @media (min-width: 1120px) {
    .ed-split-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      overflow: clip;
      border: 1.5px solid var(--roclug-blue);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: -0.03em;
    }
  }

  .ed-pill-dark {
    background-color: var(--roclug-blue);
    color: var(--white);
    padding: 0.2rem 0.55rem;
  }

  .ed-pill-light {
    background-color: var(--blue-50);
    color: var(--roclug-blue-deep);
    padding: 0.2rem 0.6rem;
  }

  /* Mobile-first navigation: hidden on small/medium screens (accessed via Menu drawer), progressively enhanced on wide desktop */
  .primary-nav {
    display: none;
  }

  @media (min-width: 1120px) {
    .primary-nav {
      display: block;
      flex-shrink: 0;
    }

    .primary-nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
  }

  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.14s ease, color 0.14s ease;
  }

  @media (min-width: 1240px) {
    .nav-link {
      padding: 0.42rem 0.85rem;
    }
  }

  .nav-link:hover {
    background-color: var(--blue-100);
    color: var(--roclug-blue-deep);
    text-decoration: none;
  }

  .nav-link.active {
    background-color: var(--roclug-blue);
    color: var(--white);
    text-decoration: none;
  }

  .nav-upload-pill {
    background-color: var(--blue-100);
    color: var(--roclug-blue);
  }

  .nav-upload-pill:hover,
  .nav-upload-pill.active {
    background-color: var(--blue-900);
    color: var(--white);
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
  }

  .header-auth-cluster {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Hide verbose header buttons on compact mobile screens (kept in Menu drawer) */
  @media (max-width: 640px) {
    .header-auth-cluster,
    .header-auth-cluster .hide-on-mobile {
      display: none;
    }
  }

  /* Stroked Secondary Member Sign-In Button (Same Size as Menu Trigger) */
  .header-member-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background-color: var(--white);
    color: var(--roclug-blue);
    border: 1.5px solid var(--roclug-blue);
    border-radius: var(--btn-radius);
    padding: 0.5rem 0.9rem;
    min-block-size: 40px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  }

  .header-member-btn:hover:not(:disabled) {
    background-color: var(--blue-50);
    color: var(--roclug-blue-hover);
    border-color: var(--roclug-blue-hover);
    transform: translateY(-1px);
  }

  /* Top-Right Menu Trigger Button in Official ROCLUG Blue */
  .menu-drawer-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background-color: var(--roclug-blue);
    color: var(--white);
    border: 1.5px solid var(--roclug-blue);
    border-radius: var(--btn-radius);
    padding: 0.5rem 0.9rem;
    min-block-size: 40px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  }

  .menu-drawer-trigger:hover:not(:disabled) {
    background-color: var(--roclug-blue-hover);
    border-color: var(--roclug-blue-hover);
    transform: translateY(-1px);
  }

  .hamburger-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    inline-size: 15px;
  }

  .hamburger-lines span {
    display: block;
    block-size: 2px;
    inline-size: 100%;
    background-color: currentColor;
    border-radius: 2px;
  }

  /* Slide-Over Blue & White Bento Navigation Drawer */
  dialog.drawer-dialog {
    margin: var(--seam) var(--seam) var(--seam) auto;
    inline-size: calc(100dvw - 6px);
    max-inline-size: 540px;
    block-size: calc(100dvh - 6px);
    max-block-size: calc(100dvh - 6px);
    border: 0;
    padding: 0;
    background: transparent;
    overflow: clip;
    opacity: 0;
    transform: translateX(36px) scale(0.985);
    transition-property: opacity, transform, display, overlay;
    transition-duration: 0.24s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-behavior: allow-discrete;
  }

  dialog.drawer-dialog::backdrop {
    background-color: rgba(2, 24, 43, 0);
    backdrop-filter: blur(0px);
    transition-property: background-color, backdrop-filter, display, overlay;
    transition-duration: 0.24s;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }

  :is(dialog.drawer-dialog[open]):where(:not([data-closing])) {
    opacity: 1;
    transform: translateX(0) scale(1);

    @starting-style {
      opacity: 0;
      transform: translateX(36px) scale(0.985);
    }

    &::backdrop {
      background-color: rgba(2, 24, 43, 0.72);
      backdrop-filter: blur(4px);

      @starting-style {
        background-color: rgba(2, 24, 43, 0);
        backdrop-filter: blur(0px);
      }
    }
  }

  .drawer-bento-stack {
    display: flex;
    flex-direction: column;
    gap: var(--seam);
    block-size: 100%;
  }

  .drawer-primary-card {
    flex: 1;
    background-color: var(--roclug-blue);
    color: var(--white);
    border-radius: var(--panel-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  @media (min-width: 768px) {
    .drawer-primary-card {
      padding: 1.65rem;
    }
  }

  .drawer-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 1rem;
  }

  .drawer-close-btn {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background-color: var(--blue-900);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
  }

  .drawer-big-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .drawer-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--white);
    font-size: clamp(1.35rem, 4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.12;
    padding: 0.35rem 0;
    text-decoration: none;
    transition: transform 0.15s ease, color 0.15s ease;
  }

  .drawer-link:hover {
    transform: translateX(6px);
    color: var(--blue-100);
    text-decoration: none;
  }

  .drawer-arrow {
    font-weight: 700;
    color: var(--blue-200);
  }

  .drawer-auth-bar {
    margin-block-start: 1.25rem;
    padding-block-start: 1.15rem;
    border-block-start: 1.5px solid rgba(255, 255, 255, 0.22);
  }

  .drawer-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    background-color: var(--white);
    color: var(--roclug-blue);
    border: 1.5px solid var(--white);
    border-radius: var(--btn-radius);
    padding: 0.7rem 1.1rem;
    min-block-size: 46px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(2, 24, 43, 0.16);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  }

  .drawer-auth-btn:hover {
    background-color: var(--blue-50);
    color: var(--roclug-blue-hover);
    transform: translateY(-1px);
  }

  .drawer-auth-btn-full {
    inline-size: 100%;
  }

  .drawer-auth-signed-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 0.65rem 0.85rem;
  }

  .drawer-auth-user-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-inline-size: 0;
  }

  .drawer-auth-provider-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 999px;
    background-color: var(--white);
    color: var(--roclug-blue);
    font-weight: 800;
    font-size: 0.92rem;
    flex-shrink: 0;
  }

  .drawer-auth-name {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.15;
    color: var(--white);
  }

  .drawer-auth-role {
    font-size: 0.78rem;
    color: var(--blue-100);
    font-weight: 600;
  }

  .drawer-secondary-card {
    background-color: var(--white);
    color: var(--ink);
    border-radius: var(--panel-radius);
    padding: 1.15rem 1.35rem;
  }

  .drawer-footer-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    font-size: 0.86rem;
  }

  @media (min-width: 520px) {
    .drawer-footer-cols {
      grid-template-columns: 1fr 1fr;
    }
  }

  .drawer-footer-cols a {
    display: block;
    color: var(--roclug-blue);
    margin-block-start: 0.2rem;
  }

  .drawer-footer-heading {
    display: inline-block;
    background-color: var(--blue-100);
    color: var(--roclug-blue-deep);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    margin-block-end: 0.35rem;
  }

  /* Strictly Blue & White Pill Tags & Status Badges */
  .pill-tag,
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem 0.68rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    white-space: nowrap;
  }

  .pill-tag-blue,
  .badge-roclug,
  .badge-upcoming {
    background-color: var(--roclug-blue);
    color: var(--white);
  }

  .pill-tag-light {
    background-color: var(--blue-100);
    color: var(--blue-900);
  }

  .pill-tag-white {
    background-color: var(--white);
    color: var(--roclug-blue);
  }

  .pill-tag-dark,
  .badge-past,
  .badge-cny {
    background-color: var(--blue-900);
    color: var(--white);
  }

  .badge-ongoing {
    background-color: var(--white);
    color: var(--roclug-blue);
    border: 1.5px solid var(--roclug-blue);
    box-shadow: 0 0 0 3px rgba(2, 88, 161, 0.22);
  }

  .badge-pending {
    background-color: var(--blue-100);
    color: var(--blue-900);
    border: 1.5px solid var(--roclug-blue);
  }

  /* Buttons (Squircle radius, mobile-friendly touch sizing) */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-block-size: 42px;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    border-radius: var(--btn-radius);
    border: 1.5px solid var(--blue-200);
    background-color: var(--white);
    color: var(--blue-900);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  /* Coarse pointer progressive enhancement for mobile touch targets */
  @media (pointer: coarse) {
    .btn {
      min-block-size: 46px;
    }
  }

  .btn:hover:not(:disabled) {
    background-color: var(--blue-100);
    border-color: var(--roclug-blue);
    color: var(--blue-950);
    text-decoration: none;
    transform: translateY(-1px);
  }

  .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .btn-primary,
  .btn-yellow,
  .btn-green {
    background-color: var(--roclug-blue);
    border-color: var(--roclug-blue);
    color: var(--white);
  }

  .btn-primary:hover:not(:disabled),
  .btn-yellow:hover:not(:disabled),
  .btn-green:hover:not(:disabled) {
    background-color: var(--roclug-blue-hover);
    border-color: var(--roclug-blue-hover);
    color: var(--white);
  }

  .btn-dark {
    background-color: var(--blue-900);
    border-color: var(--blue-900);
    color: var(--white);
  }

  .btn-dark:hover:not(:disabled) {
    background-color: var(--blue-950);
    border-color: var(--blue-950);
    color: var(--white);
  }

  .btn-danger {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: var(--white);
  }

  .btn-danger:hover:not(:disabled) {
    background-color: #991b1b;
    border-color: #991b1b;
    color: var(--white);
  }

  .btn-sm {
    min-block-size: 36px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 11px;
  }

  /* Main Bento Container with Container Query Context */
  .main-bento-container {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    container-type: inline-size;
    container-name: main-bento;
  }

  /* Mobile-First Bento Grid Rows -> Progressively Enhanced on Desktop */
  .bento-split-row,
  .bento-split-equal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--seam);
  }

  /* Spacious Stat Grid: 1 Column on Mobile -> 2 Columns on Tablet -> 4 Columns on Desktop */
  .bento-stats-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--seam);
  }

  @media (min-width: 600px) {
    .bento-stats-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 860px) {
    .bento-split-row {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
    .bento-split-equal {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .bento-stats-row {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* Hero Bento Left Panel */
  .hero-bento-left {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.85rem;
  }

  @media (min-width: 768px) {
    .hero-bento-left {
      padding: clamp(2.5rem, 4.2vw, 3.85rem);
      gap: 2.25rem;
    }
  }

  /* Fluid scaling with max <= 2.5x min per modern-web-guidance `fluid-scaling` */
  .hero-display-headline {
    font-size: clamp(2.1rem, 5vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.02;
    margin: 0.75rem 0 1rem;
  }

  @supports (font-size: 1cqi) {
    .hero-display-headline {
      font-size: clamp(2.1rem, 4.6cqi, 4.4rem);
    }
  }

  .hero-lead-copy {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.55;
    letter-spacing: -0.012em;
    max-inline-size: 54ch;
    color: var(--blue-100);
  }

  .hero-cta-row {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  @media (min-width: 520px) {
    .hero-cta-row {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
    }
  }

  /* Clear Box Eyebrow Labels above headings */
  .box-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--roclug-blue);
    margin-block-end: 0.4rem;
  }

  .bento-panel-blue .box-eyebrow,
  .hero-media-overlay .box-eyebrow {
    color: var(--blue-100);
  }

  /* Right-side Hero Bento Stack */
  .hero-bento-right {
    display: flex;
    flex-direction: column;
    gap: var(--seam);
    min-inline-size: 0;
  }

  .hero-media-stage {
    position: relative;
    inline-size: 100%;
    min-inline-size: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--panel-radius);
    overflow: clip;
    background-color: var(--blue-900);
    box-shadow: var(--shadow-soft);
  }

  .hero-media-stage img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .hero-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 24, 43, 0.9) 0%, rgba(2, 88, 161, 0.08) 65%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: var(--white);
  }

  .hero-accent-callout {
    padding: 1.65rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: var(--white);
  }

  @media (min-width: 768px) {
    .hero-accent-callout {
      padding: 2rem 2.25rem;
    }
  }

  /* Editorial Stat Callout Bento Cards */
  .stat-bento-card {
    padding: 1.65rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    background-color: var(--white);
  }

  .stat-bento-card.bento-panel-blue {
    background-color: var(--roclug-blue);
    color: var(--white);
  }

  @media (min-width: 768px) {
    .stat-bento-card {
      padding: 2rem 1.85rem;
      gap: 0.95rem;
    }
  }

  .stat-bento-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .stat-giant-number {
    font-size: clamp(1.95rem, 3.2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.02;
    color: var(--roclug-blue);
  }

  .bento-panel-blue .stat-giant-number {
    color: var(--white);
  }

  .stat-bento-desc {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.48;
    color: var(--ink-muted);
  }

  .bento-panel-blue .stat-bento-desc {
    color: var(--blue-100);
  }

  /* Section Header Bar */
  .section-header {
    background-color: var(--white);
    border-radius: var(--panel-radius);
    border: 1px solid var(--blue-100);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  @media (min-width: 768px) {
    .section-header {
      padding: 1.85rem 2.25rem;
    }
  }

  .section-header h1,
  .section-header h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    letter-spacing: -0.045em;
    line-height: 1.06;
    color: var(--blue-950);
  }

  /* Unified Section Container (Encapsulates Descriptive Header + Section Content) */
  .section-container {
    background-color: var(--white);
    border-radius: var(--panel-radius);
    border: 1.5px solid var(--blue-200);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.35rem, 2.5vw, 2rem);
  }

  .section-container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-block-end: clamp(1.15rem, 2vw, 1.5rem);
    border-block-end: 1.5px solid var(--blue-100);
  }

  .section-container-header h1,
  .section-container-header h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    letter-spacing: -0.045em;
    line-height: 1.08;
    color: var(--blue-950);
  }

  .section-container.section-ongoing {
    background-color: var(--roclug-blue);
    border-color: var(--roclug-blue-deep);
    color: var(--white);
  }

  .section-container .event-card,
  .section-container .form-card,
  .section-container .committee-card {
    background-color: var(--blue-25);
    border: 1.5px solid var(--blue-100);
    box-shadow: none;
  }

  .section-container .event-card:hover {
    background-color: var(--white);
    border-color: var(--blue-200);
    box-shadow: 0 12px 28px rgba(2, 58, 107, 0.08);
  }

  /* High-Contrast Accessible Active / Happening Today Card (WCAG AAA in both resting and hover/focus states) */
  .event-card.ongoing-card,
  .section-container .event-card.ongoing-card,
  .section-container .event-card.ongoing-card:hover,
  .section-container .event-card.ongoing-card:focus-within {
    background-color: var(--white);
    color: var(--blue-950);
    border: 2px solid var(--roclug-blue);
    box-shadow: 0 12px 28px rgba(2, 24, 43, 0.14);
  }

  .section-container.section-ongoing .event-card.ongoing-card,
  .section-container.section-ongoing .event-card.ongoing-card:hover,
  .section-container.section-ongoing .event-card.ongoing-card:focus-within {
    background-color: var(--white);
    color: var(--blue-950);
    border: 2px solid var(--white);
    box-shadow: 0 16px 36px rgba(2, 24, 43, 0.28);
  }

  /* Mobile-First Search & Filter Bar */
  .filter-bar {
    background-color: var(--white);
    border: 1px solid var(--blue-100);
    box-shadow: var(--shadow-soft);
    border-radius: var(--panel-radius);
    padding: 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: stretch;
  }

  @media (min-width: 860px) {
    .filter-bar {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 1.65rem;
    }
  }

  .search-input-wrap {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .search-input {
    inline-size: 100%;
    min-block-size: 46px;
    padding: 0.65rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    border: 1.5px solid var(--blue-200);
    background-color: var(--blue-25);
    color: var(--ink);
  }

  .search-input:focus {
    background-color: var(--white);
    border-color: var(--roclug-blue);
  }

  .search-input::placeholder {
    color: var(--ink-subtle);
  }

  /* Horizontal touch-scroll pills on mobile; wrap on desktop */
  .filter-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.45rem;
    padding-block-end: 2px;
    overscroll-behavior-x: contain;
  }

  @media (min-width: 768px) {
    .filter-pills {
      flex-wrap: wrap;
      overflow-x: visible;
    }
  }

  .pill-btn {
    padding: 0.45rem 0.95rem;
    min-block-size: 38px;
    border-radius: 999px;
    border: 1.5px solid var(--blue-200);
    background-color: var(--white);
    color: var(--blue-900);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  }

  .pill-btn:hover:not(:disabled) {
    background-color: var(--blue-100);
    border-color: var(--roclug-blue);
    color: var(--blue-950);
  }

  .pill-btn.active {
    background-color: var(--roclug-blue);
    border-color: var(--roclug-blue);
    color: var(--white);
  }

  /* Bento Event Grid & Container-Aware Cards */
  .events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--seam);
  }

  @media (min-width: 640px) {
    .events-grid {
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
  }

  .event-card {
    container: event-card / inline-size;
    background-color: var(--white);
    border: 1px solid var(--blue-100);
    box-shadow: var(--shadow-soft);
    border-radius: var(--panel-radius);
    overflow: clip;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(2, 58, 107, 0.1);
  }

  .event-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 0.85rem 0.85rem 0;
    border-radius: 14px;
    background-color: var(--blue-50);
    overflow: clip;
    cursor: pointer;
  }

  .event-card-media img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.28s ease;
  }

  .event-card:hover .event-card-media img {
    transform: scale(1.03);
  }

  .event-card-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.35rem;
    pointer-events: none;
  }

  .event-photo-count-pill {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background-color: rgba(2, 24, 43, 0.82);
    backdrop-filter: blur(6px);
    color: var(--white);
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
  }

  .event-card-body {
    padding: 1.35rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
  }

  /* Size-aware styling via @container when card is wide */
  @supports (container-type: inline-size) {
    @container event-card (min-width: 440px) {
      .event-card-body {
        padding: 1.5rem 1.65rem 1.65rem;
      }
    }
  }

  .event-date-line {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--roclug-blue-deep);
    letter-spacing: -0.015em;
  }

  .event-card.ongoing-card .box-eyebrow {
    color: var(--roclug-blue-deep);
  }

  .event-card.ongoing-card .event-date-line {
    color: var(--roclug-blue-deep);
  }

  .event-card-title {
    margin: 0.1rem 0 0;
    font-size: clamp(1.2rem, 2.2vw, 1.42rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: var(--blue-950);
    cursor: pointer;
  }

  .event-card.ongoing-card .event-card-title {
    color: var(--blue-950);
  }

  .event-card-title:hover,
  .event-card.ongoing-card .event-card-title:hover {
    color: var(--roclug-blue);
  }

  .event-venue-line {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--blue-900);
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .event-card.ongoing-card .event-venue-line {
    color: var(--blue-900);
  }

  .event-desc-snippet {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
    margin: 0.15rem 0 0.25rem;
  }

  .event-card.ongoing-card .event-desc-snippet {
    color: var(--ink);
  }

  .event-card-chapter {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--blue-900);
  }

  .event-card-footer {
    margin-block-start: auto;
    padding-block-start: 0.95rem;
    border-block-start: 1.5px solid var(--blue-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .event-card.ongoing-card .event-card-footer {
    border-block-start-color: var(--blue-200);
  }

  .event-card-sc-bar {
    background-color: #111317;
    color: #ffffff;
    border-block-start: 2px solid #facc15;
  }

  .event-card-sc-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.6rem 1.15rem;
  }

  /* Instagram-Style Photo Gallery: 2 Columns on Mobile -> Auto-Fill Masonry Grid on Desktop */
  .gallery-masonry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--seam);
  }

  @media (min-width: 640px) {
    .gallery-masonry {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
  }

  .gallery-tile-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--panel-radius);
    overflow: clip;
    background-color: var(--blue-900);
  }

  .gallery-tile {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--panel-radius);
    overflow: clip;
    background-color: var(--blue-900);
    border: 0;
    cursor: pointer;
    padding: 0;
    display: block;
  }

  .gallery-tile-delete-btn {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.68rem;
    min-block-size: 32px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.92);
    background-color: rgba(185, 28, 28, 0.96);
    backdrop-filter: blur(4px);
    color: var(--white);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
    transition: background-color 0.14s ease, transform 0.12s ease;
  }

  .gallery-tile-delete-btn:hover,
  .gallery-tile-delete-btn:focus-visible {
    background-color: #dc2626;
    transform: scale(1.04);
  }

  .gallery-tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.24s ease;
  }

  .gallery-tile:hover img {
    transform: scale(1.04);
  }

  .gallery-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 24, 43, 0.92) 0%, rgba(2, 88, 161, 0) 60%);
    opacity: 0;
    transition: opacity 0.18s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.75rem;
    text-align: left;
    color: var(--white);
  }

  .gallery-tile:hover .gallery-tile-overlay,
  .gallery-tile:focus-visible .gallery-tile-overlay {
    opacity: 1;
  }

  .gallery-tile-event {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  .gallery-tile-date {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--blue-200);
    margin-block-start: 0.15rem;
  }

  /* Tinder-Style Moderation Deck (Pure Blue & White Tonal Edition) */
  .moderation-arena {
    max-inline-size: 600px;
    margin: 0 auto;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
  }

  .moderation-card-stage {
    position: relative;
    inline-size: 100%;
    min-block-size: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
  }

  .tinder-card {
    inline-size: 100%;
    background-color: var(--white);
    border: 2px solid var(--roclug-blue);
    border-radius: 14px;
    overflow: clip;
    box-shadow: var(--shadow-float);
    touch-action: pan-y;
    user-select: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease;
    position: relative;
  }

  .tinder-card.swiping-right {
    transform: translateX(420px) rotate(16deg) !important;
    border-color: var(--roclug-blue);
    opacity: 0;
  }

  .tinder-card.swiping-left-burn {
    transform: translateX(-420px) translateY(80px) rotate(-20deg) scale(0.78) !important;
    border-color: var(--blue-950);
    opacity: 0;
  }

  .tinder-stamp {
    position: absolute;
    top: 1.1rem;
    padding: 0.38rem 0.85rem;
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 10;
  }

  .tinder-stamp.stamp-approve {
    left: 1.1rem;
    border: 3px solid var(--white);
    color: var(--white);
    background-color: var(--roclug-blue);
    transform: rotate(-10deg);
  }

  .tinder-stamp.stamp-burn {
    right: 1.1rem;
    border: 3px solid var(--blue-200);
    color: var(--white);
    background-color: var(--blue-950);
    transform: rotate(10deg);
  }

  .tinder-card-image-wrap {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--blue-950);
    overflow: clip;
  }

  .tinder-card-image-wrap img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .fiery-pit-glow {
    position: absolute;
    inset: auto 0 0 0;
    block-size: 95px;
    background: radial-gradient(ellipse at bottom, rgba(2, 88, 161, 0.85), rgba(2, 24, 43, 0.6) 55%, transparent 80%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .tinder-card.swiping-left-burn .fiery-pit-glow {
    opacity: 1;
  }

  .tinder-card-meta {
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .sc-only-uploader-banner {
    background-color: var(--blue-50);
    border: 1.5px solid var(--blue-200);
    color: var(--blue-900);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    font-size: 0.84rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .moderation-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    inline-size: 100%;
  }

  .mod-action-btn {
    min-block-size: 52px;
    border-radius: var(--btn-radius);
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: transform 0.12s ease, background-color 0.15s ease;
  }

  .mod-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .mod-btn-burn {
    background-color: var(--blue-900);
    border: 2px solid var(--blue-950);
    color: var(--white);
  }

  .mod-btn-approve {
    background-color: var(--roclug-blue);
    border: 2px solid var(--roclug-blue);
    color: var(--white);
  }

  /* Forms & Bento Cards */
  .form-card {
    background-color: var(--white);
    border-radius: var(--panel-radius);
    padding: 1.25rem;
    max-inline-size: 780px;
    margin: 0 auto;
  }

  @media (min-width: 768px) {
    .form-card {
      padding: 1.75rem;
    }
  }

  .form-group {
    margin-block-end: 1.15rem;
  }

  .form-group label {
    display: block;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: -0.02em;
    margin-block-end: 0.35rem;
    color: var(--blue-950);
  }

  .form-group label:has(:checked) {
    color: var(--roclug-blue);
  }

  .form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-muted);
    margin-block-start: 0.25rem;
  }

  .form-input,
  .form-select,
  .form-textarea {
    inline-size: 100%;
    min-block-size: 46px;
    padding: 0.65rem 0.9rem;
    font-size: 0.96rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid var(--blue-200);
    background-color: var(--blue-25);
    color: var(--ink);
    font-family: inherit;
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    background-color: var(--white);
    border-color: var(--roclug-blue);
  }

  .form-textarea {
    min-block-size: 110px;
    resize: vertical;
  }

  .form-row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--seam);
  }

  @media (min-width: 680px) {
    .form-row-2 {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Saved Venue + Google Maps Autocomplete Dropdown */
  .venue-combobox-wrap {
    position: relative;
  }

  .venue-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--white);
    border: 2px solid var(--roclug-blue);
    border-radius: 10px;
    max-block-size: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 80;
    box-shadow: var(--shadow-float);
  }

  .venue-suggestion-group-label {
    padding: 0.45rem 0.85rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--white);
    background-color: var(--roclug-blue);
  }

  .venue-suggestion-item {
    inline-size: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0.65rem 0.9rem;
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .venue-suggestion-item:not(:last-child) {
    border-block-end: 1px solid var(--blue-100);
  }

  .venue-suggestion-item:hover,
  .venue-suggestion-item:focus-visible {
    background-color: var(--blue-50);
  }

  /* Steering Committee Roster Grid */
  .committee-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--seam);
  }

  @media (min-width: 560px) {
    .committee-grid {
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
  }

  .committee-card {
    background-color: var(--white);
    border-radius: var(--panel-radius);
    border: 1.5px solid var(--blue-100);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.75rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .committee-card:hover {
    transform: translateY(-2px);
    border-color: var(--blue-200);
    box-shadow: 0 12px 28px rgba(2, 58, 107, 0.08);
  }

  .committee-photo-swap {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: clip;
    background-color: var(--blue-100);
    border: 1.5px solid var(--blue-200);
  }

  .committee-photo-swap img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity 0.26s ease, transform 0.3s ease;
  }

  .committee-photo-secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  .committee-card:hover .committee-photo-swap.has-secondary .committee-photo-secondary,
  .committee-card:focus-within .committee-photo-swap.has-secondary .committee-photo-secondary {
    opacity: 1;
    transform: scale(1.03);
  }

  .committee-card:hover .committee-photo-swap.has-secondary .committee-photo-primary,
  .committee-card:focus-within .committee-photo-swap.has-secondary .committee-photo-primary {
    opacity: 0;
  }

  /* Spacious Club Charter Layout */
  .charter-articles-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media (min-width: 860px) {
    .charter-articles-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.75rem;
    }

    .charter-article-card.charter-article-wide {
      grid-column: 1 / -1;
    }
  }

  .charter-article-card {
    background-color: var(--blue-25);
    border: 1.5px solid var(--blue-100);
    border-radius: 16px;
    padding: clamp(1.5rem, 2.8vw, 2.35rem);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .charter-article-card h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--roclug-blue);
  }

  .charter-article-card p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--ink);
  }

  .charter-article-card ul {
    margin: 0;
    padding-inline-start: 1.35rem;
    display: grid;
    gap: 0.85rem;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--ink);
  }

  /* Admin Users Table */
  .data-table-wrap {
    overflow-x: auto;
    background-color: var(--white);
    border-radius: var(--panel-radius);
  }

  .data-table {
    inline-size: 100%;
    border-collapse: collapse;
    text-align: left;
  }

  .data-table th,
  .data-table td {
    padding: 0.85rem 1rem;
    border-block-end: 1.5px solid var(--blue-50);
    font-size: 0.9rem;
  }

  .data-table th {
    background-color: var(--roclug-blue);
    color: var(--white);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Mobile-First Sheet Dialogs -> Centered Modals on Desktop */
  dialog.modal-dialog {
    margin: auto;
    background-color: var(--white);
    color: var(--ink);
    border: 2px solid var(--roclug-blue);
    border-radius: 20px;
    padding: 0;
    inline-size: calc(100dvw - 1.5rem);
    max-inline-size: 940px;
    max-block-size: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 28px 65px rgba(2, 24, 43, 0.55);
    opacity: 0;
    transform: translateY(14px) scale(0.965);
    transition-property: opacity, transform, display, overlay;
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-behavior: allow-discrete;
  }

  dialog.sso-modal {
    max-inline-size: 460px;
  }

  dialog:modal {
    overscroll-behavior: contain;
  }

  dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  dialog.modal-dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
    background-color: rgba(2, 24, 43, 0);
    backdrop-filter: blur(0px);
    transition-property: background-color, backdrop-filter, display, overlay;
    transition-duration: 0.22s;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }

  :is(dialog.modal-dialog[open]):where(:not([data-closing])) {
    opacity: 1;
    transform: translateY(0) scale(1);

    @starting-style {
      opacity: 0;
      transform: translateY(14px) scale(0.965);
    }

    &::backdrop {
      background-color: rgba(2, 24, 43, 0.76);
      backdrop-filter: blur(4px);

      @starting-style {
        background-color: rgba(2, 24, 43, 0);
        backdrop-filter: blur(0px);
      }
    }
  }

  .modal-content {
    padding: 1.15rem;
  }

  @media (min-width: 768px) {
    .modal-content {
      padding: 1.6rem;
    }
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-end: 0.9rem;
    border-block-end: 1.5px solid var(--blue-100);
    margin-block-end: 1.15rem;
    flex-wrap: wrap;
  }

  /* Full-Screen Natural-Aspect-Ratio Photo Viewer Mode */
  dialog.modal-dialog.photo-viewer-fullscreen[open] {
    inline-size: calc(100dvw - 1rem);
    max-inline-size: calc(100dvw - 1rem);
    block-size: calc(100dvh - 1rem);
    max-block-size: calc(100dvh - 1rem);
    display: flex;
    flex-direction: column;
    overflow: clip;
  }

  dialog.modal-dialog.photo-viewer-fullscreen .modal-content {
    flex: 1;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    padding: 0.9rem 1.25rem;
    gap: 0.75rem;
  }

  dialog.modal-dialog.photo-viewer-fullscreen .photo-viewer-header {
    margin-block-end: 0;
    padding-block-end: 0.65rem;
    flex-shrink: 0;
  }

  .photo-viewer-stage {
    flex: 1;
    min-block-size: 0;
    background-color: var(--blue-950);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    padding: 0.5rem;
  }

  .photo-viewer-img {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 8px;
  }

  .photo-viewer-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block-start: 0.25rem;
  }

  /* Bento Editorial Footer (Deep Sapphire Blue & White) */
  .site-footer {
    padding: 2.25rem 1.75rem;
  }

  @media (min-width: 768px) {
    .site-footer {
      padding: 3rem 2.75rem;
    }
  }

  .footer-bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
  }

  @media (min-width: 820px) {
    .footer-bento-grid {
      grid-template-columns: 1.4fr 1fr;
      gap: 2.5rem;
    }
  }

  .footer-brand-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .footer-display-title {
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    letter-spacing: -0.05em;
    line-height: 1.04;
    margin: 0.75rem 0;
    color: var(--white);
  }

  .footer-subcopy {
    color: var(--blue-200);
    max-inline-size: 56ch;
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .footer-meta-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  @media (min-width: 820px) {
    .footer-meta-col {
      align-items: flex-end;
    }
  }

  .footer-lan-badge {
    block-size: clamp(135px, 17vw, 190px);
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(2, 12, 24, 0.35);
  }

  .footer-links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-weight: 800;
    font-size: 0.92rem;
  }

  .footer-links a {
    color: var(--blue-100);
  }

  .footer-links a:hover {
    color: var(--white);
  }

  /* Hide bottom bar so mobile & desktop viewports remain spacious and uncluttered */
  .floating-bottom-bar {
    display: none;
  }

  /* Rich HTML event body inside Event Detail modal */
  .event-rich-body {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .event-rich-body > *:first-child {
    margin-block-start: 0;
  }

  .event-rich-body > *:last-child {
    margin-block-end: 0;
  }

  .event-rich-body p {
    margin-block: 0 0.85rem;
  }

  .event-rich-body h2,
  .event-rich-body h3,
  .event-rich-body h4,
  .event-rich-body h5 {
    margin-block: 1.15rem 0.45rem;
    font-size: 1.08rem;
    color: var(--blue-900);
  }

  .event-rich-body ul,
  .event-rich-body ol {
    margin-block: 0 0.85rem;
    padding-inline-start: 1.35rem;
  }

  .event-rich-body li {
    margin-block-end: 0.3rem;
  }

  .event-rich-body a:not(.btn) {
    color: var(--roclug-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .event-rich-body a:not(.btn):hover {
    color: var(--blue-900);
  }

  .event-rich-body .event-file-callout {
    margin-block: 0.9rem;
    padding: 0.75rem 0.95rem;
    background: var(--white);
    border: 1.5px solid var(--blue-200);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Subtle Page Entry Animation & Reduced Motion Compliance */
  #app-main > * {
    animation: roclug-page-enter 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .photo-viewer-img {
    animation: roclug-photo-fade 160ms ease-out both;
  }

  @keyframes roclug-page-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes roclug-photo-fade {
    from {
      opacity: 0;
      transform: scale(0.988);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.drawer-dialog,
    dialog.modal-dialog {
      transform: none;
      transition-duration: 0.1s;
    }

    @starting-style {
      :is(dialog.drawer-dialog[open], dialog.modal-dialog[open]):where(:not([data-closing])) {
        transform: none;
      }
    }

    #app-main > *,
    .photo-viewer-img {
      animation: none;
    }
  }

  /* Live Meeting Simplified High-Contrast Reader UI */
  dialog.modal-dialog.live-meeting-modal[open] {
    inline-size: calc(100dvw - 0.75rem);
    max-inline-size: 980px;
    block-size: calc(100dvh - 0.75rem);
    max-block-size: calc(100dvh - 0.75rem);
    background-color: #031525;
    color: #ffffff;
    border: 2px solid #38bdf8;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .live-meeting-shell {
    flex: 1;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .live-meeting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.15rem;
    background-color: #06213a;
    border-block-end: 1.5px solid rgba(56, 189, 248, 0.28);
    flex-wrap: wrap;
    flex-shrink: 0;
  }

  .live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .live-status-pill-active {
    background-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.32);
  }

  .live-status-pill-paused {
    background-color: #f59e0b;
    color: #031525;
  }

  .live-status-pill-idle {
    background-color: rgba(255, 255, 255, 0.14);
    color: #e0f2fe;
  }

  .live-pulse-dot {
    inline-size: 9px;
    block-size: 9px;
    border-radius: 999px;
    background-color: currentColor;
    animation: live-dot-pulse 1.2s ease-in-out infinite;
  }

  @keyframes live-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.82); }
  }

  .live-reader-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
  }

  .live-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 40px;
    padding: 0.35rem 0.75rem;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
  }

  .live-ctrl-btn:hover:not(:disabled) {
    background-color: rgba(56, 189, 248, 0.25);
    border-color: #38bdf8;
  }

  .live-transcript-scroll {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1.1rem, 3vw, 2rem);
    padding-block-end: calc(clamp(1.1rem, 3vw, 2rem) + 3.25rem);
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    scroll-behavior: smooth;
  }

  .live-segment-paragraph {
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -0.01em;
    max-inline-size: 68ch;
  }

  .live-segment-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7dd3fc;
    font-size: 0.9rem;
    letter-spacing: 0.25em;
    opacity: 0.65;
    padding-block: 0.25rem;
    user-select: none;
  }

  .live-partial-utterance {
    margin: 0;
    color: #7dd3fc;
    font-weight: 700;
    line-height: 1.48;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background-color: rgba(56, 189, 248, 0.12);
    border-inline-start: 4px solid #38bdf8;
    max-inline-size: 68ch;
  }

  .live-jump-bottom-btn {
    position: absolute;
    inset-block-end: 1.25rem;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: max-content;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background-color: #38bdf8;
    color: #031525;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.92rem;
    border: 2px solid #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    z-index: 5;
  }

  .live-jump-bottom-btn[hidden] {
    display: none !important;
  }

  .btn-live-captions {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
  }

  .btn-live-captions:hover:not(:disabled) {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
  }

  .btn-live-captions-idle {
    background-color: var(--roclug-blue);
    border-color: var(--roclug-blue-deep);
    color: var(--white);
  }

  .btn-live-captions-idle:hover:not(:disabled) {
    background-color: var(--roclug-blue-hover);
    border-color: var(--roclug-blue-hover);
    color: var(--white);
  }

  /* Event Editor Drag-and-Drop & Club Gallery Cover Picker */
  .cover-picker-shell {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 2px dashed var(--blue-200);
    border-radius: 14px;
    background-color: var(--blue-25);
    transition: border-color 0.16s ease, background-color 0.16s ease;
  }

  .cover-picker-shell.drag-active {
    border-color: var(--roclug-blue);
    background-color: var(--blue-100);
  }

  .cover-picker-preview-wrap {
    inline-size: 96px;
    block-size: 96px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: clip;
    background-color: var(--blue-900);
    border: 1.5px solid var(--blue-200);
  }

  .cover-picker-preview-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .cover-picker-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
    flex: 1;
  }

  .cover-gallery-drawer {
    margin-block-start: 0.65rem;
    padding: 0.85rem;
    border: 1.5px solid var(--blue-200);
    border-radius: 14px;
    background-color: var(--white);
  }

  .cover-gallery-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.5rem;
    max-block-size: 230px;
    overflow-y: auto;
    padding: 0.2rem;
  }

  .cover-gallery-thumb-btn {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: clip;
    border: 2.5px solid transparent;
    padding: 0;
    background-color: var(--blue-900);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
  }

  .cover-gallery-thumb-btn:hover,
  .cover-gallery-thumb-btn:focus-visible {
    transform: scale(1.03);
    border-color: var(--roclug-blue);
  }

  .cover-gallery-thumb-btn.selected {
    border-color: var(--roclug-blue);
    box-shadow: 0 0 0 2px var(--blue-200);
  }

  .cover-gallery-thumb-btn img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
}