:root{
  /* colors kept identical */
  --subtleProfileSemiBright: #eef3f8;
  --subtleProfileBright: #e5ecf4;
  --solidProfile: #97a0ab;
  --solidProfileDarker: #566272;
  --solidProfileDarkest: #14243c;
  --controlsBg: white;
  --headingsPrimary: DarkSlateGrey;
  --headingsSecondary: LightSteelBlue;
  --noteBg: lightyellow;
  --noteColor: maroon;
  --noteDiscreteColor: LightSteelBlue;
  --detailsBorderColor: LightSteelBlue;

  /* repeated borders / radii / paddings */
  --subtleBorder: solid 1px #e5ecf4; /* identical to original */
  --controlsPadding: .4rem;         /* identical */
  --controlsRadiusSmall: .2rem;     /* original .2rem */
  --controlsRadiusLarge: .6rem;     /* original .6rem */
  --detailsRadius: .6rem;
  --noteRadius: .8rem;

  /* gaps / page sizing (kept same) */
  --gap: .6rem;
  --page-min: 20rem;
  --page-pref: 90%;
  --page-max: 48rem;

  /* shadows (reused where identical) */
  --shadow-inset: .1rem .1rem .3rem rgba(0,0,0,.3); /* inset used on inputs originally */
  --shadow-panel: 0 .1rem .5rem rgba(0,0,0,.2);     /* header panel */
  --shadow-panel-inverse: 0 -.1rem .5rem rgba(0,0,0,.2); /* footer panel */
  --shadow-note: .2rem .2rem .3rem rgba(0,0,0,.3);
}

/* base */
html { font-size: 100%; }
body { padding: 0; background: var(--controlsBg); }


/* containers: keep widths/placement identical */
header, main, footer {
  width: clamp(var(--page-min), var(--page-pref), var(--page-max));
  margin: 0 auto;
  padding: 0;
  background: linear-gradient(to bottom, var(--subtleProfileBright), var(--subtleProfileSemiBright));
}

/* header & footer shared display preserved exactly */
header a, footer {
  display: flex;
  gap: var(--gap);
  justify-content: center;
  align-items: center;
}

/* header specifics (unchanged sizes/margins) */
header {
  margin-bottom: 1.4rem;
  padding: 1rem 0;
  box-shadow: var(--shadow-panel);
}
header h1 {
  margin: 0;
  font-size: 2.4rem;
  color: var(--solidProfileDarkest);
}

/* footer specifics preserved */
footer{
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  padding: .8rem;
  box-shadow: var(--shadow-panel-inverse);
}

/* main preserved */
main {
  background: var(--controlsBg);
  padding: 0 .8rem;
  border: var(--subtleBorder);
  border-top: none;
  border-bottom: none;
  margin-bottom: 12rem;
}

/* heading row and menu preserved */
main .heading-row {
  display:flex;
  align-items:center;
  gap: var(--gap);
  justify-content: space-between;
}
main .heading-row .mainMenu {
  max-width: 1.4rem;
  background: var(--controlsBg);
  border: none;
  transform-origin: 100% 50%;
  transform: scale(1.8);
}
main h1, main h2, main h3, main h4, main h5 {
  margin: 1rem 0;
  font-size: 1.3rem;
  color: var(--headingsPrimary);
}
main h2 {
  font-size: 1rem;
}
main h3 {
  font-size: .7rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
}
main h4 {
  font-size: .8rem;
}
main h5 {
  font-size: .7rem;
  letter-spacing: .1rem;
  padding-bottom: .3rem;
  border-bottom: solid 1px var(--subtleProfileBright);
}
main h5:before {
	content: "· ";
}

/* forms: keep exact margins/padding/placement */
form fieldset[disabled] { opacity: .2; pointer-events: none;}
form .centered {
  margin: .3rem 0 .8rem 0;
  padding: var(--controlsPadding);
  display: flex;
  justify-content: center;
  background: var(--subtleProfileBright);
}
form .fieldRow, form .buttonRow {
  margin: .9rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
form .fieldRow label {
  font-weight: bold;
  margin-right: .8rem; /* corrected from original 'margin: right' mistake */
}
form .fieldRow label:after { content: ":"; }
form .fieldRow label sup { color: red; }

/* inputs and selects: identical sizes/appearance as original */
form .fieldRow input, form .fieldRow select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-basis: 70%;
  padding: var(--controlsPadding);
  border: solid 1px var(--solidProfile);
  border-radius: var(--controlsRadiusSmall);
  box-shadow: inset var(--shadow-inset);
  background: var(--controlsBg);
}

