@layer default, navigation, components;

:root {
  /* Set sans-serif & mono fonts */
  --sans-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  /* Colors for theme */
  --primary: rgb(18 153 142);
  --text: #010101;
  --text-white: #ededed;
  --error: pink;
  --bg: #ffffff;
  --text-light: #585858;
  --text-badge: var(--text-white);
  --border: #dddddd;
  --accent: #3b82f6;
  --accent-hover: rgb(from var(--accent) r g b / 0.6);
  --accent-text: #ededed;
  --disabled: #efefef;
  --cancel: var(--disabled);

  /* Standard thematic */
  --standard-border-radius: 5px;
  --standard-drop-shadow: drop-shadow(1px 1px 2px var(--border));

  /* CMC-specific colors */
  --cmc-highlight: #d97706;
  --cmc-color-discord: rgb(79, 70, 229);
  --cmc-color-committee: rgb(192, 132, 252);
  --cmc-color-coordinator: #d97706;
  --cmc-color-member: #3b82f6;
  --cmc-color-guest: #16a34a;
  --cmc-color-summer-day-walk: #65a30d;
  --cmc-color-summer-weekend: #15803d;
  --cmc-color-winter-day-walk: #3b82f6;
  --cmc-color-winter-weekend: #1d4ed8;
  --cmc-color-indoor-climbing: #c084fc;
  --cmc-color-outdoor-climbing: #9333ea;
  --cmc-color-run: #eab308;
  --cmc-color-social: #ec4899;
  --cmc-color-other: #f472b6;
  --cmc-color-green: #16a34a;
  --cmc-color-amber: #d97706;
  --cmc-color-grey: #cccccc;
  --cmc-color-red: #ec4899;
}

