/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

.spectrum-Dialog {
	--spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
	--spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
	--spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800);
	--spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50);
	--spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
	--spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
	--spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
	--spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));

	/* Allow 100% width, taking into account padding */
	box-sizing: border-box;

	/* Be a flexbox to allow a full sized content area that scrolls */
	display: flex;

	/* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */
	inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px));

	max-block-size: inherit;
	max-inline-size: 100%;
	min-inline-size: var(--mod-dialog-min-inline-size, 288px);

	outline: none;
}

.spectrum-Dialog--sizeS {
	--mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px);
}

.spectrum-Dialog--sizeL {
	--mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px);
}

.spectrum-Dialog-hero {
	background-position: center center;

	background-size: cover;
	block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height));
	border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius));

	border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius));
	grid-area: hero;
	overflow: hidden;
}

.spectrum-Dialog .spectrum-Dialog-grid {
	display: grid;
	grid-template-areas:
		"hero hero    hero    hero        hero        hero"
		".    .       .       .           .           ."
		".    heading header  header      header      ."
		".    divider divider divider     divider     ."
		".    content content content     content     ."
		".    footer  footer  buttonGroup buttonGroup ."
		".    .       .       .           .           .";
	grid-template-columns:
		var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
		var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
	grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
	inline-size: 100%;
}

.spectrum-Dialog-heading {
	color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900));

	font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size));
	font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight));
	grid-area: heading;
	line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100));

	margin: 0;
	outline: none; /* Hide focus outline */

	padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size));
}

.spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader {
		grid-area: heading-start / heading-start / header-end / header-end;
		padding-inline-end: 0;
	}

.spectrum-Dialog-header {

	/* Without this,  buttons will be stretched */
	align-items: center;

	box-sizing: border-box;
	display: flex;
	grid-area: header;
	justify-content: flex-end;

	outline: none; /* Hide focus outline around header */
}

.spectrum-Dialog .spectrum-Dialog-divider {
	grid-area: divider;
	inline-size: 100%;
	margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start));
	margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end));
}

/* remove top vertical padding of spectrum-Dialog-content from bottom margin of first divider after heading */

.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider {
	margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - (var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2));
}

.spectrum-Dialog--noDivider .spectrum-Dialog-divider {
		display: none;
	}

.spectrum-Dialog--noDivider .spectrum-Dialog-heading {
		padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50)));
	}

.spectrum-Dialog-content {
	box-sizing: border-box;
	color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));

	font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size));
	font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight));
	grid-area: content;
	line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100));
	margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1));

	outline: none; /* Hide focus outline */
	-webkit-overflow-scrolling: touch;

	/*
  v2 is currently worse,  inputs that get focus rings get a slight clipping unless overflow: visible replaces this line
  we should think of a better way to handle this,  see padding/margin below for fix
  */
	overflow-y: auto;

	/* this is kinda dumb,  but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */
	padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2);
}

.spectrum-Dialog-footer {

	display: flex;
	flex-wrap: wrap;
	grid-area: footer;

	outline: none; /* Hide focus outline */

	/* this padding isn't built into the grid because it disappears with this footer */
	padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600));
}

.spectrum-Dialog-footer  > *,.spectrum-Dialog-footer  > .spectrum-Button + .spectrum-Button {
		margin-block-end: 0;
	}

.spectrum-Dialog-buttonGroup {
	display: flex;
	grid-area: buttonGroup;
	justify-content: flex-end;

	/* this padding isn't built into the grid because it disappears with this buttonGroup */
	padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top));

	/* this padding should be safe as button group is always end aligned */
	padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size));
}

.spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter {
		grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end;
	}

.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid {
	grid-template-areas:
		"hero hero    hero    hero        hero        hero        hero"
		".    .       .       .           .           closeButton closeButton"
		".    heading header  header      typeIcon    closeButton closeButton"
		".    divider divider divider     divider     divider     ."
		".    content content content     content     content     ."
		".    footer  footer  buttonGroup buttonGroup buttonGroup ."
		".    .       .       .           .           .           .";
	grid-template-columns:
		var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
		minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
	grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
}

:is(.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid) .spectrum-Dialog-buttonGroup {
		display: none;
	}

:is(.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid) .spectrum-Dialog-footer {
		color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
		grid-area: footer / footer/ buttonGroup / buttonGroup;
	}

