:root{
    --nice-gray: hsla(210, 14%, 85%, 0.4);

    --shadow-m: 0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1), 0 16px 32px rgba(0,0,0,0.1);
    --shadow-s: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.05), 0 8px 16px rgba(0,0,0,0.05), 0 16px 32px rgba(0,0,0,0.05);
    --shadow-xs: 0 1px 6px rgba(0,0,0,0.16), 0 2px 12px rgba(0,0,0,0.08);

    /* color palette */
    --color-white: #ffffff;
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    
    --color-jetblack: #2A2D34;
    --color-onyx: #0C090D;

    --color-blue: #2563EB;
    --color-offblue: #284890;
    
    --color-amber-100: #fef3c7;

    --color-red: #FB3640;
    --color-offred: #F26430;

    --color-green: #20BF55;
    --color-offgreen: #009B72;

    --color-yellow: #FCBF49;
    --color-offyellow: #F1A208;

    /* semantic colors */
    --color-bg-page: #FBFBFB;
    --color-bg-card: var(--color-white);
    --color-bg-card-hover: var(--color-gray-50);
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-500);
    --color-text-muted: var(--color-gray-400);
    --color-accent-primary: var(--color-blue);
    --color-accent-secondary: var(--color-offblue);
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-light: rgba(0, 0, 0, 0.06);
    
}


@font-face {
    font-family: "plex";
    src: url(/static/fonts/IBMPlexSans-Regular.woff2);
}
@font-face {
    font-family: "plex-italic";
    src: url(/static/fonts/IBMPlexSans-TextItalic.woff2);
}
@font-face {
    font-family: "plex-serif";
    src: url(/static/fonts/IBMPlexSerif-Light.ttf);
}
@font-face {
    font-family: "plex-serif-italic";
    src: url(/static/fonts/IBMPlexSerif-Italic.ttf);
}
@font-face {
    font-family: "plex-mono";
    src: url(/static/fonts/IBMPlexMono-Regular.ttf);
}
@font-face {
    font-family: "plex-mono-italic";
    src: url(/static/fonts/IBMPlexMono-Italic.ttf);
}
@font-face {
    font-family: "plex-mono-bold";
    src: url(/static/fonts/IBMPlexMono-Bold.ttf);
}



body {
    background-color: var(--color-bg-page);
    min-height: 100vh;
    font-family: "plex", Helvetica, sans-serif;
}

button {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--color-border-light);
    background: transparent;
    /* box-shadow: var(--shadow-xs); */
    cursor: pointer;
    color: var(--color-text-primary);
    transition: all 150ms ease-in-out;
}
button:hover {
    box-shadow: var(--shadow-s);
}

h1, h2{
    font-family: "plex-serif", Georgia, 'Times New Roman', Times, serif;
}
h1{
    letter-spacing: 3%;
}

a:visited, a {
    color: black;
    text-decoration: underline 2px solid inherit;

}

header{
    padding: 1rem;
    font-size: 1rem;
}


header .navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media print {
    header .navbar{
        display: none;
    }
} 



header .navbar .pages, header .navbar .account {
    display: flex;
    gap: 2rem;
}

/* site-wide month picker in navbar */
header .navbar .month-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

header .navbar .month-picker .month-label {
    font-size: 0.9rem;
}

header .navbar .month-picker select {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.12);
    background: white;
    font-size: 0.9rem;
}

@media print {
    header .navbar .month-picker {
        display: none;
    }
}

.username {
    margin-right: 1rem;
}

nav {
    font-size: 1rem;
    font-family: Helvetica, sans-serif;
}

main{
    margin-inline: 2rem;
    min-height: 50vh;
    margin: 0 auto;
    max-width: clamp(800px, 90vw, 1200px);
    margin-bottom: 25vh;
}

section {
    margin-block: 10vh;
}

footer {
    min-height: 25vh;
    background: var(--color-onyx);
    color: var(--color-jetblack);
    font-size: clamp(1rem, 12vw, 15rem);
    padding: clamp(2rem, 3vw, 4rem);
}

@media print {
    footer {
        display: none;
    }
}

.page-name {
    /* min-height: 50vh; */
    margin-top: 20vh;
    font-size: 3rem;
}

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    font-size: 0.95rem;
  }

  .chip:hover {
    border-color: var(--color-gray-400);
  }

  .chip.active {
    border-color: var(--color-accent-primary);
    background-color: rgba(79, 70, 229, 0.05);
  }

  .chip.active span {
    color: var(--color-accent-primary);
  }

  .chip input[type="checkbox"] {
    display: none;
  }