.navbar.fixed-top { /* freeze navbar during scrolling */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

body {
    margin: 100;
    background-color: white;
    padding-top: 60px; /* to prevent from navbar covering content */

}

.md-body {
    width: min(92vw, 1100px);
    margin: 2rem auto;
    padding: 2.5rem 3rem;

    background: #f7f6f3;
    border-radius: 14px;

    box-sizing: border-box;

    overflow-x: hidden;

    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12);
}

.md-raw {
    
    width: min(92vw, 1100px);
    margin: 2rem auto;
    padding: 2.5rem 3rem;
    
    background: #f7f6f3;
    border-radius: 14px;
    
    max-height: 100vh;
    
    box-sizing: border-box;
    
    overflow-x: hidden;
    overflow-y: auto;
    
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12);
    
    font-family: "Courier New", Courier, monospace;
    white-space: pre-wrap;
    overflow-wrap: break-word;

}

@media (max-width: 600px) {
    .markdown-body {
        width: 94vw;
        margin: 1rem auto;
        padding: 1.5rem 1.25rem;
        border-radius: 10px;
    }
}

/***************************/


/* Behavior shared by ALL tables */
.md-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

/***************************/

/* Default styling ONLY for Markdown tables */
.md-body table:not([class]) {
    border-collapse: collapse;
    margin: 1.5rem 0;
}

/* ONLY unclassified Markdown-generated tables */
.md-body table:not([class]) th,
.md-body table:not([class]) td {
    padding: 0.6rem 0.9rem;
    border: 1px solid #d2c6b8;
}

.md-body table:not([class])th {
    background: #e8ded1;
}

.md-body table:not([class]) tr:nth-child(even) {
    background: #f6ecde;
}

/***************************/

.md-body img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12);
}

/***************************/
/* Typography */
/* normal text typically 1rem = 16px. */

h1 {
  margin-top: 0px;
  padding-top: 20px;
  font-size: clamp(26px, 4vw, 32px);
  line-height: 1.2;}

h2 {
  font-size: clamp(22px, 3vw, 26px);
  line-height: 1.25;
}

h3 {
  font-size: clamp(19px, 2.5vw, 22px);
  line-height: 1.3;
}

h4 {
  font-size: 18px;
  line-height: 1.35;
}

h5 {
  font-size: 16px;
  line-height: 1.4;
}

h6 {
  font-size: 15px;
  line-height: 1.4;
}

body, blockquote {
  font-size: 14px;
  line-height: 1.6;
}

small {
  font-size: 13px;
}

/***************************/


code {
    white-space: pre;
}


textarea {
    height: 90vh;
    width: 80%;
}

.main {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 100px;
}

.sidebar {
    background-color: #f0f0f0;
    height: 100vh;
    /* max-width: 20vw; */
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 10px;
}

.sidebar h2 {
    margin-top: 5px;
}

/***************************/

/* fix hanging indent on ordered lists */

.index-pg ol {
  list-style: none;
  counter-reset: list-counter;
  padding-left: 0;

  /* Target all lists (or use .markdown-body ul if you want to scope it) */
  /* turns tall/skinny lists into columns that adapt to viewport width. */
  column-width: 250px;          /* minimum width per column */
  column-gap: 2rem;             /* spacing between columns */
  list-style-position: inside;  /* keeps bullets visible when wrapped. outside fixes hanging indent issue. */
  
}

.index-pg ol > li {
  counter-increment: list-counter;
  display: grid;
  grid-template-columns: 2em 1fr;  /* 2em allocates width space for number. 1fr for the 2nd column (button) the fraction of whatever space is left. */
  column-gap: 1.0em;
  margin-bottom: 0.5em;
  align-items: center; /* vertical align of button height */
  break-inside: avoid; /* prevents long strings from splitting button into the next column */
}

.index-pg ol > li::before {
  content: counter(list-counter);
  text-align: right;
}

/***************************/

/* for generic markdown lists */
ul, ol {
  padding-left: 1.2em;
  /* turns tall/skinny lists into columns that adapt to viewport width. */
  column-width: 250px;         /* minimum width per column */
  column-gap: 3rem;            /* spacing between columns */
  list-style-position: outside; /* keeps bullets visible when wrapped. outside fixes hanging indent issue. */
}

ul li,
ol li {
  break-inside: avoid;   /* prevent new column from starting mid-sentence. */
}

/*
`ul li` says "don't break each individual list item.
`ul> li` says "don't break the top-level list item, including the nested content inside it.
*/

/***************************/

.metadata {
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metadata-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/***************************/

.entries-list {
    gap: 10px;
}

.entries-button {
    display: inline-block;
    padding: 7px 12px;

    border: 1px solid #ccc;
    border-radius: 5px;

    background: #f5f5f5;
    color: #635656;

    text-decoration: none;
    font-size: 1.4rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    text-align: center;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.entries-button:hover {
    transform: translateY(-2px);
    color: #6e24ab;
    background: #fff;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

/***************************/

/* iframe size control for youtube */
iframe[src*="youtube.com/embed/"] {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* iframe size control for google slides */
/* medium portrait (816x1085) */
iframe[src*="https://docs.google.com/presentation/"][width="816"][height="1085"] {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
}

/* iframe size control for google slides */
/* medium landscape (960x569) */
iframe[src*="https://docs.google.com/presentation/"][width="960"][height="569"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/***************************/
/* pill, chip, badge for tags */

/* Base Pill / Chip Styling */
.ui-pill {
  /* 1. Alignment & Display */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;                 /* Space between text and optional icons */
  
  /* 2. Sizing & Typography */
  padding: 4px 12px;
  font-family: system-ui, sans-serif;
  font-size: 1.3rem;       /* Slightly smaller text works best */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;      /* Prevents text from breaking onto two lines */

  /* 3. The "Pill" Shape */
  border-radius: 100px;     /* A huge radius ensures perfectly round caps */
  
  /* 4. Default Colors (Neutral Gray) */
  background-color: #f3f4f6;
  color: #10161f;
  border: 1px solid #e5e7eb;
}

/* iframe size control for musescore */
/* TBD */

/***************************/

/* possible way to overflow scrollbar wide tables */
/* table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
} */

/* .cards {
    width: 70dvw; 
    min-width: 800px;
} */

/* img{
    display:block;
    width:auto;
    max-width:100%;
    border-radius:12px;
    margin:2rem auto;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
} */