.spectrum-Dialog-closeButton {

	/* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */
	align-self: start;
	grid-area: closeButton;
	justify-self: end;
	margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding));

	margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding));
}

.spectrum-Dialog--fullscreen {
	block-size: 100%;
	inline-size: 100%;
}

.spectrum-Dialog--fullscreenTakeover {
	block-size: 100%;

	border-radius: 0;
	inline-size: 100%;
}

.spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover {
	max-block-size: none;
	max-inline-size: none;
}

.spectrum-Dialog:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-grid {
		display: grid;
		grid-template-areas:
			".    .       .       .            ."
			".    heading header  buttonGroup  ."
			".    divider divider divider      ."
			".    content content content      ."
			".    .       .       .            .";
		grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
		grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
	}

:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-heading {
		font-size: var(--mod-dialog-fullscreen-header-text-size, 28px);
	}

:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-content {
		max-block-size: none;
	}

:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-footer,:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-buttonGroup {
		padding-block-start: 0;
	}

:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-footer {
		display: none;
	}

:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-buttonGroup {
		align-self: start;
		grid-area: buttonGroup;
	}

@media screen and (width <= 700px) {
	.spectrum-Dialog .spectrum-Dialog-grid {
		grid-template-areas:
			"hero hero    hero    hero        hero        hero"
			".    .       .       .           .           ."
			".    heading heading heading     heading   ."
			".    header  header  header      header      ."
			".    divider divider divider     divider     ."
			".    content content content     content     ."
			".    footer  footer  buttonGroup buttonGroup ."
			".    .       .       .           .           .";
		grid-template-columns:
			var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
			var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
		grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
	}

	.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid {
		grid-template-areas:
			"hero hero    hero    hero        hero        hero        hero"
			".    .       .       .           .           closeButton closeButton"
			".    heading heading heading     heading    closeButton closeButton"
			".    header  header  header      header      header      ."
			".    divider divider divider     divider     divider     ."
			".    content content content     content     content     ."
			".    footer  footer  buttonGroup buttonGroup buttonGroup ."
			".    .       .       .           .           .           .";
		grid-template-columns:
			var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
			minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
		grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
	}

	.spectrum-Dialog .spectrum-Dialog-header {
		justify-content: flex-start;
	}
		.spectrum-Dialog:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-grid {
			display: grid;
			grid-template-areas:
				".    .            ."
				".    heading      ."
				".    header       ."
				".    divider      ."
				".    content      ."
				".    buttonGroup  ."
				".    .            .";
			grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
			grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
		}

		:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-buttonGroup {
			padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top));
		}

		:is(.spectrum-Dialog--fullscreen,.spectrum-Dialog--fullscreenTakeover) .spectrum-Dialog-heading {
			font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size));
		}
}

@media (forced-colors: active) {
	.spectrum-Dialog {
		border: solid;
	}
}

/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@container style(--system: spectrum) {
	.spectrum-Divider {
		/* background colors */
		--spectrum-divider-background-color: var(--spectrum-gray-200);

		/* static white background colors */
		--spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200);

		/* static black background colors */
		--spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200);
	}
}

/* windows high contrast mode */

@media (forced-colors: active) {
	.spectrum-Divider {
		--highcontrast-divider-background-color: CanvasText;
	}
}

.spectrum-Divider {
	--spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
}

.spectrum-Divider--sizeS {
	--spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
}

.spectrum-Divider--sizeL {
	--spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
	--spectrum-divider-background-color: var(--spectrum-gray-800);
}

/* static white variant colors */

.spectrum-Divider--staticWhite {
	/** @deprecated --mod-divider-background-color-medium-static-white, use --mod-divider-background-color instead */
	--mod-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-static-white));
}

.spectrum-Divider--staticWhite.spectrum-Divider--sizeS {
		/** @deprecated --mod-divider-background-color-small-static-white, use --mod-divider-background-color instead */
		--mod-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-static-white));
	}

.spectrum-Divider--staticWhite.spectrum-Divider--sizeL {
		/** @deprecated --mod-divider-background-color-large-static-white, use --mod-divider-background-color instead */
		--mod-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-transparent-white-800));
	}

/* static black variant colors */

.spectrum-Divider--staticBlack {
	/** @deprecated --mod-divider-background-color-medium-static-black, use --mod-divider-background-color instead */
	--mod-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-static-black));
}