/* select overrides preserved (keeps original font-size/line-height/padding) */
form .fieldRow select {
  border-radius: var(--controlsRadiusLarge);
  padding: 8px 12px;
  font-size: 16px;
  line-height: 3rem;
  background-color: var(--controlsBg);
  box-shadow: var(--shadow-inset);
}

/* button row: preserved */
form .buttonRow {
  margin-top: .2rem;
  border-top: var(--subtleBorder);
  padding-top: .6rem;
  gap: calc(.4rem + var(--gap));
  justify-content: flex-end;
}
form .buttonRow a {
	background: var(--subtleProfileBright);
	font-size: 1rem;
  	padding: .6rem 1.2rem .7rem 1.2rem;
  	border-radius: var(--controlsRadiusLarge);
}
form .buttonRow .buttons {
  display: flex;
  gap: var(--gap);
  justify-content: stretch;
}
form .buttonRow .buttons input, form .buttonRow .buttons select {
  background: var(--solidProfileDarker);
  color: white;
  padding: .4rem;
  border: none;
  border-radius: .6rem; /* kept as original */
  min-width: 6rem;
  box-shadow: var(--shadow-inset);
}

/* checkbox area preserved exactly */
.checkboxArea dt {
  cursor: pointer;
  float: left;
  margin-right: .8rem;
}
.checkboxArea dd {
  margin-left: 1.8rem;
  margin-bottom: .3rem;
}
.checkboxArea dt + dd { font-size: larger; }
.checkboxArea dd:first-of-type {
  padding-bottom: .4rem;
  border-bottom: var(--subtleBorder);
  margin-bottom: 1.2rem;
}
.checkboxArea dd:last-of-type { margin-bottom: .6rem; }
.checkboxArea dd label { font-size: smaller; }
.checkboxArea input[type=checkbox] {
  cursor: pointer;
  transform: scale(1.3);
}

/* Accounts-liste */

#accountsForm .toggleInfo {
	animation: enterFromRight 300ms ease-in forwards;
}
#accountsForm .hide {
	display: none;
}
.symbolSelf {
	color: #3cc4b2;
	margin-left: -.2rem;
}

#accountsForm dl {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 2rem auto 1fr 2fr; /* Column sizing */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

#accountsForm dt {
    grid-column: 1; /* Place checkbox in first column */
    padding: .4rem 0;
    border-top: none;
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertically centers label and select */
}
#accountsForm dt:first-child, #accountsForm dt:first-child + dd {
	border: none;
}


#accountsForm dd {
    margin: 0; /* Remove default margin */
    padding: .4rem 0;
    gap: var(--gap);
    border-top: solid 1px var(--subtleProfileSemiBright);
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertically centers label and select */
    animation: enterFromLeft 200ms ease-in forwards;
}
#accountsForm dt:first-child + dd {
	grid-column: span 3;
	justify-content: space-between;
}

#accountsForm dd.label {
    grid-column: 2 / -1; /* Make label take up the rest of the width */
}
#accountsForm dd .attr {
	font-size: smaller;
	color: var(--solidProfileDarker);
}
.Admin, .Editor, .Submitter, .Removed {
	letter-spacing: .1rem;
	padding: .3rem .6rem .4rem .6rem;
	border-radius: .2rem;
}
.Admin {
	background-color: LightPink;
}
.Editor {
	background-color: #ffff70;
}
.Submitter {
	background-color: PaleGreen;
}
.Removed {
	background-color: WhiteSmoke;
}


#accountsForm .itemCheckbox + a, .itemCheckbox + a + .role, .itemCheckbox + a + .role + .nick {
    grid-column: span 3; /* Ensure all elements span across columns */
}

@media (max-width: 768px) {

  header, footer {
    width: 100%;
  }
  label, input, select { font-size: 18px; }

  header h1 { font-size: 18px; }
  header, main, footer { border: none; padding: 1rem 0; }

  legend {text-align: center;}
  label, input { font-size: 16px; }
  form .fieldRow, form .buttonRow  {
    align-items: flex-start;
    flex-direction: column;
  }
  form .fieldRow input, form .fieldRow select { width: 100%; }
  
  form .buttonRow div {
  	display: flex;
  	align-items: stretch; 
  	width: 100%;
  }
  form .buttonRow div a {
  	flex: 1;
  	text-align: center;
    font-size: larger;
    font-weight: bold;
  }
  form .buttonRow select, form .buttonRow input { width: 100%; font-size: x-large; }
}

