/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                MODALS                                    */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Styling shared by helpDialog/statsDialog — the two *Dialog elements
   (see the naming-convention comment at the top of ui/modal.js). Both are
   real <dialog>s, opened/closed via .showModal()/.close(), for the
   Escape-to-close/focus-trap/inert-background behavior a plain div can't
   give for free. The dialog itself is the content box; ::backdrop covers
   the translucent full-page backing. */

.modal-content {
	width: min(500px, 94vw);
	max-height: 85vh;
	/* Scrolling lives on .modal-scroll below, not here — a <dialog> that's
	   both the overflow:auto container AND has auto margins for centering
	   lets you scroll past its own content into the margin, revealing the
	   ::backdrop through what looks like the dialog's own background.
	   Keeping this box unscrollable (fixed height, clipped) avoids that
	   entirely. */
	overflow: hidden;
	border: 3px solid;
	margin: 4rem auto;
	padding: 0;
	background-color: var(--color-light);
	color: var(--color-darker);
	border-color: var(--color-darker);
}

/* flex, not percentage-height on .modal-scroll: a box sized only by
   max-height (no explicit height) doesn't count as a definite height for a
   child's `height: 100%` to resolve against, so that child just grows past
   it instead of clipping/scrolling. Flex sizing doesn't have that
   limitation.
   Scoped to [open]: a plain `.modal-content { display: flex }` would apply
   regardless of the dialog's open state — author-origin CSS beats the UA
   stylesheet's `dialog:not([open]) { display: none }` regardless of
   specificity, so an unconditional `display` here would make the dialog
   visible (and, worse, capturing clicks/keyboard input) even while
   closed. */
.modal-content[open] {
	display: flex;
	flex-direction: column;
}

.modal-content::backdrop {
	cursor: pointer;
	background-color: var(--color-translucent);
}

.modal-scroll {
	overflow-y: auto;
	padding: 1.5rem;
	/* Flex items default to min-height: auto (never smaller than their
	   content), which would defeat overflow here — this lets it actually
	   shrink below content size so overflow-y can kick in. */
	min-height: 0;

	/* Thin, app-colored scrollbar instead of the OS default. */
	scrollbar-width: thin;
	scrollbar-color: var(--color-darker) transparent;
}

.modal-scroll::-webkit-scrollbar {
	width: 8px;
}

.modal-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.modal-scroll::-webkit-scrollbar-thumb {
	background-color: var(--color-darker);
	border-radius: 4px;
}

.modal-content h1 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.modal-content h2 {
	font-size: 1.125rem;
	margin-block: 1.25rem 0.75rem;
	border-bottom: 2px solid var(--color-dark);
}

.closeRow {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: end;
}

.closeButton {
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.fa-xmark {
	font-size: 1.25rem;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                      HELP DIALOG                         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.help-trigram {
	padding-inline: 0.5ch;
	background-color: white;
	border: 1px solid black;
	border-radius: 4px;
	text-transform: capitalize;
	font-weight: bold;
}

.help-trigram-subtle {
	font-weight: bold;
	text-decoration: underline;
}

ul {
	margin-block: 0.75rem 1.5rem;
}

li {
	margin-left: 2ch;
	margin-bottom: 0.625rem;
	/* font-size: 1.125rem; */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                     STATS DIALOG                         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#nextGameCountdownDiv {
	display: none;
	text-align: center;
}

#wordListValue {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5rem;
}

.stat-wordList-level {
	display: flex;
	flex-flow: row nowrap;
	gap: 0.5rem;
	align-items: center;
}

.stat-wordList-length {
	width: 3ch;
	text-align: right;
}

.stat-wordList-word {
	letter-spacing: 0.25rem;
}

.stat-wordList-trigram {
	border: 1px solid;
	border-radius: 4px;
	padding-left: 0.25rem;
	margin-right: 0.125rem;
	background-color: white;
	letter-spacing: 0.25rem;
}

#statListValue {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
}

.stat-statList-item {
	width: 7ch;
	display: flex;
	flex-flow: column nowrap;
	text-align: center;
}

.stat-statList-itemValue {
	font-size: 2rem;
}

#statDistributionValue {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.25rem;
}

.stat-statDistribution-item {
	display: flex;
	flex-flow: row nowrap;
	gap: 0.5rem;
	align-items: center;
}

.stat-statDistribution-itemLength {
	width: 3ch;
	text-align: right;
}

.stat-statDistribution-itemCount {
	padding-inline: 0.5ch;
	background-color: var(--color-dark);
	color: white;
	text-align: right;
}