.spectrum-Divider--staticBlack.spectrum-Divider--sizeS {
		/** @deprecated --mod-divider-background-color-small-static-black, use --mod-divider-background-color instead */
		--mod-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-static-black));
	}

.spectrum-Divider--staticBlack.spectrum-Divider--sizeL {
		/** @deprecated --mod-divider-background-color-large-static-black, use --mod-divider-background-color instead */
		--mod-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-transparent-black-800));
	}

.spectrum-Divider {

	background-color: var(--highcontrast-divider-background-color, var(--mod-divider-background-color, var(--spectrum-divider-background-color)));
	block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));

	border: none;
	border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
	border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
	inline-size: 100%;

	/* Show the overflow for hr in Edge and IE. */
	overflow: visible;
}

/* vertical dividers */

.spectrum-Divider--vertical {
	align-self: var(--mod-divider-vertical-align);
	block-size: var(--mod-divider-vertical-height, 100%);
	inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness));

	margin-block: var(--mod-divider-vertical-margin);
}

/* ==========================================================================
   Base Layout - Both Form and Results pages
   ========================================================================== */

.monster-simulator, .monster-simulator-results {
  margin: 0 auto;
  max-width: 900px;
  padding: var(--spectrum-global-dimension-size-200);
}

.monster-simulator h1 {
  margin-bottom: var(--spectrum-global-dimension-size-100);
}

.monster-simulator > p {
  color: var(--spectrum-global-color-gray-700);
  margin-bottom: var(--spectrum-global-dimension-size-300);
}

/* ==========================================================================
   Shared Section Styles (used by both form-section and result-section)
   ========================================================================== */

/* Generic section heading - MUST come before more specific selectors */

.form-section h2, .result-section h2 {
  border-bottom: 1px solid var(--spectrum-global-color-gray-200);
  margin-bottom: var(--spectrum-global-dimension-size-150);
  margin-top: 0;
  padding-bottom: var(--spectrum-global-dimension-size-100);
}

/* Generic paragraph in form items - MUST come before more specific selectors */

.spectrum-Form-item p, .spectrum-InLineAlert-content p {
  color: var(--spectrum-global-color-gray-600);
  margin-top: var(--spectrum-global-dimension-size-50);
}

.spectrum-InLineAlert-content p {
  margin: 0;
}

/* ==========================================================================
   Form Page Styles
   ========================================================================== */

.simulator-form .form-section {
  background: var(--spectrum-global-color-gray-75);
  border: 1px solid var(--spectrum-global-color-gray-200);
  border-radius: var(--spectrum-global-dimension-size-50);
  margin-bottom: var(--spectrum-global-dimension-size-300);
  padding: var(--spectrum-global-dimension-size-200);
}

/* Form Row Layout */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spectrum-global-dimension-size-200);
}

.form-row .spectrum-Form-item {
  flex: 1 1 180px;
  min-width: 150px;
}

/* Buff Summary Section */

.buff-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spectrum-global-dimension-size-150);
}

.buff-row {
  align-items: center;
  background: var(--spectrum-global-color-gray-100);
  border-radius: var(--spectrum-global-dimension-size-50);
  display: flex;
  gap: var(--spectrum-global-dimension-size-150);
  padding: var(--spectrum-global-dimension-size-100);
}

.buff-label {
  color: var(--spectrum-global-color-gray-800);
  font-weight: var(--spectrum-global-font-weight-bold);
  min-width: 100px;
}

.buff-total {
  text-align: right;
  width: 100px;
}

.buff-total:-moz-read-only {
  background: var(--spectrum-global-color-gray-200);
}

.buff-total:read-only {
  background: var(--spectrum-global-color-gray-200);
}

/* ==========================================================================
   Modal/Dialog Styles
   ========================================================================== */

.modal-overlay {
  align-items: center;
  background: rgb(0 0 0 / 50%);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1000;
}

