/* Base typography and body styling */
body {
    /* font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace; */
    font-family: "Lucida Console", monospace;
    /* font-family: "Andale Mono", monospace; */
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    background-color: #f9f9fb;
    color: #333;
    padding: 20px;
    display: flex;
    justify-content: center;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Lucida Console", monospace;
}

.controls {
    display:flex;
    justify-content: center; 
    gap: 20px;
}

/* pixel selections for these containers were deliberately chosen */
.section-container {
    display: grid;
    /* content-driven behavior each section should be at least 500px wide. */
    /* auto-fit is an important parameter for sizing here. */
    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
    gap: 10px;

}

.eights-outer-container{
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 8px;
}

.eights-inner-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

/* 2 tables across for @max-width: 1000px */
/* this is taken care of by auto-fit in .section-container */

/* 1 table across */
@media (max-width: 600px) {
    .eights-inner-container {
        grid-template-columns: 1fr;
    }

    html {
        scroll-snap-type: y proximity;
    }
    h3, .controls {
        scroll-snap-align: start;
    }
}

/* Container to enable responsive horizontal scrolling on small screens */
.table-container {
    overflow-x: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    background-color: #ffffff;
}

/* Core table styling */
.custom-table {
    width: 100%;
    border-collapse: collapse; /* Merges individual cell borders into a single border */
    /* min-width: 600px; Prevents rows from condensing too awkwardly */
    text-align: center;
}

/* Header layout and background */
.custom-table thead tr {
    background-color: #1e293b;
    color: #ffffff;
    font-weight: 600;
}

/* Consistent cell padding and sizing */
.custom-table th, 
.custom-table td {
    padding: 2px 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* Zebra striping: target alternating rows */
.custom-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Interactive row illumination */
.custom-table tbody tr:hover {
    background-color: #f1f5f9;
    cursor: pointer;
}


#progress { 
  height:7px; 
  background:#a3a2a2a2; 
  border-radius:4px; 
  cursor:pointer;
  margin-top:2px;
  margin-bottom:2px;
}

#progress-bar { 
  height:100%; 
  width:0; 
  background:#111; 
  border-radius:4px;
}


/* upbeat/downbeat emoji */

.downbeat, .upbeat {
    display:none;
}

.emoji-hidden {
    visibility: hidden;
}

.emoji-visible {
    visibility: visible;
}