@layer default {
  /* Set border-box for whole doc */
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  html {
    /* Set the font globally */
    font-family: var(--sans-font);
    scroll-behavior: smooth;
  }

  body {
    color: var(--text);
    background-color: var(--bg);
    font-size: 1rem;
    line-height: 1.5;

    /* Display as grid */
    display: grid;
    grid-template-columns: 1fr minmax(auto, 60rem) 1fr;
    column-gap: 0.5rem;
    margin: 0;
    width: 100vw;

    /* Center all content */
    > :not(header, aside, footer) {
      grid-column: 2;
    }

    /* Except the header and footer */
    > header,
    > footer {
      grid-column: 1 / -1;
    }

    /* And any non-header nav as a sidebar */
    > aside:has(nav) {
      grid-column: 1;
    }
  }

  body > header {
    border-bottom: 2px solid var(--primary);
  }

  body > main {
    /* The main container is just a grid */
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: subgrid;
    min-height: 100vh;
    gap: 0.5rem;
    align-content: start;
  }

  body > footer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 1rem;

    :first-child {
      padding: 0 1rem;
      font-size: smaller;
      border-right: 1px solid gray;
    }

    :not(:first-child) {
      font-size: smaller;
      color: var(--text-light);
    }
  }

  /* Headings */
  h1 {
    font-size: xx-large;
  }

  h2 {
    font-size: x-large;
  }

  h3 {
    font-size: large;
  }

  h4 {
    font-size: medium;
  }

  h5 {
    font-size: small;
  }

  h6 {
    font-size: x-small;
  }

  p {
    margin: 1.5rem 0;
  }

  /* Prevent long strings from overflowing container */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
    margin: 0.5rem 0;
  }

  /* Links and buttons */
  a,
  a:visited {
    text-decoration: none;
    color: var(--accent);
    transition: all 0.1s ease-in;

    &:hover {
      text-decoration: underline;
    }

    &:has(article) {
      color: inherit;

      &:hover {
        text-decoration: none;
        filter: brightness(90%);
      }
    }
  }

  /* Reset for navigation */
  nav {
    line-height: normal;

    ul,
    ol {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    ul li,
    ol li,
    a {
      display: inline-block;
    }

    a:not(.button),
    a:visited:not(.button) {
      color: inherit;
    }
  }

  /* Buttons */
  button,
  .button,
  a.button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    /* Reset */
    display: inline-block;
    text-decoration: none;
    box-shadow: none;
    line-height: normal;
    font-size: inherit;
    font-family: inherit;

    /* Basic styling */
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: var(--accent-text);
    text-align: center;
    padding: 0.5rem;
    border-radius: var(--standard-border-radius);
    transition: all 0.1s ease-in;
    cursor: pointer;

    /* Hover */
    &:enabled:hover,
    &:not([disabled]):hover,
    &:not([aria-disabled="true"]):hover {
      background-color: var(--accent-hover);
      border-color: var(--accent-hover);
    }

    /* Icon buttons */
    &:has(svg) {
      padding: 0.25rem;
      display: inline-flex;
      align-items: center;
      > svg {
        width: 1em;
        height: 1em;
      }
    }
  }

  /* Disabled */
  input[aria-disabled="true"],
  button:disabled,
  .button[aria-disabled="true"],
  input:disabled,
  input[disabled] {
    pointer-events: none;
    border-color: var(--disabled);
    color: var(--text-light);
    background-color: var(--bg);
  }
  .button:focus-visible,
  button:focus-visible:where(:enabled),
  input:enabled:focus-visible:where(
      [type="submit"],
      [type="reset"],
      [type="button"]
    ) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  /* Text inputs */
  textarea,
  select,
  input:not(
      [type="submit"],
      [type="reset"],
      [type="button"],
      [type="checkbox"]
    ) {
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    box-shadow: none;

    padding: 0.5rem;
    margin: 0.25rem 0;
    border-radius: var(--standard-border-radius);
    max-width: 100%;

    color: var(--text);
    background-color: var(--bg);
    border: 1px solid var(--border);

    &:user-invalid {
      border: 1px solid var(--error);
    }
  }

  textarea:not([cols]) {
    height: 20em;
  }

  input[type="search"] {
    width: 100%;
  }

  /* Custom Checkbox */
  input[type="checkbox"] {
    display: inline-flex;
    align-items: center;
    appearance: none;

    &::after {
      display: inline-block;
      content: "";
      width: 1.5em;
      height: 1.5em;
      /* BI - toggle-off */
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdG9nZ2xlLW9mZiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTEgNGE0IDQgMCAwIDEgMCA4SDhhNSA1IDAgMCAwIDItNCA1IDUgMCAwIDAtMi00em0tNiA4YTQgNCAwIDEgMSAwLTggNCA0IDAgMCAxIDAgOE0wIDhhNSA1IDAgMCAwIDUgNWg2YTUgNSAwIDAgMCAwLTEwSDVhNSA1IDAgMCAwLTUgNSIvPgo8L3N2Zz4=");
      background-size: cover;
      cursor: pointer;
    }

    &:checked::after {
      /* BI - toggle-on */
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdG9nZ2xlLW9uIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik01IDNhNSA1IDAgMCAwIDAgMTBoNmE1IDUgMCAwIDAgMC0xMHptNiA5YTQgNCAwIDEgMSAwLTggNCA0IDAgMCAxIDAgOCIvPgo8L3N2Zz4=");
    }
  }

  fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    border: 0;
    padding: 0;
  }

  label:has(> input, > select) {
    &:has(input[disabled], select[disabled]) {
      opacity: 50%;
    }
  }

  label {
    font-weight: 500;

    > * {
      font-weight: normal;
    }

    /* Allow use of span as an alternative for root label */
    > span {
      font-weight: 500;
    }
  }

  /* Style forms to look like grids */
  form:has(label) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    align-items: center;
    gap: 0.25rem 1rem;

    > label {
      display: grid;
      grid-column: 1 / -1;
      grid-row: span 2;
      grid-template-columns: subgrid;
      grid-template-rows: 1fr min-content;
      align-items: center;
      @media (max-width: 800px) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

      > small {
        grid-column: 1;
      }

      > input {
        grid-column: 2;
        grid-row: 1 / -1;
      }

      > textarea,
      fieldset {
        grid-column: span 2;
      }
    }

    > * {
      grid-column: span 2;
    }

    input[type="submit"]:has(+ .btn-cancel) {
      grid-column: 1;
    }

    .btn-cancel {
      grid-column: 2;
    }
  }

  /* Other elements */
  section {
    margin: 0 0 1rem 0;
  }

  mark {
    outline: 1px solid var(--primary);
    background-color: inherit;
    font-weight: 500;
    padding: 0.15em 0.35em;
    border-radius: var(--standard-border-radius);
  }

  small {
    color: var(--text-light);
  }

  [role="alert"] {
    background-color: var(--error);
    border-radius: var(--standard-border-radius);
    padding: 0.5em;
  }

  [role="status"] {
    background-color: var(--primary);
    color: var(--text-white);
    border-radius: var(--standard-border-radius);
    padding: 0.5em;
  }

  details {
    display: block;
    > summary {
      cursor: pointer;
    }
  }

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

  table {
    width: 100%;
    table-layout: fixed;
    text-align: center;
  }

  dl {
    > dt {
      font-weight: bold;
    }
    > dd {
      border-left: 1px solid var(--primary);
      margin: 0;
      padding-left: 1.5rem;
    }
  }

  /* Basic styling for dialogs */
  dialog {
    border: 0;
    outline: 0;
    padding: 1rem;
    border-radius: var(--standard-border-radius);
    border: 1px solid var(--border);
    background-color: var(--bg);
    filter: drop-shadow(1px 1px 2px var(--border));

    &::backdrop {
      backdrop-filter: blur(5px);
    }
  }

  /* Tooltips */
  [data-tooltip]:hover::after {
    transform: translate(1em, -1.5em);
    position: absolute;
    content: attr(data-tooltip);
    font-size: small;
    background-color: var(--accent);
    color: var(--accent-text);
    opacity: 75%;
    padding: 0.125rem;
    border-radius: var(--standard-border-radius);
    white-space: nowrap;
  }
}