.modal-content {
  background: var(--spectrum-global-color-gray-50, #fff);
  border-radius: var(--spectrum-global-dimension-size-100);
  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-width: 700px;
  width: 95%;
}

.modal-header {
  align-items: center;
  background: var(--spectrum-global-color-gray-100, #f5f5f5);
  border-bottom: 1px solid var(--spectrum-global-color-gray-200);
  border-radius: var(--spectrum-global-dimension-size-100)
    var(--spectrum-global-dimension-size-100) 0 0;
  display: flex;
  justify-content: space-between;
  padding: var(--spectrum-global-dimension-size-200);
}

.modal-header h3 {
  margin: 0;
}

.modal-close {
  background: transparent;
  border: none;
  border-radius: var(--spectrum-global-dimension-size-50);
  color: var(--spectrum-global-color-gray-700);
  cursor: pointer;
  font-size: var(--spectrum-global-dimension-size-300);
  line-height: 1;
  padding: var(--spectrum-global-dimension-size-50);
}

.modal-close:hover {
  background: var(--spectrum-global-color-gray-200);
  color: var(--spectrum-global-color-gray-900);
}

.modal-body {
  background: var(--spectrum-global-color-gray-50, #fff);
  flex: 1;
  overflow-y: auto;
  padding: var(--spectrum-global-dimension-size-200);
}

.modal-footer {
  background: var(--spectrum-global-color-gray-100, #f5f5f5);
  border-radius: 0 0 var(--spectrum-global-dimension-size-100)
    var(--spectrum-global-dimension-size-100);
  border-top: 1px solid var(--spectrum-global-color-gray-200, #e0e0e0);
  display: flex;
  gap: var(--spectrum-global-dimension-size-100);
  justify-content: flex-end;
  padding: var(--spectrum-global-dimension-size-200);
}

/* ==========================================================================
   Buff Source Grid (in modal)
   ========================================================================== */

.buff-source {
  background: var(--spectrum-global-color-gray-50);
  border: 1px solid var(--spectrum-global-color-gray-300);
  border-radius: var(--spectrum-global-dimension-size-50);
  font-size: var(--spectrum-global-dimension-font-size-100);
  padding: var(--spectrum-global-dimension-size-100);
  width: 100%;
}

.buff-source:focus {
  border-color: var(--spectrum-global-color-blue-500);
  box-shadow: 0 0 0 1px var(--spectrum-global-color-blue-500);
  outline: none;
}

.buff-sources {
  display: grid;
  gap: var(--spectrum-global-dimension-size-200);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--spectrum-global-dimension-size-200);
}

.source-group {
  background: var(--spectrum-global-color-gray-100);
  border: 1px solid var(--spectrum-global-color-gray-200);
  border-radius: var(--spectrum-global-dimension-size-50);
  padding: var(--spectrum-global-dimension-size-150);
}

.source-group h4 {
  color: var(--spectrum-global-color-gray-700);
  font-size: var(--spectrum-global-dimension-font-size-100);
  font-weight: var(--spectrum-global-font-weight-medium);
  margin: 0 0 var(--spectrum-global-dimension-size-100) 0;
}

.source-group .help-text {
  color: var(--spectrum-global-color-gray-600);
  font-size: var(--spectrum-global-dimension-font-size-75);
  margin-top: var(--spectrum-global-dimension-size-50);
}

.source-group.is-unknown {
  background: var(--spectrum-global-color-gray-200);
  opacity: 0.6;
}

.source-group.is-unknown .buff-source {
  background: var(--spectrum-global-color-gray-200);
}

/* Unknown Checkbox for Source Groups */

.source-unknown {
  align-items: center;
  color: var(--spectrum-global-color-gray-600);
  display: flex;
  font-size: var(--spectrum-global-dimension-font-size-75);
  gap: var(--spectrum-global-dimension-size-75);
  margin-top: var(--spectrum-global-dimension-size-75);
}

.source-unknown input[type='checkbox'] {
  margin: 0;
}

/* Total Display */

.buff-total-display {
  background: var(--spectrum-global-color-gray-200);
  border-radius: var(--spectrum-global-dimension-size-50);
  padding: var(--spectrum-global-dimension-size-200);
  text-align: center;
}

.buff-total-display strong {
  font-size: var(--spectrum-global-dimension-font-size-200);
}

.buff-total-display .modal-total-value {
  color: var(--spectrum-global-color-blue-600);
  font-size: var(--spectrum-global-dimension-font-size-300);
  font-weight: var(--spectrum-global-font-weight-bold);
}

/* ==========================================================================
   Confidence Indicator
   ========================================================================== */

.confidence-indicator {
  border-radius: var(--spectrum-global-dimension-size-50);
  font-size: var(--spectrum-global-dimension-font-size-100);
  font-weight: var(--spectrum-global-font-weight-medium);
  margin-top: var(--spectrum-global-dimension-size-150);
  padding: var(--spectrum-global-dimension-size-100)
    var(--spectrum-global-dimension-size-150);
}

.confidence-very-low {
  background: var(--spectrum-global-color-red-100);
  border: 1px solid var(--spectrum-global-color-red-400);
  color: var(--spectrum-global-color-red-900);
}

.confidence-low {
  background: var(--spectrum-global-color-orange-100);
  border: 1px solid var(--spectrum-global-color-orange-400);
  color: var(--spectrum-global-color-orange-900);
}

.confidence-medium-low {
  background: var(--spectrum-global-color-yellow-100);
  border: 1px solid var(--spectrum-global-color-yellow-400);
  color: var(--spectrum-global-color-yellow-900);
}

.confidence-medium {
  background: var(--spectrum-global-color-blue-100);
  border: 1px solid var(--spectrum-global-color-blue-400);
  color: var(--spectrum-global-color-blue-900);
}

.confidence-high {
  background: var(--spectrum-global-color-seafoam-100);
  border: 1px solid var(--spectrum-global-color-seafoam-400);
  color: var(--spectrum-global-color-seafoam-900);
}

.confidence-complete {
  background: var(--spectrum-global-color-green-100);
  border: 1px solid var(--spectrum-global-color-green-400);
  color: var(--spectrum-global-color-green-900);
}

/* Unknown Badge (shown next to buff totals) */

.unknown-badge {
  background: var(--spectrum-global-color-orange-100);
  border-radius: var(--spectrum-global-dimension-size-50);
  color: var(--spectrum-global-color-orange-900);
  display: none;
  font-size: var(--spectrum-global-dimension-font-size-75);
  font-weight: var(--spectrum-global-font-weight-medium);
  padding: var(--spectrum-global-dimension-size-50)
    var(--spectrum-global-dimension-size-100);
}

/* ==========================================================================
   Results Page Styles
   ========================================================================== */

.result-section {
  background: var(--spectrum-global-color-gray-75);
  border: 1px solid var(--spectrum-global-color-gray-200);
  border-radius: var(--spectrum-global-dimension-size-50);
  margin-bottom: var(--spectrum-global-dimension-size-300);
  padding: var(--spectrum-global-dimension-size-200);
}

.result-section.highlight {
  background: var(--spectrum-global-color-blue-100);
  border: 2px solid var(--spectrum-global-color-blue-400);
}

.result-section.actions {
  background: transparent;
  border: none;
  display: flex;
  gap: var(--spectrum-global-dimension-size-150);
  justify-content: center;
}

.result-grid {
  display: grid;
  gap: var(--spectrum-global-dimension-size-150);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.result-grid.large {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.result-item {
  background: var(--spectrum-global-color-gray-50);
  border: 1px solid var(--spectrum-global-color-gray-200);
  border-radius: var(--spectrum-global-dimension-size-50);
  display: flex;
  flex-direction: column;
  padding: var(--spectrum-global-dimension-size-100);
}

.result-item.primary {
  background: var(--spectrum-global-color-green-100);
  border: 2px solid var(--spectrum-global-color-green-400);
}

.result-item .label {
  color: var(--spectrum-global-color-gray-700);
  font-size: var(--spectrum-global-dimension-font-size-75);
  margin-bottom: var(--spectrum-global-dimension-size-50);
}

.result-item .value {
  color: var(--spectrum-global-color-gray-900);
  font-size: var(--spectrum-global-dimension-font-size-200);
  font-weight: var(--spectrum-global-font-weight-bold);
}

/* Inline Alert for warnings */

.spectrum-InLineAlert {
  background: var(--spectrum-global-color-yellow-100);
  border-left: 4px solid var(--spectrum-global-color-yellow-600);
  border-radius: var(--spectrum-global-dimension-size-50);
  margin-bottom: var(--spectrum-global-dimension-size-250);
  padding: var(--spectrum-global-dimension-size-200);
}

.spectrum-InLineAlert-header {
  margin-bottom: var(--spectrum-global-dimension-size-100);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .result-section.actions {
    display: none;
  }

  .monster-simulator-results {
    padding: 0;
  }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (width <= 600px) {
  .buff-sources {
    grid-template-columns: 1fr;
  }

  .form-row {
    flex-direction: column;
  }

  .form-row .spectrum-Form-item {
    min-width: 100%;
  }

  .buff-row {
    flex-wrap: wrap;
  }

  .buff-label {
    min-width: 100%;
  }
}