body {
	padding : 0 1rem 2rem 1rem ;
	background-image: url(/web/images/d2-selection.jpg);
	background-size: 100% auto;
	background-attachment : fixed ;
}

fieldset  { margin-top : 1rem ; } 

article {
    border-radius: 10px;
}

[data-theme] button, [role="button"], input[type="submit"] {
  font-weight: 700;
}

#toggle-debug { display : none ; }

/* ----- override Pico colors ----- */

[data-theme="dark"] {
	/* Base background & card surfaces */
	--pico-background-color: #0d1117;
	--pico-card-background-color: #161b22;
	--pico-card-sectioning-background-color: #1c2128;
	--pico-border-color: #30363d;

	/* Crisp text - no more dusty gray-on-gray */
	--pico-color: #e6edf3;
	--pico-h1-color: #ffffff;
	--pico-h2-color: #ffffff;
	--pico-h3-color: #ffffff;
	--pico-muted-color: #ccc;

	/* Primary Accent (Vibrant Cyan/Blue) */
	--pico-primary: #2f81f7;
	--pico-primary-hover: #58a6ff;
	--pico-primary-focus: rgba(56, 139, 253, 0.25);
	--pico-primary-inverse: #ffffff;

	/* High-contrast status colors (Neon Emerald / Electric Red) */
	--pico-ins-color: #3fb950;
	--pico-del-color: #f85149;

	/* Code & Terminal log boxes */
	--pico-code-background-color: #010409;
	--pico-code-color: #58a6ff;
}

/* ----- custom component overrides ----- */

#resultsbox { 
	XXXdisplay: none; 
}

.status-ok { 
	color: var(--pico-ins-color); 
	font-weight: bold; 
	text-shadow: 0 0 8px rgba(63, 185, 80, 0.3);
}

.status-error { 
	color: var(--pico-del-color); 
	font-weight: bold; 
	text-shadow: 0 0 8px rgba(248, 81, 73, 0.3);
}

.dropzone { 
	border: 2px dashed var(--pico-border-color); 
	border-radius: var(--pico-border-radius); 
	padding: 1.5rem; 
	text-align: center;
	background: var(--pico-card-background-color);
	transition: border-color 0.2s, background 0.2s;
	margin-bottom : 1rem ;
}

.dropzone-active { 
	border-color: var(--pico-primary); 
	background: rgba(47, 129, 247, 0.08); 
}

.dropzone-hint { 
	margin: 0.5rem 0 0; 
	color: var(--pico-muted-color); 
}

/* set 60-40 column split */
@media (min-width: 768px) {
	.grid.upload {
		grid-template-columns: 1fr 1.5fr;
	}
}

/* ----- tool tips ----- */

/*
[data-tooltip]:not(button):after {
    XXXcontent: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" height="2em" width="2em" fill="%23ddd"><path d="M511.83-256.83Q524-269 524-286.67q0-17.66-12.17-29.83-12.16-12.17-29.83-12.17-17.67 0-29.83 12.17Q440-304.33 440-286.67q0 17.67 12.17 29.84 12.16 12.16 29.83 12.16 17.67 0 29.83-12.16Zm-65.16-136.5h64q0-28.34 6.83-49 6.83-20.67 41.17-50.34 29.33-26 43-50.5 13.66-24.5 13.66-55.5 0-54-36.66-85.33-36.67-31.33-93.34-31.33-51.66 0-88.5 26.33Q360-662.67 344-620l57.33 22q9-24.67 29.5-42t52.5-17.33q33.34 0 52.67 18.16 19.33 18.17 19.33 44.5 0 21.34-12.66 40.17-12.67 18.83-35.34 37.83-34.66 30.34-47.66 54-13 23.67-13 69.34ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Zm0-66.67q139.33 0 236.33-97.33t97-236q0-139.33-97-236.33t-236.33-97q-138.67 0-236 97-97.33 97-97.33 236.33 0 138.67 97.33 236 97.33 97.33 236 97.33ZM480-480Z"/></svg>');
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" height="2em" width="2em" fill="%23ddd"><path d="M513.5-254.5Q528-269 528-290t-14.5-35.5Q499-340 478-340t-35.5 14.5Q428-311 428-290t14.5 35.5Q457-240 478-240t35.5-14.5ZM442-394h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
    opacity: 1;
    position: revert;
    display: inline;
    border: 0;
    margin-left: 0.5em;
    font-size: 1em;
    --width: 1em doesnt matter svg ignores;
    --height: 1em doesnt matter svg ignores;
    vertical-align: middle;
}
*/

/* ----- FAQ ----- */

#page-faq summary {
	color : goldenrod;
}

/* 1. Bold the question title & increase cursor hit target */
summary {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.5rem 0;
  cursor: pointer;
}

/* 2. Add border dividers and spacing between accordion items */
article details {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--pico-border-color, rgba(255, 255, 255, 0.1));
}

article details:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 3. Indent answer content slightly and soften color for clear visual hierarchy */
details > *:not(summary) {
  margin-left: 1rem;
  opacity: 0.9;
}

.compare td:first-child {
	color : lightskyblue ;
}

.d2swag {
	color : lawngreen ;
    opacity: 0.85;
}

.betweenwalls {
	xxcolor : #f87171 ;
	color: mediumpurple;
}

/* ----- nav bar & footer ----- */

nav a[aria-current="page"] {
  color: goldenrod;
  opacity: 0.85;
  font-weight: bold;
}

.navbar  {
	xxxbackground : midnightblue ;
	background : #004 ;
	padding : 0 2rem ;
    border-radius: 1rem;
}

.navbar .title {
	font-weight: bold ;
}

.navbar .icon {
	height : 2em;
	margin-right: 0.5em ;
}

footer small {
    background: #111;
    padding: 0.5em 1em;
    border-radius: 10px;
}

/* ----- Results box header ----- */
#resultsbox header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
}

#resultsbox header h2,
#resultsbox header button {
  margin: 0;
  width: auto;
}