/**
 * Handwriting Fonts - dialog styling.
 *
 * Everything is scoped under #wpie-root so the editor's own variables
 * resolve and nothing leaks into wp-admin. The three columns each scroll
 * on their own, and their children keep their natural height: a flex
 * column whose children may shrink squeezes its cards flat instead of
 * overflowing, and then the scrollbar never appears at all.
 */

#wpie-root .wpiehw-wrap {
	display: grid;
	grid-template-columns: 196px minmax(380px, 1fr) 252px;
	gap: 12px;
	align-items: stretch;
	/* A definite height, not a range. The drawing surface below asks to
	   fill what is left over, and "what is left over" only has an answer
	   if something up here states a height outright. With a min and a max
	   the canvas grows past the window instead. */
	height: min(68vh, 620px);
	min-height: 380px;
}

#wpie-root .wpiehw-side {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	overflow-x: hidden;
	/* Reserve the scrollbar's space whether or not it is showing. Without
	   this, switching tabs makes a scrollbar appear or vanish and the
	   drawing area next door changes width as a result, which reads as
	   the canvas slowly growing. */
	scrollbar-gutter: stable;
	padding-right: 4px;
}

#wpie-root .wpiehw-side > * {
	flex-shrink: 0;
}

#wpie-root .wpiehw-stage {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
}

/* ------------------------------- overview -------------------------------- */

#wpie-root .wpiehw-progress {
	position: relative;
	height: 5px;
	border-radius: 3px;
	background: var(--ed-panel-2, #2a2e35);
	overflow: hidden;
}

#wpie-root .wpiehw-progress i {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--ed-accent, #3b66ff);
	transition: width 0.2s ease;
}

#wpie-root .wpiehw-progress.is-ready i {
	background: var(--ed-ok, #3ec98a);
}

#wpie-root .wpiehw-count {
	font-size: 11px;
	color: var(--ed-text-dim, #8b929c);
}

#wpie-root .wpiehw-group {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ed-text-dim, #8b929c);
}

#wpie-root .wpiehw-group span {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.7;
}

#wpie-root .wpiehw-tiles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}

#wpie-root .wpiehw-tiles.wide {
	grid-template-columns: repeat(2, 1fr);
}

#wpie-root .wpiehw-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 3px 2px 2px;
	border: 1px solid var(--ed-border, #3a3f47);
	border-radius: var(--btn-radius, 6px);
	background: var(--ed-panel, #23272e);
	color: var(--ed-text-dim, #8b929c);
	cursor: pointer;
	min-width: 0;
}

#wpie-root .wpiehw-tile:hover {
	border-color: var(--ed-accent, #3b66ff);
}

#wpie-root .wpiehw-tile.is-active {
	border-color: var(--ed-accent, #3b66ff);
	box-shadow: 0 0 0 1px var(--ed-accent, #3b66ff) inset;
}

#wpie-root .wpiehw-tile.is-done {
	color: var(--ed-text, #e8eaee);
}

#wpie-root .wpiehw-tile.is-off {
	opacity: 0.35;
}

#wpie-root .wpiehw-tile span {
	font-size: 10px;
	line-height: 1.1;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wpie-root .wpiehw-tilecv {
	display: block;
	width: 100%;
	height: 26px;
}

#wpie-root .wpiehw-tiles.wide .wpiehw-tilecv {
	height: 30px;
}

/* -------------------------------- centre --------------------------------- */

#wpie-root .wpiehw-tabs {
	display: flex;
	gap: 4px;
}

#wpie-root .wpiehw-tab {
	padding: 5px 14px;
	border: 1px solid var(--ed-border, #3a3f47);
	border-radius: var(--btn-radius, 6px);
	background: transparent;
	color: var(--ed-text-dim, #8b929c);
	font-size: 12px;
	cursor: pointer;
}

#wpie-root .wpiehw-tab.is-active {
	background: var(--ed-panel-2, #2a2e35);
	color: var(--ed-text, #e8eaee);
	border-color: var(--ed-accent, #3b66ff);
}

#wpie-root .wpiehw-pane {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-gutter: stable;
}

#wpie-root .wpiehw-pane > * {
	flex-shrink: 0;
}

#wpie-root .wpiehw-pane.is-hidden {
	display: none;
}