@media (max-width: 600px) {

	.hideOnSmall {display: none;}

	.symbolSelf {
		font-size: 2rem;
		margin-left: 0;
	}

    /* base — mobile / vertical */
	#accountsForm dl {
		display: grid;
		gap: var(--gap);
		grid-template-columns: 2rem 1fr; /* single column stacked */
		margin: 0;
		padding: 0;
	}
	#accountsForm dt,
	#accountsForm dd {
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		border-top: none;
		gap: var(--gap);
	}
	/* make dt label visually distinct */
	#accountsForm dt {		
		border-top: none;
	}
	#pendingsForm dt input[type=checkbox],
	#accountsForm dt input[type=checkbox]{
		transform-origin: 25% center;
		transform: scale(2.2);
		margin: .5rem .3rem;
	}
	/* place dd content under its dt */
	#pendingsForm dd,
	#accountsForm dd {
		font-size: 1.4rem;
		padding-left: .25rem;
	}
	/* if you want the first dd to span visually */
	#accountsForm dt:first-child + dd {
		padding: 1rem 0;
		border-bottom: solid 2px var(--solidProfileDarker);
		margin-bottom: 1rem;
	}

	/* ensure dt sits in column 1 */
	#accountsForm dt {
		grid-column: 1; align-items: center; border-top: none;
	}
	/* default dd occupies columns 2–4 */
	#accountsForm dd {
		grid-column: 2 / -1; border-top: none;
	}
	/* label dd explicitly in column 2 */
	#accountsForm dd.label {
		grid-column: 2 / 3;
	}
	/* selectors for contiguous sequences — prefer classes on elements for clarity */
	#accountsForm .itemCheckbox + a,
	#accountsForm .itemCheckbox + a + .role,
	#accountsForm .itemCheckbox + a + .role + .nick {
		grid-column: 2 / -1;
	}
	/* first-row special case spans columns 2–4 */
	#accountsForm dt:first-child + dd {
		grid-column: 2 / -1;
	}

}



/* Animations */

.shrinkAway {
  transform-origin: 0% 0%;
  animation: shrinkAway 600ms cubic-bezier(.4,.0,.6,1) forwards;
}
@keyframes shrinkAway {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  99% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    display: none;
  }
}

.sendDown {
	animation: sendDown 600ms ease-in forwards;
}
@keyframes sendDown {
  0% {
    transform: translate(0, 0,);
    opacity: 1;
  }
  99% {
    transform: translate(0, 22rem);
    opacity: 0;
  }
  100% {
    display: none;
  }
}

@keyframes enterFromRight {
  0% {
  	transform-origin: 100% 0%;
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes enterFromLeft {
  0% {
  	transform-origin: 0% 0%;
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* notes & details preserved */
.info{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; /* size of the dot */
  height: 1.5rem;
  background: var(--solidProfileDarker); /* dark dot color */
  color: #fff; /* 'i' color */
  font-weight: 900;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem; /* adjust so 'i' fits well */
  border-radius: 50%; /* guarantees a perfect circle */
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  vertical-align: middle;
  user-select: none;
}
.note {
  background: var(--noteBg);
  padding: 1.2rem;
  border-radius: var(--noteRadius);
  box-shadow: var(--shadow-note);
  color: var(--noteColor);
  margin: 1.2rem 0;
  max-width: 32rem;
}
.note h2 {
  color: var(--headingsPrimary);
  font-size: 2rem;
  margin-top: 0;
}
.discrete em {
	font-size: .8rem;
	color: var(--noteDiscreteColor);
}
details {
  margin: 1.2rem -.05rem;
  border: solid 3px var(--detailsBorderColor);
  padding: .8rem;
  border-radius: var(--detailsRadius);
}
details summary {
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--headingsPrimary);
}
details summary em {
  float: right;
  font-size: smaller;
  font-style: normal;
  font-weight: 400;
  color: var(--headingsSecondary);
}
details[open] summary { margin-bottom: 1.6rem; }

/* Toggle summary link */
details summary em a { display: none;}
details[open] summary em a {
	display: inline;
	animation: enterFromRight 300ms ease-in forwards;
}