/* Basic page & layout */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
body { display: flex; flex-direction: column; }

/* Header / Footer */
header, footer { flex: none; padding: 0.75rem 1rem; background: #f5f5f5; border-bottom: 1px solid rgba(0,0,0,.08); }
footer { border-top: 1px solid rgba(0,0,0,.08); }

/* main should take all remaining space and not cause the page to scroll */
main { flex: 1 1 auto; min-height: 0; /* allow children to handle internal scrolling */ display: flex; align-items: stretch; }

/* .main-wrapper same height as main */
.main-wrapper { 
	height: 100%; 
	display: flex; 
	flex-direction: column; 
	gap: 0.5rem; 
	padding: 0.5rem; 

	/* limit to viewport width so wrapper cannot grow wider than the screen */
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
}

/* 3 primary internal blocks get fixed % heights of the main-wrapper */
.top-wrapper { 
	height: 15%; 
	display: flex; 
	/* gap removed so 6 * 1/6 will fit neatly */
	gap: 0; 
	align-items: stretch;
	overflow-x: auto; 
	overflow-y: hidden; 
	padding-bottom: 0.25rem; 
	-webkit-overflow-scrolling: touch; 
}
.heading { height: 5%; display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; border-bottom: 1px dashed rgba(0,0,0,.08); overflow: hidden; }
.bottom-wrapper { 
	height: 80%; 
	display: flex; 
	/* gap removed so 3 * 1/3 will fit neatly */
	gap: 0; 
	overflow-x: auto; 
	overflow-y: hidden; 
	padding-top: 0.25rem; 
	-webkit-overflow-scrolling: touch; 
}

/* The immediate section children inside the horizontal wrappers should be accessible by horizontal scroll.
   Give them fixed/min-width so there's something to scroll */
.top-wrapper > section {
    overflow-y: scroll;
	/* make each top section exactly 1/6 of the wrapper width and allow shrink */
	flex: 0 0 33.3333%;
	min-width: 0;
	height: 100%;
	/* display: flex; */
	align-items: center;
	/* justify-content: center; */
	padding: 0.5rem;
	border-radius: 6px;
	background: rgba(255,255,255,0.6);
	border: 1px solid rgba(0,0,0,0.06);
	white-space: nowrap;

    position: relative;
    h4 {
        margin: 0;
    }
    button {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
    }
}

.bottom-wrapper > section {
	/* make each bottom section exactly 1/3 of the wrapper width and allow shrink */
	flex: 0 0 33.3333%;
	min-width: 0;
	height: 100%;
	overflow-y: auto;    /* content inside the section scrolls vertically */
	padding: 1rem;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.06);
	background: rgba(255,255,255,0.85);
}

/* Ensure vertical scrolling areas inside bottom sections don't collapse */
.bottom-wrapper > section::-webkit-scrollbar { width: 10px; }
.bottom-wrapper > section::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }

/* enable proximity scroll snapping horizontally for the wrapper rows */
.top-wrapper,
.bottom-wrapper {
	scroll-snap-type: x mandatory;
}

/* snap alignment for items */
.top-wrapper > section,
.bottom-wrapper > section {
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

/* carousel indicators layout & appearance */
.carousel-indicators {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	padding: 0.5rem 0;
	user-select: none;
}

.carousel-indicators button {
	/* dot */
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(0,0,0,0.18);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
	opacity: 0.85;
}

.carousel-indicators button[aria-pressed="true"] {
	background: rgba(0,0,0,0.9);
	transform: scale(1.25);
	opacity: 1;
}

/* small spacing so indicators don't collide with wrapper content */
.top-wrapper + .carousel-indicators,
.bottom-wrapper + .carousel-indicators {
	margin-bottom: 0.25rem;
}

/* small UI tweaks */
nav { display:flex; align-items:center; justify-content:space-between; gap: 1rem; }
.top-wrapper section button { margin-left: 0.5rem; }
.heading h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* animate height changes so expand/collapse is smooth */
.top-wrapper,
.bottom-wrapper {
	transition: height 320ms cubic-bezier(.2,.9,.2,1);
}

/* expanded state: change top-wrapper height and compute bottom to keep totals (heading = 10%) */
.main-wrapper.top-expanded .top-wrapper { height: 35%; }
.main-wrapper.top-expanded .bottom-wrapper { height: calc(100% - 35% - 10%); }

/* responsive adjustments for expanded state */
@media (max-width: 1024px) {
	.main-wrapper.top-expanded .top-wrapper { height: 60%; }
	.main-wrapper.top-expanded .bottom-wrapper { height: calc(100% - 60% - 10%); }
}
@media (max-width: 720px) {
	/* on small screens a full-height top area when expanded can be helpful */
	.main-wrapper.top-expanded .top-wrapper { height: 50%; }
	.main-wrapper.top-expanded .bottom-wrapper { height: calc(100% - 50% - 10%); }
}

/* slight visual tweak for the expand/collapse buttons */
.top-wrapper > section button {
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.08);
	background: rgba(255,255,255,0.9);
}
.top-wrapper > section button[aria-pressed="true"] {
	background: rgba(0,0,0,0.08);
}
.volume-issues {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    gap: 1em;
}

/* Responsive tuning */
/* Smaller desktops: 4 top sections, 2 bottom sections */
@media (max-width: 1024px) {
	.top-wrapper > section { flex: 0 0 50%; min-width: 0; }
	.bottom-wrapper > section { flex: 0 0 50%; min-width: 0; }
}

/* Smartphones & vertical tablets: each section full width */
@media (max-width: 720px) {
	.bottom-wrapper > section { flex: 0 0 100%; min-width: 0; }
	.top-wrapper > section { flex: 0 0 100%; min-width: 0; }
}

.fit-picture {
    max-width: 100%;
}

.li-label {
	font-weight: bold;
}

.red {
	color: red;
}

.entity {
	text-decoration: dotted underline;
	}