#wpie-root .wpiehw-charhead {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-height: 20px;
}

#wpie-root .wpiehw-charname {
	font-size: 18px;
	font-weight: 700;
	color: var(--ed-text, #e8eaee);
}

#wpie-root .wpiehw-charhint {
	font-size: 11px;
	color: var(--ed-text-dim, #8b929c);
}

#wpie-root .wpiehw-canvas {
	display: block;
	width: 100%;
	height: auto;
	flex: 1 1 200px;
	min-height: 200px;
	border: 1px solid var(--ed-border, #3a3f47);
	border-radius: var(--btn-radius, 6px);
	background: var(--ed-panel, #23272e);
	cursor: crosshair;
}

#wpie-root .wpiehw-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

#wpie-root .wpiehw-tools .ai-btn.is-on {
	border-color: var(--ed-accent, #3b66ff);
	color: var(--ed-accent, #3b66ff);
}

#wpie-root .wpiehw-previewbox {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#wpie-root .wpiehw-previewbox .wpiehw-sample {
	width: 100%;
	box-sizing: border-box;
}

#wpie-root .wpiehw-preview {
	display: block;
	width: 100%;
	height: 76px;
	border: 1px solid var(--ed-border, #3a3f47);
	border-radius: var(--btn-radius, 6px);
	background: var(--ed-panel, #23272e);
}

/* --------------------------------- bench --------------------------------- */

#wpie-root .wpiehw-bench {
	display: block;
	width: 100%;
	height: auto;
	flex: 1 1 220px;
	min-height: 200px;
	border: 1px solid var(--ed-border, #3a3f47);
	border-radius: var(--btn-radius, 6px);
	background: var(--ed-panel, #23272e);
	outline: none;
}

#wpie-root .wpiehw-bench:focus-visible {
	border-color: var(--ed-accent, #3b66ff);
}

#wpie-root .wpiehw-benchbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

#wpie-root .wpiehw-benchvalue {
	min-width: 170px;
	color: var(--ed-text, #e8eaee);
}

#wpie-root .wpiehw-benchcount {
	margin: 0;
}

/* --------------------------------- panel --------------------------------- */

#wpie-root .wpiehw-right .dsm-input,
#wpie-root .wpiehw-right .dsm-select {
	width: 100%;
	box-sizing: border-box;
}

#wpie-root .wpiehw-label {
	margin-top: 6px;
	font-size: 11px;
	color: var(--ed-text-dim, #8b929c);
}

#wpie-root .wpiehw-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
}

#wpie-root .wpiehw-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

#wpie-root .wpiehw-hint {
	margin: 0 0 6px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--ed-text-dim, #8b929c);
}

#wpie-root .wpiehw-status {
	max-width: 62%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wpie-root .wpiehw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

#wpie-root .wpiehw-chip {
	min-width: 24px;
	padding: 2px 6px;
	border: 1px solid var(--ed-warn, #d9a441);
	border-radius: var(--btn-radius, 6px);
	background: transparent;
	color: var(--ed-text, #e8eaee);
	font-size: 12px;
	cursor: pointer;
}

#wpie-root .wpiehw-chip:hover {
	background: var(--ed-panel-2, #2a2e35);
}

/* --------------------------------- sheet --------------------------------- */

#wpie-root .wpiehw-file {
	display: none;
}

#wpie-root .wpiehw-photowrap {
	position: relative;
	display: inline-block;
	margin-top: 8px;
	line-height: 0;
}

#wpie-root .wpiehw-photocv {
	display: block;
	max-width: 100%;
	border-radius: var(--btn-radius, 6px);
	border: 1px solid var(--ed-border, #3a3f47);
}

#wpie-root .wpiehw-dot {
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--ed-accent, #3b66ff);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	cursor: grab;
	touch-action: none;
}

#wpie-root .wpiehw-dot:active {
	cursor: grabbing;
}

#wpie-root .wpiehw-results:empty {
	display: none;
}

#wpie-root .wpiehw-pages {
	margin-top: 4px;
}

@media (max-width: 1080px) {
	#wpie-root .wpiehw-wrap {
		grid-template-columns: 168px minmax(240px, 1fr) 232px;
	}
}