:root {
    font-family: sans-serif;
    background: #eee;
}

body {
    margin: 0;
}

main {
    width: 100vw;
    display: flex;
    align-items: center;
    flex-direction: column;
}

header {
    box-sizing: border-box;
    width: calc(100vw - 64px);
    background: black;
    margin: 32px;
    padding: 16px;
    color: white;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr auto;
    align-items: center;

    a {
	color: white;
    }

    frontend-name {
	font-size: 0;
	&::after {
	    font-size: large;
	    font-weight: bold;
	    content: "Brutalist Sounds";
	}
    }

    #search-form {
	input {
	    background: black;
	    border: 1px solid white;
	    color: white;
	    font-family: inherit;
	    font-size: small;
	    padding: 4px 8px;
	    &::placeholder {
		color: #bbb;
	    }
	}
    }
}

inline-display-module {
    border: 1px solid black;
    margin: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: fit-content;
    max-height: 600px;
    overflow-y: scroll;
    box-sizing: border-box;
    width: min(1000px, calc(100vw - 64px));
    background: white;
    color: black;

    h2 {
	top: -16px;
	margin: -16px;
	margin-bottom: 0;
	position: sticky;
	background: black;
	color: white;
	padding: 8px;
	padding-left: 16px;
    }

    module-description {
	font-weight: bold;
    }
}

inline-header-module {
    display: block;
    padding: 16px;

    h2 {
	font-size: xx-large;
    }

    container-item {
	display: none;
    }
}

playable-item, container-item, display-item, broadcast-summary {
    display: block;
    padding: 8px;

    item-first-titles {
	margin: -8px;
	margin-bottom: 8px;
	background: black;
	color: white;
	padding: 0 8px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr auto;
	align-items: baseline;
    }

    h3 {
	margin: 0;
    }

    secondary-title {
	display: block;
	font-weight: bold;
    }

    tertiary-title {
	display: block;
	font-style: italic;
    }

    synopsis {
	display: block;
	margin-top: 8px;
	white-space: pre-wrap;

	details {
	    summary {
		list-style: none;
		&::after {
		    font-weight: bold;
		    content: ' Show more…';
		}
	    }
	    &[open] {
		summary {
		    display: none;
		}
	    }
	}
    }

    a {
	font-style: italic;
	display: block;
	text-align: end;
	&::after {
	    content: " »";
	}
    }
}

#aod_play_area, #single_item_promo {
    padding: 0;
    gap: 0;
    h2 {
	margin: 0px;
    }
    playable-item, display-item {
	h3, secondary-title, tertiary-title, synopsis {
	    padding: 0 8px;
	}

	a {
	    display: none;
	}
    }
}

segment-item {
    display: grid;
    gap: 8px;
    grid-auto-flow: column;
    grid-auto-columns: 1fr auto auto;
    border-bottom: 0.5px dashed black;

    primary-title {
	font-weight: bold;
	margin-inline-end: 12px;
    }
    tertiary-title {
	display: none;
    }

    offset-start::after {
	margin-inline-start: 8px;
	content: '—';
    }
}