@layer navigation {
  /* Main nav */
  body > header > nav {
    display: flex;
    align-items: center;
    font-size: 1rem;
    white-space: nowrap;
    gap: 0.5rem;
    padding: 0.5rem;
    @media (max-width: 800px) {
      flex-direction: column;
      align-items: start;

      /* Handle expanding the hamburger */
      /* We set the height manually here, may be a better way to do this */
      max-height: 2.5rem;
      transition: max-height ease-in-out 0.2s;
      overflow: hidden;
      &[data-expanded="true"] {
        max-height: 50rem;
        #nav-hamburger {
          background-color: white;
          color: var(--text-light);
        }
      }
    }

    h1 {
      font-size: 1.25em;
      letter-spacing: -0.025em;
      margin: 0;
    }

    #nav-hamburger {
      display: none;
    }
    @media (max-width: 800px) {
      #nav-hamburger {
        display: inherit;
      }

      ul li {
        width: 100%;
      }

      li:has(#nav-hamburger) {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    ul,
    ol {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      @media (max-width: 800px) {
        width: 100%;
        flex-direction: column;
      }
    }

    aside {
      display: flex;
      gap: 1rem;
      align-items: center;
      flex: 1 1 auto;
      justify-content: end;
      margin-right: 1rem;
      @media (max-width: 800px) {
        flex-direction: column;
        align-items: start;
      }
    }
  }

  @keyframes nav-expand {
    from {
      max-width: 3.5rem;
    }

    to {
      max-width: 10rem;
    }
  }

  @keyframes nav-retract {
    from {
      max-width: 10rem;
    }

    to {
      max-width: 3.5rem;
    }
  }

  @keyframes nav-sub-shrink {
    from {
      max-height: 10em;
      opacity: 1;
    }

    to {
      max-height: 0;
      opacity: 0;
    }
  }
  /* Sidebar */
  body > aside:has(nav) {
    justify-self: left;
    background-color: white;
    filter: var(--standard-drop-shadow);
    padding: 0 0.25rem;
    /* Ensure the expand button has space */
    margin-right: 0.75rem;
    /* Ensure sidebar spans full screen */
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    color: var(--primary);

    /* Position the sidebar expander in the right place (bit absolute here)  */
    div:has(#sidebar-expander) {
      position: relative;
      width: 100%;
      > #sidebar-expander {
        position: absolute;
        top: 0.75rem;
        left: calc(100% - 0.5rem);
        font-size: 1rem;
        padding: 0.125rem;

        /* Reset any inherited styling */
        color: var(--primary);
        background-color: white;
        filter: var(--standard-drop-shadow);
        border: 1px solid transparent;
        align-self: end;
        margin: 0;
      }
    }

    /* Hadle flipping the sidebar */
    div:has(+ nav.sidebar-expanded) #sidebar-expander {
      svg {
        transform: rotate(180deg);
      }
    }

    > nav {
      /* Set up a high level grid for lining everything up */
      display: grid;
      grid-template-columns: 2.5rem 1fr;
      gap: 0.25rem 0.75rem;
      padding: 0.5rem;
      align-items: center;

      /* Hide these so it's just a list of <a> tags */
      ul,
      ol,
      li {
        display: contents;
      }

      /* Make sure our a > svg + span is in the right grid */
      a {
        padding: 0.5rem 0.25rem;
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        border-radius: var(--standard-border-radius);
        white-space: nowrap;

        > svg {
          place-self: center;
          width: 1.1rem;
          height: 1.1rem;
          grid-column: 1;
        }
        > span {
          grid-column: 2;
        }
      }

      /* We make this a subgrid rather than contents for transitions */
      li > ul {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        overflow: hidden;
      }

      /* Animations for transitions - timings are synced with JS here */
      &:is(.sidebar-expanding) {
        animation: 0.5s ease-in-out both nav-expand;
        overflow: hidden;
        width: 10rem;
      }
      &:is(.sidebar-retracting) {
        animation: 0.5s ease-in-out both nav-retract;
        overflow: hidden;
        width: 10rem;

        a {
          /* For transitioning the border */
          span {
            color: transparent !important;
          }
          border-color: transparent !important;
        }

        li > ul {
          animation: 0.5s ease-in-out both nav-sub-shrink;
        }
      }

      &:not(.sidebar-expanded, .sidebar-expanding, .sidebar-retracting) {
        grid-template-columns: 2.5rem;

        li > ul,
        a span {
          display: none;
        }
      }
    }

    /* Top level links are bolded */
    > nav > ul > li > a {
      font-weight: 500;
    }

    /* Style top level active-links with a border */
    > nav > ul > li > a {
      border: 1px solid transparent;

      &[aria-selected="true"] {
        border: 1px solid var(--primary);
      }
    }

    /* Styling for nested non-active links */
    li:not(:has([aria-selected="true"])) {
      > ul {
        display: none;
      }
    }

    /* Style active links for final layer only */
    [aria-selected="true"]:not(:has(+ ul)) {
      background-color: rgb(from var(--primary) r g b / 0.2);
    }
  }

  /* CMC Logo */
  .cmc-logo::before {
    display: inline-block;
    content: "a";
    width: 3rem;
    color: transparent;
    margin-right: 0.25rem;
    background-image: url("../logo_256.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

@layer components {
  /* Animations */
  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  @keyframes slide-from-right {
    from {
      transform: translateX(90px);
    }
  }

  @keyframes slide-to-left {
    to {
      transform: translateX(-90px);
    }
  }
  /* Utility classes */
  .flex {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .flex-gap-small {
    gap: 0.125rem;
  }

  .btn-secondary {
    background-color: var(--primary);
  }

  .btn-cancel {
    background-color: var(--bg);
    color: var(--accent);
  }

  .w-full {
    width: 100%;
  }

  .drop-shadow {
    border-radius: var(--standard-border-radius);
    filter: drop-shadow(1px 1px 2px var(--border));
  }

  .card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    line-height: normal;

    /** Nice outline **/
    border-radius: var(--standard-border-radius);
    background-color: var(--bg);
    filter: drop-shadow(1px 1px 2px var(--border));
  }

  /* Badges */
  .badge {
    display: inline-block;
    background-color: var(--cmc-highlight);
    border-radius: var(--standard-border-radius);
    white-space: nowrap;
    padding: 0.25em 0.5em;
    text-align: center;
    color: var(--text-badge);
  }
  .color-committee {
    --cmc-highlight: var(--cmc-color-committee);
  }
  .color-coordinator {
    --cmc-highlight: var(--cmc-color-coordinator);
  }
  .color-member {
    --cmc-highlight: var(--cmc-color-member);
  }
  .color-guest {
    --cmc-highlight: var(--cmc-color-guest);
  }
  .color-summer-day-walk {
    --cmc-highlight: var(--cmc-color-summer-day-walk);
  }
  .color-summer-weekend {
    --cmc-highlight: var(--cmc-color-summer-weekend);
  }
  .color-winter-day-walk {
    --cmc-highlight: var(--cmc-color-winter-day-walk);
  }
  .color-winter-weekend {
    --cmc-highlight: var(--cmc-color-winter-weekend);
  }
  .color-indoor-climbing {
    --cmc-highlight: var(--cmc-color-indoor-climbing);
  }
  .color-outdoor-climbing {
    --cmc-highlight: var(--cmc-color-outdoor-climbing);
  }
  .color-running {
    --cmc-highlight: var(--cmc-color-run);
  }
  .color-members-only {
    --cmc-highlight: var(--cmc-color-member);
  }
  .color-social {
    --cmc-highlight: var(--cmc-color-social);
  }
  .color-discord {
    --cmc-highlight: var(--cmc-color-discord);
  }
  .color-green {
    --cmc-highlight: var(--cmc-color-green);
  }
  .color-amber {
    --cmc-highlight: var(--cmc-color-amber);
  }
  .color-red {
    --cmc-highlight: var(--cmc-color-red);
  }
  .color-grey {
    --cmc-highlight: var(--cmc-color-grey);
  }

  .cmc-color {
    color: var(--cmc-highlight);
  }

  .markdown-preview {
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.25rem;
    max-height: 30rem;
    border-left: 1px solid var(--primary);
    overflow: auto;
  }

  .admin {
    --primary: var(--cmc-color-committee);
    --accent: var(--cmc-color-committee);
    --accent-hover: rgb(from var(--accent) r g b / 0.6);
    --text: var(--cmc-color-committee);

    /* Make sure we set color for these elements */
    &:is(span, label, small, svg),
    :is(span, label, small, svg) {
      color: var(--text);
    }

    :is(button, .button, input[type="submit"]) svg {
      color: var(--text-white);
    }

    &:is(mark) {
      border-color: var(--cmc-color-committee);
    }

    &:is(h1, h2, h3, h4, h5, h6, p) {
      color: var(--cmc-color-committee);
    }

    &:is(details) {
      color: var(--cmc-color-committee);

      &:has(.admin-panel) {
        position: relative;

        > .admin-panel {
          /* Set popover position */
          position: absolute;
          top: 2em;
          left: 1em;
          padding: 1rem;

          /* A nice background */
          background-color: white;
          border-radius: var(--standard-border-radius);
          filter: var(--standard-drop-shadow);

          /* Sort out a nice display */
          display: grid;
          grid-template-columns: max-content;
          place-items: center stretch;
          gap: 0.25rem;

          > form {
            display: contents;
          }
        }
      }
    }
  }

  details.admin {
    position: relative;

    summary {
      font-weight: bold;
    }
  }

  /* Profile pictures maintain aspect */
  .profile-picture {
    display: inline-block;
    margin: 0;
    aspect-ratio: 1;
    border-radius: var(--standard-border-radius);
  }

  .profile-picture-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 32px);
    gap: 0.1rem;

    > li {
      display: contents;
    }
  }

  .event-discord-names {
    background-color: white;
    filter: var(--standard-drop-shadow);
    border-radius: var(--standard-border-radius);
    padding: 1rem;
    color: var(--primary);
  }

  #event-list {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: stretch;
    gap: 0.5rem;

    &.htmx-request {
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
    }
    &.htmx-settling {
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-in;
    }
  }

  form:has(#event-filters-list) {
    display: grid;
    grid-template-columns: 1fr auto;

    input[type="search"] {
      grid-column: 1;
      margin: 0;
    }
    #enable-filters-checkbox {
      grid-column: 2;
      grid-row: 1;
      display: flex;
      flex-direction: row;
      gap: 0.25rem;
      border-radius: var(--standard-border-radius);
      background-color: white;
      padding: 0.25rem;
      filter: var(--standard-drop-shadow);

      svg {
        width: 1em;
        height: 1em;
      }
    }
    #event-filters-list {
      grid-column: 1 / -1;
      border-radius: var(--standard-border-radius);
      background-color: white;
      filter: var(--standard-drop-shadow);
      padding: 1rem;
      display: none;
    }

    &:has(#event-filters-enabled:checked) > #event-filters-list {
      display: block;
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-in;
    }
  }

  .event {
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;

    &.event-past {
      opacity: 50%;
    }
    &.event-draft {
      background-color: #eee;
    }

    /* Slide in and out on HTMX changes */
    &.htmx-request {
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
        500ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
    }
    &.htmx-settling {
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-in,
        500ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
    }

    header {
      display: grid;
      grid-template: "date title admin" / auto 1fr auto;
      @media (max-width: 800px) {
        grid-template:
          ". admin"
          "date title" / auto 1fr auto;
      }
      gap: 1rem;
      align-items: center;

      .event-date {
        grid-area: date;
      }

      .event-title {
        grid-area: title;

        .event-heading {
          display: grid;
          grid-template-columns: auto auto;
          gap: 0.5rem;
          justify-content: left;
          place-items: center;

          h1 {
            letter-spacing: -0.04em;
            margin: 0 0 0.25em 0;
            font-size: x-large;
            color: var(--primary);
          }
        }

        .badge {
          margin-right: 0.25em;
        }

        svg {
          width: 1em;
          height: 1em;
        }
      }

      .admin {
        grid-area: admin;
        justify-self: right;
      }
    }

    .event-description {
      border-left: 1px solid var(--cmc-highlight);
      padding-left: 1rem;
    }

    .event-map {
      height: 30em;
    }

    /* If it's being displayed as part of a list, collapse the description */
    &:not(:only-of-type)
      :is(.event-description-expanded, .event-description-retracted) {
      /* This is set low, but max-height is controlled by javascript */
      cursor: pointer;
      max-height: 15rem;
      transition: max-height ease-in-out 0.2s;
      overflow: clip;

      &:is(.event-description-expanded) {
        max-height: 500rem;
      }

      /* Set up the fade if not expanded */
      color: transparent;
      background-clip: text;
      background-image: linear-gradient(
        to bottom,
        var(--text) 0%,
        #cccccc 15em
      );
      &:is(.event-description-expanded) {
        background-image: none;
        background-color: var(--text);
      }

      .event-map {
        height: 6em;
      }
    }

    .event-all-attendees {
      display: grid;
      grid-template-rows: 1fr;
      gap: 0.5rem;
      /* Slide in and out on HTMX changes */
      &.htmx-request {
        animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
          500ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
      }
      &.htmx-settling {
        animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-in,
          500ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
      }
    }

    details.attendees {
      summary {
        display: list-item;
        font-weight: 500;
      }

      &[open] .attendees-summary {
        display: none;
      }

      > ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .attending-user {
        display: grid;
        grid-template: "profile name admin" / auto 1fr auto;
        @media (max-width: 800px) {
          grid-template:
            "profile name"
            ". admin" / auto 1fr;
        }
        align-items: center;
        justify-items: start;
        gap: 0.25rem;

        .trip-paid {
          svg {
            color: green;
            width: 1em;
            height: 1em;
          }
        }

        .profile-picture {
          grid-area: profile;
        }

        .attendee-name {
          grid-area: name;
          a {
            color: var(--cmc-highlight);
          }
          font-size: 0.875rem;
        }
        .admin {
          grid-area: admin;
          display: flex;
          flex-wrap: wrap;
          gap: 0.25rem;
        }
      }
    }
  }

  ul.attendee-adder {
    border-left: 1px solid var(--cmc-color-committee);
    padding-left: 1rem !important;
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-items: center;
    gap: 0.25rem;

    > li {
      list-style: none;
    }

    > li:has(form) {
      display: contents;
    }

    > li:not(:has(form)) {
      grid-column: span 3;
    }

    &.htmx-request {
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
    }
    &.htmx-settling {
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-in;
    }
  }

  .event-date {
    width: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px gray solid;
    border-top: 8px gray solid;
    border-radius: 5px;
    padding: 0.25em 0.5em;

    > span {
      font-size: 0.9rem;
      letter-spacing: -0.05em;
      margin: 0;
      padding: 0;
      white-space: nowrap;
    }
    > span:nth-child(2) {
      font-size: xx-large;
      font-weight: bold;
      margin: 0;
      padding: 0;
    }
  }

  .calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  main {
    &.htmx-swapping {
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
    }
    &.htmx-settling {
      animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-in;
    }
  }
  #events-calendar {
    table-layout: fixed;
    width: 100%;
    min-width: 35rem;
    border-collapse: collapse;

    th {
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    td.events-calendar-day {
      height: 8em;
      vertical-align: top;

      &.not-month {
        opacity: 70%;
      }

      &.is-today {
        border-radius: var(--standard-border-radius);
        border: 1px solid var(--primary);
      }

      > h4 {
        margin: 0;
        text-align: right;
        font-weight: 400;
      }
    }

    tbody > tr:nth-child(odd) {
      background-color: rgb(250, 250, 250);
    }

    .calendar-event {
      overflow: hidden;
      text-overflow: ellipsis;
      background-color: var(--cmc-highlight);
      color: var(--text-white);
      padding: 0.375rem;
      margin: 0 0.125rem 0.125rem 0.125rem;
      border-radius: var(--standard-border-radius);
      font-size: small;

      &.calendar-event-draft {
        background-color: var(--text-white);
        color: var(--cmc-highlight);
        border: 1px solid var(--cmc-highlight);
      }

      > span:first-child {
        font-weight: bold;
      }
    }
  }

  label.event-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    cursor: pointer;
    background-color: var(--cmc-highlight);
    border-radius: var(--standard-border-radius);
    padding: 0.25em 0.5em;
    text-align: center;
    color: var(--text-badge);

    opacity: 75%;
    &:has(input:checked) {
      opacity: 100%;
    }
  }

  #landing {
    > img:first-child {
      width: 100%;
      height: 20rem;
      object-fit: cover;
      object-position: top;
    }

    #upcoming-events {
      display: grid;
      grid-template-columns: repeat(auto-fill, min(90%, 375px));
      justify-content: space-between;
      gap: 0.5rem;
    }

    .upcoming-event {
      padding: 0.5rem;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1rem;
      place-items: center;
      text-align: center;
    }

    #recent-photos {
      display: flex;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;

      img {
        height: 90px;
        width: 150px;
        object-fit: cover;
      }
    }
  }

  .committee-bio {
    margin: 0.5rem 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    place-items: center;
  }

  figure.markdown {
    background-color: white;
    padding: 1rem;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
    place-items: center;
    margin: 0;
    img {
      border-radius: var(--standard-border-radius);
    }
    figcaption {
      font-size: 0.75rem;
      color: var(--text-light);
      text-align: center;
    }
  }

  #kit-list {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: auto 1fr auto auto auto;

    > .kit {
      display: grid;
      padding: 0.5rem;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      gap: 0.4rem;
      place-items: center;
      justify-content: space-between;
      background-color: var(--bg);
      border-left: 10px solid var(--cmc-highlight);

      > h3 {
        justify-self: stretch;
        text-align: center;
      }
    }
  }

  .kit-details {
    display: grid;
    padding: 0.5rem;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;

    > figure {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: 1fr;
      place-items: center;
      img {
        border-radius: var(--standard-border-radius);
      }
    }
  }

  .kit-note {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 1em;
    padding-left: 0.5em;

    > figure {
      display: grid;
      justify-self: right;
      gap: 0.5rem;
      grid-template-columns: 1fr;
      img {
        border-radius: var(--standard-border-radius);
        max-height: 10rem;
      }
    }
  }

  .kit-request-list {
    display: grid;
    gap-y: 0.1rem;
    grid-template-columns: repeat(7, auto);
    place-items: center;

    > .kit-request-header {
      font-weight: bold;
    }	

    > .kit-request {
      display: grid;
      padding: 0.5rem;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      grid-row: span 2;
      gap: 0.25rem;
      place-items: center;
      justify-content: space-between;
      background-color: var(--bg);
      white-space: nowrap;
      text-overflow: ellipsis;

      .kit-request-note {
      	white-space: wrap;
	grid-column: 2 / -1;
	justify-self: left;
	padding-left: 1.5em;
	border-left: 2px solid gray;
      }
    }
  }

}